:root{
  --brand:#0a6e7c;
  --brand-dark:#075460;
}
.app-navbar{ background:var(--brand); }
.app-navbar .navbar-brand{ letter-spacing:.2px; }

/* KPI cards */
.kpi{ border:1px solid var(--bs-border-color); border-radius:.75rem; background:var(--bs-body-bg); }
.kpi .kpi-label{ font-size:.78rem; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.05em; }
.kpi .kpi-value{ font-size:1.5rem; font-weight:700; }
.kpi .kpi-icon{ width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px; }

/* Simple CSS bar chart (no JS dependency) */
.barchart{ display:flex; align-items:flex-end; gap:6px; height:160px; padding-top:8px; }
.barchart .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.barchart .bar{ width:100%; max-width:34px; background:var(--brand); border-radius:4px 4px 0 0; transition:height .3s; min-height:2px; }
.barchart .bar-label{ font-size:.62rem; color:var(--bs-secondary-color); margin-top:4px; white-space:nowrap; }

.table-sm td, .table-sm th{ vertical-align:middle; }
.cursor-pointer{ cursor:pointer; }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.text-brand{ color:var(--brand)!important; }
.badge.bg-brand{ background:var(--brand)!important; }
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0a6e7c,#075460); }

/* ── Sidebar layout ───────────────────────────────────── */
.layout{ min-height:100vh; }
.app-sidebar{ --bs-offcanvas-width:260px; --bs-offcanvas-bg:var(--brand); width:260px; background-color:var(--brand)!important; }
@media (min-width:992px){
  .app-sidebar{ height:100vh; position:sticky; top:0; flex-shrink:0; overflow-y:auto; }
}
.main-col{ min-width:0; }            /* prevents flex overflow on wide tables */
.sidebar-brand{ display:flex; align-items:center; gap:8px; padding:18px 18px; font-weight:700;
  font-size:1.05rem; border-bottom:1px solid rgba(255,255,255,.15); }
.sidebar-nav{ padding:10px; overflow-y:auto; }
.sidebar-nav .nav-section{ font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
  color:rgba(255,255,255,.5); padding:14px 12px 4px; }
.sidebar-nav .side-link{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  color:rgba(255,255,255,.85); text-decoration:none; font-size:.9rem; margin-bottom:2px; transition:background .12s; }
.sidebar-nav .side-link .ico{ width:20px; text-align:center; }
.sidebar-nav .side-link:hover{ background:rgba(255,255,255,.12); color:#fff; }
.sidebar-nav .side-link.active{ background:#fff; color:var(--brand); font-weight:600; }
.sidebar-user{ border-top:1px solid rgba(255,255,255,.15); padding:14px; }
.topbar{ display:flex; align-items:center; gap:10px; background:var(--brand); color:#fff;
  padding:8px 12px; position:sticky; top:0; z-index:1031; }