/* @charset "UTF-8"; */

/* 
Onde usar cada tamanho (guia rápido)
🔹 Aside
Menu principal: 14px
Submenu: 13px
Labels auxiliares: 12px
🔹 Header
Breadcrumb / título: 16–18px
Dropdowns: 14px
🔹 Cards
Título: 14–16px
Número grande: 22–28px
Descrição: 12px
🔹 Tabelas
Header: 12–13px
Body: 13–14px
*/

/* 
Índice
1. Variáveis CSS
2. Tags nativas
3. Backgrounds
4. Textos
5. Botões
6. Inputs
7. Dropdowns
8. Bordas
9. Global
10. Fontes
11. Paginação
12. Alertas
13. Tabelas
14. Badges
15. Formulário/Forms
16. Filtro de buscas avançado
17. Accordion
18. Toast
19. Gallery
20. Avulsos
*/

:root {
	/* Font sizes */
	--fs-h1: 24px;
	--fs-h2: 20px;
	--fs-h3: 18px;
	--fs-h4: 16px;
	--fs-h5: 14px;
	--fs-h6: 12px;
	--fs-body: 14px;
	--fs-small: 12px;
	--fs-micro: 11px;

	/* Line heights */
	--lh-tight: 1.2;
	--lh-normal: 1.5;
}

/* === Tags nativas === */
html {
    scrollbar-gutter: stable;
}

/* === Backgrounds === */
.bg-secondary {
	background-color: var(--bg-secondary)!important;
}
/* === Textos === */
/* === Botões === */
/* === Inputs === */
input {
	background-color: var(--bg-primary) !important;
	border: 1px solid var(--border-primary) !important;
	color: var(--text-primary) !important;
}

input:focus { 
	box-shadow: none!important;
	outline: 1px solid var(--border-primary) !important;

}

/* === Dropdowns === */
select {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
	border: 1px solid var(--border-primary) !important;
}

select:focus {
    box-shadow: none!important;
	outline: 1px solid var(--border-primary) !important;
}

option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
	border: 1px solid var(--border-primary) !important;
}

option:focus {
	box-shadow: none!important;
	outline: 1px solid var(--border-primary) !important;
}

/* === Bordas === */
.border-default {
	border: 1px solid var(--border-primary)!important;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Nunito Sans', sans-serif;
}

body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	min-height: 90vh!important;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

small {
	font-size: var(--fs-small);
}

.small {
	font-size: var(--fs-small) !important;
}

.micro {
	font-size: var(--fs-micro);
}

button {
	box-shadow: none!important;
}

/* .btn-sm {
	font-size: var(--fs-small)!important;
}

.form-control {
	font-size: var(--fs-body)!important;
} */

@media (min-width: 768px) {
	.container {
		max-width: 95%!important;
	}
}

@media (min-width: 2000px) {
	.container {
		max-width: 1900px!important;
	}
}

.text-default {
	color: var(--text-primary)!important;
}

/* FONTES */
.neo-regular {
	font-style: normal;
}

.neo-bold {
	font-style: normal;
	font-weight: 700;
}

a:focus, button:focus {
	outline: none !important;
	box-shadow: none!important;
}

button::-moz-focus-inner {
	border: 0;
}

input, button, select, textarea, *:focus {
	outline: none!important;
}

a, a:hover {
	color: var(--text-primary);
	text-decoration: none!important;
}

.dropdown-menu {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	font-size: var(--fs-body);
	border: 1px solid var(--border-primary);
	border-radius: .25rem;
	padding: 6px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	min-width: 200px;
}

.dropdown-item {
	color: var(--text-primary)!important;
	padding: 8px 16px;
	font-size: var(--fs-body);
	border-radius: 0;
	transition: background-color 0.15s ease;
}

.dropdown-item:active {
	background-color: var(--hover-primary)!important;
}

.dropdown-item:hover {
	background-color: var(--hover-primary)!important;
}

.dropdown-item:focus {
	background-color: var(--hover-primary)!important;
}

/* Links dentro de dropdown-menu seguem mesmo estilo */
.dropdown-menu a {
	display: block;
	color: var(--text-primary);
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 0;
	transition: background-color 0.15s ease;
}

.dropdown-menu a:hover {
	background-color: var(--hover-primary);
	color: var(--text-primary);
}

.dropdown-menu li a {
	display: block;
	padding: 8px 16px;
}

/* Separadores nos dropdowns */
.dropdown-menu hr {
	margin: 6px 0;
	border-color: var(--border-primary);
	opacity: 1;
}

/* Botões dentro de dropdowns */
.dropdown-menu button {
	padding: 8px 16px;
	transition: background-color 0.15s ease;
}

.dropdown-menu button:hover {
	background-color: var(--hover-primary);
}

/* Ícones nos dropdowns - tamanho padronizado */
.dropdown-menu i {
	width: 16px;
	font-size: 14px;
	text-align: center;
	display: inline-block;
}

.dropdown-menu .fas,
.dropdown-menu .far,
.dropdown-menu .fab,
.dropdown-menu .fal {
	width: 16px;
	font-size: 14px;
	text-align: center;
}



.team-icon {
    opacity: 0.6; 
    width: 15px; 
    height: 15px; 
    font-size: 8px;
    border-radius: 50%;
    color: var(--light-blue);
    text-align: center;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

/* GLOBAL */
/*input quantidade detail*/
icon-shape {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
}

.text-green {
	color: var(--green)!important;
}
.text-red {
	color: var(--red-cancel);
}
.text-info {
	color: var(--light-blue);
}
.text-warning {
	color: var(--yellow);
}

.font-800 {
	font-weight: 800;
}

/* BOTÕES */
/* 
.btn-primary {

} */


.btn:focus {
	box-shadow: none!important;
}

.btn-whatsapp {
	color: white;
	border-color: var(--green)!important;
	background-color: var(--green)!important;
}

.btn-whatsapp:hover  {
	box-shadow: 1px 1px 14px rgb(26 225 26 / 60%);
	transition: 0.3s;
	color: white!important;
}

.btn-cancel {
	color: #666;
	border-color: var(--gray)!important;
	background-color: var(--gray)!important;
}

.btn-outline-whatsapp {
	color: #25d366;
	border-color: #25d366!important;
}


.btn-outline-whatsapp:hover  {
	box-shadow: 1px 1px 14px rgb(26 225 26 / 60%);
	transition: 0.3s;
	color: #25d366;
}

.btn-outline-info:hover  {
	box-shadow: 1px 1px 14px rgba(13, 202, 240, 0.6)!important;
	transition: 0.3s;
	color: #ffffff!important;
}

.btn-primary {
	color: var(--white)!important;
	background-color: var(--button-primary)!important;
	border: none !important;
}

.btn-primary:hover  {
	color: var(--white)!important;
	box-shadow: 1px 1px 10px var(--button-primary)!important;
	transition: 0.2s;
}

.btn-secondary {
	color: var(--white)!important;
	background-color: var(--button-secondary)!important;
	border: none !important;
}

.btn-secondary:hover  {
	color: var(--white)!important;
	box-shadow: 1px 1px 10px var(--button-secondary)!important;
	transition: 0.2s;
}

.btn-tertiary {
	color: var(--white)!important;
	background-color: var(--button-tertiary)!important;
	border: none !important;
}

.btn-tertiary:hover  {
	color: var(--white)!important;
	box-shadow: 1px 1px 10px var(--button-tertiary)!important;
	transition: 0.2s;
}


/* Paginação $$$ */
.page-link {
	background-color: #f8f9fa!important;
	color: #888!important;
	border: None;
}

/* Help Text d-block $$$ */
#hint_id_on_off, #hint_id_activate, #hint_id_delete_signal_message, #hint_id_just_scheduled, #hint_id_show_on_off_message, #hint_id_test_mode, #hint_id_clear_results, #hint_id_on_off_scheduled_message, #hint_id_interrupt_on_amount, #hint_id_gales_signals, #hint_id_score_signals, #hint_id_gales_reply_to, #hint_id_only_one, #hint_id_retry_in_sequence, #hint_id_send_analyzing_message, #hint_id_delete_analyzing_message, #hint_id_delete_signal_message {
	display: block;
}

/* Alertas */



/* Tabelas */
table {
    color:var(--text-primary)!important;
    --bs-table-hover-color: var(--text-primary)!important;
    --bs-table-hover-bg: var(--hover-primary)!important;
}

th {
	background-color: var(--hover-primary)!important;
	color: var(--text-primary);
	border: none!important;
}
th:first-child {
	border-top-left-radius: .25rem!important;
	border-bottom-left-radius: .25rem!important;
	/* padding-left: 10px!important; */
}
th:last-child {
	border-top-right-radius: .25rem!important;
	border-bottom-right-radius: .25rem!important;
	/* padding-right: 10px!important; */
}
td {
	border-bottom-color: var(--border-primary)!important;
}

/* td:first-child {
	padding-left: 10px!important;
}
td:last-child {
	padding-right: 10px!important;
} */

/* Badges */
.badge-soft-success {
	color: #00864e;
	background-color: #ccf6e4;
	border-radius: 50px!important;
}

.badge-soft-info {
	color: #2C7BE5;
	background-color: #EDF2F9;
	border-radius: 50px!important;
}

.badge-soft-warning {
	color: #856404;
	background-color: #fff3cd;
	border-radius: 50px!important;
}

.badge-soft-danger {
	color: var(--red-one);
	background-color: #f8d7da;
	border-radius: 50px!important;
}

/* FORMULÁRIO/FORMS */
.roulletes-checkboxes div {
	overflow-y: auto;
	width: 45%;
}
@media (max-width: 768px) {
	.roulletes-checkboxes div {
		width: 100%;
	}
}
.identification {
	background-color: var(--hover-primary);
	color: var(--text-primary);
	border-radius: .375rem!important;
	padding-top: 7px!important;
	padding-bottom: 7px!important;
}
@media (max-width: 768px) {
	.show_dropdown {
		min-height: 300px;
	}
}

/* FILTRO DE BUSCAS AVANÇADO */
#filterPanel {
	position: fixed;
	top: 0;
	right: -300px;
	width: 300px;
	height: calc(100% - 48px);
	transition: right 0.25s ease, transform 0.3s ease;
	z-index: 3;
}
#filterPanel .scroll{
	overflow-y: auto;
	position: relative;
	height: calc(100% - 158px);
	top: 0;
}

#filterPanel.open {
	right: 0;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
	border-left: 1px solid var(--border-primary);
}
.loader {
	position: absolute;
	top: 20%;
	left: 45%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-block;
	border-top: 4px solid #FFF;
	border-right: 4px solid transparent;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}
.loader::after {
	content: '';  
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border-bottom: 4px solid #35f57d;
	border-left: 4px solid transparent;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Btn Filter */
#filterPanel .div-btn-filter {
	position: absolute;
	z-index: 999;
	bottom: 0;
	width: 100%;
	border-top: 1px solid var(--border-primary);
}

/* Accordion */
.accordion-item {
	border-bottom: 1px solid var(--border-primary);
	background-color: transparent;
	border-radius: 0;
}

.accordion-button {
	font-size: 14px;
	padding: 10px;
	background-color: transparent;
}

.accordion-button::after {
    filter: invert(37%) sepia(82%) saturate(748%) hue-rotate(200deg) brightness(95%) contrast(88%);
}

.accordion-button:not(.collapsed){
	color: inherit;
	background-color: transparent;
	box-shadow: unset;
}

.accordion-header {
	color: var(--text-primary);
}

.accordion-body {
	padding: 7px;
}


/* Toast */
.wrapper-toast {
    width: 420px;
    padding: 30px 20px;
    position: fixed;
    top: 50px;
    right: 0;
	z-index: -1;
	/* Para exibir um abaixo do outro */
	display: flex;
    flex-direction: column;
    gap: 5px;
	align-items: flex-end;
}
.toast {
    max-width: 380px;
    height: auto;
    padding: 15px;
    box-shadow: 0 5px 10px rgba(75, 50, 50, 0.05);
    border-radius: 7px;
	border: 1px solid rgba(0, 0, 0, .2);
	border: none;
    display: grid;
    grid-template-columns: 1.2fr 6fr 0.5fr;
    transform: translate(400px);
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
	opacity: 0;
}
.toast-active {
    opacity: 100%!important; 
    transform: translateX(0);
}
.border-toast-success {
	border-left: 6px solid var(--green);
}
.border-toast-erro {
	border-left: 6px solid var(--red-cancel);
}
.border-toast-info {
	border-left: 6px solid var(--light-blue);
}
.border-toast-warning {
	border-left: 6px solid var(--yellow);
}
.container-1,.container-2 {
    align-self: center;
}
.container-1 i {
    font-size: 30px;
}
.container-2 p:first-child {
    font-size: 16px;
	margin: 0;
}
.container-2 p:last-child {
    font-size: 12px;
    font-weight: 400;
	margin: 0;
}
.toast button {
    align-self: flex-start;
    background-color: transparent;
    font-size: 25px;
    line-height: 0;
    color: #656565;
    cursor: pointer;
	border: 0;
}

/* Gallery */
.gallery-controls {
    top: 5px; 
    right: 5px; 
    z-index: 2;
}
.gallery-photo-name {
	bottom: 0px; 
    left: 0px; 
    z-index: 1;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 0px 5px 0px 0px;
	font-size: 0.72rem!important;
}
.font-mini {
	font-size: 0.72rem!important;
}

/* PAGINAÇÃO */
.page-item.active .page-link {
	z-index: 0;
}

.pagination .active .page-link{
	background-color: #dfe2e7!important;
}

/* Avulsos */
.alert ul {
	list-style-type: none;
	padding: 0!important;
}

.btn-info {
	color: #fff!important;
}

.btn-invisible {
	background-color: transparent;
	color: #555555;
}

.zoom:hover {
	transition: transform .5s;
	transform: scale(1.02);
}

.min-text {
    font-size: 8px;
}



/* ------------ */
.text-muted {
    color: #a5a5a5!important;
}

.text-custom {
    color:var(--text-primary)!important;
}

.modal-content {
    background-color: var(--bg-secondary);
}

/* CK Editor background */
.ck-content {
    background: transparent !important; /* Remove fundo branco */
    color: inherit !important; /* Mantém a cor padrão do site */
}

.modal-body *:not(input):not(select):not(textarea) {
    color: inherit !important;
}

/* SCROLLBAR  */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(var(--dark-gray)/ 0.7);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(var(--dark-gray)/ 0.5);
}

/* === TIMELINE CAMPANHA === */

.timeline {
	width: 60%;
	max-width: 700px;
}
.timeline-content {
	font-size: .800em;
	line-height: 1.25;
}
/* section_how_works_1 */
.scroll-container {
	cursor: grab;
	user-select: none;
}

.scroll-container:active {
	cursor: grabbing;
}

.scroll-container img {
	user-drag: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	pointer-events: auto;
}



/* ===== ASIDE ===== */
.aside {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	background: var(--bg-secondary);
	color: var(--text-primary);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--border-primary);
}

/* Estados iniciais sem transição para evitar glitch */
html.aside-collapsed-init .aside {
	width: 72px;
	transition: none !important; /* Remove transição no estado inicial */
}

html.aside-expanded-init .aside {
	width: 260px;
	transition: none !important; /* Remove transição no estado inicial */
}

html.aside-collapsed-init .app-wrapper {
	margin-left: 72px;
	transition: none !important; /* Remove transição no estado inicial */
}

html.aside-expanded-init .app-wrapper {
	margin-left: 260px;
	transition: none !important; /* Remove transição no estado inicial */
}

html.aside-collapsed-init .app-header {
	left: 72px;
	transition: none !important; /* Remove transição no estado inicial */
}

html.aside-expanded-init .app-header {
	left: 260px;
	transition: none !important; /* Remove transição no estado inicial */
}

/* Ocultar textos e elementos no estado inicial recolhido */
html.aside-collapsed-init .aside-text,
html.aside-collapsed-init .aside-icon-arrow {
	display: none;
}

html.aside-collapsed-init .logo-full {
	display: none;
}

html.aside-collapsed-init .logo-mini {
	display: block;
}

html.aside-collapsed-init .aside-title {
	justify-content: center;
	padding: 12px 0;
}

html.aside-collapsed-init .aside-icon {
	margin: 0;
}

html.aside-collapsed-init .aside-icon i {
	font-size: 18px;
}

/* Desabilitar transições dos dropdowns no estado inicial */
html.aside-collapsed-init .aside-list,
html.aside-expanded-init .aside-list {
	transition: none !important;
}

/* Após o carregamento, ativa transições */
.aside.expanded,
.aside.collapsed {
	transition: width 0.25s ease, transform 0.3s ease;
}

.aside.expanded { 
	width: 260px;
}

.aside.collapsed {
	width: 72px;
}

/* Garantir precedência quando ambas as classes existirem */
.aside.expanded.collapsed {
	width: 72px;
}


/* ===== WRAPPER ===== */
.app-wrapper {
	margin-left: 260px;
	min-height: 100vh;
	transition: margin-left 0.25s ease;
	display: flex;
	flex-direction: column;
}

.aside.collapsed ~ .app-wrapper {
	margin-left: 72px;
}

.aside.expanded ~ .app-wrapper {
	margin-left: 260px;
}

/* Precedência quando ambas as classes existirem */
/* .aside.expanded.collapsed ~ .app-wrapper {
	margin-left: 72px;
} */

.aside-logo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	border-bottom: 1px solid var(--border-primary);
	flex-shrink: 0;
}

.logo-mini {
	display: none;
	font-weight: 900;
}

.aside.collapsed .logo-full {
	display: none;
}

.aside.collapsed .logo-mini {
	display: block;
}

.logo-full, .logo-mini {
	font-size: 20px;
}

/* Menu */
.aside-menu {
	display: flex;
	flex-direction: column;
	padding: 10px;
	overflow-y: auto;
	overflow-x: hidden;
}





/* Botões */
.btn-collapse, .btn-close {
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: 18px;
	cursor: pointer;
	/* padding: 3px; */
	width: 40px;
	height: 40px;
}


.aside-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 6px;
	padding: 8px 20px 8px 10px;
	font-size: 14px;
	font-weight: 600;
	border-radius: .25rem;
	/* text-transform: uppercase; */
	letter-spacing: .04em;
	cursor: pointer;
}

.aside.collapsed .aside-title {
	position: relative;
	justify-content: center;
	padding: 12px 0;
}

/* zona invisível entre ícone e flyout */
.aside.collapsed .aside-title::after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 16px; /* espaço de transição */
	height: 100%;
}

.aside-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 38px;
	border-radius: .25rem;
	color: var(--text-primary);
	text-decoration: none;
}


/* LINKS */
.aside-icon {
	width: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.aside-icon i {
	/* line-height: 1;
	display: block; */
	font-size: 14px;
	line-height: 1;
}


/* ===== ASIDE COLLAPSED ICON MODE ===== */

.aside.collapsed .aside-list, .aside.collapsed ul, .aside.collapsed .aside-text, .aside.collapsed .aside-icon-arrow {
	display: none;
}

.aside.collapsed .aside-list, .aside.collapsed ul {
	display: block;
}

.aside.collapsed .aside-icon {
	margin: 0;
}

.aside.collapsed .aside-icon i {
	font-size: 18px;
}

/* ===== TOOLTIPS ===== */

.aside.collapsed .aside-list {
	position: fixed; /* IMPORTANTE */
	left: 71px;
	top: var(--flyout-top, 0px);
	min-width: 220px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: .25rem;
	padding: 6px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px);
	/* transition: all .18s ease; */
	z-index: 2000;
}

.aside.collapsed .aside-title:hover + .aside-list {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}


.aside.collapsed .aside-list:hover {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.aside.collapsed .aside-list .aside-link {
	padding: 8px 16px;
	white-space: nowrap;
}




/* ===== ASIDE ACTIVE LINK ===== */
.aside-link.active {
	position: relative;
	background-color: var(--hover-secondary);
}

.aside-link.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10%;
	width: 2px;
	height: 80%;
	background-color: var(--green); /* cor do destaque */
	border-radius: 2px;
}

/* dropdown fechado */
.aside-list {
	display: none;
	margin-bottom: 1rem !important;
}

/* dropdown aberto */
.aside-list.open {
	display: block;
}

/* opcional: animação suave */
.aside-list {
	transition: opacity .30s ease;
}

.aside-list.open {
	opacity: 1;
}






/* ===== BACKDROP ===== */
.aside-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 900;
	display: none;
}



/* ===== HEADER ===== */
.app-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 260px;
	height: 60px;
	z-index: 900;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px; /* .75rem bootstrap container */
	transition: left 0.25s ease;
	/* overflow-y: hidden; */
}

/* Ícones no header - tamanho padronizado */
.app-header i {
	font-size: 16px;
}

.app-header .btn i {
	font-size: 16px;
}

/* Quando aside recolhido */
.aside.collapsed ~ .app-wrapper .app-header {
	left: 72px;
}


/* ===== CONTENT ===== */
.app-content {
	padding: 2px;
	padding-top: 60px;
	flex: 1;
}


.hover-primary:hover {
	background-color: var(--hover-primary)!important;
}


/* ===== MOBILE ===== */
@media (max-width: 992px) {
    .aside {
        transform: translateX(-100%);
        width: 260px;
    }

    .aside.open {
        transform: translateX(0);
    }

	.aside {
        margin-left: 0 !important;
    }

    .app-wrapper {
        margin-left: 0 !important;
    }

    .app-header {
        left: 0 !important;
    }

    .aside-backdrop.show {
        display: block;
    }
}


/* ===== HEADER NAVIGATION ===== */
.header-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Header Items (links e títulos de dropdown) */
.header-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: .25rem;
	color: var(--text-primary);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease;
	white-space: nowrap;
	position: relative;
}

.header-item:hover {
	background-color: var(--hover-primary);
	color: var(--text-primary);
}

/* Header Item Ativo - borda verde inferior menor */
.header-item.active,
.header-dropdown.active .header-item {
	background-color: var(--hover-primary);
}

.header-item.active::after,
.header-dropdown.active .header-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
	height: 2px;
	background-color: var(--green);
	border-radius: 2px 2px 0 0;
}

/* Ícones no header-item */
.header-item i {
	width: 13px;
	font-size: 13px;
	text-align: center;
}

/* Header Dropdown Container */
.header-dropdown {
	position: relative;
}

/* Header Dropdown Menu */
.header-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	min-width: 200px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: .25rem;
	padding: 6px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.2s ease;
	z-index: 1000;
}

/* Mostrar dropdown ao hover */
.header-dropdown:hover .header-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Links dentro do dropdown */
.header-dropdown-menu a {
	display: block;
	padding: 8px 16px;
	color: var(--text-primary);
	text-decoration: none;
	font-size: 14px;
	transition: background-color 0.15s ease;
	position: relative;
}

.header-dropdown-menu a:hover {
	background-color: var(--hover-primary);
	color: var(--text-primary);
}

/* Link ativo dentro do dropdown */
.header-dropdown-menu a.active {
	background-color: var(--hover-secondary);
}

.header-dropdown-menu a.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10%;
	width: 2px;
	height: 80%;
	background-color: var(--green);
	border-radius: 2px;
}

/* Botões de formulário dentro de dropdowns (logout) */
.dropdown-menu form button {
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 8px 16px;
	background: transparent;
	border: none;
	color: var(--text-primary);
	font-size: var(--fs-body);
	transition: background-color 0.15s ease;
	cursor: pointer;
}

.dropdown-menu form button:hover {
	background-color: var(--hover-primary);
	color: var(--text-primary);
}

/* Responsivo - esconder nav em telas pequenas */
@media (max-width: 992px) {
	.header-nav {
		display: none !important;
	}
}


/* Para deixar a aside visivel na versão desktop basta apagar esse trecho abaixo */
@media (min-width: 992px) {
    .aside {
        display: none !important;
    }
    .app-wrapper {
        margin-left: 0 !important;
    }
    .app-header {
        left: 0 !important;
        width: 100vw !important;
    }
	.btn-control-aside {
		display: none !important;
	}
}
@media (max-width: 992px) {
	.logo-desktop {
		display: none !important;
	}
}
/* Apagar a div .logo-desktop */
/* Para deixar a aside visivel na versão desktop basta apagar esse trecho acima */