/* Car Planet — Group Operating Portal · shared design system
   Dark navy command-centre theme. Every module links this file and uses these classes,
   so all 11 departments read as ONE app. Do not fork colours per module. */
:root{
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
}
html[data-theme="dark"],:root{
  --canvas:#0a0f1a; --canvas2:#0d1524; --card-a:#111b30; --card-b:#0d1524; --header:#0b1428;
  --ink:#e9eef8; --ink2:#c7d2e6; --mut:#8493ad; --mut2:#61708c;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.13);
  --teal:#39d3b6; --blue:#5b8cff; --amber:#f3b64b; --red:#f0616d; --grn:#39d3b6; --violet:#a98bff;
  --bg:radial-gradient(1200px 620px at 85% -8%,rgba(57,211,182,.10),transparent 55%),
      radial-gradient(1000px 520px at 0% 0%,rgba(91,140,255,.12),transparent 52%),var(--canvas);
}
html[data-theme="light"]{
  --canvas:#F4F6FA; --canvas2:#eef1f7; --card-a:#fff; --card-b:#fff; --header:#0B1B3B;
  --ink:#111827; --ink2:#374151; --mut:#6B7280; --mut2:#9AA3B2;
  --line:rgba(17,24,39,.10); --line2:rgba(17,24,39,.16); --bg:var(--canvas);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}

/* ---- top bar + department nav ---- */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--header) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1400px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em}
.brand .logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--teal),var(--blue))}
.brand small{font-weight:600;color:var(--mut);letter-spacing:.14em;font-size:11px;text-transform:uppercase}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mut)}
.who .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));display:grid;place-items:center;color:#04121a;font-weight:800;font-size:12px}
.nav{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--header) 70%,transparent)}
.nav-in{max-width:1400px;margin:0 auto;padding:0 12px;display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-in::-webkit-scrollbar{height:0}
.nav a{white-space:nowrap;padding:12px 14px;font-size:13px;font-weight:600;color:var(--mut);border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px}
.nav a:hover{color:var(--ink2)}
.nav a.on{color:var(--ink);border-bottom-color:var(--teal)}
.nav a .ic{width:15px;height:15px;opacity:.9}

/* ---- page scaffold ---- */
.wrap{max-width:1400px;margin:0 auto;padding:24px 20px 60px}
.page-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
h1.page{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.5px;margin:0}
.sub{color:var(--mut);font-size:13.5px;max-width:760px;margin:2px 0 22px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin:26px 0 12px}

/* ---- KPI tiles ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.kpi{background:linear-gradient(180deg,var(--card-a),var(--card-b));border:1px solid var(--line);border-radius:14px;padding:15px 16px;position:relative;overflow:hidden}
.kpi .k{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-.5px;margin-top:3px}
.kpi .v small{font-size:14px;font-weight:600;color:var(--mut)}
.kpi .r{font-size:12px;margin-top:5px;color:var(--mut)}
.kpi.accent-teal{box-shadow:inset 0 0 0 1px rgba(57,211,182,.2)}
.kpi.accent-blue{box-shadow:inset 0 0 0 1px rgba(91,140,255,.2)}

/* ---- cards / panels ---- */
.card{background:linear-gradient(180deg,var(--card-a),var(--card-b));border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.card h2{font-size:16px;font-weight:700;letter-spacing:-.2px;margin:0 0 4px}
.card .cap{color:var(--mut);font-size:12px}
.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---- badges ---- */
.badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.badge.live{color:#0a2018;background:rgba(57,211,182,.9)}
.badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#0a2018;animation:pulse 2s infinite}
.badge.target{color:var(--blue);background:rgba(91,140,255,.14)}
.badge.soon,.badge.coming{color:var(--amber);background:rgba(243,182,75,.15)}
.badge.warn{color:var(--red);background:rgba(240,97,109,.15)}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* chips for deltas */
.chip{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}
.chip.up{color:var(--grn);background:rgba(57,211,182,.12)}
.chip.dn{color:var(--red);background:rgba(240,97,109,.12)}
.chip.flat{color:var(--mut)}

/* ---- tables ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th,table.tbl td{text-align:right;padding:8px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
table.tbl th:first-child,table.tbl td:first-child{text-align:left}
table.tbl th{color:var(--mut);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
table.tbl tr:hover td{background:rgba(255,255,255,.02)}
.rag{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.rag.g{background:var(--grn)}.rag.a{background:var(--amber)}.rag.r{background:var(--red)}

/* ---- coming soon overlay for scaffolded modules ---- */
.soon-wrap{position:relative}
.soon-ribbon{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--amber);background:rgba(243,182,75,.12);border:1px solid rgba(243,182,75,.3);border-radius:999px;padding:6px 13px;margin-bottom:14px}
.ghost{filter:saturate(.5) opacity(.55)}
.hint{color:var(--mut);font-size:12px;line-height:1.55;margin-top:12px}

/* bars */
.bar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--teal),var(--blue))}
.split{display:flex;height:12px;border-radius:6px;overflow:hidden}
.split > i{display:block;height:100%}

.foot{color:var(--mut2);font-size:12px;margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}

@media(max-width:1050px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2,.grid3{grid-template-columns:1fr}}
@media(max-width:560px){.kpis{grid-template-columns:1fr 1fr}.wrap{padding:18px 14px 50px}}