/* Webupon Maintenance Dashboard — shared design system.
   Linked by BOTH index.html (Overview) and paid-dashboard.html (Paid).
   Page-specific styles live in each page's own <style> block and reuse these tokens. */
:root{
  --brand:#1b1340;      /* deep navy-purple — top bar + modal header */
  --brand2:#2a1d63;     /* hover / active / table header */
  --brand3:#3d2f7a;     /* borders on dark */
  --bg:#f4f6f9; --card:#fff; --line:#e2e6ec; --ink:#1e2d40; --mut:#7a8694;
  --ok:#1a7a4a; --okl:#c6efce; --watch:#e6a817; --action:#e6a817; --crit:#c0392b;
  --na:#e8e8e8; --cream:#fff8ee;
  --maxw:1440px;        /* SAME wide width on both pages */
  --pad:28px;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}

/* ---- top bar: nav row + title row in one cohesive dark block ---- */
.topbar{background:var(--brand);color:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;gap:4px;height:50px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .brand{font-weight:700;margin-right:18px;font-size:14px;display:flex;align-items:center;gap:9px;color:#fff}
.nav .brand-logo{height:26px;width:26px;border-radius:6px;display:inline-block;background:#fff;padding:1px}
.tip{cursor:help}
.nav a{color:#c8c2e6;text-decoration:none;padding:7px 13px;border-radius:7px;font-size:13px;transition:background .12s}
.nav a:hover{background:var(--brand2);color:#fff}
.nav a.active{background:var(--brand2);color:#fff;font-weight:600}
.nav .navsp{flex:1}
.nav a.back{color:#9a93c0}
.hd{max-width:var(--maxw);margin:0 auto;padding:15px var(--pad) 17px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hd h1{margin:0;font-size:19px;font-weight:650;color:#fff}
.hd .sub{color:#a99fd0;font-size:12.5px;margin-top:3px}
.hd .spacer{flex:1}
.hd .ctrl{display:flex;align-items:center;gap:8px;color:#c8c2e6;font-size:12.5px}
.hd select{background:var(--brand2);color:#fff;border:1px solid var(--brand3);border-radius:6px;padding:6px 10px;font-size:13px}

/* ---- content width (identical on both) ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:20px var(--pad) 10px}

/* ---- KPI strip (shared) ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi .n{font-size:25px;font-weight:700}
.kpi .l{color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.kpi.red .n{color:var(--crit)}.kpi.amber .n{color:var(--watch)}.kpi.green .n{color:var(--ok)}

/* ---- status pills (shared) ---- */
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;color:#fff}
.pill.ok{background:var(--ok)}.pill.okfor{background:var(--okl);color:var(--ok)}
.pill.watch,.pill.action{background:var(--watch)}.pill.crit{background:var(--crit)}.pill.na{background:var(--na);color:#888}

.foot{color:var(--mut);font-size:11.5px;text-align:center;padding:22px var(--pad) 30px;max-width:var(--maxw);margin:0 auto}