/*
 * Shell do sistema do empreendedor/consultor (empreendedor/index.php)
 * Responsividade, acessibilidade e modo escuro. Complementa o AdminLTE (carregado antes deste arquivo).
 * Regras que precisam vencer o AdminLTE usam body.shell (especificidade) e, quando necessario, !important.
 */

body.shell {
	--header-h: 57px;
	--shell-bg: #f4f6f9;
	--shell-surface: #ffffff;
	--shell-text: #212529;
	--shell-muted: #6c757d;
	--shell-border: #dee2e6;
	--shell-focus: #0d6efd;
	--shell-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	overflow: hidden;
	background: var(--shell-bg);
}

@media (prefers-color-scheme: dark) {
	body.shell:not(.light-mode) {
		--shell-bg: #1a1d21;
		--shell-surface: #2c3034;
		--shell-text: #e9ecef;
		--shell-muted: #adb5bd;
		--shell-border: #495057;
		--shell-focus: #6ea8fe;
		--shell-shadow: 0 8px 24px rgba(0, 0, 0, .5);
	}
}

body.shell.dark-mode {
	--shell-bg: #1a1d21;
	--shell-surface: #2c3034;
	--shell-text: #e9ecef;
	--shell-muted: #adb5bd;
	--shell-border: #495057;
	--shell-focus: #6ea8fe;
	--shell-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ---------- Acessibilidade ---------- */
.skip-link {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 2000;
	padding: 8px 14px;
	background: var(--shell-surface);
	color: var(--shell-text);
	border-radius: 6px;
	box-shadow: var(--shell-shadow);
	transition: top .15s ease;
}

.skip-link:focus {
	top: 8px;
	color: var(--shell-text);
}

:focus-visible {
	outline: 2px solid var(--shell-focus);
	outline-offset: 2px;
}

.main-header .nav-link:focus-visible,
.main-sidebar .nav-link:focus-visible {
	outline-offset: -2px;
}

/* ---------- Barra superior ---------- */
.main-header.navbar {
	min-height: var(--header-h);
	padding-left: .5rem;
	padding-right: .5rem;
	gap: .25rem;
	flex-wrap: nowrap;
}

.main-header .navbar-nav {
	flex-wrap: nowrap;
	align-items: center;
}

.main-header .nav-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-header .nav-link[role="button"] {
	cursor: pointer;
}

.main-header > .navbar-nav {
	flex: 0 0 auto;
}

/* lado esquerdo: menu + cliente (encolhe quando falta espaco) */
.main-header > .navbar-nav.shell-esq {
	flex: 1 1 auto;
	min-width: 0;
}

.shell-cliente {
	min-width: 0;
	flex: 1 1 auto;
}

.shell-cliente > .nav-link {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.shell-cliente-form {
	margin: 0;
}

.shell-cliente-form select {
	width: 100%;
	max-width: 32rem;
	text-overflow: ellipsis;
}

.shell-actions {
	margin-left: auto;
}

.shell-actions > li.shell-oculto {
	display: none !important;
}

.main-header .dropdown-menu {
	box-shadow: var(--shell-shadow);
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: var(--shell-surface);
	color: var(--shell-text);
	max-width: calc(100vw - 16px);
}

.main-header .dropdown-menu .dropdown-item {
	color: var(--shell-text);
	white-space: normal;
}

.main-header .dropdown-menu .dropdown-item:hover,
.main-header .dropdown-menu .dropdown-item:focus {
	background: rgba(13, 110, 253, .12);
}

.main-header .dropdown-menu .dropdown-divider {
	border-color: var(--shell-border);
}

.main-header .dropdown-header {
	font-weight: 600;
	color: var(--shell-muted);
}

.shell-more-menu {
	min-width: 16rem;
	max-height: calc(100dvh - var(--header-h) - 16px);
	overflow-y: auto;
}

.shell-more-menu .dropdown-item i {
	width: 1.5rem;
	text-align: center;
}

/* icones que nao cabem vao para a caixa "Mais" */
@media (min-width: 992px) {
	.shell-mais {
		display: none;
	}

	.shell-mais.shell-mais-visivel {
		display: block;
	}

	.shell-mais .mais-item {
		display: none;
	}

	.shell-mais .mais-item.mostrar {
		display: block;
	}
}

/* ---------- Seletor de tema ---------- */
.main-header .dropdown-menu .dropdown-item.js-tema {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	text-align: center;
}

.main-header .dropdown-menu .dropdown-item.js-tema i {
	width: auto;
	margin: 0;
}

.dropdown-item.js-tema.active {
	background: rgba(13, 110, 253, .18);
	color: var(--shell-text);
	font-weight: 600;
}

/* ---------- Menu lateral ---------- */
/* O AdminLTE (layout nao-fixo) faz body:not(.layout-fixed) .main-sidebar { height: inherit; position: absolute }
 * e (na versao minificada) .main-sidebar .sidebar { overflow-y: hidden }: o menu crescia e nunca rolava.
 * Aqui ele fica fixo, com a altura da area visivel, e so a lista rola. */
body.shell .main-sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	height: auto !important;
	min-height: 0 !important;
}

.main-sidebar .brand-link {
	flex: 0 0 auto;
}

body.shell .main-sidebar .sidebar {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	overflow-x: hidden;
	overflow-y: auto !important;
	padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.main-sidebar .user-panel {
	align-items: center;
}

.main-sidebar .user-panel .info {
	min-width: 0;
	overflow-wrap: anywhere;
}

.main-sidebar .nav-sidebar .nav-link {
	cursor: pointer;
}

/* O AdminLTE anima a margem do conteudo (0,3s) ao abrir/fechar o menu; como o iframe fica dentro do conteudo,
 * ele era redimensionado a cada quadro. A margem muda de uma vez e so o menu desliza. */
.content-wrapper,
.main-header,
.main-footer {
	transition: none !important;
}

.main-sidebar,
.main-sidebar::before {
	transition-duration: .18s !important;
}

.main-sidebar .nav-sidebar.nav-child-indent .nav-treeview,
.nav-sidebar .nav-item > .nav-link .right {
	transition-duration: .15s !important;
}

/* ---------- Conteudo (iframe) ---------- */
.content-wrapper {
	position: relative;
	min-height: calc(100vh - var(--header-h)) !important;
	min-height: calc(100dvh - var(--header-h)) !important;
	background: var(--shell-bg);
}

#area {
	display: block;
	width: 100%;
	height: calc(100vh - var(--header-h));
	height: calc(100dvh - var(--header-h));
	border: 0;
	-webkit-overflow-scrolling: touch;
}

.shell-loader {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 20vh;
	background: var(--shell-bg);
	transition: opacity .2s ease, visibility .2s ease;
}

.shell-loader.oculto {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.shell-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid var(--shell-border);
	border-top-color: var(--shell-focus);
	border-radius: 50%;
	animation: shell-gira .8s linear infinite;
}

@keyframes shell-gira {
	to {
		transform: rotate(360deg);
	}
}

.modal-content {
	background: var(--shell-surface);
	color: var(--shell-text);
}

/* ---------- Tablet e celular ---------- */
@media (max-width: 991.98px) {
	.main-header .nav-link {
		min-width: 44px;
		min-height: 44px;
		padding-left: .5rem;
		padding-right: .5rem;
	}

	.main-header .dropdown-menu-lg {
		min-width: 18rem;
	}
}

/* menus suspensos no celular: folha sob o topo, sempre visivel */
@media (max-width: 767.98px) {
	.main-header .dropdown-menu {
		position: fixed !important;
		top: var(--header-h) !important;
		left: 8px !important;
		right: 8px !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		max-height: calc(100vh - var(--header-h) - 16px);
		max-height: calc(100dvh - var(--header-h) - 16px);
		margin: 0 !important;
		overflow-y: auto;
		transform: none !important;
	}

	.main-header .dropdown-menu .dropdown-item {
		padding-top: .65rem;
		padding-bottom: .65rem;
	}
}

/* ---------- Preferencias do usuario ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}