:root{
  --navy-900:#0F2A3D; --steel-700:#1B4965; --amber-500:#E3A72E;
  --success-600:#2E7D5B; --danger-600:#C0392B; --info-500:#3D7FA6;
  --orange-500:#D9752E; --bg-canvas:#F5F7FA; --surface:#FFFFFF;
  --text-900:#1A2530; --text-500:#5C6B73;
}
body{ background:var(--bg-canvas); font-family:'Inter',sans-serif; color:var(--text-900); }
.font-display{ font-family:'Barlow Condensed',sans-serif; font-weight:700; }
.font-mono{ font-family:'JetBrains Mono',monospace; }

/* Sidebar */
#sidebar{ width:230px; min-height:100vh; background:var(--navy-900); position:fixed; top:0; left:0; z-index:1030; transition:transform .25s; }
#sidebar .brand{ padding:1.1rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); }
#sidebar .brand span{ color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.15rem; }
#sidebar .nav-link{ color:#B9C7D1; font-size:.88rem; padding:.6rem 1.1rem; border-left:3px solid transparent; }
#sidebar .nav-link i{ width:20px; }
#sidebar .nav-link.active, #sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; border-left-color:var(--amber-500); }
main{ margin-left:230px; }
@media (max-width:991.98px){
  #sidebar{ transform:translateX(-100%); }
  #sidebar.show{ transform:translateX(0); }
  main{ margin-left:0; }
}

#topbar{ background:var(--surface); border-bottom:1px solid #E4E9ED; padding:.65rem 1rem; position:sticky; top:0; z-index:1020; }

.kpi-card{ background:var(--surface); border:1px solid #E4E9ED; border-radius:12px; padding:.9rem 1rem; height:100%; }
.kpi-card .label{ font-size:.72rem; color:var(--text-500); text-transform:uppercase; letter-spacing:.5px; }
.kpi-card .value{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.6rem; color:var(--navy-900); }
.kpi-accent{ border-left:4px solid var(--steel-700); }
.kpi-accent.warn{ border-left-color:var(--amber-500); }
.kpi-accent.danger{ border-left-color:var(--danger-600); }
.kpi-accent.success{ border-left-color:var(--success-600); }

.card-panel{ background:var(--surface); border:1px solid #E4E9ED; border-radius:12px; padding:1rem; }
.card-panel h6{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1rem; color:var(--navy-900); margin-bottom:.75rem; }

.badge-status{ font-size:.68rem; font-weight:600; padding:.32rem .55rem; border-radius:6px; }
.badge-active{ background:#E3F3EC; color:var(--success-600); }
.badge-overdue{ background:#FAE3E0; color:var(--danger-600); }
.badge-maint{ background:#FCF0D9; color:#9C6F0F; }

/* Fleet Visualization - status color coding */
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-active{ background:var(--success-600); }
.dot-maint{ background:var(--amber-500); }
.dot-overdue{ background:var(--danger-600); }
.dot-paid{ background:var(--info-500); }
.dot-noinvoice{ background:var(--orange-500); }
.dot-inactive{ background:#B9C7D1; }
.fleet-chip{ display:inline-flex; align-items:center; gap:.4rem; font-family:'JetBrains Mono',monospace; font-size:.75rem; background:#F0F3F6; border:1px solid #E4E9ED; border-radius:20px; padding:.35rem .7rem; cursor:pointer; transition:transform .1s; }
.fleet-chip:hover{ transform:translateY(-1px); box-shadow:0 2px 6px rgba(15,42,61,.12); }

/* Auth page */
.auth-body{ background:var(--navy-900); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.auth-wrapper{ width:100%; max-width:380px; padding:1rem; }
.auth-card{ background:var(--surface); border-radius:14px; padding:2rem; }
.auth-card h4{ font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--navy-900); }