/* ============================================================================
   AETHER · MFA — Customer Portal (web) · stylesheet
   Builds on the MFA brand tokens (mfa.css :root). Desktop SPA:
   sidebar + topbar + content. Management-first MFA showcase.
   Scoped under .vp so it never collides with the .aa mobile app.
   ============================================================================ */
.vp, .vp *{ box-sizing:border-box; }
.vp{
  --side-w:248px; --top-h:62px;
  font-family:var(--aa-sans); color:var(--aa-text); background:var(--aa-bg);
  height:100vh; display:grid; grid-template-columns:var(--side-w) 1fr; overflow:hidden;
}
.vp ::-webkit-scrollbar{ width:10px; height:10px; }
.vp ::-webkit-scrollbar-thumb{ background:var(--aa-border-strong); border-radius:99px; border:3px solid var(--aa-bg); }
.vp h1,.vp h2,.vp h3{ margin:0; font-family:var(--aa-serif); font-weight:600; letter-spacing:-0.015em; line-height:1.12; color:var(--aa-text); }
.vp-serif{ font-family:var(--aa-serif); font-weight:600; letter-spacing:-0.015em; }
.vp-mono{ font-family:var(--aa-mono); }
.vp-eyebrow{ font-family:var(--aa-mono); font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:var(--aa-text-3); font-weight:500; }

/* ---- service rail (far-left) --------------------------------------------- */
.vp-rail{ background:var(--aa-navy); display:flex; flex-direction:column; align-items:center; height:100vh; padding:12px 0; gap:10px; }
.vp-rail-org{ padding-bottom:10px; margin-bottom:2px; border-bottom:1px solid rgba(255,255,255,.1); }
.vp-rail-svcs{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; }
.vp-rail-foot{ display:flex; flex-direction:column; align-items:center; gap:7px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); width:44px; }
.vp-rail-btn{ position:relative; width:46px; height:46px; border-radius:13px; border:none; background:transparent; color:var(--aa-navy-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s, color .12s; }
.vp-rail-btn:hover{ background:rgba(255,255,255,.08); color:#fff; }
.vp-rail-btn.on{ color:#fff; }
.vp-rail-btn.locked{ opacity:.42; }
.vp-rail-ind{ position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:4px; height:22px; border-radius:3px; }
.vp-rail-lock{ position:absolute; right:3px; bottom:3px; width:14px; height:14px; border-radius:50%; background:var(--aa-navy-2); display:flex; align-items:center; justify-content:center; }
.vp-rail-name{ position:absolute; bottom:1px; font-size:7.5px; font-weight:800; letter-spacing:.04em; color:var(--aa-navy-dim); }

/* ---- sidebar ------------------------------------------------------------- */
.vp-side{ background:var(--aa-surface); border-right:1px solid var(--aa-border); display:flex; flex-direction:column; height:100vh; }
.vp-brandband{ background:var(--aa-navy); padding:14px 16px; display:flex; align-items:center; gap:11px; }
.vp-brandband .nm{ font-weight:700; font-size:14.5px; letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp-brandband .sb{ font-family:var(--aa-mono); font-size:8.5px; letter-spacing:.1em; color:var(--aa-navy-dim); margin-top:1px; }
.vp-nav{ flex:1; overflow:auto; padding:14px 12px; }
.vp-navgroup{ margin-bottom:15px; }
.vp-navgroup .gl{ font-family:var(--aa-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--aa-text-3); font-weight:600; padding:0 10px 7px; }
.vp-navbtn{ display:flex; align-items:center; gap:11px; padding:8px 10px; border:none; border-radius:10px; cursor:pointer; text-align:left; width:100%; background:transparent; color:var(--aa-text-2); font-weight:500; font-size:13.5px; font-family:var(--aa-sans); transition:background .1s, color .1s; }
.vp-navbtn:hover{ background:var(--aa-surface-2); }
.vp-navbtn.on{ background:var(--aa-teal-soft); color:var(--aa-teal-press); font-weight:700; }
.vp-navbtn .cnt{ margin-left:auto; background:var(--aa-saffron); color:#fff; font-size:10px; font-weight:800; border-radius:99px; min-width:18px; height:18px; padding:0 5px; display:flex; align-items:center; justify-content:center; }
.vp-side-foot{ padding:12px; border-top:1px solid var(--aa-border); }
.vp-acct{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:11px; cursor:pointer; }
.vp-acct:hover{ background:var(--aa-surface-2); }

/* ---- main + topbar ------------------------------------------------------- */
.vp-main{ display:flex; flex-direction:column; height:100vh; min-width:0; }
.vp-top{ height:var(--top-h); flex:none; border-bottom:1px solid var(--aa-border); background:rgba(255,253,248,.85); backdrop-filter:blur(10px); display:flex; align-items:center; gap:14px; padding:0 24px; z-index:20; }
.vp-crumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; white-space:nowrap; }
.vp-crumb .f{ color:var(--aa-text-3); }
.vp-scroll{ flex:1; overflow:auto; }
.vp-page{ max-width:1340px; margin:0 auto; width:100%; padding:26px 28px 56px; }

/* ---- buttons ------------------------------------------------------------- */
.vp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 15px; border-radius:11px; border:1px solid var(--aa-border-strong); background:var(--aa-surface); color:var(--aa-text); font-size:13.5px; font-weight:700; font-family:var(--aa-sans); cursor:pointer; transition:background .1s, border-color .1s; white-space:nowrap; }
.vp-btn:hover{ background:var(--aa-surface-2); }
.vp-btn-primary{ background:var(--aa-teal); border-color:var(--aa-teal); color:#fff; }
.vp-btn-primary:hover{ background:var(--aa-teal-press); }
.vp-btn-sm{ height:32px; padding:0 11px; font-size:12.5px; border-radius:9px; }
.vp-btn-ghost{ background:transparent; border-color:transparent; color:var(--aa-text-2); }
.vp-btn-ghost:hover{ background:var(--aa-surface-2); }
.vp-iconbtn{ width:38px; height:38px; border-radius:11px; border:1px solid transparent; background:transparent; color:var(--aa-text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.vp-iconbtn:hover{ background:var(--aa-surface-2); }

/* ---- card ---------------------------------------------------------------- */
.vp-card{ background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:16px; }
.vp-card-pad{ padding:18px 20px; }
.vp-card-hd{ display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--aa-border); }
.vp-card-hd h3{ font-size:15px; }
.vp-card-hd .sub{ font-size:12px; color:var(--aa-text-3); }

/* ---- grid helpers -------------------------------------------------------- */
.vp-grid{ display:grid; gap:16px; }
.vp-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .vp-kpis{ grid-template-columns:repeat(2,1fr); } }

/* ---- KPI tile ------------------------------------------------------------ */
.vp-kpi{ background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:3px; position:relative; overflow:hidden; }
.vp-kpi .ic{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.vp-kpi .lab{ font-size:12px; color:var(--aa-text-3); font-weight:600; }
.vp-kpi .val{ font-family:var(--aa-serif); font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.05; margin-top:5px; }
.vp-kpi .val small{ font-size:16px; color:var(--aa-text-3); font-weight:600; font-family:var(--aa-sans); }
.vp-kpi .delta{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; margin-top:7px; }
.vp-kpi .delta.up{ color:var(--aa-ok); } .vp-kpi .delta.down{ color:var(--aa-danger); } .vp-kpi .delta.flat{ color:var(--aa-text-3); }

/* ---- badges -------------------------------------------------------------- */
.vp-badge{ display:inline-flex; align-items:center; gap:6px; height:23px; padding:0 10px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; }
.vp-b-ok{ background:var(--aa-ok-soft); color:#1f6740; } .vp-b-teal{ background:var(--aa-teal-soft); color:var(--aa-teal-press); }
.vp-b-saf{ background:var(--aa-saffron-soft); color:var(--aa-saffron-deep); } .vp-b-muted{ background:var(--aa-surface-3); color:var(--aa-text-2); }
.vp-b-danger{ background:var(--aa-danger-soft); color:var(--aa-danger); } .vp-b-warn{ background:var(--aa-warn-soft); color:var(--aa-warn); }
.vp-b-sky{ background:var(--aa-sky-soft); color:#2a7ba3; }
.vp-dot{ width:6px; height:6px; border-radius:99px; }

/* ---- table --------------------------------------------------------------- */
.vp-table{ width:100%; border-collapse:collapse; }
.vp-table th{ text-align:left; font-family:var(--aa-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--aa-text-3); font-weight:600; padding:11px 16px; border-bottom:1px solid var(--aa-border); white-space:nowrap; background:var(--aa-table-head-bg, transparent); }
.vp-table td{ padding:13px 16px; border-bottom:1px solid var(--aa-border-soft); font-size:13px; vertical-align:middle; }
.vp-table tr:last-child td{ border-bottom:none; }
.vp-table tr.tap{ cursor:pointer; }
.vp-table tbody tr.tap:hover{ background:var(--aa-surface-2); }

/* ---- dark island (D8.4) ---------------------------------------------------
   No per-component dark forks: a region marked data-theme="dark" (e.g. the CLM
   live-workflows firehose card) remaps the SAME tokens the components already
   consume — every .vp-table inside renders dark with zero dark-variant classes. */
[data-theme="dark"]{
  --aa-table-head-bg: var(--aa-navy-2);
  --aa-border: var(--aa-navy-3);
  --aa-border-soft: var(--aa-navy-3);
  --aa-text-3: var(--aa-navy-dim);
  --aa-surface-2: rgba(255,255,255,.03);
}
[data-theme="dark"] .vp-table tbody tr:hover td{ background:var(--aa-surface-2); }
.vp-mono-av{ display:inline-flex; align-items:center; justify-content:center; border-radius:9px; font-weight:800; color:#fff; flex:none; font-family:var(--aa-sans); }

/* ---- progress / meters --------------------------------------------------- */
.vp-meter{ height:8px; border-radius:99px; background:var(--aa-surface-3); overflow:hidden; }
.vp-meter > i{ display:block; height:100%; border-radius:99px; }

/* ---- legend -------------------------------------------------------------- */
.vp-legend{ display:flex; flex-direction:column; gap:9px; }
.vp-legend .row{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.vp-legend .sw{ width:11px; height:11px; border-radius:4px; flex:none; }
.vp-legend .nm{ color:var(--aa-text-2); flex:1; }
.vp-legend .vl{ font-family:var(--aa-mono); font-weight:600; color:var(--aa-text); }

/* ---- hero showcase band -------------------------------------------------- */
.vp-hero{ border-radius:18px; padding:24px 26px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--aa-navy,#191512) 0%, #2A241F 55%, var(--accent-active,#8B3E23) 140%); }
.vp-hero .grid{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:22px 22px; }
.vp-hero h2{ color:#fff; }
.vp-hero .stat{ display:flex; flex-direction:column; gap:2px; }
.vp-hero .stat .v{ font-family:var(--aa-serif); font-size:32px; font-weight:600; letter-spacing:-.02em; color:#fff; }
.vp-hero .stat .l{ font-size:12px; color:var(--aa-navy-dim); }

/* ---- chip / filter ------------------------------------------------------- */
.vp-seg{ display:inline-flex; background:var(--aa-surface-3); border-radius:10px; padding:3px; gap:3px; }
.vp-seg button{ border:none; background:transparent; font-family:var(--aa-sans); font-size:12.5px; font-weight:700; color:var(--aa-text-2); padding:6px 12px; border-radius:7px; cursor:pointer; }
.vp-seg button.on{ background:var(--aa-surface); color:var(--aa-teal-press); box-shadow:var(--aa-shadow-sm); }

/* ---- input --------------------------------------------------------------- */
.vp-input{ height:36px; border-radius:10px; border:1px solid var(--aa-border-strong); background:var(--aa-surface-2); padding:0 12px 0 33px; font-size:13px; font-family:var(--aa-sans); color:var(--aa-text); outline:none; width:220px; }
.vp-input:focus{ border-color:var(--aa-teal); background:var(--aa-surface); }

/* ---- list row ------------------------------------------------------------ */
.vp-row{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--aa-border-soft); }
.vp-row:last-child{ border-bottom:none; }

/* ---- stage (under-portal frame for showcase) ----------------------------- */
.vp-stagewrap{ height:100vh; background:#e9dfca; padding:0; }
.vp-fade{ animation:vpFade .3s ease both; }
@keyframes vpFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .vp-fade{ animation:none; } }

/* callout */
.vp-callout{ display:flex; gap:12px; align-items:flex-start; background:var(--aa-teal-soft); border:1px solid #cfe3ea; border-radius:13px; padding:14px 16px; }
.vp-callout .ic{ width:34px; height:34px; border-radius:10px; background:var(--aa-teal); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }