:root { --bg:#0f1115; --card:#151922; --muted:#8b94a7; --text:#e8edf4; --accent:#4da3ff; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}
a{color:var(--accent)}
.topbar{position:sticky;top:0;z-index:5;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 16px;background:#0e121a;border-bottom:1px solid #1d2330}
.topbar .brand{font-weight:700;letter-spacing:.5px}
.topbar .controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.topbar input[type="date"], .topbar button, .topbar select{background:#0b0f16;color:var(--text);border:1px solid #252b39;border-radius:10px;padding:8px 10px}
.topbar label{display:flex;gap:6px;align-items:center}
.topbar .secondary{opacity:.8}
.container{max-width:1600px;margin:0 auto;padding:16px}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid #1f2634;border-radius:16px;padding:16px;text-align:center}
.kpi-value{font-size:28px;font-weight:800}
.kpi-label{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}
.card{background:var(--card);border:1px solid #1f2634;border-radius:16px;padding:16px;min-height:360px}
.card h3{margin:0 0 8px;font-size:16px;color:#cfd7e6}
canvas{width:100% !important;height:320px !important}
.foot{padding:20px;color:var(--muted);text-align:center;opacity:.9}
.login-body{display:grid;place-items:center;min-height:100vh}
.login-card{width:min(420px,90vw);background:var(--card);padding:24px;border:1px solid #1f2634;border-radius:16px}
.login-card form{display:grid;gap:10px}
.login-card input{width:100%;background:#0b0f16;color:var(--text);border:1px solid #252b39;border-radius:10px;padding:10px}
.login-card button{background:var(--accent);border:0;border-radius:12px;color:#08111c;padding:10px 12px;font-weight:700;cursor:pointer}
.muted{color:var(--muted);font-size:12px}
.col-span-2{grid-column:1/-1}
#verifyTable th{cursor:pointer}
.badge.ok{background:rgba(16,185,129,.2); color:#a7f3d0; border:1px solid rgba(16,185,129,.3); padding:2px 8px; border-radius:999px; font-size:12px}
.badge.missing{background:rgba(239,68,68,.15); color:#fecaca; border:1px solid rgba(239,68,68,.3); padding:2px 8px; border-radius:999px; font-size:12px}
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
  canvas{height:300px !important}
  .kpis{grid-template-columns:repeat(3,1fr)}
}

/* === sticky header + table header === */

:root{ --topbar-h: 72px; }

.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(17,24,39,0.9);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.main{
  padding-top: calc(16px + var(--topbar-h));
}

.table-sticky thead th{
  position: sticky;
  top: var(--topbar-h);
  z-index: 900;
  background: #0b1220;
}



/* === spacing tweak below fixed header === */
:root{
  --topbar-gap: 12px; /* extra breathing room below the header */
}
.main{
  padding-top: calc(var(--topbar-h, 72px) + var(--topbar-gap, 12px));
}
.table-sticky thead th{
  top: calc(var(--topbar-h, 72px) + var(--topbar-gap, 12px));
}



/* === BODY top padding under fixed header (robust) === */
:root{
  --topbar-h: 72px;
  --topbar-gap: 14px; /* increase slightly for breathing room */
}
body{
  padding-top: calc(var(--topbar-h) + var(--topbar-gap));
}
@supports (padding: max(0px)){
  body{
    padding-top: max(calc(var(--topbar-h) + var(--topbar-gap)), env(safe-area-inset-top));
  }
}
.table-sticky thead th{
  top: calc(var(--topbar-h) + var(--topbar-gap));
}