/*
 * VeeFive console design system — the SINGLE shared theme for internal SPAs:
 * cloud/admin (dealer portal), cloud/provisioning (operator console), and
 * cloud/fleet (fleet management portal).
 *
 * Brand rules (docs/BRAND.md — hard constraints):
 *   • Primary accent is VeeFive blue #2C9FEC — NEVER green. It drives buttons, nav,
 *     links, active/positive states.
 *   • Red #E6111E is logo artwork + small alert details only — never a large-area theme
 *     (danger tokens stay red-tinted for alerts; the theme surface stays blue/neutral).
 *   • White #FFFFFF for high-contrast content.
 */
*{box-sizing:border-box}
:root{
  --brand:#2c9fec; --brand-ink:#176b9f; --brand-soft:#e8f5fe;
  --brand-bright:#55b4f2;
  --canvas:#f4f3ef; --surface:#fff; --ink:#1b1e1b; --mut:#6c706a; --faint:#9a9e98;
  --line:#e7e5dd; --line2:#eeece5;
  --warn-bg:#fbf0db; --warn-ink:#9a6a08; --ok-bg:#e8f5fe; --ok-ink:#176b9f;
  --dan-bg:#fbe7e4; --dan-ink:#b03a2e; --info-bg:#e4eef3; --info-ink:#2f6f8f; --neu-bg:#ecebe6; --neu-ink:#6c706a;
  --disp:"Bricolage Grotesque",system-ui,sans-serif; --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
}
body{margin:0;background:var(--canvas);font-family:var(--body);color:var(--ink)}
.portal{display:flex;min-height:100vh;background:var(--canvas)}
.side{width:232px;flex:none;background:linear-gradient(178deg,#0d2b38,#082029);color:#fff;
  display:flex;flex-direction:column;padding:18px 14px}
.brand{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.5px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 8px 18px;min-width:0}
.brand .brandmark{max-height:24px;max-width:100%;height:auto;width:auto;display:block;object-fit:contain;object-position:left center}
.brand .logo{width:16px;height:16px;border-radius:5px;background:var(--brand-bright);box-shadow:0 0 0 3px rgba(85,180,242,.24)}
.brand small{font-family:var(--mono);font-weight:500;font-size:10px;color:#82b6c8;letter-spacing:2px;text-transform:uppercase;align-self:end;padding-bottom:4px;white-space:nowrap;min-width:max-content}
.side nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;min-height:44px;border-radius:9px;color:rgba(255,255,255,.66);
  font-size:13.5px;font-weight:600;cursor:pointer;position:relative}
.nav-i svg{width:18px;height:18px;flex:none}
.nav-i:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-i.on{background:rgba(85,180,242,.20);color:#fff}
.nav-i.on::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--brand-bright)}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
.tbar{min-height:62px;flex:none;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:10px 22px;gap:14px;flex-wrap:wrap}
.pt{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.4px}
.ps{font-size:12px;color:var(--mut);margin-top:1px}
.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.av{width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff;font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center}
.content{padding:22px;display:flex;flex-direction:column;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.kpi-l{font-family:var(--mono);font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;justify-content:space-between;gap:6px}
.kpi-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:7px;gap:6px}
.kpi-n{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-1px;line-height:1}
.kpi-foot{margin-top:9px;font-size:11.5px;color:var(--mut);display:flex;align-items:center;justify-content:space-between;gap:6px}
.delta{font-family:var(--mono);font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px}
.delta.up{background:var(--ok-bg);color:var(--ok-ink)}
.delta.warn{background:var(--warn-bg);color:var(--warn-ink)}
.delta.bad{background:var(--dan-bg);color:var(--dan-ink)}
.delta.dn{background:var(--neu-bg);color:var(--mut)}
.cols-2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.cols-equal{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.ph{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:var(--brand);font-weight:600;text-transform:uppercase}
.ph h3{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.3px;margin:0}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--mut);
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);font-weight:600;background:#fbfbf9}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#fafaf7}
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:600;font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;gap:5px}
.pill.ok{background:var(--ok-bg);color:var(--ok-ink)}.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.danger{background:var(--dan-bg);color:var(--dan-ink)}.pill.info{background:var(--info-bg);color:var(--info-ink)}
.pill.neutral{background:var(--neu-bg);color:var(--neu-ink)}
.btn{min-height:44px;padding:8px 15px;border-radius:10px;border:none;background:var(--brand);color:#fff;font-family:var(--body);
  font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;text-decoration:none}
.btn.sm{min-height:44px;padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost.on{background:var(--brand-soft);border-color:#b7d5e1;color:var(--brand-ink)}
.btn.ghost.danger{background:#fff;color:var(--dan-ink);border-color:#e3c4bf}
.btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}
.aic{background:linear-gradient(180deg,#eaf4f8,#fff);border:1px solid #cfe4ec;border-radius:14px;padding:15px 16px}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}.cols-2,.cols-equal{grid-template-columns:1fr}}
@media(max-width:640px){.kpis{grid-template-columns:1fr}}