:root {
	--navy: #001D48;
	--navy2: #142C50;
	--navy3: #1B3A6B;
	--green-dark: #16857B;
	--green-light: #06D89C;
	
	/* Superfícies */
	--bg: radial-gradient(circle at 15% 0%, #E6F1F5 0%, #F1F5F9 45%, #ECF3F6 100%);
	--surface: linear-gradient(155deg, #FFFFFF 0%, #E8F2F1 60%, #FFFFFF 100%);
	--surface2: linear-gradient(155deg, #FFFFFF 0%, #E8F2F1 60%, #FFFFFF 100%);
	--surface3: linear-gradient(155deg, #DCEAE8 0%, #DCEAE8 100%);
	--border: rgba(180, 210, 210, 0.6);

	--shadow: rgba(11, 30, 58, 0.1);
	--logo-shadow: rgba(6, 216, 157, 0.3);

	/* Texto */
	--text: #001D48;
	--text2: #3E5C6B;
	--text3: #84A0AB;
	--sb-text-hover: #e1e1e1;

	/* Semântica */
	--err-t: #dc2c0d;
	--ok-t: #218513;
	--stable-t: #a18f00;

	/* Dashboard */
	--card-bg: linear-gradient(155deg, #FFFFFF 0%, #E8F2F1 60%, #FFFFFF 100%);
	--metric-bg: #CFE6E3;
	
	--table-header: linear-gradient(155deg, #DCEAE8 0%, #DCEAE8 100%);
	--table-bg: linear-gradient(155deg, #FFFFFF 0%, #E8F2F1 60%, #FFFFFF 100%);
	--th-hover: rgba(172, 223, 214, 0.7);
	--td-hover: rgba(208, 230, 228, 0.7);
	
	--popover-header: linear-gradient(155deg, #DCEAE8 0%, #DCEAE8 100%);
	--popover-body: linear-gradient(155deg, #FFFFFF 0%, #E8F2F1 60%, #FFFFFF 100%);
	--popover-close-btn: #708683;
	--popover-close-btn-hover: #3b4b48;
	
	/* Exportações */
	--btn-primary:  linear-gradient(155deg, #DCEAE8 0%, #DCEAE8 100%);
	--btn-primary-hover:  rgba(172, 223, 214, 0.7);

	--dt-header-btn: rgba(172, 223, 214, 0.7);
	--dt-header-btn-hover: rgba(172, 223, 214);
	--dt-bg: linear-gradient(155deg, #DCEAE8 0%, #DCEAE8 100%);
	--dt-days-bg: rgba(172, 223, 214);
	--dt-dropdown-bg: #DCEAE8;
	--dt-active-bg: rgb(0, 29, 72);
	--dt-today-border: rgba(0, 29, 72, 0.4);
	
	/* Sidebar */
	--sb-bg: #001D48;
	--sb-t: rgba(255, 255, 255, 0.60);
	--sb-active-bg: rgba(6, 216, 157, 0.2);
	--sb-active-t: #06D89C;
	--sb-border: rgba(255, 255, 255, 0.07);
	
	/* Topbar */
	--topbar-bg: #FFFFFF;
	--topbar-border: #D2E2E2;
}

[data-theme="dark"] {
	--bg: radial-gradient(circle at 15% 0%, #16202C 0%, #101820 45%, #0A0F14 100%);
	--surface: linear-gradient(155deg, #14304A 0%, #001D48 60%, #081428 100%);
	--surface2: linear-gradient(155deg, #1B3F60 0%, #0E2440 100%);
	--surface3: linear-gradient(155deg, #1C2228 0%, #161B20 60%, #0F1318 100%);
	--border: rgba(255, 255, 255, 0.08);
	
	--shadow: rgba(3, 38, 91, 0.3);
	
	--text: #E7EDEC;
	--text2: #9DABB0;
	--text3: #66767B;
	
	/* Dashboard */
	--card-bg: linear-gradient(155deg, #232A2F 0%, #262F32 60%, #181E22 100%);
	--metric-bg: #1B3A55;
	
	--table-bg: linear-gradient(155deg, #232A2F 0%, #181E22 100%);
	--table-header: linear-gradient(155deg, #1B3F60 0%, #0B1E3A 100%);
	--th-hover: #0B1E3A;
	--td-hover: #161B20;
	
	--popover-header: linear-gradient(155deg, #1B3F60 0%, #0B1E3A 100%);
	--popover-body: linear-gradient(155deg, #232A2F 0%, #181E22 100%);
	--popover-close-btn: #415571;
	--popover-close-btn-hover: #97aac7;
	
	/* Exportações */
	--btn-primary: linear-gradient(155deg, #0e3961 0%, #0B1E3A 100%);
	--btn-primary-hover: linear-gradient(155deg, #0e2a55 0%, #021636 100%);
	
	--dt-header-btn: #0B1E3A;
	--dt-header-btn-hover: rgba(0, 34, 85, 0.8);
	--dt-bg: linear-gradient(155deg, #0c2e4f 0%, #0B1E3A 100%);
	--dt-days-bg: #0B1E3A;
	--dt-dropdown-bg: #0B1E3A;
	--dt-active-bg: rgba(6, 216, 157, 0.5);
	--dt-today-border: rgba(6, 216, 157, 0.2);
	
	--topbar-bg: #11151B;
	--topbar-border: #262C33;
}

/* ── RESET & BASE ──────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	background: var(--bg);
	background-attachment: fixed;
	color: var(--text);
	display: flex;
	height: 100vh;
	overflow: hidden;
	transition: background .25s, color .25s;
}

.hidden {
    display: none !important;
}

/* ── SIDEBAR ───────────────────────────────────── */
.sidebar {
	width: 220px;
	flex-shrink: 0;
	background: var(--sb-bg);
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--sb-border);
	transition: .5s ease;
}

.sidebar-logo {
	padding: 0.6rem;
	border-bottom: 1px solid var(--sb-border);
	display: flex;
	align-items: center;
	gap: 6px;
	filter: drop-shadow(0 0 7px var(--logo-shadow));
}

.sidebar-logo-svg {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
	filter: drop-shadow(0 0 6px var(--logo-shadow));
}

.logo-info {
	display: flex;
	flex-direction: column;
}

.logo-text {
	font-size: 22px;
	font-weight: 700;
	background: linear-gradient(90deg, var(--green-light), var(--green-dark));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	text-transform: capitalize;
}

.logo-sub {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.3);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-top: 4px;
}

.nav {
	flex: 1;
	padding: 12px 0;
	overflow-y: auto;
}

.nav-group {
	margin-bottom: 6px;
}

.nav-label {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.22);
	padding: 10px 20px 4px;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 20px;
	cursor: pointer;
	color: var(--sb-t);
	font-size: 13px;
	border-left: 2px solid transparent;
	transition: all .2s ease, padding-left .2s ease;
	text-decoration: none;
}

.nav-item:hover {
	color: var(--sb-text-hover);
	background: rgba(255, 255, 255, 0.05);
	text-decoration: none;
	padding-left: 24px;
}

.nav-item.active {
	color: var(--sb-active-t);
	background: linear-gradient(90deg, var(--sb-active-bg), var(--sb-bg));
	border-left-color: var(--green-light);
}

.sidebar-footer {
	padding: 14px 20px;
	border-top: 1px solid var(--sb-border);
}

.user-chip {
	display: flex;
	align-items: center;
	gap: 10px;
}

.avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}

.user-name {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
}

.user-role {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.3);
}

.theme-toggle {
	margin-left: auto;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	transition: background .15s;
}

.theme-toggle:hover {
	background: rgba(255, 255, 255, 0.15);
}

main {
    flex: 1;
    min-width: 0;
    overflow: auto;

	display: flex;
    flex-direction: column;
}

/* ── CABEÇALHO DA PÁGINA ──────────────────────────────── */
.topbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 60px;
    padding: 0.6rem;
	
	border-bottom: 1px solid var(--topbar-border);
    background: var(--topbar-bg);
}

.page-title {
    margin: 0;
    font-size: clamp(1.4rem, 1.8vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.page-subtitle {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--text2);
}

#loading-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
}

.loading-content {
	display: flex;
    align-items: center;
    width: 55px;
    height: 55px;
    border: 4px solid rgba(255, 255, 255, .15);
    border-top: 4px solid #01d89c;
    border-radius: 50%;
	margin-bottom: 1.5vh;
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}