/* ============================================================================
   RADEUS PRO — Water Utility Management Platform
   Master stylesheet · Dark military command-center theme
   Drop-in replacement for Enterprise main.css. Same selector vocabulary,
   same data-page scoping, same JS contracts. Re-skinned only.
   ============================================================================ */

/* ───────────────────────────── ROOT TOKENS ──────────────────────────────────
   Pro raw palette + Enterprise variable aliases.
   Every Enterprise rule that reads var(--primary), var(--success), etc. picks
   up Pro colors automatically through these aliases.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* ── Pro raw palette ──────────────────────────────────────────────────── */
  --cyan:        #00f5ff;
  --cyan-dim:    #00a8b5;
  --green:       #00ff88;
  --red:         #ff2244;
  --orange:      #ff8800;
  --yellow:      #e8b400;
  --blue:        #0088ff;
  --purple:      #aa00ff;
  --pk:          #f4a0b5;     /* comms accent */
  --rp:          #a8ff3e;     /* reports accent */
  --wo:          #8ab85e;     /* workorders accent */
  --sys:         #ffffff;     /* system page accent */

  /* ── Enterprise variable aliases → Pro palette ────────────────────────── */
  --primary:        var(--cyan);
  --primary-soft:   rgba(0, 245, 255, 0.10);
  --success:        var(--green);
  --warning:        var(--orange);
  --danger:         var(--red);
  --info:           var(--blue);

  /* ── Surfaces & chrome ────────────────────────────────────────────────── */
  --bg:             #020c14;
  --bg2:            #041220;
  --surface:        rgba(0, 245, 255, 0.03);
  --surface-strong: #041220;
  --surface-muted:  rgba(0, 15, 25, 0.95);
  --border:         rgba(0, 245, 255, 0.14);
  --border-strong:  rgba(0, 245, 255, 0.42);
  --shadow:         0 0 24px rgba(0, 245, 255, 0.08);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text:       #c8eaf0;
  --text-soft:  rgba(200, 234, 240, 0.78);
  --text-muted: #3d6a78;

  /* ── Radii (sharp tactical edges) ─────────────────────────────────────── */
  --radius-sm: 0px;
  --radius:    2px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --pill:      0px;

  /* ── Fonts (mono everywhere in Pro) ───────────────────────────────────── */
  --font-display: 'Orbitron', monospace;
  --font-mono:    'Share Tech Mono', monospace;
  --font-num:     'Rajdhani', sans-serif;
  --font-sans:    'Share Tech Mono', monospace;
}

/* ───────────────────────────── PER-PAGE ACCENT RETARGETS ─────────────────────
   Each page's --primary points to its own Pro accent. Enterprise rules that use
   var(--primary) automatically inherit the right color per page.
   --------------------------------------------------------------------------- */
body[data-page="login"] {
  --primary:      var(--green);
  --primary-soft: rgba(0, 255, 136, 0.10);
  --bg:           #020c06;
  --bg2:          #011a0a;
  --surface:      rgba(0, 255, 136, 0.03);
  --surface-strong:#011a0a;
  --border:       rgba(0, 255, 136, 0.18);
  --border-strong:rgba(0, 255, 136, 0.45);
  --text:         #c8f0d8;
  --text-soft:    rgba(200, 240, 216, 0.80);
  --text-muted:   #2a6a45;
}

body[data-page="readings"],
body[data-page="payments"] {
  --primary:      var(--green);
  --primary-soft: rgba(0, 255, 136, 0.08);
  --bg:           #020c14;
  --bg2:          #021a0e;
  --surface:      rgba(0, 255, 136, 0.03);
  --surface-strong:#021a0e;
  --border:       rgba(0, 255, 136, 0.15);
  --border-strong:rgba(0, 255, 136, 0.42);
  --text:         #c8f0d8;
  --text-soft:    rgba(200, 240, 216, 0.78);
  --text-muted:   #2a6a45;
}

body[data-page="compliance"] {
  --primary:      var(--orange);
  --primary-soft: rgba(255, 136, 0, 0.08);
  --bg:           #0d0700;
  --bg2:          #160d00;
  --surface:      rgba(255, 119, 0, 0.03);
  --surface-strong:#160d00;
  --border:       rgba(255, 119, 0, 0.15);
  --border-strong:rgba(255, 119, 0, 0.42);
  --text:         #f5d8b0;
  --text-soft:    rgba(245, 216, 176, 0.80);
  --text-muted:   #6a4515;
}

body[data-page="billing"] {
  --primary:      var(--yellow);
  --primary-soft: rgba(232, 180, 0, 0.08);
  --bg:           #0d0a00;
  --bg2:          #1a1200;
  --surface:      rgba(232, 180, 0, 0.03);
  --surface-strong:#1a1200;
  --border:       rgba(232, 180, 0, 0.18);
  --border-strong:rgba(232, 180, 0, 0.42);
  --text:         #f0e0a0;
  --text-soft:    rgba(240, 224, 160, 0.80);
  --text-muted:   #6a5215;
}

body[data-page="comms"] {
  --primary:      var(--pk);
  --primary-soft: rgba(244, 160, 181, 0.08);
  --bg:           #0a0305;
  --bg2:          #14060a;
  --surface:      rgba(244, 160, 181, 0.025);
  --surface-strong:#14060a;
  --border:       rgba(244, 160, 181, 0.16);
  --border-strong:rgba(244, 160, 181, 0.42);
  --text:         #f4d8e0;
  --text-soft:    rgba(244, 216, 224, 0.78);
  --text-muted:   #6a3a48;
}

body[data-page="reports"] {
  --primary:      var(--rp);
  --primary-soft: rgba(168, 255, 62, 0.08);
  --bg:           #030805;
  --bg2:          #050d03;
  --surface:      rgba(168, 255, 62, 0.025);
  --surface-strong:#050d03;
  --border:       rgba(168, 255, 62, 0.14);
  --border-strong:rgba(168, 255, 62, 0.42);
  --text:         #d0f0a0;
  --text-soft:    rgba(208, 240, 160, 0.78);
  --text-muted:   #3a6015;
}

body[data-page="workorders"] {
  --primary:      var(--wo);
  --primary-soft: rgba(138, 184, 94, 0.08);
  --bg:           #070d04;
  --bg2:          #0c1408;
  --surface:      rgba(138, 184, 94, 0.03);
  --surface-strong:#0c1408;
  --border:       rgba(138, 184, 94, 0.16);
  --border-strong:rgba(138, 184, 94, 0.45);
  --text:         #d8ecc8;
  --text-soft:    rgba(216, 236, 200, 0.78);
  --text-muted:   #5a8040;
}

body[data-page="system"] {
  --primary:      var(--sys);
  --primary-soft: rgba(255, 255, 255, 0.06);
  --bg:           #050508;
  --bg2:          #08080f;
  --surface:      rgba(255, 255, 255, 0.03);
  --surface-strong:#08080f;
  --border:       rgba(255, 255, 255, 0.14);
  --border-strong:rgba(255, 255, 255, 0.42);
  --text:         #e8eef8;
  --text-soft:    rgba(232, 238, 248, 0.80);
  --text-muted:   #4a4a70;
}

body[data-page="portal"] {
  --primary:      var(--cyan);
  --primary-soft: rgba(0, 245, 255, 0.08);
  --bg:           #020810;
  --bg2:          #030c16;
  --surface:      rgba(0, 245, 255, 0.025);
  --surface-strong:#030c16;
  --border:       rgba(0, 245, 255, 0.16);
  --border-strong:rgba(0, 245, 255, 0.45);
  --text:         #c0e8f8;
  --text-soft:    rgba(192, 232, 248, 0.78);
  --text-muted:   #1a4a6a;
}

/* index, accounts, command, mig already use the cyan defaults from :root */

/* ───────────────────────────── RESET ───────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* Login + portal + migration override the locked viewport */
body[data-page="login"] {
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(0,255,136,.04) 1px,transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg,rgba(0,255,136,.04) 1px,transparent 1px) 0 0/60px 60px,
    var(--bg);
}
body[data-page="mig"]   { overflow: hidden; display: flex; flex-direction: column; }

a { color: inherit; text-decoration: none; }

/* ───────────────────────────── SCANLINE OVERLAY (Pro signature) ─────────────
   Subtle CRT scanline; pointer-events:none so it never blocks clicks.
   Suppressed on login/portal/mig (those pages have their own gradient bg).
   --------------------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px
  );
  pointer-events: none;
  z-index: 1000;
}
body[data-page="mig"]::before { display: none; }

/* Operator pages get tactical crosshair cursor; portal/login/mig stay default */
body[data-page="index"],
body[data-page="accounts"],
body[data-page="readings"],
body[data-page="billing"],
body[data-page="payments"],
body[data-page="compliance"],
body[data-page="workorders"],
body[data-page="reports"],
body[data-page="comms"],
body[data-page="system"],
body[data-page="command"] {
  cursor: crosshair;
}

/* ───────────────────────────── CORNER BRACKETS (Pro signature) ──────────────
   Operator pages have <div class="corner tl/tr/bl/br"></div> markup.
   Login/portal/mig hide them.
   --------------------------------------------------------------------------- */
.corner {
  position: fixed;
  width: 36px; height: 36px;
  border-color: var(--primary);
  border-style: solid;
  opacity: .4;
  z-index: 999;
  pointer-events: none;
}
.corner.tl { top: 6px;    left: 6px;   border-width: 2px 0 0 2px; }
.corner.tr { top: 6px;    right: 6px;  border-width: 2px 2px 0 0; }
.corner.bl { bottom: 6px; left: 6px;   border-width: 0 0 2px 2px; }
.corner.br { bottom: 6px; right: 6px;  border-width: 0 2px 2px 0; }

body[data-page="mig"] .corner { display: none; }
/* Login keeps corners (its own dark green theme accents them); portal keeps them too */
body[data-page="login"] .corner { width: 48px; height: 48px; top: 10px; left: 10px; opacity: .25; }
body[data-page="login"] .corner.tr { left: auto; right: 10px; }
body[data-page="login"] .corner.bl { top: auto; bottom: 10px; left: 10px; }
body[data-page="login"] .corner.br { top: auto; bottom: 10px; left: auto; right: 10px; }

/* ───────────────────────────── SCROLLBAR ───────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; }

/* ───────────────────────────── ANIMATIONS ───────────────────────────── */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes tick  { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes drot  { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes pp    { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes btnLoad {
  0%   { width: 0;    left: 0; }
  50%  { width: 100%; left: 0; }
  100% { width: 0;    left: 100%; }
}
@keyframes lp {
  0%, 100% { text-shadow: 0 0 20px currentColor, 0 0 40px rgba(0,245,255,.2); }
  50%      { text-shadow: 0 0 30px currentColor, 0 0 70px rgba(0,245,255,.4); }
}
@keyframes critPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255,34,68,.4); }
  50%      { box-shadow: 0 0 12px rgba(255,34,68,.9); }
}
@keyframes alertPulse {
  0%, 100% { background: rgba(255,34,68,.08); }
  50%      { background: rgba(255,34,68,.18); }
}

/* ============================================================================
   TOPBAR / GLOBAL CHROME
   ============================================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 46px;
  background: linear-gradient(90deg, var(--bg2), var(--bg), var(--bg2));
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  z-index: 100;
}
.topbar-left,
.topbar-center,
.topbar-right { display: flex; align-items: center; gap: 16px; }

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--primary);
  letter-spacing: 0.5rem;
  text-shadow: 0 0 20px currentColor, 0 0 50px rgba(0, 245, 255, 0.25);
  text-decoration: none;
  animation: lp 4s ease-in-out infinite;
}
.logo a { color: inherit; text-decoration: none; }

.tagline,
.system-online-label,
.operator-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
}
.topbar-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
}
.operator-name { color: var(--primary); }

.sys-select {
  background: var(--primary-soft);
  border: 1px solid var(--border-strong);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 12px;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  border-radius: var(--radius);
}
.sys-select option {
  background: var(--bg2);
  color: var(--primary);
  font-family: var(--font-mono);
  letter-spacing: 1px;
}
.sys-static {
  display: inline-flex; align-items: center;
  background: var(--primary-soft);
  border: 1px solid var(--border-strong);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 12px;
  letter-spacing: 1px;
  border-radius: var(--radius);
}

.sdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: blink 2s infinite;
}

#clock {
  color: var(--primary);
  font-size: 13px;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.signout-btn,
.logout-btn {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 4px 9px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  letter-spacing: 1px;
  border-radius: var(--radius);
  transition: all .15s;
}
.signout-btn:hover,
.logout-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* ============================================================================
   TICKER (live feed strip)
   ============================================================================ */
.ticker-wrap {
  position: fixed; top: 46px; left: 0; right: 0;
  height: 26px;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  z-index: 99;
  display: flex; align-items: center;
}
.ticker-tag {
  background: var(--primary);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  padding: 0 10px;
  height: 100%;
  display: flex; align-items: center;
  letter-spacing: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-track {
  display: flex;
  animation: tick 55s linear infinite;
  white-space: nowrap;
}
.ti {
  padding: 0 28px;
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: .5px;
}
.ti .v { color: var(--primary); }
.ti .r { color: var(--danger); }
.ti .g { color: var(--success); }
.ti .o { color: var(--warning); }
.ti .c-pay   { color: var(--success); }
.ti .c-comply{ color: var(--danger); }
.ti .c-warn  { color: var(--warning); }
.ti .c-acct  { color: var(--cyan); }
.ti .c-wo    { color: var(--warning); }
.ti .c-sys   { color: var(--primary); }
.ti .c-ok    { color: var(--success); }
.ti .sep     { color: var(--text-muted); margin: 0 4px; }

/* ============================================================================
   BOTTOM NAV
   ============================================================================ */
.botnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 78px;
  background: linear-gradient(90deg, var(--bg2), var(--bg), var(--bg2));
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 0 16px;
  z-index: 100;
}
.navbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  width: 58px; height: 68px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--text-soft);
  cursor: pointer;
  transition: all .2s;
  font-size: 8px;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.navbtn::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform .2s;
}
.navbtn:hover::after,
.navbtn.active::after { transform: scaleX(1); }
.navbtn:hover {
  color: var(--primary);
  border-color: var(--border-strong);
  background: var(--primary-soft);
}
.navbtn.active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 16px rgba(0, 245, 255, 0.18), inset 0 0 14px rgba(0, 245, 255, 0.06);
}
.navicon { font-size: 20px; line-height: 1; }
.navalert {
  position: absolute;
  top: 5px; right: 6px;
  width: 13px; height: 13px;
  background: var(--danger);
  border-radius: 50%;
  font-size: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-display);
}

/* ============================================================================
   PANELS / CARDS
   ============================================================================ */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent);
}
.ptitle {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--cyan-dim);
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  text-transform: uppercase;
}
.badge {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter .15s, transform .15s;
  user-select: none;
}
.badge:hover {
  filter: brightness(1.25);
  transform: translateY(-1px);
}
.br2 { color: var(--danger);  border-color: var(--danger);  background: rgba(255, 34, 68, 0.08); }
.bg2 { color: var(--success); border-color: var(--success); background: rgba(0, 255, 136, 0.08); }
.bo2 { color: var(--warning); border-color: var(--warning); background: rgba(255, 136, 0, 0.08); }
.bc2 { color: var(--cyan);    border-color: var(--cyan);    background: rgba(0, 245, 255, 0.08); }

/* ============================================================================
   STAT ROWS (panel-internal)
   ============================================================================ */
.srow,
.brow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.04);
  font-size: 11px;
}
.srow:last-child,
.brow:last-child { border-bottom: none; }
.slabel,
.blabel {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(200, 234, 240, 0.82);
  letter-spacing: 1.5px;
}
.sval,
.bval {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.cv { color: var(--cyan);    text-shadow: 0 0 8px rgba(0, 245, 255, 0.4); }
.gv { color: var(--success); }
.rv { color: var(--danger);  }
.ov { color: var(--warning); }
.bv { color: var(--blue);    }
.yv { color: var(--yellow);  }

/* ============================================================================
   MINI PROGRESS BARS (collection rate, accounts billed — index left rail)
   ============================================================================ */
.mbar-wrap   { padding: 6px 12px 10px; }
.mbar-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 3px;
  display: flex; justify-content: space-between;
}
.mbar {
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  margin-bottom: 6px;
  overflow: hidden;
}
.mbar-fill { height: 100%; border-radius: 2px; }

/* ============================================================================
   LEGEND ROW (.mleg .legrow .legdot — used in map panels)
   ============================================================================ */
.mleg .legrow,
.legrow {
  display: flex; align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
  letter-spacing: 1px;
}
.legrow + .legrow { margin-top: 2px; }

/* ============================================================================
   FEED LISTS (call log, alarm feed, compliance items)
   ============================================================================ */
.afeed,
.clog {
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}
.aitem,
.citem {
  display: flex; gap: 8px;
  align-items: flex-start;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.03);
  cursor: pointer;
  transition: background .15s;
  font-size: 10px;
}
.aitem:hover,
.citem:hover { background: rgba(0, 245, 255, 0.04); }
.compitem {
  display: flex; align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 12px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.03);
  cursor: pointer;
  transition: background .15s;
}
.compitem:hover { background: rgba(0, 245, 255, 0.03); }
.compicon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  font-size: 12px;
  flex-shrink: 0;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--border);
}
/* Compitem icon color modifiers */
.ci-primary { background: var(--primary-soft);              color: var(--primary); border-color: var(--border); }
.ci-danger  { background: rgba(255, 34, 68, 0.08);          color: var(--danger);  border-color: rgba(255, 34, 68, 0.32); }
.ci-warning { background: rgba(255, 136, 0, 0.08);          color: var(--warning); border-color: rgba(255, 136, 0, 0.32); }
.ci-success { background: rgba(0, 255, 136, 0.06);          color: var(--success); border-color: rgba(0, 255, 136, 0.32); }
.compinfo  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.compname  { font-size: 11px; color: var(--text); font-weight: 600; line-height: 1.2; }
.compdue   { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); letter-spacing: .5px; line-height: 1.3; }
.compstat,
.compst    {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  letter-spacing: 1.2px;
  flex-shrink: 0;
  margin-left: auto;
  cursor: pointer;
  transition: filter .15s;
}
.compst:hover { filter: brightness(1.25); }
/* Compst color modifiers (replace inline style="color:var(--primary)...") */
.cs-primary { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.cs-danger  { color: var(--danger);  border-color: var(--danger);  background: rgba(255, 34, 68, 0.08); }
.cs-warning { color: var(--warning); border-color: var(--warning); background: rgba(255, 136, 0, 0.08); }
.cs-success { color: var(--success); border-color: var(--success); background: rgba(0, 255, 136, 0.08); }

/* ============================================================================
   PILLS & STATUS
   ============================================================================ */
.pill,
.spill {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.s-paid { color: var(--success); border-color: rgba(0, 255, 136, 0.4);  background: rgba(0, 255, 136, 0.08); }
.s-due  { color: var(--cyan);    border-color: rgba(0, 245, 255, 0.4);  background: rgba(0, 245, 255, 0.08); }
.s-over { color: var(--danger);  border-color: rgba(255, 34, 68, 0.4);  background: rgba(255, 34, 68, 0.08); }
.s-open { color: var(--warning); border-color: rgba(255, 136, 0, 0.4);  background: rgba(255, 136, 0, 0.08); }

/* ============================================================================
   GENERIC BUTTONS
   ============================================================================ */
.btn {
  font-family: var(--font-display);
  font-size: 8px;
  padding: 8px 16px;
  border: 1px solid;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: 1px;
  background: transparent;
  transition: all .15s;
  text-transform: uppercase;
}
.btn-primary,
.btn-pri {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.btn-primary:hover,
.btn-pri:hover { background: rgba(0, 245, 255, 0.15); }

.btn-ghost {
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-success { border-color: var(--success); color: var(--success); background: rgba(0, 255, 136, 0.06); }
.btn-success:hover { background: rgba(0, 255, 136, 0.16); }

.btn-danger  { border-color: var(--danger);  color: var(--danger);  background: rgba(255, 34, 68, 0.06); }
.btn-danger:hover  { background: rgba(255, 34, 68, 0.16); }

.btn-warning { border-color: var(--warning); color: var(--warning); background: rgba(255, 136, 0, 0.06); }
.btn-warning:hover { background: rgba(255, 136, 0, 0.16); }

.btn-wo      { border-color: var(--wo); color: var(--wo); background: rgba(138, 184, 94, 0.06); }
.btn-wo:hover{ background: rgba(138, 184, 94, 0.16); }

/* ============================================================================
   SEARCH INPUTS
   ============================================================================ */
.search-input,
.search-wrap input {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
  outline: none;
  border-radius: var(--radius);
  letter-spacing: .5px;
  transition: all .15s;
}
.search-input:focus,
.search-wrap input:focus { border-color: var(--border-strong); }
.search-input::placeholder,
.search-wrap input::placeholder { color: var(--text-muted); }

/* ============================================================================
   SHARED STATSBAR / TOOLBAR / FILTERBAR / CYCLEBAR
   CRITICAL: align-items: stretch (NOT center) so .stat-pill { height:100% } works.
   ============================================================================ */
.statsbar {
  position: fixed;
  left: 0; right: 0;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  z-index: 98;
}
.stat-cell,
.stat-pill {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 18px;
  border-right: 1px solid var(--border);
  flex: 1; min-width: 0;
  overflow: hidden;
  height: 100%;
}
.stat-cell:last-child,
.stat-pill:last-of-type,
.stat-pill:last-child { border-right: none; }

.stat-label,
.sp-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 2px;
  white-space: nowrap;
  text-transform: uppercase;
}
.stat-val,
.sp-val {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .5px;
  white-space: nowrap;
}
.sv-cyan,    .sp-cyan,   .sv-c   { color: var(--cyan);    }
.sv-green,   .sp-green,  .sv-g   { color: var(--success); }
.sv-red,     .sp-red,    .sv-r   { color: var(--danger);  }
.sv-orange,  .sp-orange, .sv-o,  .sv-or { color: var(--warning); }
.sv-yellow,  .sp-yellow          { color: var(--yellow);  }
.sv-blue,    .sp-blue             { color: var(--blue);    }
.sv-pk                            { color: var(--pk);      }
.sv-dim,     .bal-gray            { color: var(--text-muted); }
.bal-green   { color: var(--success); }
.bal-blue    { color: var(--blue);    }
.bal-orange  { color: var(--warning); }
.bal-red     { color: var(--danger);  }

/* Toolbar / filterbar — used as filter row with buttons */
.toolbar,
.filterbar,
.actionbar {
  position: fixed;
  left: 0; right: 0;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  gap: 8px;
  padding: 0 16px;
  z-index: 98;
}
.fbtn {
  font-size: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  transition: all .15s;
  white-space: nowrap;
  border-radius: var(--radius);
  text-transform: uppercase;
}
.fbtn:hover,
.fbtn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.fbtn.active-red    { border-color: var(--danger);  color: var(--danger);  background: rgba(255, 34, 68, 0.06); }
.fbtn.active-orange { border-color: var(--warning); color: var(--warning); background: rgba(255, 136, 0, 0.06); }
.fbtn.active-green  { border-color: var(--success); color: var(--success); background: rgba(0, 255, 136, 0.06); }
.fbtn.active-blue   { border-color: var(--blue);    color: var(--blue);    background: rgba(0, 136, 255, 0.06); }

.row-count,
.unread-count {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--primary);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.filter-right,
.f-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}


/* ============================================================================
   TABLES — base
   ============================================================================ */
.atable,
.rtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}
.atable thead,
.rtable thead {
  position: sticky; top: 0; z-index: 10;
}
.atable th,
.rtable th {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 400;
  background: var(--bg);
  white-space: nowrap;
  text-transform: uppercase;
}
.atable td,
.rtable td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.03);
  vertical-align: middle;
  cursor: pointer;
}
.atable tr:hover td,
.rtable tr:hover td {
  background: rgba(0, 245, 255, 0.04);
}
/* Selected row — background tint only, NEVER hard border-left */
.atable tr.selected td,
.rtable tr.selected td {
  background: rgba(0, 245, 255, 0.10);
}
/* Critical / overdue row highlights — also background tint only */
.atable tr.row-critical td,
.rtable tr.row-critical td { background: rgba(255, 34, 68, 0.06); }
.atable tr.row-overdue  td,
.rtable tr.row-overdue  td { background: rgba(255, 136, 0, 0.05); }

.atable .acct,
.atable .nm,
.atable .bal { white-space: nowrap; }
.atable .acct {
  color: var(--primary);
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .3px;
}
.atable .nm  { color: var(--text); font-size: 12px; font-family: var(--font-num); font-weight: 600; }
.atable .bal { font-family: var(--font-num); font-weight: 700; font-size: 14px; text-align: right; }

/* TABLE CELL TYPES (readings/payments/billing) */
.td-acct  { color: var(--primary);  font-family: var(--font-display); font-size: 9px; letter-spacing: .5px; white-space: nowrap; }
.td-name  { color: var(--text);     font-family: var(--font-num); font-size: 13px; font-weight: 600; white-space: nowrap; }
.td-addr  { color: var(--text-soft); font-family: var(--font-num); font-size: 12px; }
.td-num   { font-family: var(--font-num); font-size: 13px; font-weight: 600; color: var(--text); text-align: right; }
.td-usage { font-family: var(--font-num); font-size: 14px; font-weight: 700; text-align: right; }
.td-bill  { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--primary); text-align: right; }
.td-money { font-family: var(--font-num); font-size: 13px; font-weight: 600; color: var(--text); text-align: right; }
.td-total { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--text); text-align: right; }
.td-date  { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.td-ref   { font-family: var(--font-mono); font-size: 10px; color: var(--text); }
.td-amt   { font-family: var(--font-num); font-size: 13px; font-weight: 700; }

/* ============================================================================
   EMPTY STATES
   ============================================================================ */
.empty,
.empty-state,
.loading-row td {
  text-align: center;
  padding: 28px 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
}
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  gap: 12px;
}
.empty-icon { font-size: 48px; opacity: .3; }
.empty-msg  { font-family: var(--font-display); font-size: 13px; color: var(--text); letter-spacing: 3px; }
.empty-sub  { font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }

/* ============================================================================
   MODALS — shared base
   ============================================================================ */
.modal,
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 600;
  align-items: center !important;
  justify-content: center !important;
}
.modal.show,
.modal-overlay.show { display: flex !important; }

.modal > div,
.modal-overlay > .modal {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  width: 90%; max-width: 600px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
  margin: auto;
}
.modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--primary-soft), transparent);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--primary);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.modal-x,
.modal-close {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}
.modal-x:hover,
.modal-close:hover { color: var(--danger); }
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px;
  justify-content: flex-end;
}
.frow,
.frow2,
.frow3 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.frow2 { grid-template-columns: 1fr 1fr; }
.frow3 { grid-template-columns: 1fr 1fr 1fr; }
.modal-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
  letter-spacing: 1px;
  margin-top: 2px;
}
.flabel {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 5px;
  display: block;
}
.finput {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 12px;
  outline: none;
  width: 100%;
  border-radius: var(--radius);
  transition: all .15s;
}
.finput:focus { border-color: var(--border-strong); }
.finput::placeholder { color: var(--text-muted); }

/* ============================================================================
   TOAST
   ============================================================================ */
.toast {
  position: fixed;
  bottom: 90px; right: 20px;
  background: var(--bg2);
  border: 1px solid var(--primary);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--primary);
  letter-spacing: 2px;
  z-index: 900;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  border-radius: var(--radius);
  max-width: 320px;
  line-height: 1.5;
}
.toast.show { opacity: 1; }
.toast.t-ok  { border-color: var(--success); color: var(--success); }
.toast.t-err { border-color: var(--danger);  color: var(--danger); }

/* ============================================================================
   GENERIC SIDE/DETAIL PANELS (accounts, comms, etc.)
   ============================================================================ */
.detail-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  background: var(--surface-strong);
  border-left: 1px solid var(--border-strong);
  z-index: 400;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
  transform: translateX(100%);
  transition: transform .25s ease;
}
.detail-panel.open { transform: translateX(0); }
.dp-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-soft), transparent);
  position: relative;
}
.dp-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.dp-status {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid;
  font-size: 8px;
  letter-spacing: 1.5px;
  font-family: var(--font-display);
  margin-top: 6px;
  border-radius: var(--radius-sm);
}
.dp-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
}
.dp-close:hover { color: var(--danger); }
.dp-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.dp-section {
  border-bottom: 1px solid var(--border);
}
.dp-section-title {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--primary);
  padding: 8px 20px;
  background: var(--primary-soft);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}
.dp-row {
  display: flex; justify-content: space-between;
  padding: 7px 20px;
  border-bottom: 1px solid var(--border);
}
.dp-row:last-child { border-bottom: none; }
.dp-label {
  font-size: 9px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 1px;
}
.dp-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  text-align: right;
}
.dp-notes-area {
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ============================================================================
   ACTION PANEL (slide-in right, accounts uses this)
   ============================================================================ */
.action-panel {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  background: var(--surface-strong);
  border-left: 1px solid var(--border-strong);
  z-index: 400;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
}
.action-panel.show { display: flex; }
.ap-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-soft), transparent);
  display: flex; justify-content: space-between; align-items: center;
}
.ap-title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--primary);
  letter-spacing: 3px;
}
.ap-sub {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 1px;
  font-family: var(--font-mono);
}
.ap-close {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
}
.ap-close:hover { color: var(--danger); }
.ap-body { flex: 1; overflow-y: auto; padding: 20px; }
.ap-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}
.ap-btn {
  flex: 1;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  border: 1px solid;
  transition: all .15s;
  border-radius: var(--radius);
  text-transform: uppercase;
}
.ap-btn.cancel  { background: transparent; border-color: var(--border); color: var(--text-muted); }
.ap-btn.cancel:hover { border-color: var(--danger); color: var(--danger); }
.ap-btn.submit  { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.ap-btn.submit:hover { background: rgba(0, 245, 255, 0.18); }
.ap-btn.danger  { background: rgba(255, 34, 68, 0.08); border-color: var(--danger); color: var(--danger); }
.ap-btn.danger:hover { background: rgba(255, 34, 68, 0.2); }
.ap-btn.success { background: rgba(0, 255, 136, 0.08); border-color: var(--success); color: var(--success); }
.ap-btn.success:hover { background: rgba(0, 255, 136, 0.18); }

/* ============================================================================
   TXN ROWS (transaction list)
   ============================================================================ */
.txn-wrap { padding: 0; }
.txn-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.txn-row:hover { background: var(--primary-soft); }

/* ============================================================================
   MAP COMPONENTS
   ============================================================================ */
.map-info {
  position: absolute;
  bottom: 12px; left: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--primary);
  letter-spacing: 1px;
  border-radius: var(--radius);
  z-index: 10;
}
.mleg {
  position: absolute;
  bottom: 12px; right: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  border-radius: var(--radius);
  z-index: 10;
  display: flex; flex-direction: column; gap: 4px;
}
.mleg .row { display: flex; align-items: center; gap: 8px; color: var(--text-soft); }
.legdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ============================================================================
   COMMAND DIAL (index.html / command.html)
   HTML structure:
     .dial-wrap > .dial-container > .dial-svg + .dial-center + .dbtn(s)
   ============================================================================ */
.dial-wrap {
  display: flex;
  justify-content: center; align-items: center;
  height: 205px;
  position: relative;
}
.dial-container {
  position: relative;
  width: 186px; height: 186px;
}
.dial-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: drot 80s linear infinite;
  overflow: visible;
}
.dial-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.dval {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--primary);
  text-shadow: 0 0 20px var(--primary);
  line-height: 1;
}
.dlabel {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 3px;
  margin-top: 3px;
}
.dbtn {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: .5px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.dbtn:hover,
.dbtn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 14px rgba(0, 245, 255, 0.3);
}
.dicon { font-size: 14px; line-height: 1; margin-bottom: 1px; }

/* ============================================================================
   ACCOUNT CARD popover (compact card hover/click)
   ============================================================================ */
/* ============================================================================
   ACCOUNT QUICK-CARD OVERLAY (.acard) — opens from map dot or directory click
   Becomes a full-screen centered overlay with backdrop when .show is added
   ============================================================================ */
.acard {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 700;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.acard.show { display: flex; }
/* Inner card sits centered inside the overlay */
.acard > .achead,
.acard > .acbody,
.acard > .acbtns {
  /* These are direct children of .acard in this markup; they need to sit inside a "card box".
     We use a contents-style trick: make .acard children stack inside an absolutely-sized box
     by treating .acard itself as the flex container and using a synthetic card via a max-width grouping. */
}
/* The actual card visual is composed by giving .acard a pseudo-frame around its three children */
.acard.show {
  /* Use grid to compose the card from its three direct children */
}
/* The card content frame — using a clever CSS-only trick: wrap children visually with a single
   "card" appearance via outline+background painted on the .acard itself when .show is active */
.acard.show {
  /* paint backdrop + center contents */
}
/* Build the card chrome: use a positioning wrapper via display:contents would lose styling,
   so instead we paint the card around the three direct children with a single bordered box.
   We do this by making .acard .achead the top of a vertical flex stack with a max-width. */
.acard .achead,
.acard .acbody,
.acard .acbtns { width: 100%; max-width: 560px; box-sizing: border-box; }
.acard .achead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px 20px 14px;
  position: relative;
}
.acard .achead::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.acard .acbody {
  background: var(--bg);
  border-left: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  padding: 4px 20px;
  max-height: 56vh;
  overflow-y: auto;
  box-shadow: 0 0 80px rgba(0, 245, 255, 0.08), 0 0 200px rgba(0, 0, 0, 0.6);
}
.acard .acbtns {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 12px 20px;
  display: flex; gap: 8px;
}

.acard .acclose {
  position: static;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  font-family: var(--font-display);
  align-self: flex-start;
  transition: color .15s;
}
.acard .acclose:hover { color: var(--primary); }

.acnum {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 2.5px;
  margin-bottom: 4px;
}
.acname {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.acstat {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Status modifier classes — applied by JS in showCard */
.acstat.st-current   { color: var(--success);    border-color: var(--success);    background: rgba(0, 255, 136, 0.06); }
.acstat.st-credit    { color: var(--blue);       border-color: var(--blue);       background: rgba(0, 136, 255, 0.06); }
.acstat.st-pastdue   { color: var(--warning);    border-color: var(--warning);    background: rgba(255, 136, 0, 0.06); }
.acstat.st-critical  { color: var(--danger);     border-color: var(--danger);     background: rgba(255, 34, 68, 0.06); }
.acstat.st-religious { color: var(--text-muted); border-color: var(--text-muted); background: transparent; }
.acstat.st-other     { color: var(--yellow);     border-color: var(--yellow);     background: rgba(232, 180, 0, 0.06); }

.acrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 245, 255, 0.06);
  gap: 12px;
}
.acrow:last-child { border-bottom: none; }
.acrl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  white-space: nowrap;
  text-transform: uppercase;
}
.acrv {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.acbtn {
  flex: 1;
  font-family: var(--font-display);
  font-size: 9px;
  padding: 9px 8px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  letter-spacing: 1.5px;
  border-radius: var(--radius);
  transition: all .15s;
  text-transform: uppercase;
}
.acbtn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.acbtn.pri {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.acbtn.pri:hover { background: rgba(0, 245, 255, 0.18); }

/* ============================================================================
   BOIL WATER NOTICE OVERLAY (#bwnModal) — uses .modal base from earlier
   .modal already provides full-screen overlay + centering when .show is added
   ============================================================================ */
#bwnModal .bwn-card {
  background: var(--bg);
  border: 1px solid var(--danger);
  width: 92%; max-width: 560px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 0 80px rgba(255, 34, 68, 0.20), 0 0 200px rgba(0, 0, 0, 0.7);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
#bwnModal .bwn-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--danger), transparent);
}
.bwn-hdr {
  background: linear-gradient(135deg, rgba(255, 34, 68, 0.14), transparent);
  border-bottom: 1px solid rgba(255, 34, 68, 0.30);
  padding: 14px 18px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.bwn-title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--danger);
  letter-spacing: 2.5px;
  text-shadow: 0 0 12px rgba(255, 34, 68, 0.45);
  margin-bottom: 4px;
}
.bwn-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 1px;
}
.bwn-x {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  font-family: var(--font-display);
  padding: 4px 8px;
  transition: color .15s;
}
.bwn-x:hover { color: var(--danger); }

.bwn-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.bwn-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 34, 68, 0.08);
  border: 1px solid rgba(255, 34, 68, 0.30);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.bwn-alert-icon {
  font-size: 22px;
  flex-shrink: 0;
  color: var(--danger);
  line-height: 1;
}
.bwn-alert-title {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--danger);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.bwn-alert-desc {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
}
.bwn-checklist {
  display: flex; flex-direction: column;
  gap: 6px;
}
.bwn-check {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
}
.bwn-chk-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.bwn-chk-icon.run  { color: var(--danger);     animation: pp 1.4s infinite; }
.bwn-chk-icon.ok   { color: var(--success); }
.bwn-chk-icon.warn { color: var(--warning); }
.bwn-chk-icon.dim  { color: var(--text-muted); }
.bwn-chk-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bwn-chk-val {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.4px;
  flex-shrink: 0;
}
.bwn-chk-val.run  { color: var(--danger); }
.bwn-chk-val.ok   { color: var(--success); }
.bwn-chk-val.warn { color: var(--warning); }
.bwn-chk-val.dim  { color: var(--text-muted); }

.bwn-foot {
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 34, 68, 0.20);
  display: flex; gap: 8px;
}
.bwn-btn {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.8px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
  transition: all .15s;
  border-radius: var(--radius);
  text-transform: uppercase;
}
.bwn-btn-close   { border-color: var(--border-strong); color: var(--text-muted); }
.bwn-btn-close:hover { color: var(--text); border-color: var(--text-soft); }
.bwn-btn-danger  { border-color: var(--danger); color: var(--danger); background: rgba(255, 34, 68, 0.08); }
.bwn-btn-danger:hover { background: rgba(255, 34, 68, 0.18); }
.bwn-btn-primary { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.bwn-btn-primary:hover { background: rgba(0, 245, 255, 0.18); }

/* End ACCOUNT CARD + BWN OVERLAY block */

/* ============================================================================
   PAGE-SCOPED OVERRIDES — minimal, only where Enterprise structure needs it
   ============================================================================ */

/* ─── [data-page="login"] ─────────────────────────────────────────────────── */
[data-page="login"] .card {
  position: relative; z-index: 1;
  width: 420px; max-width: 94vw;
  background: rgba(2, 12, 6, 0.96);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 80px rgba(0, 255, 136, 0.07), 0 0 200px rgba(0, 255, 136, 0.03);
  border-radius: var(--radius);
}
[data-page="login"] .card-top {
  padding: 36px 36px 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), transparent);
  text-align: center;
}
[data-page="login"] .logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  color: var(--success);
  letter-spacing: 10px;
  text-shadow: 0 0 30px rgba(0, 255, 136, 0.6), 0 0 80px rgba(0, 255, 136, 0.2);
  margin-bottom: 10px;
  display: block;
  animation: none;  /* override global lp pulse */
}
[data-page="login"] .tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 4px;
  margin-bottom: 4px;
}
[data-page="login"] .version {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 2px;
}
[data-page="login"] .card-body { padding: 32px 36px; }
[data-page="login"] .field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 18px;
}
[data-page="login"] .flabel {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-soft);
  letter-spacing: 2.5px;
}
[data-page="login"] .finput {
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.22);
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 11px 14px;
  outline: none;
  width: 100%;
  transition: all .15s;
  letter-spacing: .5px;
  border-radius: var(--radius);
}
[data-page="login"] .finput:focus {
  border-color: var(--border-strong);
  background: rgba(0, 255, 136, 0.07);
}
[data-page="login"] .finput::placeholder { color: var(--text-muted); }
[data-page="login"] .login-btn {
  width: 100%;
  padding: 13px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 3px;
  border: 1px solid var(--success);
  color: var(--success);
  background: rgba(0, 255, 136, 0.06);
  cursor: pointer;
  transition: all .2s;
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
[data-page="login"] .login-btn:hover:not(:disabled) {
  background: rgba(0, 255, 136, 0.14);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.15);
}
[data-page="login"] .login-btn:disabled { opacity: .5; cursor: not-allowed; }
[data-page="login"] .login-btn.loading::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--success);
  animation: btnLoad 1.2s ease-in-out infinite;
}
[data-page="login"] .error-msg {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--danger);
  letter-spacing: 1px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 34, 68, 0.3);
  background: rgba(255, 34, 68, 0.05);
  margin-top: 14px;
  display: none;
  line-height: 1.5;
  border-radius: var(--radius);
}
[data-page="login"] .error-msg.show { display: block; }
[data-page="login"] .card-footer {
  padding: 16px 36px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
[data-page="login"] .portal-link {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-decoration: none;
  transition: color .15s;
}
[data-page="login"] .portal-link:hover { color: var(--success); }
[data-page="login"] .secure-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
  display: flex; align-items: center; gap: 5px;
}
[data-page="login"] .secure-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 5px var(--success);
}

/* ─── [data-page="index"] / [data-page="command"]  ─────────────────────────── */
[data-page="index"] .main,
[data-page="command"] .main {
  position: fixed;
  top: 72px; bottom: 80px;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 268px 1fr 268px;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}
[data-page="index"] .col,
[data-page="command"] .col {
  display: flex; flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  min-height: 0;
}
/* Middle column has the map — keep it taking full vertical so map fills space */
[data-page="index"] .main > .col:nth-child(2),
[data-page="command"] .main > .col:nth-child(2) {
  overflow: hidden;
}
[data-page="index"] .map-panel,
[data-page="command"] .map-panel {
  flex: 1 !important;
  min-height: 200px;
  overflow: hidden;
  position: relative;
}
[data-page="index"] .map-panel #mapGl,
[data-page="command"] .map-panel #mapGl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Force Mapbox tiles to render on a dark background even before the style loads */
[data-page="index"] .map-panel,
[data-page="command"] .map-panel { background: #020c14; }
[data-page="index"] .mapboxgl-canvas-container,
[data-page="command"] .mapboxgl-canvas-container,
[data-page="index"] .mapboxgl-canvas,
[data-page="command"] .mapboxgl-canvas { background: #020c14; }
/* Hide Mapbox attribution/logo in tight panels (still required by ToS in production —
   reveal on hover by un-setting via .mapboxgl-ctrl-attrib if needed) */
[data-page="index"] .mapboxgl-ctrl-bottom-left,
[data-page="command"] .mapboxgl-ctrl-bottom-left { display: none; }
[data-page="index"] .mapboxgl-ctrl-bottom-right,
[data-page="command"] .mapboxgl-ctrl-bottom-right { opacity: .35; transform: scale(.75); transform-origin: bottom right; }
[data-page="index"] .mleg,
[data-page="command"] .mleg {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(2, 12, 20, 0.88);
  border: 1px solid var(--border);
  padding: 6px 8px;
  z-index: 10;
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .8px;
  color: var(--text-soft);
}
[data-page="index"] .mleg .legrow,
[data-page="command"] .mleg .legrow {
  display: flex; align-items: center;
  gap: 6px;
  font-size: 8px;
  letter-spacing: .8px;
  margin-top: 0;
}
[data-page="index"] .legdot,
[data-page="command"] .legdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Map filter buttons (ALL / CRITICAL / CURRENT in map panel header) */
.map-fbtns { display: flex; gap: 4px; }
.map-fbtn {
  font-family: var(--font-mono);
  font-size: 7px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  letter-spacing: 1px;
  border-radius: var(--radius);
  transition: all .15s;
  text-transform: uppercase;
}
.map-fbtn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.map-fbtn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.2);
}

/* ─── [data-page="accounts"] ──────────────────────────────────────────────── */

/* Alias old var names */
[data-page="accounts"] {
  --text-mid: var(--text-soft);
  --text-dim: var(--text-muted);
  --border-hi: var(--border-strong);
  --bg2: var(--bg);
  --purple: #aa00ff;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
[data-page="accounts"] .statsbar {
  top: 46px; height: 50px; padding: 0;
}
[data-page="accounts"] .toolbar {
  position: fixed; top: 96px; left: 0; right: 0;
  height: 44px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 18px; gap: 10px;
  z-index: 97; overflow-x: auto;
  flex-wrap: nowrap;
}
[data-page="accounts"] .main {
  position: fixed;
  top: 140px; bottom: 78px;
  left: 0; right: 0;
  overflow-y: auto;
}

/* ── Topbar helpers ─────────────────────────────────────────────────────── */
[data-page="accounts"] .tb-group    { display: flex; align-items: center; gap: 14px; }
[data-page="accounts"] .tb-tag      { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 2px; }
[data-page="accounts"] .tb-op-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 2px; }
[data-page="accounts"] .op-name     { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .5px; }

/* ── Stats bar — stat-pill layout (unique to accounts) ───────────────────── */
[data-page="accounts"] .stat-pill {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 16px;
  border-right: 1px solid var(--border);
  flex: 1; min-width: 0; overflow: hidden;
  gap: 1px;
}
[data-page="accounts"] .stat-pill:last-of-type { border-right: none; }
[data-page="accounts"] .sp-label {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--text-muted); letter-spacing: 1.5px; white-space: nowrap;
}
[data-page="accounts"] .sp-val {
  font-family: var(--font-num) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: .5px;
  white-space: nowrap;
}
[data-page="accounts"] .stat-pill .sp-val {
  font-family: var(--font-num) !important;
}
[data-page="accounts"] .sp-cyan   { color: var(--cyan); }
[data-page="accounts"] .sp-green  { color: var(--success); }
[data-page="accounts"] .sp-red    { color: var(--danger); }
[data-page="accounts"] .sp-orange { color: var(--warning); }
[data-page="accounts"] .sp-blue   { color: var(--blue); }
[data-page="accounts"] .bal-gray  { color: var(--text-muted); }
[data-page="accounts"] .bal-green { color: var(--success); }
[data-page="accounts"] .bal-red   { color: var(--danger); }
[data-page="accounts"] .bal-orange{ color: var(--warning); }
[data-page="accounts"] .bal-blue  { color: var(--blue); }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
[data-page="accounts"] .search-wrap {
  position: relative; flex: 1; max-width: 380px;
}
[data-page="accounts"] .search-wrap::before {
  content: '⌕'; position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--text-muted);
  font-size: 16px; pointer-events: none; opacity: .7;
}
[data-page="accounts"] .search-input {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-mono); font-size: 11px;
  padding: 6px 10px 6px 32px; outline: none; letter-spacing: .5px;
  border-radius: var(--radius);
}
[data-page="accounts"] .search-input::placeholder { color: var(--text-muted); }
[data-page="accounts"] .search-input:focus { border-color: var(--border-strong); }
[data-page="accounts"] .filter-btns { display: flex; gap: 5px; flex-shrink: 0; }
[data-page="accounts"] .fbtn {
  font-family: var(--font-mono); font-size: 8px; padding: 4px 9px;
  border: 1px solid var(--border); color: var(--text-muted);
  background: transparent; cursor: pointer; letter-spacing: 1px;
  transition: all .15s; white-space: nowrap; border-radius: var(--radius);
}
[data-page="accounts"] .fbtn:hover,
[data-page="accounts"] .fbtn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 245, 255, .06); }
[data-page="accounts"] .new-acct-btn {
  font-family: var(--font-display); font-size: 8px; padding: 6px 14px;
  border: 1px solid var(--success); color: var(--success);
  background: rgba(0, 255, 136, 0.06); cursor: pointer; letter-spacing: 1px;
  margin-left: auto; border-radius: var(--radius); transition: all .15s; flex-shrink: 0;
}
[data-page="accounts"] .new-acct-btn:hover { background: rgba(0, 255, 136, 0.16); }

/* ── Accounts table ──────────────────────────────────────────────────────── */
[data-page="accounts"] .acct-list { width: 100%; }
[data-page="accounts"] .atable { width: 100%; border-collapse: collapse; }
[data-page="accounts"] .atable thead { position: sticky; top: 0; z-index: 10; }
[data-page="accounts"] .atable th { font-family: var(--font-display); font-size: 7px; letter-spacing: 1.5px; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; background: var(--bg); white-space: nowrap; cursor: pointer; }
[data-page="accounts"] .atable th:hover { color: var(--cyan); }
[data-page="accounts"] .atable th.sort-asc::after  { content: ' ▲'; color: var(--cyan); }
[data-page="accounts"] .atable th.sort-desc::after { content: ' ▼'; color: var(--cyan); }
[data-page="accounts"] .atable td { padding: 8px 12px; border-bottom: 1px solid rgba(0, 245, 255, 0.04); vertical-align: middle; }
[data-page="accounts"] .atable tr:hover td { background: rgba(0, 245, 255, .03); cursor: pointer; }
[data-page="accounts"] .atable tr.selected td { background: rgba(0, 245, 255, .06); border-left: 2px solid var(--cyan); }
[data-page="accounts"] .loading-row td { color: var(--text-muted); font-size: 10px; letter-spacing: 2px; text-align: center; padding: 60px; font-family: var(--font-mono); }

/* ── Table cell classes ──────────────────────────────────────────────────── */
[data-page="accounts"] .td-acct { font-family: var(--font-display); font-size: 9px; color: var(--cyan); letter-spacing: 1px; }
[data-page="accounts"] .td-name { font-family: var(--font-num); font-size: 14px; font-weight: 600; color: var(--text); }
[data-page="accounts"] .td-addr { font-family: var(--font-num); font-size: 14px; font-weight: 400; color: var(--text-soft); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
/* Last payment: date + green amount below */
[data-page="accounts"] .td-date { font-family: var(--font-num); font-size: 13px; color: var(--text-muted); white-space: nowrap; line-height: 1.4; }
[data-page="accounts"] .td-date span { color: var(--success); font-size: 13px; font-family: var(--font-num); font-weight: 600; }
/* Balance: Orbitron to match stat counts */
[data-page="accounts"] .td-bal { font-family: var(--font-num); font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }

/* ── Status pills in table ────────────────────────────────────────────────── */
[data-page="accounts"] .pill { font-family: var(--font-display); font-size: 7px; padding: 2px 8px; border: 1px solid; letter-spacing: 1px; white-space: nowrap; border-radius: var(--radius); }
[data-page="accounts"] .plan-pill { font-family: var(--font-display); font-size: 7px; padding: 2px 7px; border: 1px solid var(--warning); color: var(--warning); background: rgba(255,136,0,.06); letter-spacing: 1px; border-radius: var(--radius); }

/* ── Detail panel — overrides global .detail-panel + .dp-header ──────────── */
[data-page="accounts"] .detail-panel {
  position: fixed;
  top: 140px;
  right: 0;
  bottom: 78px;
  width: 620px;
  background: var(--bg);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  z-index: 400;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.7);
  transform: translateX(100%);
  transition: transform .25s ease;
}
[data-page="accounts"] .detail-panel.open { transform: translateX(0); }

[data-page="accounts"] .dp-header {
  padding: 8px 44px 8px 22px !important;
  border-bottom: 1px solid var(--border-strong) !important;
  background: rgba(2, 18, 28, 0.98) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 0 !important;
  height: auto !important;
  z-index: 1;
}
[data-page="accounts"] .dp-header .dp-acct {
  display: inline-block !important;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--cyan);
  letter-spacing: 2px;
  margin: 0 !important;
  text-transform: uppercase;
  font-weight: 600;
  flex-shrink: 0;
}
[data-page="accounts"] .dp-header .dp-name {
  display: inline-block !important;
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin: 0 !important;
  letter-spacing: .3px;
  text-shadow: none;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-page="accounts"] .dp-header .dp-status {
  display: inline-block !important;
  font-family: var(--font-display);
  font-size: 8px;
  padding: 3px 10px;
  border: 1px solid;
  letter-spacing: 1.5px;
  border-radius: var(--radius);
  margin: 0 !important;
  background: transparent;
  flex-shrink: 0;
}
[data-page="accounts"] .detail-panel .dp-close {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  transform: none !important;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  z-index: 100;
  padding: 4px 8px;
}
[data-page="accounts"] .detail-panel .dp-close:hover { color: var(--danger); }
[data-page="accounts"] .dp-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; z-index: 10; }
[data-page="accounts"] .dp-close:hover { color: var(--danger); }

/* Body splits into fixed-height info grid + scrollable txn register */
[data-page="accounts"] .dp-body {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0;
}

/* ── Compact info grid (top of body, no scroll) ──────────────────────────── */
[data-page="accounts"] .dp-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding: 4px 2px;
}
[data-page="accounts"] .dp-info-cell {
  padding: 4px 12px;
  background: transparent;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  border: none;
}
[data-page="accounts"] .dp-info-label {
  font-size: 7px !important;
  margin: 0;
}
[data-page="accounts"] .dp-info-val {
  font-size: 11px !important;
  line-height: 1.2;
}
[data-page="accounts"] .dp-info-cell.dp-info-wide { grid-column: span 3; }
[data-page="accounts"] .dp-info-label {
  font-family: var(--font-mono); font-size: 7px;
  color: var(--text-muted); letter-spacing: 1.5px;
  text-transform: uppercase;
}
[data-page="accounts"] .dp-info-val {
  font-family: var(--font-num); font-size: 12px;
  color: var(--text); font-weight: 600;
  white-space: nowrap;
}
[data-page="accounts"] .dp-info-truncate { overflow: hidden; text-overflow: ellipsis; }
[data-page="accounts"] .dp-info-cyan { color: var(--cyan); font-family: var(--font-display); letter-spacing: 1px; font-size: 11px; }
[data-page="accounts"] .dp-info-bal { font-family: var(--font-num); font-weight: 700; font-size: 12px; }
[data-page="accounts"] .dp-info-pmt-date { color: var(--text-muted); font-size: 11px; }
[data-page="accounts"] .dp-info-pmt-amt { color: var(--success); font-weight: 700; }

/* ── Transaction register section (scrollable bottom of body) ─────────────── */
[data-page="accounts"] .dp-txn-section {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-page="accounts"] .dp-section-title {
  font-family: var(--font-display); font-size: 9px; letter-spacing: 2.5px;
  color: var(--cyan); padding: 9px 18px;
  background: rgba(0,245,255,.04);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
[data-page="accounts"] .dp-txn-count { color: var(--text-muted); font-size: 7px; margin-left: 8px; letter-spacing: 1px; }
[data-page="accounts"] .txn-wrap { flex: 1; overflow-y: auto; padding: 0; }
[data-page="accounts"] .dp-txn-loading { padding: 20px; text-align: center; color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; }

/* ── Transaction register ────────────────────────────────────────────────── */
[data-page="accounts"] .txn-wrap { padding: 0; }
[data-page="accounts"] .txn-row { display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-bottom: 1px solid rgba(0,245,255,.03); font-size: 9px; }
[data-page="accounts"] .txn-row:hover { background: rgba(0,245,255,.03); }
[data-page="accounts"] .txn-date { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
[data-page="accounts"] .txn-type { font-family: var(--font-display); font-size: 7px; padding: 2px 6px; border: 1px solid; letter-spacing: 1px; white-space: nowrap; flex-shrink: 0; border-radius: var(--radius); }
[data-page="accounts"] .txn-desc { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-page="accounts"] .txn-amt { font-family: var(--font-num); font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; margin-left: auto; }

/* ── Action buttons grid at panel bottom (3 cols × 2 rows = 6 buttons) ─── */
[data-page="accounts"] .dp-actions { padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; border-top: 1px solid var(--border-strong); background: var(--surface); flex-shrink: 0; }
[data-page="accounts"] .dp-btn { padding: 8px; border: 1px solid var(--border); color: var(--text-muted); background: transparent; font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; cursor: pointer; transition: all .15s; text-align: center; border-radius: var(--radius); }
[data-page="accounts"] .dp-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,245,255,.05); }
[data-page="accounts"] .dp-btn.primary { border-color: var(--cyan); color: var(--cyan); background: rgba(0,245,255,.07); }
[data-page="accounts"] .dp-btn.danger  { border-color: var(--danger); color: var(--danger); }
[data-page="accounts"] .dp-btn.danger:hover  { background: rgba(255,34,68,.08); }
[data-page="accounts"] .dp-btn.success { border-color: var(--success); color: var(--success); }
[data-page="accounts"] .dp-btn.success:hover { background: rgba(0,255,136,.08); }

/* ── Action panels (payment, arrangement, notice, disconnect) ───────────── */
[data-page="accounts"] .action-panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 480px; background: rgba(2,10,20,.98); border-left: 1px solid var(--border-strong); z-index: 500; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.6); }
[data-page="accounts"] .action-panel.show { display: flex; }
[data-page="accounts"] .ap-header { padding: 16px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(0,245,255,.08), transparent); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
[data-page="accounts"] .ap-title { font-family: var(--font-display); font-size: 12px; color: var(--cyan); letter-spacing: 3px; }
[data-page="accounts"] .ap-sub { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; margin-top: 3px; }
[data-page="accounts"] .ap-close { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; }
[data-page="accounts"] .ap-close:hover { color: var(--danger); }
[data-page="accounts"] .ap-body { flex: 1; overflow-y: auto; padding: 20px; }
[data-page="accounts"] .ap-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-shrink: 0; }
[data-page="accounts"] .ap-btn { flex: 1; padding: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; cursor: pointer; border: 1px solid; transition: all .15s; border-radius: var(--radius); background: transparent; }
[data-page="accounts"] .ap-btn.cancel  { border-color: var(--border); color: var(--text-muted); }
[data-page="accounts"] .ap-btn.cancel:hover  { border-color: var(--danger); color: var(--danger); }
[data-page="accounts"] .ap-btn.submit  { background: rgba(0,245,255,.08); border-color: var(--cyan); color: var(--cyan); }
[data-page="accounts"] .ap-btn.submit:hover  { background: rgba(0,245,255,.18); }
[data-page="accounts"] .ap-btn.danger  { background: rgba(255,34,68,.08); border-color: var(--danger); color: var(--danger); }
[data-page="accounts"] .ap-btn.danger:hover  { background: rgba(255,34,68,.2); }
[data-page="accounts"] .ap-btn.success { background: rgba(0,255,136,.06); border-color: var(--success); color: var(--success); }
[data-page="accounts"] .ap-btn.success:hover { background: rgba(0,255,136,.15); }

/* ── Form elements inside action panels ─────────────────────────────────── */
[data-page="accounts"] .form-section { margin-bottom: 18px; }
[data-page="accounts"] .form-label { font-family: var(--font-display); font-size: 8px; color: var(--text-muted); letter-spacing: 2px; margin-bottom: 6px; display: block; }
[data-page="accounts"] .form-row   { margin-bottom: 12px; }
[data-page="accounts"] .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
[data-page="accounts"] .form-input,
[data-page="accounts"] .form-select { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 11px; padding: 8px 10px; outline: none; transition: all .15s; border-radius: var(--radius); }
[data-page="accounts"] .form-input:focus,
[data-page="accounts"] .form-select:focus { border-color: var(--border-strong); }
[data-page="accounts"] .form-select option { background: var(--bg); color: var(--text); }

/* ── Modal (new account) ─────────────────────────────────────────────────── */
[data-page="accounts"] .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 600; align-items: center; justify-content: center; }
[data-page="accounts"] .modal.show { display: flex; }
[data-page="accounts"] .modal-box { background: var(--bg); border: 1px solid var(--border-strong); width: 580px; max-width: 94vw; max-height: 88vh; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
[data-page="accounts"] .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, rgba(0,245,255,.07), transparent); flex-shrink: 0; }
[data-page="accounts"] .modal-close { background: transparent; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; }
[data-page="accounts"] .modal-close:hover { color: var(--danger); }
[data-page="accounts"] .modal-body { padding: 20px; overflow-y: auto; flex: 1; }
[data-page="accounts"] .modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
[data-page="accounts"] .modal-btn { font-family: var(--font-display); font-size: 8px; padding: 9px 18px; border: 1px solid; cursor: pointer; letter-spacing: 1px; background: transparent; transition: all .15s; border-radius: var(--radius); }
[data-page="accounts"] .modal-btn.submit { border-color: var(--success); color: var(--success); }
[data-page="accounts"] .modal-btn.submit:hover { background: rgba(0,255,136,.1); }
[data-page="accounts"] .modal-btn.cancel { border-color: var(--border); color: var(--text-muted); }
[data-page="accounts"] .modal-btn.cancel:hover { border-color: var(--danger); color: var(--danger); }

/* ── Clickable BILL pill in transaction register ─────────────────────────── */
[data-page="accounts"] .txn-type-clickable { cursor: pointer; transition: all .15s; }
[data-page="accounts"] .txn-type-clickable:hover { background: rgba(255, 136, 0, 0.12); transform: translateY(-1px); }

/* ── Comm log panel (account-scoped communication history) ────────── */
[data-page="accounts"] .comm-empty {
  padding: 30px 20px; text-align: center;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: 2px;
}
[data-page="accounts"] .comm-row {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.05);
  transition: background .15s;
}
[data-page="accounts"] .comm-row:hover { background: rgba(0, 245, 255, 0.03); }
[data-page="accounts"] .comm-row-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 5px; flex-wrap: wrap;
}
[data-page="accounts"] .comm-date {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: .5px;
  flex-shrink: 0;
}
[data-page="accounts"] .comm-cat {
  font-family: var(--font-display); font-size: 7px;
  padding: 2px 7px; border: 1px solid;
  letter-spacing: 1.2px; white-space: nowrap;
  border-radius: var(--radius); flex-shrink: 0;
}
[data-page="accounts"] .comm-dir {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-soft); letter-spacing: .5px;
}
[data-page="accounts"] .comm-status {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--text-muted); letter-spacing: 1px;
  margin-left: auto;
}
[data-page="accounts"] .comm-desc {
  font-family: var(--font-num); font-size: 12px;
  color: var(--text); line-height: 1.4;
  margin-bottom: 4px;
}
[data-page="accounts"] .comm-meta {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--text-muted); letter-spacing: 1px;
}

/* ── Form section title (used inside edit account panel) ──────────── */
[data-page="accounts"] .form-section-title {
  font-family: var(--font-display); font-size: 8px;
  color: var(--cyan); letter-spacing: 2.5px;
  margin-bottom: 10px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

/* ── Nav alert badge ─────────────────────────────────────────────────────── */
[data-page="accounts"] .navalert { position: absolute; top: 5px; right: 5px; background: var(--danger); color: #fff; font-family: var(--font-display); font-size: 7px; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ─── [data-page="billing"] ───────────────────────────────────────────────── */
[data-page="billing"] .cyclebar {
  position: fixed;
  top: 46px; left: 0; right: 0;
  height: 52px;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 10px;
  z-index: 99;
  overflow-x: auto;
}
[data-page="billing"] .cycle-select {
  background: var(--primary-soft);
  border: 1px solid var(--border-strong);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 10px;
  padding: 6px 14px;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  min-width: 190px;
  flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="billing"] .cycle-select option {
  background: var(--bg2);
  color: var(--primary);
  font-family: var(--font-mono);
  letter-spacing: 1px;
}
[data-page="billing"] .cbar-divider {
  width: 1px; height: 32px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
}
[data-page="billing"] .abtn {
  font-family: var(--font-display);
  font-size: 8px;
  padding: 7px 13px;
  border: 1px solid;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  white-space: nowrap;
  background: transparent;
  flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="billing"] .abtn:disabled { opacity: .28; cursor: not-allowed; pointer-events: none; }
[data-page="billing"] .abtn-primary { border-color: var(--primary); color: var(--primary); }
[data-page="billing"] .abtn-primary:hover { background: var(--primary-soft); }
[data-page="billing"] .abtn-success { border-color: var(--success); color: var(--success); }
[data-page="billing"] .abtn-success:hover { background: rgba(0, 255, 136, 0.1); }
[data-page="billing"] .abtn-danger { border-color: var(--danger); color: var(--danger); }
[data-page="billing"] .abtn-danger:hover { background: rgba(255, 34, 68, 0.1); }
[data-page="billing"] .abtn-dim { border-color: rgba(232, 180, 0, 0.28); color: rgba(232, 180, 0, 0.42); }
[data-page="billing"] .abtn-dim:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
[data-page="billing"] .abtn-cyan { border-color: var(--cyan); color: var(--cyan); }
[data-page="billing"] .abtn-cyan:hover { background: rgba(0, 245, 255, 0.08); }
[data-page="billing"] .statsbar {
  top: 98px; height: 56px;
}
[data-page="billing"] .filterbar {
  top: 154px; height: 38px;
}
[data-page="billing"] .main {
  position: fixed;
  top: 192px; bottom: 78px;
  left: 0; right: 0;
  overflow-y: auto;
}
/* ── Cycle status badges ─────────────────────────────────────────────────── */
[data-page="billing"] .status-badge {
  font-family: var(--font-display);
  font-size: 9px;
  padding: 4px 12px;
  border: 1px solid;
  letter-spacing: 2px;
  display: inline-block;
}
[data-page="billing"] .sb-open {
  border-color: var(--success);
  color: var(--success);
  background: rgba(0, 255, 136, 0.08);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.15);
}
[data-page="billing"] .sb-closed {
  border-color: var(--text-soft);
  color: var(--text-soft);
}

/* ── Cycle gallery — ALL CYCLES view ────────────────────────────────────── */
[data-page="billing"] .gallery {
  padding: 18px;
}
[data-page="billing"] .gallery-header {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--text-soft);
  letter-spacing: 3px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
[data-page="billing"] .cycle-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: rgba(232, 180, 0, 0.025);
  margin-bottom: 4px;
  cursor: pointer;
  transition: all .2s;
}
[data-page="billing"] .cycle-card:hover {
  border-color: var(--border-strong);
  background: rgba(232, 180, 0, 0.06);
}
[data-page="billing"] .cycle-card.is-open {
  border-color: rgba(0, 255, 136, 0.4);
  background: rgba(0, 255, 136, 0.03);
}
[data-page="billing"] .cycle-card.is-open:hover {
  background: rgba(0, 255, 136, 0.07);
}
[data-page="billing"] .cc-month {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--yellow);
  letter-spacing: 2px;
  min-width: 100px;
  text-shadow: 0 0 10px rgba(232, 180, 0, 0.25);
}
[data-page="billing"] .cc-month.open-text {
  color: var(--green);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}
[data-page="billing"] .cc-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
[data-page="billing"] .cc-dates {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
  letter-spacing: 1px;
}
[data-page="billing"] .cc-stat-group {
  display: flex;
  gap: 14px;
  margin-left: auto;
}
[data-page="billing"] .cc-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
[data-page="billing"] .cc-stat-label {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}
[data-page="billing"] .cc-stat-val {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
[data-page="billing"] .cc-stat-val.open-text {
  color: var(--success);
}
[data-page="billing"] .cc-arrow {
  color: var(--text-muted);
  font-size: 18px;
  margin-left: 10px;
}

/* ── Billing-page table cells — match old hardcoded values from billing(6).html ── */
/* td-name: NO font-family override → inherits Rajdhani 400 from body, then 13px/600 here */
[data-page="billing"] .td-name {
  font-family: var(--font-num);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
[data-page="billing"] .td-acct {
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .5px;
  white-space: nowrap;
}
[data-page="billing"] .td-num {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
[data-page="billing"] .td-money {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  color: var(--yellow);
  text-align: right;
  white-space: nowrap;
}
[data-page="billing"] .td-total {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(232, 180, 0, .3);
}
/* stat-val on billing → Rajdhani 22px 700 — matches other pages */
[data-page="billing"] .stat-val {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0px;
  white-space: nowrap;
  text-shadow: 0 0 10px currentColor;
}

/* ─── [data-page="readings"] ──────────────────────────────────────────────── */
[data-page="readings"] .cyclebar {
  position: fixed;
  top: 46px; left: 0; right: 0;
  height: 56px;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 20px;
  z-index: 99;
}
[data-page="readings"] .cycle-group {
  display: flex; flex-direction: column;
  gap: 2px;
}
[data-page="readings"] .cycle-label {
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 2px;
  font-family: var(--font-mono);
}
[data-page="readings"] .cycle-val {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--primary);
  letter-spacing: 1px;
}
[data-page="readings"] .cycle-input {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  outline: none;
  width: 130px;
  border-radius: var(--radius);
}
[data-page="readings"] .cycle-input:focus { border-color: var(--border-strong); }
[data-page="readings"] .cycle-divider {
  width: 1px; height: 36px;
  background: var(--border);
  margin: 0 4px;
}
[data-page="readings"] .progress-wrap {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 4px;
}
[data-page="readings"] .progress-label {
  display: flex; justify-content: space-between;
  font-size: 9px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  letter-spacing: 1px;
}
[data-page="readings"] .progress-bar {
  height: 6px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 1px;
  overflow: hidden;
}
[data-page="readings"] .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--cyan));
  box-shadow: 0 0 8px var(--success);
  transition: width .5s ease;
}
[data-page="readings"] .cycle-btn {
  font-family: var(--font-display);
  font-size: 8px;
  padding: 7px 14px;
  border: 1px solid;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  white-space: nowrap;
  border-radius: var(--radius);
}
[data-page="readings"] .cycle-btn.primary { border-color: var(--success); color: var(--success); background: rgba(0, 255, 136, 0.06); }
[data-page="readings"] .cycle-btn.primary:hover { background: rgba(0, 255, 136, 0.18); }
[data-page="readings"] .cycle-btn.secondary { border-color: var(--border); color: var(--text-soft); background: transparent; }
[data-page="readings"] .cycle-btn.secondary:hover { border-color: var(--success); color: var(--success); }
[data-page="readings"] .cycle-btn.danger { border-color: var(--warning); color: var(--warning); background: rgba(255, 136, 0, 0.06); }
[data-page="readings"] .cycle-btn.danger:hover { background: rgba(255, 136, 0, 0.18); }
[data-page="readings"] .filterbar {
  top: 102px; height: 38px;
}
[data-page="readings"] .main {
  position: fixed;
  top: 140px; bottom: 78px;
  left: 0; right: 0;
  overflow-y: auto;
}
[data-page="readings"] .read-input {
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: var(--success);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 8px;
  outline: none;
  width: 120px;
  text-align: right;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="readings"] .read-input:focus {
  border-color: var(--success);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
  background: rgba(0, 255, 136, 0.1);
}
[data-page="readings"] .read-input.has-value {
  border-color: var(--success);
  color: var(--success);
}
[data-page="readings"] .read-input.error { border-color: var(--danger); color: var(--danger); }
[data-page="readings"] .notes-input {
  background: rgba(0, 255, 136, 0.03);
  border: 1px solid rgba(0, 255, 136, 0.1);
  color: var(--text-soft);
  font-family: var(--font-num);
  font-size: 11px;
  padding: 4px 8px;
  outline: none;
  width: 140px;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="readings"] .notes-input:focus {
  border-color: var(--border);
  color: var(--text);
}
[data-page="readings"] .img-cell { display: flex; align-items: center; gap: 6px; }
[data-page="readings"] .img-btn {
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.2);
  color: var(--text-muted);
  font-size: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="readings"] .img-btn:hover {
  border-color: var(--success);
  color: var(--success);
  background: rgba(0, 255, 136, 0.1);
}
[data-page="readings"] .img-btn.has-img {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0, 245, 255, 0.08);
}
[data-page="readings"] .img-thumb {
  width: 32px; height: 32px;
  object-fit: cover;
  border: 1px solid var(--cyan);
  cursor: pointer;
}
[data-page="readings"] .save-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 7px;
  padding: 4px 8px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  white-space: nowrap;
  border-radius: var(--radius);
  opacity: 0.4;
}
[data-page="readings"] .save-btn.needs-save {
  border-color: var(--success);
  color: var(--success);
  background: rgba(0, 255, 136, 0.08);
  opacity: 1;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}
[data-page="readings"] .save-btn:hover {
  opacity: 1;
  border-color: var(--success);
  color: var(--success);
  background: rgba(0, 255, 136, 0.12);
}
/* Placeholder: ultra-dim so empty field looks empty */
[data-page="readings"] .read-input::placeholder {
  color: rgba(0, 255, 136, 0.18);
  font-size: 11px;
}
[data-page="readings"] .read-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
[data-page="readings"] .read-dot.done {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}
[data-page="readings"] .read-dot.pending {
  background: rgba(255, 136, 0, 0.4);
  border: 1px solid var(--warning);
}
[data-page="readings"] .read-dot.estimated {
  background: rgba(0, 136, 255, 0.4);
  border: 1px solid var(--blue);
}
[data-page="readings"] .img-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 700;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 16px;
}
[data-page="readings"] .img-modal.show { display: flex; }
[data-page="readings"] .img-modal img {
  max-width: 80vw; max-height: 70vh;
  border: 1px solid var(--success);
  box-shadow: 0 0 40px rgba(0, 255, 136, 0.2);
}
[data-page="readings"] .img-modal-close {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 8px 20px;
  cursor: pointer;
  letter-spacing: 2px;
  background: rgba(255, 34, 68, 0.08);
  border-radius: var(--radius);
}

/* ── Operator name (topbar) ── */
[data-page="readings"] .operator-name {
  font-family: var(--font-num);
  font-size: 14px; font-weight: 700;
  color: var(--text); letter-spacing: .5px;
}

/* ── Table: account number → blue, bill amount → blue ── */
[data-page="readings"] .td-acct {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 400;
  color: var(--cyan);
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
}
[data-page="readings"] .td-acct:hover { color: var(--text); text-decoration: underline; }

[data-page="readings"] .td-bill {
  font-family: var(--font-num);
  font-size: 15px; font-weight: 700;
  color: var(--cyan);
  text-align: right;
}

/* ── Date input — dark Pro theme matching notes-input, green date color ── */
[data-page="readings"] .date-input {
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.25);
  color: var(--success);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  outline: none;
  width: 126px;
  border-radius: var(--radius);
  transition: border-color .15s;
  color-scheme: dark;
}
[data-page="readings"] .date-input:focus {
  border-color: var(--success);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.15);
}



/* ── Last column: billed badge + save button ── */
[data-page="readings"] .td-save {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* ── Billed status badge (replaces save button) ── */
[data-page="readings"] .billed-badge {
  font-family: var(--font-display);
  font-size: 7px; letter-spacing: 1.5px;
  padding: 3px 8px; border: 1px solid;
  border-radius: var(--radius);
  white-space: nowrap; display: inline-block;
}
[data-page="readings"] .billed-badge.is-billed {
  color: var(--success); border-color: var(--success);
  background: rgba(0, 255, 136, 0.08);
}
[data-page="readings"] .billed-badge.not-billed {
  color: var(--text-muted); border-color: var(--border);
  background: transparent;
}

/* ─── [data-page="payments"] ──────────────────────────────────────────────── */

/* Alias old green-theme vars to Pro tokens so JS inline styles resolve correctly */
[data-page="payments"] {
  --text-mid:   var(--text-soft);
  --text-dim:   var(--text-muted);
  --border-hi:  var(--border-strong);
  --panel:      var(--surface);
  --bg2:        var(--bg);
  --bg3:        var(--bg);
}

/* ── Layout offsets ─────────────────────────────────────────────────────── */
[data-page="payments"] .statsbar {
  top: 46px; height: 56px;
}
[data-page="payments"] .controlbar {
  position: fixed;
  top: 102px; left: 0; right: 0;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 10px;
  z-index: 99;
  overflow-x: auto;
}
[data-page="payments"] .filterbar {
  position: fixed;
  top: 154px; left: 0; right: 0;
  height: 36px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 6px;
  z-index: 97;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
}
[data-page="payments"] .main {
  position: fixed;
  top: 190px; bottom: 78px;
  left: 0; right: 0;
  overflow-y: auto;
  transition: right .25s ease;
}
[data-page="payments"] .main.panel-open { right: 520px; }

/* ── Topbar helpers ─────────────────────────────────────────────────────── */
[data-page="payments"] .tb-group { display: flex; align-items: center; gap: 14px; }
[data-page="payments"] .tb-tag { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 3px; }
[data-page="payments"] .topbar-meta { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
[data-page="payments"] .tb-op-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 2px; }
[data-page="payments"] .op-name { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .5px; }

/* ── Control bar ────────────────────────────────────────────────────────── */
[data-page="payments"] .ctrl-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
[data-page="payments"] .ctrl-label { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); letter-spacing: 2px; white-space: nowrap; }
[data-page="payments"] .ctrl-divider { width: 1px; height: 32px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
[data-page="payments"] .date-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 8px;
  outline: none;
  width: 132px;
  flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="payments"] .date-input:focus { border-color: var(--border-strong); }
[data-page="payments"] .range-btn {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: var(--radius);
}
[data-page="payments"] .range-btn:hover,
[data-page="payments"] .range-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
[data-page="payments"] .search-wrap { flex: 1; min-width: 180px; position: relative; }
[data-page="payments"] .search-wrap::before { content: '⌕'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 16px; pointer-events: none; opacity: .6; }
[data-page="payments"] .search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 12px;
  padding: 6px 10px 6px 32px;
  outline: none;
  letter-spacing: .5px;
  border-radius: var(--radius);
}
[data-page="payments"] .search-input::placeholder { color: var(--text-muted); }
[data-page="payments"] .search-input:focus { border-color: var(--border-strong); }
[data-page="payments"] .ctrl-btn {
  font-family: var(--font-display);
  font-size: 8px;
  padding: 7px 13px;
  border: 1px solid;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  white-space: nowrap;
  background: transparent;
  flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="payments"] .ctrl-btn-primary { border-color: var(--primary); color: var(--primary); }
[data-page="payments"] .ctrl-btn-primary:hover { background: var(--primary-soft); }
[data-page="payments"] .ctrl-btn-dim { border-color: var(--border); color: var(--text-muted); }
[data-page="payments"] .ctrl-btn-dim:hover { border-color: var(--primary); color: var(--primary); }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
[data-page="payments"] .fbtn {
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="payments"] .fbtn:hover,
[data-page="payments"] .fbtn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
[data-page="payments"] .method-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 3px 8px;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  border-radius: var(--radius);
}
[data-page="payments"] .method-select:focus,
[data-page="payments"] .method-select:hover { border-color: var(--primary); color: var(--primary); }
[data-page="payments"] .method-select option { background: var(--bg); color: var(--text); }
[data-page="payments"] .filter-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
[data-page="payments"] .row-count { font-family: var(--font-display); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }

/* ── Table ──────────────────────────────────────────────────────────────── */
[data-page="payments"] .ptable { width: 100%; border-collapse: collapse; }
[data-page="payments"] .ptable thead { position: sticky; top: 0; z-index: 10; }
[data-page="payments"] .ptable th { font-family: var(--font-display); font-size: 7px; letter-spacing: 1.5px; color: var(--text-muted); padding: 8px 12px; border-bottom: 2px solid var(--border); text-align: left; font-weight: 400; background: var(--bg); white-space: nowrap; cursor: pointer; user-select: none; }
[data-page="payments"] .ptable th:hover { color: var(--primary); }
[data-page="payments"] .ptable th.sort-asc::after  { content: ' ▲'; color: var(--primary); }
[data-page="payments"] .ptable th.sort-desc::after { content: ' ▼'; color: var(--primary); }
[data-page="payments"] .ptable th.r { text-align: right; }
[data-page="payments"] .ptable td { padding: 7px 12px; border-bottom: 1px solid rgba(0, 245, 255, 0.04); vertical-align: middle; font-size: 13px; }
[data-page="payments"] .ptable tr:hover td { background: rgba(0, 245, 255, 0.03); cursor: pointer; }
[data-page="payments"] .ptable tr.selected td { background: rgba(0, 245, 255, 0.06); border-left: 2px solid var(--primary); }
[data-page="payments"] .ptable tr.row-returned td { opacity: .65; }
[data-page="payments"] .td-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
[data-page="payments"] .td-date { color: var(--text-soft); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
[data-page="payments"] .td-acct { color: var(--cyan); font-family: var(--font-mono); font-size: 10px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
[data-page="payments"] .td-name { color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
[data-page="payments"] .td-amount { font-family: var(--font-num); font-size: 15px; font-weight: 700; color: var(--primary); text-align: right; white-space: nowrap; }
[data-page="payments"] .td-ref { font-family: var(--font-mono); font-size: 10px; color: var(--text-soft); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
[data-page="payments"] .td-flag { text-align: center; }
[data-page="payments"] .flag-yes { color: var(--success); font-size: 11px; }
[data-page="payments"] .flag-no  { color: var(--text-muted); font-size: 11px; }
[data-page="payments"] .flag-ret { color: var(--danger); font-size: 11px; }
[data-page="payments"] .img-indicator { width: 24px; height: 24px; border: 1px solid var(--border); background: transparent; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); cursor: pointer; transition: all .15s; }
[data-page="payments"] .img-indicator.has-img { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 245, 255, 0.08); }
[data-page="payments"] .img-indicator:hover { border-color: var(--primary); color: var(--primary); }
[data-page="payments"] .open-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-display); font-size: 8px; padding: 3px 7px; cursor: pointer; letter-spacing: 1px; transition: all .15s; white-space: nowrap; border-radius: var(--radius); }
[data-page="payments"] .open-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ── Payment method pills ────────────────────────────────────────────────── */
[data-page="payments"] .mpill { font-family: var(--font-display); font-size: 7px; padding: 2px 7px; border: 1px solid; letter-spacing: 1px; white-space: nowrap; border-radius: var(--radius); }
[data-page="payments"] .mp-check { border-color: rgba(0, 245, 255, .4); color: var(--cyan); }
[data-page="payments"] .mp-cash  { border-color: rgba(0, 255, 136, .4); color: var(--success); }
[data-page="payments"] .mp-online { border-color: rgba(0, 136, 255, .4); color: var(--blue); }
[data-page="payments"] .mp-ach   { border-color: rgba(168, 255, 62, .4); color: var(--rp); }
[data-page="payments"] .mp-mo    { border-color: rgba(255, 136, 0, .4); color: var(--warning); }
[data-page="payments"] .mp-other { border-color: var(--border); color: var(--text-muted); }

/* ── Detail panel ────────────────────────────────────────────────────────── */
[data-page="payments"] .detail-panel { position: fixed; top: 0; right: -520px; bottom: 78px; width: 520px; background: var(--bg); border-left: 1px solid var(--border-strong); z-index: 300; display: flex; flex-direction: column; transition: right .25s ease; box-shadow: -20px 0 60px rgba(0, 0, 0, .7); }
[data-page="payments"] .detail-panel.open { right: 0; }
[data-page="payments"] .dp-header { padding: 14px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--primary-soft), transparent); position: relative; flex-shrink: 0; }
[data-page="payments"] .dp-title { font-family: var(--font-display); font-size: 11px; color: var(--primary); letter-spacing: 3px; margin-bottom: 3px; }
[data-page="payments"] .dp-id { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
[data-page="payments"] .dp-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; }
[data-page="payments"] .dp-close:hover { color: var(--danger); }
[data-page="payments"] .dp-body { flex: 1; overflow-y: auto; }
[data-page="payments"] .dp-footer { flex-shrink: 0; padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
[data-page="payments"] .dp-section { border-bottom: 1px solid rgba(0, 245, 255, 0.06); }
[data-page="payments"] .dp-section-title { font-family: var(--font-display); font-size: 8px; letter-spacing: 2px; color: var(--text-muted); padding: 8px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
[data-page="payments"] .dp-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 18px; border-bottom: 1px solid rgba(0, 245, 255, 0.03); }
[data-page="payments"] .dp-label { font-family: var(--font-mono); font-size: 8px; color: var(--text-soft); letter-spacing: 1px; }
[data-page="payments"] .dp-val { font-family: var(--font-mono); font-size: 11px; color: var(--text); text-align: right; }
[data-page="payments"] .dp-val-money { font-family: var(--font-num); font-weight: 700; font-size: 24px; color: var(--primary); }
[data-page="payments"] .dp-val-acct { font-family: var(--font-display); font-size: 10px; color: var(--cyan); letter-spacing: 1px; }
[data-page="payments"] .dp-btn { flex: 1; padding: 9px; font-family: var(--font-display); font-size: 7px; letter-spacing: 1px; cursor: pointer; border: 1px solid; transition: all .15s; background: transparent; text-align: center; white-space: nowrap; border-radius: var(--radius); }
[data-page="payments"] .dp-btn-green  { border-color: var(--success); color: var(--success); }
[data-page="payments"] .dp-btn-green:hover  { background: rgba(0, 255, 136, .1); }
[data-page="payments"] .dp-btn-cyan   { border-color: var(--cyan); color: var(--cyan); }
[data-page="payments"] .dp-btn-cyan:hover   { background: rgba(0, 245, 255, .08); }
[data-page="payments"] .dp-btn-orange { border-color: var(--warning); color: var(--warning); }
[data-page="payments"] .dp-btn-orange:hover { background: rgba(255, 136, 0, .08); }
[data-page="payments"] .dp-btn-red    { border-color: var(--danger); color: var(--danger); }
[data-page="payments"] .dp-btn-red:hover    { background: rgba(255, 34, 68, .08); }
[data-page="payments"] .dp-btn-ghost  { border-color: var(--border); color: var(--text-muted); }
[data-page="payments"] .dp-btn-ghost:hover  { border-color: var(--primary); color: var(--primary); }

/* ── Edit form ───────────────────────────────────────────────────────────── */
[data-page="payments"] .dp-form { padding: 14px 18px; }
[data-page="payments"] .ef-row { margin-bottom: 12px; }
[data-page="payments"] .ef-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
[data-page="payments"] .ef-label { font-family: var(--font-mono); font-size: 8px; color: var(--text-soft); letter-spacing: 2px; margin-bottom: 4px; display: block; }
[data-page="payments"] .ef-input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 11px; padding: 7px 10px; outline: none; transition: all .15s; border-radius: var(--radius); }
[data-page="payments"] .ef-input:focus { border-color: var(--border-strong); background: rgba(0, 245, 255, 0.04); }
[data-page="payments"] .ef-input option { background: var(--bg); color: var(--text); }
[data-page="payments"] .ef-input::placeholder { color: var(--text-muted); }

/* ── Toggles ─────────────────────────────────────────────────────────────── */
[data-page="payments"] .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; border-bottom: 1px solid rgba(0, 245, 255, 0.04); }
[data-page="payments"] .toggle-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-soft); letter-spacing: 1px; }
[data-page="payments"] .toggle { position: relative; width: 40px; height: 20px; cursor: pointer; }
[data-page="payments"] .toggle input { opacity: 0; width: 0; height: 0; }
[data-page="payments"] .toggle-track { position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--border); transition: .2s; }
[data-page="payments"] .toggle-thumb { position: absolute; height: 14px; width: 14px; top: 2px; left: 2px; background: var(--text-muted); transition: .2s; }
[data-page="payments"] .toggle input:checked + .toggle-track { background: rgba(0, 255, 136, .15); border-color: var(--success); }
[data-page="payments"] .toggle input:checked ~ .toggle-thumb { transform: translateX(20px); background: var(--success); box-shadow: 0 0 6px var(--success); }

/* ── Image area ─────────────────────────────────────────────────────────── */
[data-page="payments"] .img-area { padding: 14px 18px; border-bottom: 1px solid var(--border); }
[data-page="payments"] .img-area-title { font-family: var(--font-display); font-size: 8px; color: var(--text-muted); letter-spacing: 2px; margin-bottom: 10px; }
[data-page="payments"] .img-preview { width: 100%; max-height: 200px; object-fit: contain; border: 1px solid var(--primary); background: var(--surface); cursor: pointer; }
[data-page="payments"] .img-placeholder { height: 80px; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: all .2s; }
[data-page="payments"] .img-placeholder:hover { border-color: var(--primary); background: var(--primary-soft); }
[data-page="payments"] .img-placeholder-text { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
[data-page="payments"] .img-actions { display: flex; gap: 8px; margin-top: 8px; }
[data-page="payments"] .img-btn { flex: 1; font-family: var(--font-display); font-size: 7px; padding: 6px; border: 1px solid var(--border); color: var(--text-muted); background: transparent; cursor: pointer; letter-spacing: 1px; transition: all .15s; text-align: center; border-radius: var(--radius); }
[data-page="payments"] .img-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
[data-page="payments"] .lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .94); z-index: 800; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
[data-page="payments"] .lightbox.show { display: flex; }
[data-page="payments"] .lightbox img { max-width: 88vw; max-height: 74vh; border: 1px solid var(--primary); box-shadow: 0 0 40px var(--primary-soft); }
[data-page="payments"] .lb-caption { font-family: var(--font-mono); font-size: 9px; color: var(--text-soft); letter-spacing: 1px; }
[data-page="payments"] .lb-close { font-family: var(--font-display); font-size: 10px; color: var(--danger); border: 1px solid var(--danger); padding: 8px 22px; cursor: pointer; letter-spacing: 2px; background: rgba(255, 34, 68, .08); border-radius: var(--radius); }

/* ─── [data-page="compliance"] ────────────────────────────────────────────── */
[data-page="compliance"] .alert-bar {
  position: fixed;
  top: 46px; left: 0; right: 0;
  height: 32px;
  z-index: 99;
  display: flex; align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
[data-page="compliance"] .alert-bar.critical {
  border-color: var(--danger);
  animation: alertPulse 1.5s ease-in-out infinite;
}
[data-page="compliance"] .alert-bar.clear {
  background: rgba(0, 255, 136, 0.04);
  border-color: rgba(0, 255, 136, 0.2);
}
[data-page="compliance"] .alert-tag {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2px;
  padding: 0 14px;
  height: 100%;
  display: flex; align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-page="compliance"] .alert-tag.crit { background: var(--danger); color: #fff; }
[data-page="compliance"] .alert-tag.ok   { background: rgba(0, 255, 136, 0.15); color: var(--success); }
[data-page="compliance"] .alert-scroll { overflow: hidden; flex: 1; height: 100%; display: flex; align-items: center; }
[data-page="compliance"] .alert-track {
  display: flex; white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .5px;
  animation: tick 30s linear infinite;
}
[data-page="compliance"] .alert-item { padding: 0 30px; display: inline; }
[data-page="compliance"] .statsbar {
  top: 78px; height: 52px;
}
[data-page="compliance"] .main {
  position: fixed;
  top: 130px; bottom: 78px;
  left: 0; right: 0;
  display: flex;
  overflow: hidden;
}
[data-page="compliance"] .left-panel {
  width: 300px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-page="compliance"] .lp-section {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
[data-page="compliance"] .lp-section-grow {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex: 1; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
[data-page="compliance"] .lp-title {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--primary);
  margin-bottom: 8px;
}
[data-page="compliance"] .gauge-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
[data-page="compliance"] .gauge-svg { overflow: visible; width: 148px; height: 148px; }
[data-page="compliance"] .gauge-tick { stroke: rgba(255, 119, 0, 0.2); stroke-width: 1; }
[data-page="compliance"] .gauge-tick-major { stroke: rgba(255, 119, 0, 0.4); stroke-width: 1.5; }
[data-page="compliance"] .gauge-bg-arc { fill: none; stroke: rgba(255, 119, 0, 0.08); stroke-width: 14; }
[data-page="compliance"] .gauge-arc {
  fill: none;
  stroke: var(--warning);
  stroke-width: 12;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 119, 0, 0.5));
  transition: stroke-dasharray 1.2s ease;
}
[data-page="compliance"] .gauge-sweep { transform-origin: 100px 100px; opacity: 0; }
[data-page="compliance"] .gauge-sector {
  transform-origin: 100px 100px;
  animation: drot 8s linear infinite;
}
[data-page="compliance"] .gauge-center-val {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 28px;
  fill: var(--warning);
  text-anchor: middle;
}
[data-page="compliance"] .gauge-center-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--text-soft);
  text-anchor: middle;
  letter-spacing: 2px;
}
[data-page="compliance"] .gauge-note {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
  letter-spacing: 1px;
  text-align: center;
}
[data-page="compliance"] .mini-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px;
}
[data-page="compliance"] .mini-gauge {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  transition: border-color .2s;
  border-radius: var(--radius);
}
[data-page="compliance"] .mini-gauge:hover { border-color: var(--border-strong); }
[data-page="compliance"] .mini-gauge.alert {
  border-color: rgba(255, 34, 68, 0.4);
  animation: alertPulse 2s ease-in-out infinite;
}
[data-page="compliance"] .mini-svg { overflow: visible; }
[data-page="compliance"] .mini-arc-bg { fill: none; stroke: rgba(255, 119, 0, 0.1); stroke-width: 8; stroke-linecap: round; }
[data-page="compliance"] .mini-arc { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .8s ease; }
[data-page="compliance"] .mini-label {
  font-family: var(--font-display);
  font-size: 7px;
  color: var(--text-soft);
  letter-spacing: 1.5px;
  text-align: center;
}
[data-page="compliance"] .mini-val {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
[data-page="compliance"] .mini-sub {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-align: center;
}

/* ── Compliance right panel: filter bar + table ─────────────────────────── */
[data-page="compliance"] .right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[data-page="compliance"] .filterbar {
  position: static;
  height: 38px;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  z-index: auto;
}
[data-page="compliance"] .fbtn {
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  border-radius: var(--radius);
  text-transform: uppercase;
  flex-shrink: 0;
}
[data-page="compliance"] .fbtn:hover,
[data-page="compliance"] .fbtn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
[data-page="compliance"] .f-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
[data-page="compliance"] .row-count {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
}
[data-page="compliance"] .add-btn {
  font-family: var(--font-display);
  font-size: 8px;
  padding: 5px 12px;
  border: 1px solid var(--success);
  color: var(--success);
  background: rgba(0, 255, 136, 0.08);
  cursor: pointer;
  letter-spacing: 1.5px;
  border-radius: var(--radius);
  transition: all .15s;
  flex-shrink: 0;
  white-space: nowrap;
}
[data-page="compliance"] .add-btn:hover {
  background: rgba(0, 255, 136, 0.18);
  text-shadow: 0 0 6px var(--success);
}
[data-page="compliance"] .table-wrap {
  flex: 1;
  overflow-y: auto;
}
[data-page="compliance"] .atable th:hover {
  color: var(--primary);
}
[data-page="compliance"] .atable tr.row-critical td {
  background: rgba(255, 34, 68, 0.06);
}
[data-page="compliance"] .atable tr.row-critical:hover td {
  background: rgba(255, 34, 68, 0.10);
}
[data-page="compliance"] .atable tr.row-overdue td {
  background: rgba(255, 136, 0, 0.05);
}

/* ── Priority dot ─────────────────────────────────────────────────────── */
[data-page="compliance"] .td-priority {
  text-align: center;
  width: 28px;
}
[data-page="compliance"] .prio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
[data-page="compliance"] .p-crit {
  background: var(--danger);
  animation: prioPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px var(--danger);
}
@keyframes prioPulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
[data-page="compliance"] .p-high { background: var(--warning); }
[data-page="compliance"] .p-med  { background: var(--info); }
[data-page="compliance"] .p-low  { background: var(--text-muted); }

/* ── Category badges ─────────────────────────────────────────────────── */
[data-page="compliance"] .cat-badge {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 2px 8px;
  border: 1px solid;
  letter-spacing: 1.2px;
  white-space: nowrap;
  display: inline-block;
  border-radius: var(--radius);
  background: var(--surface);
}
[data-page="compliance"] .cat-bwn   { border-color: rgba(255, 34, 68, .45);  color: var(--danger);  background: rgba(255, 34, 68, .08); }
[data-page="compliance"] .cat-ccr   { border-color: rgba(0, 245, 255, .45);  color: var(--cyan);    background: rgba(0, 245, 255, .08); }
[data-page="compliance"] .cat-lsli  { border-color: rgba(0, 136, 255, .45);  color: var(--blue);    background: rgba(0, 136, 255, .06); }
[data-page="compliance"] .cat-tcr   { border-color: rgba(0, 255, 136, .45);  color: var(--success); background: rgba(0, 255, 136, .06); }
[data-page="compliance"] .cat-dbp   { border-color: rgba(255, 136, 0, .45);  color: var(--warning); background: rgba(255, 136, 0, .06); }
[data-page="compliance"] .cat-lcr   { border-color: rgba(168, 168, 220, .45);color: #a8a8dc;        background: rgba(168, 168, 220, .06); }
[data-page="compliance"] .cat-mor   { border-color: rgba(255, 136, 0, .45);  color: var(--warning); }
[data-page="compliance"] .cat-san   { border-color: rgba(255, 136, 0, .35);  color: var(--warning); }
[data-page="compliance"] .cat-pfas  { border-color: rgba(0, 136, 255, .45);  color: var(--blue); }
[data-page="compliance"] .cat-erp   { border-color: rgba(255, 136, 0, .35);  color: var(--warning); }
[data-page="compliance"] .cat-other { border-color: var(--border-strong);    color: var(--text-muted); }

/* ── Table cell text styles ──────────────────────────────────────────── */
[data-page="compliance"] .td-desc {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  max-width: 280px;
  white-space: normal;
  line-height: 1.25;
  padding: 8px 12px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-page="compliance"] .td-reg  { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); white-space: nowrap; }
[data-page="compliance"] .td-freq { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
[data-page="compliance"] .td-due  { font-family: var(--font-num);  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; -webkit-font-smoothing: antialiased; }

/* ── Countdown ───────────────────────────────────────────────────────── */
[data-page="compliance"] .countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  line-height: 1.1;
}
[data-page="compliance"] .cd-num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  letter-spacing: .5px;
}
[data-page="compliance"] .cd-lbl {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
[data-page="compliance"] .cd-overdue,
[data-page="compliance"] .cd-critical { color: var(--danger); }
[data-page="compliance"] .cd-soon     { color: var(--warning); }
[data-page="compliance"] .cd-ok,
[data-page="compliance"] .cd-na       { color: var(--text-muted); }
[data-page="compliance"] .countdown .cd-lbl-left { color: inherit; }
[data-page="compliance"] .countdown:has(.cd-critical) .cd-lbl-left { color: var(--danger); }
[data-page="compliance"] .countdown:has(.cd-overdue)  .cd-lbl-left { color: var(--danger); }
[data-page="compliance"] .countdown:has(.cd-soon)     .cd-lbl-left { color: var(--warning); }
[data-page="compliance"] .countdown:has(.cd-ok)       .cd-lbl-left { color: var(--text-muted); }

/* ── Status pills ────────────────────────────────────────────────────── */
[data-page="compliance"] .pill {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 3px 9px;
  border: 1px solid;
  letter-spacing: 1.5px;
  white-space: nowrap;
  display: inline-block;
  border-radius: var(--radius);
  background: var(--surface);
}
[data-page="compliance"] .pill-active    { border-color: rgba(255, 34, 68, .45);  color: var(--danger);  background: rgba(255, 34, 68, .08); }
[data-page="compliance"] .pill-overdue   { border-color: rgba(255, 136, 0, .45);  color: var(--warning); background: rgba(255, 136, 0, .08); }
[data-page="compliance"] .pill-due-soon  { border-color: rgba(255, 136, 0, .35);  color: var(--warning); background: rgba(255, 136, 0, .06); }
[data-page="compliance"] .pill-upcoming  { border-color: var(--border-strong);    color: var(--text-muted); }
[data-page="compliance"] .pill-compliant { border-color: rgba(0, 255, 136, .45);  color: var(--success); background: rgba(0, 255, 136, .06); }
[data-page="compliance"] .pill-resolved  { border-color: var(--border-strong);    color: var(--text-muted); }

/* ── Row action button ───────────────────────────────────────────────── */
[data-page="compliance"] .action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 7px;
  padding: 3px 9px;
  cursor: pointer;
  letter-spacing: 1.2px;
  transition: all .15s;
  white-space: nowrap;
  border-radius: var(--radius);
}
[data-page="compliance"] .action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

/* ── Detail panel slide-out (right side) ─────────────────────────────── */
[data-page="compliance"] .detail-panel {
  position: fixed;
  top: 0;
  right: -540px;
  bottom: 78px;
  width: 540px;
  background: var(--bg);
  border-left: 1px solid var(--border-strong);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transition: right .25s ease;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .5);
}
[data-page="compliance"] .detail-panel.open { right: 0; }
[data-page="compliance"] .dp-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-soft), transparent);
  flex-shrink: 0;
  position: relative;
}
[data-page="compliance"] .dp-title {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 3px;
  margin-bottom: 3px;
  text-shadow: 0 0 10px var(--primary-soft);
}
[data-page="compliance"] .dp-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
  letter-spacing: 1px;
}
[data-page="compliance"] .dp-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  font-family: var(--font-display);
}
[data-page="compliance"] .dp-close:hover { color: var(--danger); }
[data-page="compliance"] .dp-body { flex: 1; overflow-y: auto; }
[data-page="compliance"] .dp-section { border-bottom: 1px solid var(--border); }
[data-page="compliance"] .dp-section-title {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--primary);
  padding: 8px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
[data-page="compliance"] .dp-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(255, 119, 0, 0.05);
  gap: 12px;
}
[data-page="compliance"] .dp-row:last-child { border-bottom: none; }
[data-page="compliance"] .dp-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
  flex-shrink: 0;
  text-transform: uppercase;
}
[data-page="compliance"] .dp-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  text-align: right;
  max-width: 280px;
  word-break: break-word;
}
[data-page="compliance"] .dp-notes {
  padding: 12px 18px;
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
[data-page="compliance"] .dp-footer {
  flex-shrink: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
[data-page="compliance"] .dp-btn {
  flex: 1;
  min-width: 80px;
  padding: 9px;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1.2px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  text-align: center;
  transition: all .15s;
  border-radius: var(--radius);
  text-transform: uppercase;
}
[data-page="compliance"] .dp-btn-or { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
[data-page="compliance"] .dp-btn-or:hover { background: rgba(255, 136, 0, .18); }
[data-page="compliance"] .dp-btn-g  { border-color: var(--success); color: var(--success); background: rgba(0, 255, 136, .06); }
[data-page="compliance"] .dp-btn-g:hover { background: rgba(0, 255, 136, .16); }
[data-page="compliance"] .dp-btn-r  { border-color: var(--danger); color: var(--danger); background: rgba(255, 34, 68, .06); }
[data-page="compliance"] .dp-btn-r:hover { background: rgba(255, 34, 68, .16); }
[data-page="compliance"] .dp-btn-ghost { border-color: var(--border-strong); color: var(--text-muted); }
[data-page="compliance"] .dp-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* ── Cybersecurity & AI panel (replaces network status) ────────────── */
[data-page="compliance"] .cyber-box {
  border: 1px solid var(--border);
  background: rgba(255, 136, 0, 0.04);
  border-radius: var(--radius);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  overflow: hidden;
}
[data-page="compliance"] .cyber-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
[data-page="compliance"] .cyber-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
[data-page="compliance"] .cyber-status {
  display: flex;
  align-items: center;
  gap: 7px;
}
[data-page="compliance"] .cyber-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: cyberPulse 2s infinite;
}
@keyframes cyberPulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
[data-page="compliance"] .cyber-status-text {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--success);
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}
[data-page="compliance"] .cyber-desc {
  font-family: var(--font-num);
  font-size: 10px;
  color: var(--text-soft);
  line-height: 1.3;
}
[data-page="compliance"] .cyber-trial-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border: 1px solid var(--success);
  color: var(--success);
  background: rgba(0, 255, 136, 0.06);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-page="compliance"] .cyber-trial-btn:hover {
  background: rgba(0, 255, 136, 0.18);
  text-shadow: 0 0 6px var(--success);
}

/* ─── [data-page="comms"] ─────────────────────────────────────────────────── */

/* ── Topbar helpers ── */
[data-page="comms"] .topbar-left { display: flex; align-items: center; gap: 14px; }
[data-page="comms"] .operator-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 3px; }
[data-page="comms"] .topbar-meta { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
[data-page="comms"] .operator-name { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .5px; }

/* ── Layout: dash-strip → actionbar → main ─────────────────────── */
[data-page="comms"] .dash-strip {
  position: fixed;
  top: 46px; left: 0; right: 0;
  height: 110px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  gap: 18px; padding: 8px 18px;
  z-index: 99; overflow-x: auto;
}
[data-page="comms"] .dash-donut {
  flex-shrink: 0;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
}
[data-page="comms"] .dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
  flex: 1; min-width: 0;
  height: 92px;
}
[data-page="comms"] .ds-cell {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
  min-width: 0;
}
[data-page="comms"] .ds-cell:hover { border-color: var(--pk); background: rgba(244, 160, 181, 0.06); }
[data-page="comms"] .ds-cell.active { border-color: var(--pk); background: rgba(244, 160, 181, 0.10); }
[data-page="comms"] .ds-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  border-radius: var(--radius);
  flex-shrink: 0;
}
[data-page="comms"] .ds-body { display: flex; flex-direction: column; min-width: 0; }
[data-page="comms"] .ds-val {
  font-family: var(--font-num);
  font-size: 18px; font-weight: 700; line-height: 1;
  color: var(--text);
}
[data-page="comms"] .ds-label {
  font-family: var(--font-mono);
  font-size: 7px; color: var(--text-muted);
  letter-spacing: 1.5px; margin-top: 2px;
  white-space: nowrap;
}

/* ── Bars chart (BY CATEGORY) ── */
[data-page="comms"] .dash-bars {
  flex-shrink: 0;
  width: 200px;
  display: flex; flex-direction: column;
  gap: 3px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  height: 92px;
  justify-content: center;
}
[data-page="comms"] .bar-row { display: flex; align-items: center; gap: 6px; }
[data-page="comms"] .bar-label {
  font-family: var(--font-mono); font-size: 7px;
  color: var(--text-muted); letter-spacing: 1px;
  width: 36px; flex-shrink: 0;
}
[data-page="comms"] .bar-track {
  flex: 1; height: 6px;
  background: var(--bg2);
  overflow: hidden;
}
[data-page="comms"] .bar-fill { height: 100%; background: var(--pk); transition: width .8s ease; }
[data-page="comms"] .bar-count {
  font-family: var(--font-num); font-size: 10px; font-weight: 700;
  color: var(--text); width: 18px; text-align: right; flex-shrink: 0;
}

/* ── Action bar (filter buttons + ADD COMM) ── */
[data-page="comms"] .actionbar {
  position: fixed;
  top: 156px; left: 0; right: 0;
  height: 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 18px; gap: 6px;
  z-index: 98; overflow-x: auto;
  flex-wrap: nowrap;
}
[data-page="comms"] .fbtn {
  font-family: var(--font-mono); font-size: 8px;
  padding: 4px 10px; border: 1px solid var(--border);
  color: var(--text-muted); background: transparent;
  cursor: pointer; letter-spacing: 1px;
  transition: all .15s; white-space: nowrap; flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="comms"] .fbtn:hover,
[data-page="comms"] .fbtn.active {
  border-color: var(--pk); color: var(--pk);
  background: rgba(244, 160, 181, 0.08);
}
[data-page="comms"] .f-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
[data-page="comms"] .row-count {
  font-family: var(--font-display); font-size: 9px;
  color: var(--text-muted); letter-spacing: 1px;
}
[data-page="comms"] .add-btn {
  font-family: var(--font-display); font-size: 8px;
  padding: 5px 12px; border: 1px solid var(--pk);
  color: var(--pk); background: rgba(244, 160, 181, 0.06);
  cursor: pointer; letter-spacing: 1px;
  border-radius: var(--radius); transition: all .15s;
  flex-shrink: 0;
}
[data-page="comms"] .add-btn:hover { background: rgba(244, 160, 181, 0.16); }
[data-page="comms"] .add-menu {
  display: none;
  position: absolute;
  top: 100%; right: 0; margin-top: 6px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 200;
  border-radius: var(--radius);
  overflow: hidden;
}
[data-page="comms"] .add-menu.show { display: block; }
[data-page="comms"] .add-menu-item {
  padding: 10px 14px;
  font-family: var(--font-num); font-size: 12px;
  color: var(--text); cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
[data-page="comms"] .add-menu-item:last-child { border-bottom: none; }
[data-page="comms"] .add-menu-item:hover { background: rgba(244, 160, 181, 0.10); color: var(--pk); }

/* ── Main split (log list + detail area) ── */
[data-page="comms"] .main {
  position: fixed;
  top: 196px; bottom: 78px;
  left: 0; right: 0;
  display: flex;
  overflow: hidden;
}
[data-page="comms"] .log-panel {
  width: 360px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
  background: var(--surface);
}
[data-page="comms"] .loading-item {
  padding: 30px 20px; text-align: center;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: 2px;
}

/* ── Log items in list — flat layout, single top line ── */
[data-page="comms"] .log-item {
  padding: 11px 14px 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
[data-page="comms"] .log-item:hover { background: rgba(244, 160, 181, 0.04); }
[data-page="comms"] .log-item.selected {
  background: rgba(244, 160, 181, 0.08);
  border-left: 2px solid var(--pk);
  padding-left: 14px;
}
[data-page="comms"] .li-topline {
  display: flex; align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  white-space: nowrap;
}
[data-page="comms"] .li-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
[data-page="comms"] .li-ref {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  color: var(--pk); letter-spacing: 2px;
  flex-shrink: 0;
}
[data-page="comms"] .li-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted); letter-spacing: .5px;
  margin-left: auto;
  flex-shrink: 0;
}
[data-page="comms"] .li-customer {
  font-family: var(--font-num);
  font-size: 15px; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
[data-page="comms"] .li-preview {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-page="comms"] .li-namerow {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 0;
}
[data-page="comms"] .li-cat {
  font-family: var(--font-num);
  font-size: 11px; font-weight: 400;
  color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
  text-align: right;
}
/* Type badge inside topline gets compact treatment */
[data-page="comms"] .li-topline .type-badge {
  font-size: 7px;
  padding: 2px 6px;
  flex-shrink: 0;
}
/* Status dot in topline */
[data-page="comms"] .li-topline .status-dot {
  margin-left: 4px;
}

/* ── Type badge / cat pill / status dot ── */
[data-page="comms"] .type-badge {
  font-family: var(--font-display); font-size: 7px;
  padding: 2px 6px; border: 1px solid;
  letter-spacing: 1px; white-space: nowrap;
  border-radius: var(--radius);
  display: inline-block;
  color: var(--text-muted); border-color: var(--border);
}
[data-page="comms"] .type-badge.tb-phone  { color: var(--success); border-color: var(--success); }
[data-page="comms"] .type-badge.tb-email  { color: var(--cyan);    border-color: var(--cyan);    }
[data-page="comms"] .type-badge.tb-sms    { color: var(--pk);      border-color: var(--pk);      }
[data-page="comms"] .type-badge.tb-walkin { color: var(--warning); border-color: var(--warning); }
[data-page="comms"] .type-badge.tb-other  { color: var(--text-muted); border-color: var(--border); }

/* Status dot color variants (called by JS statusDot helper) */
[data-page="comms"] .status-dot.sd-resolved  { background: var(--success); box-shadow: 0 0 6px var(--success); }
[data-page="comms"] .status-dot.sd-escalated { background: var(--danger);  box-shadow: 0 0 6px var(--danger);  }
[data-page="comms"] .status-dot.sd-open      { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
[data-page="comms"] .cat-pill {
  font-family: var(--font-display); font-size: 7px;
  padding: 2px 7px; border: 1px solid var(--border);
  color: var(--text-muted); letter-spacing: 1px;
  white-space: nowrap; border-radius: var(--radius);
}
[data-page="comms"] .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Detail area (right pane) ── */
[data-page="comms"] .detail-area {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-page="comms"] .detail-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  min-height: 0;
}
[data-page="comms"] .no-selection {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: 16px;
}
[data-page="comms"] .ns-icon {
  font-size: 56px; opacity: .15;
}
[data-page="comms"] .ns-msg {
  font-family: var(--font-display); font-size: 11px;
  color: var(--text-muted); letter-spacing: 3px;
}

/* ── Detail hero header ── */
[data-page="comms"] .det-hero {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(244, 160, 181, 0.07), transparent);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  min-height: 0;
}
[data-page="comms"] .det-hero-badge {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border: 1px solid;
  border-radius: var(--radius);
  flex-shrink: 0;
}
[data-page="comms"] .det-hero-body {
  display: flex; align-items: baseline; gap: 10px;
  flex: 1; min-width: 0;
  flex-wrap: nowrap; overflow: hidden;
}
[data-page="comms"] .det-hero-ref {
  font-family: var(--font-display); font-size: 9px;
  color: var(--pk); letter-spacing: 1.5px;
  white-space: nowrap; flex-shrink: 0;
}
[data-page="comms"] .det-hero-name {
  font-family: var(--font-num); font-size: 20px; font-weight: 700;
  color: var(--text);
  white-space: nowrap; flex-shrink: 0;
}
[data-page="comms"] .det-hero-cat {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-soft); letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-page="comms"] .det-hero-status {
  font-family: var(--font-display); font-size: 8px;
  padding: 4px 12px; border: 1px solid;
  letter-spacing: 2px;
  border-radius: var(--radius);
  white-space: nowrap; flex-shrink: 0;
}

/* ── Detail field grid ── */
[data-page="comms"] .det-field {
  padding: 10px 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(244, 160, 181, 0.04);
  gap: 14px;
}
[data-page="comms"] .det-field-label {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--text-muted); letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
[data-page="comms"] .det-field-val {
  font-family: var(--font-num); font-size: 12px;
  color: var(--text); text-align: right;
  word-break: break-word;
}

/* ── Detail notes section ── */
[data-page="comms"] .det-notes {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
}
[data-page="comms"] .det-notes-title {
  font-family: var(--font-display); font-size: 8px;
  color: var(--pk); letter-spacing: 2.5px;
  margin-bottom: 10px;
}
[data-page="comms"] .det-notes-body {
  font-family: var(--font-num); font-size: 12px;
  color: var(--text-soft); line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Detail actions (footer buttons) ── */
[data-page="comms"] .detail-actions {
  flex-shrink: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--border-strong);
  display: flex;
  gap: 8px;
  background: var(--surface);
}
[data-page="comms"] .da-btn {
  flex: 1;
  padding: 9px;
  font-family: var(--font-display); font-size: 8px;
  letter-spacing: 1.5px;
  border: 1px solid; cursor: pointer;
  background: transparent;
  border-radius: var(--radius);
  transition: all .15s;
  text-align: center;
}
[data-page="comms"] .da-btn-pk     { border-color: var(--pk); color: var(--pk); }
[data-page="comms"] .da-btn-pk:hover     { background: rgba(244, 160, 181, 0.10); }
[data-page="comms"] .da-btn-g      { border-color: var(--success); color: var(--success); }
[data-page="comms"] .da-btn-g:hover      { background: rgba(0, 255, 136, 0.10); }
[data-page="comms"] .da-btn-r      { border-color: var(--danger); color: var(--danger); }
[data-page="comms"] .da-btn-r:hover      { background: rgba(255, 34, 68, 0.10); }
[data-page="comms"] .da-btn-ghost  { border-color: var(--border); color: var(--text-muted); }
[data-page="comms"] .da-btn-ghost:hover  { border-color: var(--pk); color: var(--pk); }

/* ── Edit panel (slide-out) ── */
[data-page="comms"] .edit-panel {
  position: fixed;
  top: 46px; right: -560px; bottom: 78px;
  width: 560px; max-width: 96vw;
  background: var(--bg);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  z-index: 400;
  display: flex; flex-direction: column;
  transition: right .25s ease;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .7);
}
[data-page="comms"] .edit-panel.show { right: 0; }
[data-page="comms"] .ep-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(244, 160, 181, 0.06);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}
[data-page="comms"] .ep-title {
  font-family: var(--font-display); font-size: 12px;
  color: var(--pk); letter-spacing: 3px;
}
[data-page="comms"] .ep-ref {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-muted); letter-spacing: 1px;
  margin-top: 4px;
}
[data-page="comms"] .ep-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 22px; line-height: 1;
}
[data-page="comms"] .ep-close:hover { color: var(--danger); }
[data-page="comms"] .ep-body {
  flex: 1; overflow-y: auto;
  padding: 18px 22px;
}
[data-page="comms"] .ep-divider {
  font-family: var(--font-display); font-size: 8px;
  color: var(--pk); letter-spacing: 2.5px;
  margin: 12px 0 10px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
[data-page="comms"] .ep-divider:first-child { margin-top: 0; }
[data-page="comms"] .ep-frow { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
[data-page="comms"] .ep-frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
[data-page="comms"] .ep-label {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--text-muted); letter-spacing: 2px;
}
[data-page="comms"] .ep-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  border-radius: var(--radius);
  transition: border-color .15s;
}
[data-page="comms"] .ep-input:focus { border-color: var(--pk); }
[data-page="comms"] .ep-input option { background: var(--bg); color: var(--text); }
[data-page="comms"] .ep-textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-num); font-size: 12px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: var(--radius);
  line-height: 1.5;
}
[data-page="comms"] .ep-textarea:focus { border-color: var(--pk); }
[data-page="comms"] .ep-footer {
  flex-shrink: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--surface);
}
[data-page="comms"] .ep-btn {
  font-family: var(--font-display); font-size: 9px;
  padding: 9px 22px; border: 1px solid var(--border);
  color: var(--text-muted); background: transparent;
  cursor: pointer; letter-spacing: 1.5px;
  border-radius: var(--radius);
  transition: all .15s;
}
[data-page="comms"] .ep-btn:hover { border-color: var(--pk); color: var(--pk); }
[data-page="comms"] .ep-btn-save {
  border-color: var(--pk); color: var(--pk);
  background: rgba(244, 160, 181, 0.08);
}
[data-page="comms"] .ep-btn-save:hover { background: rgba(244, 160, 181, 0.18); }

/* ── Modal (Add Comm) ── */
[data-page="comms"] .modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 600;
  align-items: center; justify-content: center;
}
[data-page="comms"] .modal-overlay.show { display: flex; }
[data-page="comms"] .modal {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  width: 580px; max-width: 94vw;
  max-height: 88vh;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
[data-page="comms"] .modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(244, 160, 181, 0.06);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
[data-page="comms"] .modal-title {
  font-family: var(--font-display); font-size: 12px;
  color: var(--pk); letter-spacing: 3px;
}
[data-page="comms"] .modal-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 20px; line-height: 1;
}
[data-page="comms"] .modal-x:hover { color: var(--danger); }
[data-page="comms"] .modal-body {
  padding: 20px 22px;
  flex: 1; overflow-y: auto;
}
[data-page="comms"] .modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--surface);
  flex-shrink: 0;
}
[data-page="comms"] .frow { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
[data-page="comms"] .frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
[data-page="comms"] .flabel {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--text-muted); letter-spacing: 2px;
}
[data-page="comms"] .finput {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  border-radius: var(--radius);
}
[data-page="comms"] .finput:focus { border-color: var(--pk); }
[data-page="comms"] .finput option { background: var(--bg); color: var(--text); }
[data-page="comms"] .ftextarea {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-num); font-size: 12px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border-radius: var(--radius);
  line-height: 1.5;
}
[data-page="comms"] .ftextarea:focus { border-color: var(--pk); }
[data-page="comms"] .btn {
  font-family: var(--font-display); font-size: 9px;
  padding: 9px 22px; border: 1px solid;
  cursor: pointer; letter-spacing: 1.5px;
  background: transparent;
  border-radius: var(--radius);
  transition: all .15s;
}
[data-page="comms"] .btn-ghost {
  border-color: var(--border); color: var(--text-muted);
}
[data-page="comms"] .btn-ghost:hover { border-color: var(--pk); color: var(--pk); }
[data-page="comms"] .btn-pk {
  border-color: var(--pk); color: var(--pk);
  background: rgba(244, 160, 181, 0.08);
}
[data-page="comms"] .btn-pk:hover { background: rgba(244, 160, 181, 0.18); }

/* ─── [data-page="reports"] ───────────────────────────────────────────────── */

/* ── Accent alias: reports page uses --rp (lime) ── */
[data-page="reports"] { --primary: var(--rp); --primary-soft: rgba(168,255,62,0.08); }

/* ── Topbar helpers ── */
[data-page="reports"] .topbar-left   { display: flex; align-items: center; gap: 14px; }
[data-page="reports"] .topbar-meta   { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
[data-page="reports"] .operator-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 2px; }
[data-page="reports"] .operator-name  { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .5px; }

/* ── Ticker (analytics feed) ── */
[data-page="reports"] .ticker-wrap {
  position: fixed; top: 46px; left: 0; right: 0; height: 26px;
  background: rgba(2, 12, 20, 0.97);
  border-bottom: 1px solid var(--border);
  overflow: hidden; z-index: 99;
  display: flex; align-items: center;
}
[data-page="reports"] .ticker-tag {
  background: var(--rp); color: var(--bg);
  font-family: var(--font-display); font-size: 8px; font-weight: 700;
  padding: 0 12px; height: 100%;
  display: flex; align-items: center;
  letter-spacing: 2px; white-space: nowrap; flex-shrink: 0;
}
[data-page="reports"] .panel-fill { flex: 1; overflow: hidden; }
[data-page="reports"] .ticker-track { display: flex; animation: tick 70s linear infinite; white-space: nowrap; }
[data-page="reports"] .ti {
  padding: 0 28px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-soft); letter-spacing: .5px;
}

/* ── Ticker color helpers ── */
[data-page="reports"] .c-sys    { color: var(--rp); }
[data-page="reports"] .c-ok     { color: var(--success); }
[data-page="reports"] .c-pay    { color: var(--cyan); }
[data-page="reports"] .c-acct   { color: var(--cyan); }
[data-page="reports"] .c-wo     { color: var(--warning); }
[data-page="reports"] .c-comply { color: var(--danger); }
[data-page="reports"] .c-warn   { color: var(--warning); }
[data-page="reports"] .sep { color: var(--border-strong); padding: 0 4px; }

/* ── Stat value color helpers ── */
[data-page="reports"] .sv-g { color: var(--success); }
[data-page="reports"] .sv-o { color: var(--warning); }
[data-page="reports"] .sv-r { color: var(--danger); }
[data-page="reports"] .sv-c  { color: var(--cyan); }
[data-page="reports"] .sv-rp { color: var(--rp); }

/* ── Statsbar (below ticker) ── */
[data-page="reports"] .statsbar {
  position: fixed;
  top: 72px; left: 0; right: 0;
  height: 58px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch;
  z-index: 98;
}
[data-page="reports"] .stat-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 18px;
  border-right: 1px solid var(--border);
  flex: 1;
}
[data-page="reports"] .stat-cell:last-child { border-right: none; }
[data-page="reports"] .stat-label {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--text-muted); letter-spacing: 2px;
  white-space: nowrap;
}
[data-page="reports"] .stat-val {
  font-family: var(--font-num); font-weight: 700;
  font-size: 22px; color: var(--rp); /* default — sv-* overrides */
  letter-spacing: .5px; white-space: nowrap;
}
[data-page="reports"] .stat-val.sv-c { color: var(--cyan) !important; }
[data-page="reports"] .stat-val.sv-o { color: var(--warning) !important; }
[data-page="reports"] .stat-val.sv-r { color: var(--danger) !important; }
[data-page="reports"] .stat-val.sv-g { color: var(--success) !important; }

/* ── Report strip (full-width card with report cards inside) ── */
[data-page="reports"] .report-strip {
  padding: 12px 14px 14px;
}
[data-page="reports"] .strip-header {
  font-family: var(--font-display); font-size: 8px;
  color: var(--rp); letter-spacing: 2.5px;
  margin-bottom: 12px;
}
[data-page="reports"] .report-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

/* ── Print button ── */
[data-page="reports"] .print-btn {
  font-family: var(--font-display); font-size: 7px;
  padding: 4px 10px; border: 1px solid var(--border);
  color: var(--text-muted); background: transparent;
  cursor: pointer; letter-spacing: 1px;
  border-radius: var(--radius); transition: all .15s;
}
[data-page="reports"] .print-btn:hover { border-color: var(--rp); color: var(--rp); }

/* ── Report table (rtable) ── */
[data-page="reports"] .rtable {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 10px;
}
[data-page="reports"] .rtable th {
  font-family: var(--font-display); font-size: 7px;
  letter-spacing: 1.5px; color: var(--text-muted);
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
[data-page="reports"] .rtable td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(168,255,62,0.04);
  color: var(--text-soft);
}
[data-page="reports"] .rtable tr:hover td { background: rgba(168,255,62,0.03); }
[data-page="reports"] .td-g { color: var(--success); }
[data-page="reports"] .td-o { color: var(--warning); }
[data-page="reports"] .td-r { color: var(--danger); }

/* ── Modal (report detail viewer) ── */
[data-page="reports"] .modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 600;
  align-items: flex-start; justify-content: center;
  padding-top: 60px;
  overflow-y: auto;
}
[data-page="reports"] .modal-overlay.show { display: flex; }
[data-page="reports"] .modal {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  width: 900px; max-width: 96vw;
  max-height: 85vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
[data-page="reports"] .modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(168,255,62,0.05);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
[data-page="reports"] .modal-title {
  font-family: var(--font-display); font-size: 12px;
  color: var(--rp); letter-spacing: 3px;
}
[data-page="reports"] .modal-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 22px; line-height: 1;
}
[data-page="reports"] .modal-x:hover { color: var(--danger); }
[data-page="reports"] .modal-body {
  flex: 1; overflow-y: auto;
  padding: 20px;
}
[data-page="reports"] .modal-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--surface); flex-shrink: 0;
}

[data-page="reports"] .statsbar {
  top: 72px; height: 58px;
}
[data-page="reports"] .main {
  position: fixed;
  top: 130px; bottom: 78px;
  left: 0; right: 0;
  overflow-y: auto;
  padding: 8px;
}
[data-page="reports"] .report-grid {
  display: grid;
  grid-template-columns: 270px 1fr 270px;
  gap: 8px;
  align-content: start;
}
[data-page="reports"] .rp {
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  padding: 12px;
  overflow: hidden;
  border-radius: var(--radius);
}
[data-page="reports"] .rp::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
[data-page="reports"] .rp-accent-cyan::before   { background: linear-gradient(90deg, transparent, rgba(0, 245, 255, 0.4), transparent); }
[data-page="reports"] .rp-accent-orange::before { background: linear-gradient(90deg, transparent, rgba(255, 136, 0, 0.4), transparent); }
[data-page="reports"] .rp-accent-red::before    { background: linear-gradient(90deg, transparent, rgba(255, 34, 68, 0.35), transparent); }
[data-page="reports"] .rp-accent-green::before  { background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.3), transparent); }
[data-page="reports"] .rp-full { grid-column: 1 / -1; }
[data-page="reports"] .ph {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: 9px;
  display: flex; align-items: center; justify-content: space-between;
  text-transform: uppercase;
}
[data-page="reports"] .ph-orange { color: var(--warning); }
[data-page="reports"] .ph-green  { color: var(--success); }
[data-page="reports"] .ph-cyan   { color: var(--cyan); }
[data-page="reports"] .ph-btns { display: flex; gap: 4px; }
[data-page="reports"] .ph-btn {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="reports"] .ph-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
[data-page="reports"] .rc {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px;
  cursor: pointer;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="reports"] .rc:hover {
  border-color: var(--border-strong);
  background: var(--primary-soft);
}
[data-page="reports"] .rc-icon { font-size: 20px; margin-bottom: 4px; }
[data-page="reports"] .rc-title {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--primary);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
[data-page="reports"] .rc-desc {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 8px;
}
[data-page="reports"] .rc-actions {
  display: flex; gap: 4px;
}
[data-page="reports"] .rc-btn {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 3px 8px;
  border: 1px solid;
  cursor: pointer;
  letter-spacing: 1px;
  background: transparent;
  flex: 1;
  border-radius: var(--radius);
}
[data-page="reports"] .rc-btn-rp { border-color: var(--primary); color: var(--primary); }
[data-page="reports"] .rc-btn-rp:hover { background: var(--primary-soft); }
[data-page="reports"] .rc-btn-g { border-color: var(--cyan); color: var(--cyan); background: rgba(0,245,255,0.04); }
[data-page="reports"] .rc-btn-g:hover { background: rgba(0,245,255,0.12); }
[data-page="reports"] .kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px;
}
[data-page="reports"] .kpi-row {
  display: flex; gap: 5px; margin-top: 8px;
}
[data-page="reports"] .kpi {
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  flex: 1;
}
[data-page="reports"] .kpi-num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 19px;
  color: var(--rp); /* default — sv-* overrides */
}
[data-page="reports"] .kpi-num.sv-c  { color: var(--cyan) !important; }
[data-page="reports"] .kpi-num.sv-o  { color: var(--warning) !important; }
[data-page="reports"] .kpi-num.sv-r  { color: var(--danger) !important; }
[data-page="reports"] .kpi-num.sv-g  { color: var(--success) !important; }
[data-page="reports"] .kpi-num.sv-rp { color: var(--rp) !important; }
[data-page="reports"] .kpi-label {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
[data-page="reports"] .kpi-mini {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
[data-page="reports"] .kpi-mini-label {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
[data-page="reports"] .kpi-mini-val {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-left: auto;
}
[data-page="reports"] .bar-chart-inner {
  display: flex; align-items: flex-end; justify-content: space-around;
  height: 116px;
  border-bottom: 1px solid var(--border);
  gap: 5px;
  padding-bottom: 0;
}
[data-page="reports"] .bar-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; flex: 1;
}
[data-page="reports"] .bar-rect {
  width: 100%;
  background: linear-gradient(180deg, var(--primary), var(--primary-soft));
  border-radius: 2px 2px 0 0;
  transition: height 1.5s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}
[data-page="reports"] .bar-rect::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
[data-page="reports"] .bar-label {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}
[data-page="reports"] .bar-amount {
  font-family: var(--font-num);
  font-size: 9px;
  font-weight: 700;
  color: var(--primary);
}
[data-page="reports"] .hbar-wrap {
  display: flex; flex-direction: column;
  gap: 8px;
}
[data-page="reports"] .hbar-row {
  display: flex; flex-direction: column;
  gap: 3px;
}
[data-page="reports"] .hbar-top {
  display: flex; justify-content: space-between;
}
[data-page="reports"] .hbar-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: .5px;
}
[data-page="reports"] .hbar-val {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}
[data-page="reports"] .hbar-track {
  height: 4px;
  background: var(--primary-soft);
  border-radius: 1px;
  overflow: hidden;
}
[data-page="reports"] .hbar-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 1.5s cubic-bezier(.22, 1, .36, 1);
}
[data-page="reports"] .hf-rp { background: linear-gradient(90deg, rgba(168, 255, 62, 0.35), var(--rp));      box-shadow: 0 0 5px rgba(168, 255, 62, 0.35); }
[data-page="reports"] .hf-g  { background: linear-gradient(90deg, rgba(0, 255, 136, 0.35), var(--success)); }
[data-page="reports"] .hf-o  { background: linear-gradient(90deg, rgba(255, 136, 0, 0.35), var(--warning)); }
[data-page="reports"] .hf-r  { background: linear-gradient(90deg, rgba(255, 34, 68, 0.35), var(--danger));  }
[data-page="reports"] .hf-c  { background: linear-gradient(90deg, rgba(0, 245, 255, 0.35), var(--cyan));    }

/* ─── [data-page="workorders"] ────────────────────────────────────────────── */

/* Alias old var names to Pro tokens */
[data-page="workorders"] {
  --text-mid: var(--text-soft);
  --text-dim: var(--text-muted);
  --border-hi: var(--border-strong);
  --panel: var(--surface);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
[data-page="workorders"] .statsbar {
  top: 72px; height: 56px;
}
[data-page="workorders"] .stat-val { font-family: var(--font-num); font-size: 22px; font-weight: 700; text-shadow: none; }
[data-page="workorders"] .stat-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--text-muted); }
[data-page="workorders"] .sv-wo { color: var(--wo); }
[data-page="workorders"] .main {
  position: fixed;
  top: 128px; bottom: 78px;
  left: 0; right: 0;
  display: flex;
  overflow: hidden;
}

/* ── Topbar helpers ─────────────────────────────────────────────────────── */
[data-page="workorders"] .tb-group    { display: flex; align-items: center; gap: 14px; }
[data-page="workorders"] .tb-tag      { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 3px; }
[data-page="workorders"] .tb-op-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 2px; }
[data-page="workorders"] .op-name     { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .5px; }
[data-page="workorders"] .ticker-scroll { overflow: hidden; flex: 1; }

/* ── Ticker ──────────────────────────────────────────────────────────────── */
[data-page="workorders"] .ticker-wrap {
  position: fixed; top: 46px; left: 0; right: 0; height: 26px;
  background: rgba(2, 12, 20, 0.95);
  border-bottom: 1px solid var(--border);
  overflow: hidden; z-index: 99;
  display: flex; align-items: center;
}
[data-page="workorders"] .ticker-tag {
  background: var(--wo); color: var(--bg);
  font-family: var(--font-display); font-size: 8px; font-weight: 700;
  padding: 0 12px; height: 100%;
  display: flex; align-items: center;
  letter-spacing: 2px; white-space: nowrap; flex-shrink: 0;
}
[data-page="workorders"] .ticker-track { display: flex; animation: tick 55s linear infinite; white-space: nowrap; }
[data-page="workorders"] .ti { padding: 0 28px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; }

/* ── Left panel ─────────────────────────────────────────────────────────── */
[data-page="workorders"] .left-panel {
  width: 290px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-page="workorders"] .lp-sec {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
[data-page="workorders"] .lp-title {
  font-family: var(--font-display); font-size: 7px; letter-spacing: 2.5px;
  color: var(--wo); margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(138, 184, 94, 0.3);
}

/* ── Calendar ────────────────────────────────────────────────────────────── */
[data-page="workorders"] .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
[data-page="workorders"] .cal-month { font-family: var(--font-display); font-size: 9px; color: var(--wo); letter-spacing: 2px; }
[data-page="workorders"] .cal-nav { background: transparent; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 0 6px; line-height: 1; transition: color .15s; }
[data-page="workorders"] .cal-nav:hover { color: var(--wo); }
[data-page="workorders"] .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
[data-page="workorders"] .cal-dow { font-family: var(--font-display); font-size: 6px; letter-spacing: 1px; color: var(--text-muted); text-align: center; padding: 2px 0; margin-bottom: 2px; }
[data-page="workorders"] .cal-day {
  font-family: var(--font-num); font-size: 11px; font-weight: 600;
  text-align: center; padding: 3px 2px; cursor: pointer;
  border-radius: var(--radius); position: relative;
  color: var(--text-muted); transition: all .15s;
}
[data-page="workorders"] .cal-day:hover { background: rgba(138, 184, 94, .1); color: var(--wo); }
[data-page="workorders"] .cal-day.today { color: var(--wo); background: rgba(138, 184, 94, .12); border: 1px solid rgba(138, 184, 94, .4); }
[data-page="workorders"] .cal-day.has-wo {
  font-weight: 700;
  color: var(--wo);
  border: 1px solid rgba(138, 184, 94, .5);
  background: rgba(138, 184, 94, .08);
}
[data-page="workorders"] .cal-day.has-crit {
  font-weight: 700;
  color: var(--danger);
  border: 1px solid rgba(255, 34, 68, .5);
  background: rgba(255, 34, 68, .08);
}
[data-page="workorders"] .cal-day.selected { background: rgba(138, 184, 94, .2); color: var(--wo); box-shadow: 0 0 8px rgba(138, 184, 94, .3); }
[data-page="workorders"] .cal-day.other-month { opacity: .25; }

/* ── Mini category gauges ────────────────────────────────────────────────── */
[data-page="workorders"] .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
[data-page="workorders"] .mini-card { display: flex; flex-direction: column; align-items: center; padding: 4px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); }
[data-page="workorders"] .mini-label { font-family: var(--font-display); font-size: 6px; letter-spacing: 1px; color: var(--text-muted); text-align: center; margin-top: 2px; }
[data-page="workorders"] .mini-val { font-family: var(--font-num); font-size: 18px; font-weight: 700; }

/* ── Tech roster ─────────────────────────────────────────────────────────── */
[data-page="workorders"] .tech-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(138, 184, 94, 0.06); }
[data-page="workorders"] .tech-row:last-child { border-bottom: none; }
[data-page="workorders"] .tech-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
[data-page="workorders"] .tech-name { font-family: var(--font-num); font-size: 11px; font-weight: 600; color: var(--text); flex: 1; }
[data-page="workorders"] .tech-count { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }

/* ── Right panel ─────────────────────────────────────────────────────────── */
[data-page="workorders"] .right-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
[data-page="workorders"] .filterbar {
  position: static; z-index: auto;
  height: 38px; flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 14px; gap: 5px;
  flex-wrap: nowrap; overflow-x: auto;
}
[data-page="workorders"] .fbtn { font-family: var(--font-mono); font-size: 8px; padding: 4px 9px; border: 1px solid var(--border); color: var(--text-muted); background: transparent; cursor: pointer; letter-spacing: 1px; transition: all .15s; white-space: nowrap; flex-shrink: 0; border-radius: var(--radius); }
[data-page="workorders"] .fbtn:hover,
[data-page="workorders"] .fbtn.active { border-color: var(--wo); color: var(--wo); background: rgba(138, 184, 94, .07); }
[data-page="workorders"] .wo-search { font-family: var(--font-mono); font-size: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 3px 10px; outline: none; letter-spacing: .8px; border-radius: var(--radius); width: 175px; flex-shrink: 0; }
[data-page="workorders"] .wo-search:focus { border-color: var(--wo); }
[data-page="workorders"] .wo-search::placeholder { color: var(--text-muted); }
[data-page="workorders"] .f-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
[data-page="workorders"] .row-count { font-family: var(--font-display); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
[data-page="workorders"] .add-btn { font-family: var(--font-display); font-size: 8px; padding: 5px 12px; border: 1px solid var(--success); color: var(--success); background: rgba(0, 255, 136, .06); cursor: pointer; letter-spacing: 1px; border-radius: var(--radius); transition: all .15s; flex-shrink: 0; }
[data-page="workorders"] .add-btn:hover { background: rgba(0, 255, 136, .15); }

/* ── WO Cards — horizontal layout ────────────────────────────────────────── */
[data-page="workorders"] .cards-wrap { flex: 1; overflow-y: auto; padding: 3px 10px 80px; display: flex; flex-direction: column; gap: 5px; }
[data-page="workorders"] .wo-card {
  background: var(--surface); border: 1px solid var(--border);
  position: relative; cursor: pointer; transition: all .15s;
  overflow: hidden; flex-shrink: 0;
}
[data-page="workorders"] .wo-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
[data-page="workorders"] .wo-card.p-critical::before { background: var(--danger); box-shadow: 2px 0 8px rgba(255,34,68,.4); }
[data-page="workorders"] .wo-card.p-high::before    { background: var(--warning); box-shadow: 2px 0 6px rgba(255,136,0,.3); }
[data-page="workorders"] .wo-card.p-medium::before  { background: var(--wo); box-shadow: 2px 0 5px rgba(138,184,94,.3); }
[data-page="workorders"] .wo-card.p-low::before     { background: var(--text-muted); }
[data-page="workorders"] .wo-card:hover { border-color: var(--border-strong); background: rgba(138, 184, 94, .04); }
[data-page="workorders"] .wo-card.selected { border-color: var(--wo); background: rgba(138, 184, 94, .07); }
[data-page="workorders"] .wo-card.status-completed { opacity: .55; }

[data-page="workorders"] .card-inner { display: flex; align-items: center; gap: 12px; padding: 5px 14px 5px 16px; }
[data-page="workorders"] .card-id { flex-shrink: 0; width: 148px; display: flex; flex-direction: column; gap: 4px; }
[data-page="workorders"] .wo-num { font-family: var(--font-display); font-size: 8px; color: rgba(138,184,94,.75); letter-spacing: 1px; }
[data-page="workorders"] .cat-badge { font-family: var(--font-display); font-size: 7px; padding: 3px 7px; border: 1px solid; letter-spacing: .8px; display: inline-block; border-radius: var(--radius); }
[data-page="workorders"] .cat-fr { border-color: var(--danger); color: var(--danger); }
[data-page="workorders"] .cat-mt { border-color: var(--warning); color: var(--warning); }
[data-page="workorders"] .cat-cr { border-color: var(--cyan); color: var(--cyan); }
[data-page="workorders"] .cat-pl { border-color: var(--yellow); color: var(--yellow); }
[data-page="workorders"] .cat-ot { border-color: var(--danger); color: rgba(255,68,0,.9); }
[data-page="workorders"] .cat-of { border-color: var(--border); color: var(--text-muted); }

[data-page="workorders"] .card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
[data-page="workorders"] .card-main-row { display: flex; align-items: center; gap: 14px; }
[data-page="workorders"] .card-title { flex: 1; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-page="workorders"] .card-meta-group { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
[data-page="workorders"] .cd-sys  { font-family: var(--font-display); font-size: 7px; color: var(--wo); letter-spacing: .5px; white-space: nowrap; }
[data-page="workorders"] .cd-tech { font-family: var(--font-mono); font-size: 10px; color: rgba(200,236,170,.95); white-space: nowrap; }
[data-page="workorders"] .cd-date { font-family: var(--font-num); font-size: 13px; color: var(--yellow); white-space: nowrap; }
[data-page="workorders"] .cd-hrs  { font-family: var(--font-num); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
[data-page="workorders"] .card-sub { font-family: var(--font-mono); font-size: 10px; color: rgba(200,236,170,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

[data-page="workorders"] .card-status { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 112px; }

/* ── Countdown ───────────────────────────────────────────────────────────── */
[data-page="workorders"] .countdown { display: flex; flex-direction: column; align-items: flex-end; }
[data-page="workorders"] .cd-num { font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1; }
[data-page="workorders"] .cd-lbl { display: none; }
[data-page="workorders"] .cd-wo  { color: var(--wo); }
[data-page="workorders"] .cd-or  { color: var(--warning); }
[data-page="workorders"] .cd-red { color: var(--danger); text-shadow: 0 0 8px rgba(255,34,68,.4); }
[data-page="workorders"] .cd-dim { color: var(--text-muted); }

/* ── Status pills ────────────────────────────────────────────────────────── */
[data-page="workorders"] .pill { font-family: var(--font-display); font-size: 6px; padding: 2px 6px; border: 1px solid; letter-spacing: 1px; white-space: nowrap; border-radius: var(--radius); }
[data-page="workorders"] .pill-open  { border-color: var(--wo); color: var(--wo); }
[data-page="workorders"] .pill-inprog { border-color: var(--warning); color: var(--warning); animation: inprogPulse 2s ease-in-out infinite; }
@keyframes inprogPulse { 0%,100%{box-shadow:0 0 4px rgba(255,136,0,.2)}50%{box-shadow:0 0 12px rgba(255,136,0,.5)} }
[data-page="workorders"] .pill-sched { border-color: var(--yellow); color: var(--yellow); }
[data-page="workorders"] .pill-comp  { border-color: var(--success); color: var(--success); }
[data-page="workorders"] .pill-hold  { border-color: var(--text-muted); color: var(--text-muted); }
[data-page="workorders"] .pill-crit  { border-color: var(--danger); color: #fff; background: rgba(255,34,68,.25); animation: critPulse 1.5s ease-in-out infinite; }
[data-page="workorders"] .pill-canc  { border-color: var(--text-muted); color: var(--text-muted); opacity: .5; }

/* ── Priority rules ──────────────────────────────────────────────────────── */
[data-page="workorders"] .row-critical td { background: rgba(255, 34, 68, 0.06); }
[data-page="workorders"] .priority-CRITICAL,
[data-page="workorders"] .pill.priority-CRITICAL { color: var(--danger); border-color: var(--danger); background: rgba(255, 34, 68, 0.1); }
[data-page="workorders"] .priority-HIGH,
[data-page="workorders"] .pill.priority-HIGH { color: var(--warning); border-color: var(--warning); background: rgba(255, 136, 0, 0.08); }
[data-page="workorders"] .priority-NORMAL,
[data-page="workorders"] .pill.priority-NORMAL { color: var(--wo); border-color: var(--wo); background: rgba(138, 184, 94, 0.08); }
[data-page="workorders"] .priority-LOW,
[data-page="workorders"] .pill.priority-LOW { color: var(--text-muted); border-color: var(--border); background: transparent; }

/* ── Detail panel ────────────────────────────────────────────────────────── */
[data-page="workorders"] .detail-panel { position: fixed; top: 128px; right: -480px; bottom: 78px; width: 480px; background: var(--bg); border-left: 1px solid var(--border-strong); z-index: 300; display: flex; flex-direction: column; transition: right .25s ease; box-shadow: -20px 0 60px rgba(0,0,0,.8); }
[data-page="workorders"] .detail-panel.open { right: 0; }
[data-page="workorders"] .dp-header { padding: 14px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(138,184,94,.08), transparent); flex-shrink: 0; position: relative; }
[data-page="workorders"] .dp-wo-num { font-family: var(--font-display); font-size: 9px; color: var(--wo); letter-spacing: 2px; margin-bottom: 2px; }
[data-page="workorders"] .dp-title  { font-family: var(--font-num); font-size: 18px; font-weight: 700; color: var(--text); }
[data-page="workorders"] .dp-close  { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
[data-page="workorders"] .dp-close:hover { color: var(--danger); }
[data-page="workorders"] .dp-body   { flex: 1; overflow-y: auto; }
[data-page="workorders"] .dp-footer { flex-shrink: 0; padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
[data-page="workorders"] .dp-note   { padding: 10px 18px; font-family: var(--font-num); font-size: 12px; color: var(--text-soft); line-height: 1.5; border-bottom: 1px solid var(--border); }
[data-page="workorders"] .dp-sec    { border-bottom: 1px solid rgba(138,184,94,.07); }
[data-page="workorders"] .dp-sec-title { font-family: var(--font-display); font-size: 7px; letter-spacing: 2px; color: var(--text-muted); padding: 7px 18px; background: rgba(138,184,94,.025); border-bottom: 1px solid rgba(138,184,94,.05); }
[data-page="workorders"] .dp-row    { display: flex; justify-content: space-between; padding: 7px 18px; border-bottom: 1px solid rgba(138,184,94,.03); gap: 12px; }
[data-page="workorders"] .dp-label  { font-family: var(--font-mono); font-size: 8px; color: var(--text-soft); letter-spacing: 1px; flex-shrink: 0; }
[data-page="workorders"] .dp-val    { font-family: var(--font-mono); font-size: 10px; color: var(--text); text-align: right; max-width: 270px; word-break: break-word; }
[data-page="workorders"] .dp-notes  { padding: 12px 18px; font-family: var(--font-num); font-size: 13px; color: var(--text-soft); line-height: 1.5; }
[data-page="workorders"] .dp-btn { flex: 1; min-width: 80px; padding: 9px; font-family: var(--font-display); font-size: 7px; letter-spacing: 1px; cursor: pointer; border: 1px solid; background: transparent; text-align: center; transition: all .15s; border-radius: var(--radius); }
[data-page="workorders"] .dp-btn-wo  { border-color: var(--wo); color: var(--wo); }
[data-page="workorders"] .dp-btn-wo:hover  { background: rgba(138, 184, 94, .12); }
[data-page="workorders"] .dp-btn-g   { border-color: var(--success); color: var(--success); }
[data-page="workorders"] .dp-btn-g:hover   { background: rgba(0, 255, 136, .10); }
[data-page="workorders"] .dp-btn-r   { border-color: var(--danger); color: var(--danger); }
[data-page="workorders"] .dp-btn-r:hover   { background: rgba(255, 34, 68, .08); }
[data-page="workorders"] .dp-btn-gho { border-color: var(--border); color: var(--text-muted); }
[data-page="workorders"] .dp-btn-gho:hover { border-color: var(--wo); color: var(--wo); }

/* ── Modal ────────────────────────────────────────────────────────────────── */
[data-page="workorders"] .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 500; align-items: center; justify-content: center; }
[data-page="workorders"] .modal-overlay.show { display: flex; }
[data-page="workorders"] .modal { background: var(--bg); border: 1px solid var(--border-strong); width: 560px; max-width: 94vw; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
[data-page="workorders"] .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, rgba(138,184,94,.07), transparent); }
[data-page="workorders"] .modal-title { font-family: var(--font-display); font-size: 11px; color: var(--wo); letter-spacing: 3px; }
[data-page="workorders"] .modal-x { background: transparent; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; }
[data-page="workorders"] .modal-x:hover { color: var(--danger); }
[data-page="workorders"] .modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
[data-page="workorders"] .modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
[data-page="workorders"] .frow  { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
[data-page="workorders"] .frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
[data-page="workorders"] .flabel { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); letter-spacing: 2px; }
[data-page="workorders"] .finput { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 11px; padding: 7px 10px; outline: none; width: 100%; transition: all .15s; border-radius: var(--radius); }
[data-page="workorders"] .finput:focus { border-color: var(--wo); }
[data-page="workorders"] .finput option { background: var(--bg); color: var(--text); }
[data-page="workorders"] .btn { font-family: var(--font-display); font-size: 8px; padding: 9px 18px; border: 1px solid; cursor: pointer; letter-spacing: 1px; background: transparent; transition: all .15s; border-radius: var(--radius); }
[data-page="workorders"] .btn-wo  { border-color: var(--wo); color: var(--wo); }
[data-page="workorders"] .btn-wo:hover  { background: rgba(138, 184, 94, .12); }
[data-page="workorders"] .btn-gho { border-color: var(--border); color: var(--text-muted); }
[data-page="workorders"] .btn-gho:hover { border-color: var(--wo); color: var(--wo); }

/* ── Nav alert ────────────────────────────────────────────────────────────── */
[data-page="workorders"] .navalert { position: absolute; top: 5px; right: 5px; background: var(--danger); color: #fff; font-family: var(--font-display); font-size: 7px; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ─── [data-page="system"] ────────────────────────────────────────────────── */
[data-page="system"] .main {
  position: fixed;
  top: 72px; bottom: 78px;
  left: 0; right: 0;
  display: flex;
  overflow: hidden;
}
[data-page="system"] .left-rail {
  width: 280px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  padding: 12px;
}
[data-page="system"] .map-container {
  flex: 1;
  position: relative;
  background: #000;
}
[data-page="system"] #map {
  position: absolute; inset: 0;
}
/* SCADA-style infra markers (system page) */
.mk-tank   { width: 14px; height: 14px; background: var(--cyan);    border-radius: 2px; border: 2px solid rgba(255, 255, 255, .8); cursor: pointer; box-shadow: 0 0 8px rgba(0, 245, 255, .5); }
.mk-valve  { width: 12px; height: 12px; background: var(--yellow);  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); cursor: pointer; }
.mk-sample { width: 10px; height: 10px; background: var(--green);   border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); cursor: pointer; box-shadow: 0 0 6px rgba(0, 255, 136, .4); }
.mk-meter  { width: 10px; height: 10px; background: var(--blue);    border-radius: 2px; border: 2px solid rgba(255, 255, 255, .5); cursor: pointer; }
.mk-wo-crit { width: 12px; height: 12px; background: var(--red);    border-radius: 50%; border: 2px solid #fff; cursor: pointer; animation: critPulse 1.5s infinite; }
.mk-wo-high { width: 11px; height: 11px; background: var(--orange); border-radius: 50%; border: 2px solid #fff; cursor: pointer; }
.mk-wo-med  { width: 10px; height: 10px; background: var(--wo);     border-radius: 50%; border: 2px solid #fff; cursor: pointer; }
.mk-cust-active   { width: 6px; height: 6px; background: var(--green); border-radius: 50%; opacity: .7; }
.mk-cust-inactive { width: 5px; height: 5px; background: #555;        border-radius: 50%; opacity: .5; }
.mk-cust-disc     { width: 6px; height: 6px; background: var(--red);   border-radius: 50%; opacity: .7; }
.mk-pump  { width: 16px; height: 16px; background: var(--orange); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; font-family: var(--font-display); cursor: pointer; box-shadow: 0 0 8px rgba(255, 136, 0, .5); }

/* ── System page — full layout (overrides global filterbar/topbar offsets) ── */
[data-page="system"] .topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 46px;
  background: rgba(2, 12, 20, 0.95);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; z-index: 100;
}
[data-page="system"] .ticker-wrap {
  position: fixed; top: 46px; left: 0; right: 0; height: 26px;
  background: rgba(2, 12, 20, 0.95);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  z-index: 99;
  display: flex; align-items: center;
}
[data-page="system"] .ticker-tag {
  background: var(--primary);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  padding: 0 12px;
  height: 100%;
  display: flex; align-items: center;
  letter-spacing: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
[data-page="system"] .ticker-track {
  display: flex;
  animation: tick 55s linear infinite;
  white-space: nowrap;
}
[data-page="system"] .ti {
  padding: 0 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .5px;
}
@keyframes tick { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }

[data-page="system"] .statsbar {
  position: fixed; top: 72px; left: 0; right: 0; height: 48px;
  background: rgba(2, 12, 20, 0.95);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: stretch;
  z-index: 98;
}
[data-page="system"] .main {
  position: fixed;
  top: 120px; bottom: 78px;
  left: 0; right: 0;
  display: flex;
  overflow: hidden;
}
[data-page="system"] .left-panel {
  width: 280px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
[data-page="system"] .lp-sec {
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
[data-page="system"] .lp-sec.scroll { flex: 1; overflow-y: auto; }
[data-page="system"] .lp-title {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 2.5px;
  color: var(--primary);
  margin-bottom: 5px;
  text-shadow: 0 0 8px var(--primary-soft);
}

/* ── Topbar helper classes ──────────────────────────────────────────── */
[data-page="system"] .tb-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 3px;
}
[data-page="system"] .tb-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
[data-page="system"] .tb-op-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
}
[data-page="system"] .op-name {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .5px;
}
[data-page="system"] .ti-info  { color: var(--text); }
[data-page="system"] .ti-alert { color: var(--danger); }
[data-page="system"] .ticker-scroll {
  overflow: hidden;
  flex: 1;
}
[data-page="system"] .empty-msg-sm {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
  padding: 4px 0;
}

/* ── System list rows ───────────────────────────────────────────────── */
[data-page="system"] .sys-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  margin-bottom: 1px;
  border-radius: var(--radius);
}
[data-page="system"] .sys-row:hover {
  border-color: var(--border-strong);
  background: rgba(0, 245, 255, 0.04);
}
[data-page="system"] .sys-row.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 12px rgba(0, 245, 255, 0.08);
}
[data-page="system"] .sys-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
[data-page="system"] .sys-code {
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--primary);
  letter-spacing: 1.5px;
  width: 64px;
  flex-shrink: 0;
}
[data-page="system"] .sys-name {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
[data-page="system"] .sys-acct {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
}

/* ── Config rows ────────────────────────────────────────────────────── */
[data-page="system"] .cfg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 245, 255, 0.06);
}
[data-page="system"] .cfg-row:last-child { border-bottom: none; }
[data-page="system"] .cfg-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
[data-page="system"] .cfg-val {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* ── Asset rows + colored bubbles ────────────────────────────────────── */
[data-page="system"] .asset-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.06);
}
[data-page="system"] .asset-row:last-child { border-bottom: none; }
[data-page="system"] .asset-name {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text);
  flex: 1;
  font-weight: 500;
}
[data-page="system"] .asset-bubble {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
[data-page="system"] .bubble-red    { background: var(--danger);  box-shadow: 0 0 7px rgba(255, 34, 68, 0.55); }
[data-page="system"] .bubble-blue   { background: var(--blue);    box-shadow: 0 0 7px rgba(0, 136, 255, 0.55); }
[data-page="system"] .bubble-yellow { background: var(--yellow);  box-shadow: 0 0 7px rgba(232, 180, 0, 0.55); }
[data-page="system"] .bubble-green  { background: var(--success); box-shadow: 0 0 7px rgba(0, 255, 136, 0.55); }
[data-page="system"] .bubble-cyan   { background: var(--cyan);    box-shadow: 0 0 7px rgba(0, 245, 255, 0.55); }
[data-page="system"] .bubble-dim    { background: var(--text-muted); opacity: .5; }

[data-page="system"] .asset-status {
  font-family: var(--font-display);
  font-size: 6px;
  padding: 2px 6px;
  border: 1px solid;
  border-radius: var(--radius);
  background: var(--surface);
  letter-spacing: 1px;
  white-space: nowrap;
}
[data-page="system"] .as-active  { border-color: var(--success); color: var(--success); background: rgba(0, 255, 136, 0.06); }
[data-page="system"] .as-maint   { border-color: var(--warning); color: var(--warning); background: rgba(255, 136, 0, 0.06); }
[data-page="system"] .as-offline { border-color: var(--danger);  color: var(--danger);  background: rgba(255, 34, 68, 0.06); }

/* ── Map area + layer toggles ────────────────────────────────────────── */
[data-page="system"] .map-area {
  flex: 1;
  position: relative;
  overflow: hidden;
}
[data-page="system"] #map {
  width: 100%;
  height: 100%;
}
[data-page="system"] .layer-toggles {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; flex-direction: column;
  gap: 6px;
  z-index: 20;
}
[data-page="system"] .ltbtn {
  font-family: var(--font-display);
  font-size: 7px;
  line-height: 1;
  padding: 4px 9px;
  border: 1px solid var(--border-strong);
  background: rgba(2, 12, 20, 0.85);
  color: var(--text-soft);
  cursor: pointer;
  letter-spacing: 1.2px;
  transition: all .2s;
  white-space: nowrap;
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  text-transform: uppercase;
}
[data-page="system"] .ltbtn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
[data-page="system"] .ltbtn.on {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.15);
}
[data-page="system"] .ltbtn.layer-wo.on     { border-color: var(--success); color: var(--success); background: rgba(0, 255, 136, 0.08); box-shadow: 0 0 12px rgba(0, 255, 136, 0.15); }
[data-page="system"] .ltbtn.layer-comply.on { border-color: var(--warning); color: var(--warning); background: rgba(255, 136, 0, 0.08); box-shadow: 0 0 12px rgba(255, 136, 0, 0.15); }
[data-page="system"] .ltbtn.layer-cust.on   { border-color: var(--success); color: var(--success); background: rgba(0, 255, 136, 0.06); }

[data-page="system"] .map-watermark {
  position: absolute;
  top: 140px; right: 12px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(0, 245, 255, 0.22);
  letter-spacing: 1.5px;
  pointer-events: none;
  z-index: 20;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Detail panel (slide-out from right) ─────────────────────────────── */
[data-page="system"] .detail-panel {
  position: fixed;
  top: 120px;
  right: -440px;
  bottom: 78px;
  width: 440px;
  background: var(--bg);
  border-left: 1px solid var(--border-strong);
  z-index: 300;
  display: flex; flex-direction: column;
  transition: right .25s ease;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  transform: none;
}
[data-page="system"] .detail-panel.open { right: 0; transform: none; }
[data-page="system"] .dp-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-soft), transparent);
  flex-shrink: 0;
  position: relative;
}
[data-page="system"] .dp-sys-code {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--primary);
  letter-spacing: 3px;
  margin-bottom: 4px;
  text-shadow: 0 0 8px var(--primary-soft);
}
[data-page="system"] .dp-sys-name {
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
[data-page="system"] .dp-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  font-family: var(--font-display);
}
[data-page="system"] .dp-close:hover { color: var(--danger); }
[data-page="system"] .dp-body {
  flex: 1;
  overflow-y: auto;
}
[data-page="system"] .dp-sec-title {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--primary);
  padding: 8px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  text-transform: uppercase;
}
[data-page="system"] .dp-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.04);
  gap: 12px;
}
[data-page="system"] .dp-row:last-child { border-bottom: none; }
[data-page="system"] .dp-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}
[data-page="system"] .dp-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}
[data-page="system"] .dp-val-loc {
  font-size: 9px;
  text-align: right;
  max-width: 200px;
}
[data-page="system"] .dp-notes {
  padding: 10px 18px;
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.5;
}
[data-page="system"] .dp-footer {
  flex-shrink: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}
[data-page="system"] .dp-btn {
  flex: 1;
  padding: 9px;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1.2px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  text-align: center;
  transition: all .15s;
  border-radius: var(--radius);
  text-transform: uppercase;
}
[data-page="system"] .dp-btn-w {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
[data-page="system"] .dp-btn-w:hover { background: rgba(0, 245, 255, 0.18); }
[data-page="system"] .dp-btn-ghost {
  border-color: var(--border-strong);
  color: var(--text-muted);
}
[data-page="system"] .dp-btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ─── [data-page="portal"] ────────────────────────────────────────────────── */
[data-page="portal"] {
  font-family: var(--font-num);
  overflow: hidden;
  height: 100vh;
}

/* Topbar */
[data-page="portal"] .topbar {
  height: 50px;
  padding: 0 20px;
}
[data-page="portal"] .logo {
  font-size: 19px;
  letter-spacing: 8px;
  animation: none;
}
[data-page="portal"] .portal-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
  letter-spacing: 3px;
  flex: 1;
  text-align: center;
}
[data-page="portal"] .user-info {
  display: flex; align-items: center;
  gap: 12px;
}
[data-page="portal"] .user-name {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
}
[data-page="portal"] .acct-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
[data-page="portal"] #clock {
  color: var(--text-soft);
  font-size: 11px;
  letter-spacing: 2px;
  font-family: var(--font-mono);
}

/* Stat strip — fixed 4-column header below topbar */
[data-page="portal"] .statstrip {
  position: fixed;
  top: 50px; left: 0; right: 0;
  height: 70px;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 99;
}
[data-page="portal"] .stat {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-right: 1px solid var(--border);
  padding: 0 12px;
}
[data-page="portal"] .stat:last-child { border-right: none; }
[data-page="portal"] .stat-label {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
[data-page="portal"] .stat-val {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 22px;
}
[data-page="portal"] .stat-val.sv-c { color: var(--cyan); }
[data-page="portal"] .stat-val.sv-g { color: var(--success); }
[data-page="portal"] .stat-val.sv-o { color: var(--warning); }
[data-page="portal"] .stat-val.sv-r { color: var(--danger); }
[data-page="portal"] .stat-val.sv-m { color: var(--text-soft); }
[data-page="portal"] .stat-sub {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* Main 2-column grid */
[data-page="portal"] .main {
  position: fixed;
  top: 120px; bottom: 0;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}
[data-page="portal"] .col {
  display: flex; flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Panels (account info + transaction history) */
[data-page="portal"] .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="portal"] .panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44,123,162,.3), transparent);
}
[data-page="portal"] .panel-title {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--text-soft);
  padding: 9px 14px 7px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}

/* Account info rows */
[data-page="portal"] .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(44,123,162,.04);
}
[data-page="portal"] .info-row:last-child { border-bottom: none; }
[data-page="portal"] .info-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
[data-page="portal"] .info-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text);
}

/* Phone edit */
[data-page="portal"] .phone-edit-wrap {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(44,123,162,.06);
}
[data-page="portal"] .phone-row {
  display: flex; gap: 6px; align-items: center;
}
[data-page="portal"] .phone-input {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
  outline: none;
  flex: 1;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="portal"] .phone-input:focus { border-color: var(--border-strong); }
[data-page="portal"] .phone-save {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 7px 10px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  cursor: pointer;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="portal"] .phone-save:hover { background: rgba(44,123,162,.14); }

/* Toggles */
[data-page="portal"] .toggle-section { padding: 10px 14px; }
[data-page="portal"] .toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
[data-page="portal"] .toggle-row:last-child { margin-bottom: 0; }
[data-page="portal"] .toggle-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
[data-page="portal"] .toggle {
  position: relative;
  width: 36px; height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
[data-page="portal"] .toggle input { opacity: 0; width: 0; height: 0; }
[data-page="portal"] .toggle-track {
  position: absolute;
  inset: 0;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  transition: .2s;
  border-radius: 10px;
}
[data-page="portal"] .toggle input:checked + .toggle-track {
  background: rgba(44,123,162,.25);
  border-color: var(--primary);
}
[data-page="portal"] .toggle-thumb {
  position: absolute;
  height: 12px; width: 12px;
  top: 2px; left: 2px;
  background: var(--text-muted);
  transition: .2s;
  border-radius: 50%;
}
[data-page="portal"] .toggle input:checked ~ .toggle-thumb {
  transform: translateX(18px);
  background: var(--primary);
}
[data-page="portal"] .save-alerts-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 2px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  cursor: pointer;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="portal"] .save-alerts-btn:hover { background: rgba(44,123,162,.12); }

/* Transaction history table */
[data-page="portal"] .tbl-wrap {
  overflow-y: auto;
  flex: 1;
}
[data-page="portal"] .ptable {
  width: 100%;
  border-collapse: collapse;
}
[data-page="portal"] .ptable thead {
  position: sticky;
  top: 0;
  z-index: 5;
}
[data-page="portal"] .ptable th {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  padding: 7px 12px;
  border-bottom: 2px solid var(--border);
  text-align: left;
  font-weight: 400;
  background: var(--bg);
}
[data-page="portal"] .ptable td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(44,123,162,.04);
  font-size: 12px;
  vertical-align: middle;
}
[data-page="portal"] .ptable tr:hover td { background: rgba(44,123,162,.02); }
[data-page="portal"] .td-date {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
}
[data-page="portal"] .td-amt {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  color: var(--success);
}
[data-page="portal"] .td-ref {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}

/* Status pills */
[data-page="portal"] .spill {
  font-family: var(--font-display);
  font-size: 6px;
  padding: 2px 6px;
  border: 1px solid;
  letter-spacing: 1px;
  white-space: nowrap;
  border-radius: var(--radius);
}
[data-page="portal"] .s-paid { border-color: rgba(75,181,120,.4); color: var(--success); }
[data-page="portal"] .s-due  { border-color: rgba(232,180,0,.4); color: var(--warning); }
[data-page="portal"] .s-over { border-color: rgba(255,34,68,.4); color: var(--danger); }
[data-page="portal"] .s-open { border-color: rgba(44,123,162,.4); color: var(--primary); }
[data-page="portal"] .s-prog { border-color: rgba(255,136,0,.4); color: var(--warning); }

/* Invoice row click + PDF icon */
[data-page="portal"] .inv-row { cursor: pointer; }
[data-page="portal"] .inv-row:hover td { background: rgba(44,123,162,.04) !important; }
[data-page="portal"] .pdf-icon {
  font-size: 12px;
  opacity: .5;
  transition: opacity .15s;
}
[data-page="portal"] .inv-row:hover .pdf-icon { opacity: 1; }

/* Service requests panel */
[data-page="portal"] .sr-panel {
  background: rgba(232,180,0,.03);
  border: 1px solid rgba(232,180,0,.2);
  position: relative;
  flex-shrink: 0;
  border-radius: var(--radius);
}
[data-page="portal"] .sr-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,180,0,.35), transparent);
}
[data-page="portal"] .sr-title {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2.5px;
  color: rgba(232,180,0,.85);
  padding: 9px 14px 7px;
  border-bottom: 1px solid rgba(232,180,0,.15);
}
[data-page="portal"] .sr-item {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(232,180,0,.08);
}
[data-page="portal"] .sr-item:last-child { border-bottom: none; }
[data-page="portal"] .sr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
[data-page="portal"] .sr-cat {
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--warning);
  letter-spacing: 1px;
}
[data-page="portal"] .sr-date {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
}
[data-page="portal"] .sr-status {
  font-family: var(--font-display);
  font-size: 7px;
  padding: 2px 6px;
  border: 1px solid;
  letter-spacing: 1px;
  border-radius: var(--radius);
}
[data-page="portal"] .sr-s-open { border-color: rgba(44,123,162,.4); color: var(--primary); }
[data-page="portal"] .sr-s-prog { border-color: rgba(232,180,0,.4); color: var(--warning); }

/* Submit ticket button */
[data-page="portal"] .ticket-btn {
  width: calc(100% - 28px);
  margin: 10px 14px;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2px;
  border: 1px solid var(--warning);
  color: var(--warning);
  background: rgba(232,180,0,.05);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
}
[data-page="portal"] .ticket-btn:hover {
  background: rgba(232,180,0,.12);
  box-shadow: 0 0 16px rgba(232,180,0,.15);
}

/* Modal overlay (ticket modal & invoice modal) */
[data-page="portal"] .modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 600;
  align-items: center;
  justify-content: center;
}
[data-page="portal"] .modal-overlay.show { display: flex; }
[data-page="portal"] .modal {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  width: 480px;
  max-width: 94vw;
  box-shadow: 0 0 60px rgba(44,123,162,.1);
  border-radius: var(--radius);
}
[data-page="portal"] .modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, var(--primary-soft), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
[data-page="portal"] .modal-title {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--primary);
  letter-spacing: 3px;
}
[data-page="portal"] .modal-x {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
[data-page="portal"] .modal-x:hover { color: var(--danger); }
[data-page="portal"] .modal-body { padding: 20px; }
[data-page="portal"] .m-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}
[data-page="portal"] .m-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 2px;
}
[data-page="portal"] .m-select {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 9px 12px;
  outline: none;
  width: 100%;
  border-radius: var(--radius);
}
[data-page="portal"] .m-select option {
  background: var(--surface-strong);
  color: var(--primary);
}
[data-page="portal"] .m-textarea {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  width: 100%;
  resize: none;
  height: 100px;
  line-height: 1.5;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="portal"] .m-textarea:focus { border-color: var(--border-strong); }
[data-page="portal"] .m-textarea::placeholder { color: var(--text-muted); }
[data-page="portal"] .modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}
[data-page="portal"] .m-btn {
  flex: 1;
  padding: 11px;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1.5px;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="portal"] .m-btn-submit {
  border-color: var(--primary);
  color: var(--primary);
}
[data-page="portal"] .m-btn-submit:hover { background: rgba(44,123,162,.1); }
[data-page="portal"] .m-btn-cancel {
  border-color: var(--border);
  color: var(--text-muted);
}
[data-page="portal"] .m-btn-cancel:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Confirmation pane (after ticket submit) */
[data-page="portal"] .confirm-body {
  padding: 36px 24px;
  text-align: center;
}
[data-page="portal"] .confirm-icon {
  font-size: 40px;
  margin-bottom: 14px;
}
[data-page="portal"] .confirm-title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--success);
  letter-spacing: 3px;
  margin-bottom: 10px;
}
[data-page="portal"] .confirm-msg {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 1px;
  line-height: 1.8;
}
[data-page="portal"] .confirm-close {
  margin-top: 20px;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2px;
  border: 1px solid var(--success);
  color: var(--success);
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="portal"] .confirm-close:hover { background: rgba(75,181,120,.08); }

/* Login gate */
[data-page="portal"] .gate {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
[data-page="portal"] .gate-card {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  width: 400px;
  max-width: 94vw;
  box-shadow: 0 0 60px rgba(44,123,162,.07);
  border-radius: var(--radius);
}
[data-page="portal"] .gate-top {
  padding: 30px 30px 22px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  background: linear-gradient(135deg, var(--primary-soft), transparent);
}
[data-page="portal"] .gate-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--primary);
  letter-spacing: 10px;
  text-shadow: 0 0 25px rgba(44,123,162,.5);
  display: block;
  margin-bottom: 8px;
}
[data-page="portal"] .gate-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 3px;
}
[data-page="portal"] .gate-body { padding: 26px 30px; }
[data-page="portal"] .g-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
[data-page="portal"] .g-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-soft);
  letter-spacing: 2px;
}
[data-page="portal"] .g-input {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: all .15s;
  border-radius: var(--radius);
}
[data-page="portal"] .g-input:focus { border-color: var(--border-strong); }
[data-page="portal"] .g-input::placeholder { color: var(--text-muted); }
[data-page="portal"] .g-btn {
  width: 100%;
  padding: 12px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2.5px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  cursor: pointer;
  transition: all .2s;
  margin-top: 4px;
  border-radius: var(--radius);
}
[data-page="portal"] .g-btn:hover:not(:disabled) { background: rgba(44,123,162,.15); }
[data-page="portal"] .g-btn:disabled { opacity: .5; cursor: not-allowed; }
[data-page="portal"] .g-error {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--danger);
  margin-top: 10px;
  display: none;
  letter-spacing: 1px;
}
[data-page="portal"] .g-error.show { display: block; }
[data-page="portal"] .gate-foot {
  padding: 12px 30px;
  border-top: 1px solid var(--border);
  text-align: center;
}
[data-page="portal"] .op-link {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-decoration: none;
}
[data-page="portal"] .op-link:hover { color: var(--primary); }

/* Empty state */
[data-page="portal"] .empty {
  text-align: center;
  padding: 28px 12px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 2px;
}

/* Invoice viewer overlay (full-page invoice with print) */
[data-page="portal"] .inv-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 700;
  overflow-y: auto;
  padding: 20px;
}
[data-page="portal"] .inv-overlay.show { display: flex; }
[data-page="portal"] .inv-page {
  background: #fff;
  color: #222;
  width: 800px;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 10px 60px rgba(0,0,0,.5);
}
[data-page="portal"] .inv-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  background: #f0f3f6;
  border-bottom: 1px solid #d6dce4;
  border-radius: 4px 4px 0 0;
}
[data-page="portal"] .inv-tbtn {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #b8c2cf;
  color: #2c7ba2;
  cursor: pointer;
  border-radius: 3px;
}
[data-page="portal"] .inv-tbtn:hover {
  background: #2c7ba2;
  color: #fff;
}
[data-page="portal"] .inv-body {
  padding: 32px 40px 40px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
[data-page="portal"] .inv-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #2c7ba2;
  padding-bottom: 14px;
  margin-bottom: 18px;
}
[data-page="portal"] .inv-co {
  text-align: right;
  font-size: 11px;
  color: #555;
  line-height: 1.45;
}
[data-page="portal"] .inv-co-name {
  font-weight: 700;
  color: #222;
  font-size: 13px;
  margin-bottom: 2px;
}
[data-page="portal"] .inv-title {
  font-size: 18px;
  font-weight: 700;
  color: #2c7ba2;
  margin: 6px 0 18px;
}
[data-page="portal"] .inv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
[data-page="portal"] .inv-fld { margin-bottom: 9px; }
[data-page="portal"] .inv-fld-label {
  font-size: 9px;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
[data-page="portal"] .inv-fld-val {
  font-size: 12px;
  color: #222;
  font-weight: 500;
}
[data-page="portal"] .inv-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}
[data-page="portal"] .inv-tbl th {
  background: #f0f3f6;
  border-bottom: 1px solid #b8c2cf;
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: #555;
}
[data-page="portal"] .inv-tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5eaef;
  font-size: 12px;
}
[data-page="portal"] .inv-total-row td {
  font-weight: 700;
  background: #f7faff;
  border-top: 1px solid #2c7ba2;
}
[data-page="portal"] .inv-due-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #2c7ba2;
  color: #fff;
  border-radius: 4px;
  margin-top: 14px;
}
[data-page="portal"] .inv-due-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .85;
}
[data-page="portal"] .inv-due-amt {
  font-size: 24px;
  font-weight: 700;
}
[data-page="portal"] .inv-footer {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid #d6dce4;
  font-size: 10px;
  color: #888;
  text-align: center;
  line-height: 1.5;
}

/* Print-friendly invoice */
@media print {
  [data-page="portal"] body * { visibility: hidden; }
  [data-page="portal"] .inv-page, [data-page="portal"] .inv-page * { visibility: visible; }
  [data-page="portal"] .inv-overlay { background: #fff; padding: 0; }
  [data-page="portal"] .inv-page {
    position: absolute; top: 0; left: 0;
    box-shadow: none;
    width: 100%;
  }
  [data-page="portal"] .inv-toolbar { display: none; }
}

/* ─── [data-page="portal"] working enterprise layout ──────────────────────── */

/* Main wrapper */
[data-page="portal"] .main {
  position: fixed;
  top: 50px; bottom: 0;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  overflow-y: auto;
}

/* Top split - 2 column grid (account info | stats + actions) */
[data-page="portal"] .top-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
[data-page="portal"] .top-left,
[data-page="portal"] .top-right {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

/* Section title */
[data-page="portal"] .sec-title {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--primary);
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

/* Info grid (2-col card on left) */
[data-page="portal"] .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
[data-page="portal"] .info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-page="portal"] .info-val-name {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Read strip (3 cells) */
[data-page="portal"] .read-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
[data-page="portal"] .read-card {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  padding: 7px 8px;
  text-align: center;
  border-radius: var(--radius);
}
[data-page="portal"] .read-lbl {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
[data-page="portal"] .read-val {
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 3px;
}

/* Payment plan banner */
[data-page="portal"] .pp-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(232,180,0,.05);
  border: 1px solid rgba(232,180,0,.3);
  padding: 9px 12px;
  margin-top: 10px;
  border-radius: var(--radius);
}
[data-page="portal"] .pp-label {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--warning);
  text-transform: uppercase;
}
[data-page="portal"] .pp-bar {
  height: 4px;
  background: rgba(232,180,0,.1);
  border-radius: 2px;
  overflow: hidden;
}
[data-page="portal"] .pp-fill {
  height: 100%;
  background: var(--warning);
  transition: width .6s ease;
}
[data-page="portal"] .pp-count {
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 700;
  color: var(--warning);
  flex-shrink: 0;
}

/* Stat row - 4 stat cards top-right */
[data-page="portal"] .stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
[data-page="portal"] .stat-card {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  padding: 9px 10px;
  text-align: center;
  border-radius: var(--radius);
}
[data-page="portal"] .stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
[data-page="portal"] .stat-card .stat-val {
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 700;
  margin-top: 3px;
}
[data-page="portal"] .stat-card .stat-sub {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* Mini buttons (Save phone) */
[data-page="portal"] .mini-btn {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1.5px;
  padding: 6px 10px;
  background: var(--primary-soft);
  border: 1px solid var(--border-strong);
  color: var(--primary);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all .15s;
}
[data-page="portal"] .mini-btn:hover {
  background: rgba(44,123,162,.15);
  border-color: var(--primary);
}

/* Register (transactions table) */
[data-page="portal"] .register-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
[data-page="portal"] .reg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* Payment detail overlay (separate from invoice modal) */
[data-page="portal"] .pay-detail {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}
[data-page="portal"] .pay-detail.show { display: flex; }
[data-page="portal"] .pay-card {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  width: 440px;
  max-width: 94vw;
  border-radius: var(--radius);
}
[data-page="portal"] .pay-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
[data-page="portal"] .pay-body {
  padding: 18px 22px;
}
[data-page="portal"] .pay-amt-big {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 1px;
}
[data-page="portal"] .pay-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
[data-page="portal"] .pay-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
[data-page="portal"] .pay-val {
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
}

/* Invoice extras */
[data-page="portal"] .inv-logo {
  max-width: 140px;
  max-height: 60px;
}
[data-page="portal"] .inv-pp {
  background: #fef9f0;
  border: 1px solid #e8c97a;
  padding: 10px 14px;
  margin-top: 14px;
  font-size: 11px;
  color: #6b5414;
  border-radius: 4px;
}

/* ─── [data-page="mig"]  Migration Portal Mockup ──────────────────────────── */
[data-page="mig"] {
  background: var(--bg);
  color: var(--text);
}

/* ============================================================================
   PRINT STYLES (reports module)
   ============================================================================ */
@media print {
  body::before, .corner, .topbar, .ticker-wrap, .botnav, .toast { display: none !important; }
  body { background: white !important; color: black !important; cursor: default !important; }
  .modal-overlay, .modal { position: static !important; background: white !important; }
  .modal > div, .modal-overlay > .modal {
    width: 100%; border: none; box-shadow: none; background: white;
  }
  .modal-header { background: none; border-bottom: 2px solid #333; }
  .modal-title { color: #000; font-size: 16px; }
  .modal-actions, .modal-x, .modal-close { display: none; }
  .rtable th { color: #000; border-bottom: 2px solid #333; background: white; }
  .rtable td { color: #111; border-bottom: 1px solid #ccc; }
  .rtable tr:hover td { background: none; }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
  .topbar { padding: 0 12px; }
  .logo   { font-size: 16px; letter-spacing: 4px; }
  .navbtn { width: 50px; height: 60px; font-size: 7px; }
  .navicon{ font-size: 16px; }
}
@media (max-height: 820px) {
  [data-page="compliance"] .gauge-svg { width: 128px; height: 128px; }
  [data-page="compliance"] .gauge-wrap { gap: 2px; }
  [data-page="compliance"] .lp-section { padding: 6px 12px; }
  [data-page="compliance"] .lp-section-grow { padding: 6px 12px; }
  [data-page="compliance"] .lp-title { margin-bottom: 5px; }
  [data-page="compliance"] .mini-gauge { padding: 4px; }
  [data-page="compliance"] .mini-grid  { gap: 4px; }
}
@media (max-height: 680px) {
  [data-page="compliance"] .gauge-svg { width: 108px; height: 108px; }
  [data-page="compliance"] .mini-svg  { width: 58px; height: 42px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   END OF FILE
   ────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   INDEX PAGE — Card panel sizing fixes
   ============================================================================ */
[data-page="index"] .directory-panel,
[data-page="command"] .directory-panel {
  flex: 1 1 auto;
  min-height: 200px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-page="index"] .panel-scroll,
[data-page="command"] .panel-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-page="index"] .calllog-panel,
[data-page="command"] .calllog-panel {
  flex: 0 0 160px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-page="index"] .clog,
[data-page="command"] .clog {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}
[data-page="index"] .empty-msg,
[data-page="command"] .empty-msg {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 2px;
  font-family: var(--font-mono);
}

/* Address cell + system count inline */
[data-page="index"] .atable .addr,
[data-page="command"] .atable .addr {
  color: rgba(200, 234, 240, 0.78);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
[data-page="index"] .atable .acct-count,
[data-page="command"] .atable .acct-count {
  color: var(--text-soft);
  font-family: var(--font-num);
  font-size: 11px;
  margin-left: 8px;
  font-weight: 400;
}

/* ============================================================================
   CRITICAL ACCOUNTS feed item internals (.adot/.aname/.asub)
   ============================================================================ */
.adot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.aname {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .5px;
  margin-bottom: 2px;
  font-weight: 600;
}
.asub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-soft);
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aitem > div:not(.adot) { flex: 1; min-width: 0; }

/* Call log items (.citem .ccat .cinfo .cname .csub) */
.citem { display: flex; align-items: flex-start; gap: 8px; }
.ccat {
  font-family: var(--font-display);
  font-size: 7px;
  letter-spacing: 1.2px;
  padding: 2px 6px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 1px;
}
.cinfo { flex: 1; min-width: 0; }
.cname {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csub {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-soft);
  letter-spacing: .3px;
  line-height: 1.4;
}

/* ============================================================================
   COMPLIANCE LIST — cleaner spacing inside compliance card
   ============================================================================ */
[data-page="index"] .comp-list,
[data-page="command"] .comp-list {
  display: flex; flex-direction: column;
}

/* ============================================================================
   COMMAND OVERLAY MODALS — BWN + Account Quick-Card (Pro dark theme)
   ============================================================================ */
[data-page="index"] .cmd-overlay,
[data-page="command"] .cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(2, 12, 20, 0.85);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 800;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
[data-page="index"] .cmd-overlay.show,
[data-page="command"] .cmd-overlay.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
[data-page="index"] .cmd-modal,
[data-page="command"] .cmd-modal {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 80px rgba(0, 245, 255, 0.10), 0 0 200px rgba(0, 0, 0, 0.6);
  width: 92%; max-width: 620px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
}
[data-page="index"] .cmd-modal::before,
[data-page="command"] .cmd-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
[data-page="index"] .cmd-modal-hdr,
[data-page="command"] .cmd-modal-hdr {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-soft), transparent);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
[data-page="index"] .cmd-modal-hdr-right,
[data-page="command"] .cmd-modal-hdr-right {
  display: flex; align-items: center; gap: 10px;
}
[data-page="index"] .cmd-modal-close,
[data-page="command"] .cmd-modal-close {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  font-family: var(--font-display);
  padding: 4px 8px;
  transition: color .15s;
}
[data-page="index"] .cmd-modal-close:hover,
[data-page="command"] .cmd-modal-close:hover { color: var(--primary); }

/* BWN modal — DANGER variant */
[data-page="index"] .cmd-modal-bwn,
[data-page="command"] .cmd-modal-bwn {
  border-color: var(--danger);
  box-shadow: 0 0 80px rgba(255, 34, 68, 0.20), 0 0 200px rgba(0, 0, 0, 0.7);
}
[data-page="index"] .cmd-modal-bwn::before,
[data-page="command"] .cmd-modal-bwn::before {
  background: linear-gradient(90deg, transparent, var(--danger), transparent);
}
[data-page="index"] .cmd-modal-hdr-danger,
[data-page="command"] .cmd-modal-hdr-danger {
  background: linear-gradient(135deg, rgba(255, 34, 68, 0.14), transparent);
  border-bottom-color: rgba(255, 34, 68, 0.30);
}
[data-page="index"] .cmd-modal-title-danger,
[data-page="command"] .cmd-modal-title-danger {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--danger);
  letter-spacing: 2.5px;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(255, 34, 68, 0.5);
}
[data-page="index"] .cmd-modal-sub,
[data-page="command"] .cmd-modal-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 1px;
}
[data-page="index"] .cmd-modal-close-danger:hover,
[data-page="command"] .cmd-modal-close-danger:hover { color: var(--danger); }

[data-page="index"] .cmd-bwn-body,
[data-page="command"] .cmd-bwn-body { padding: 16px 18px; overflow-y: auto; }

[data-page="index"] .cmd-bwn-alert,
[data-page="command"] .cmd-bwn-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 34, 68, 0.08);
  border: 1px solid rgba(255, 34, 68, 0.30);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
[data-page="index"] .cmd-bwn-alert-icon,
[data-page="command"] .cmd-bwn-alert-icon {
  font-size: 22px; flex-shrink: 0; color: var(--danger);
}
[data-page="index"] .cmd-bwn-alert-title,
[data-page="command"] .cmd-bwn-alert-title {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--danger);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
[data-page="index"] .cmd-bwn-alert-desc,
[data-page="command"] .cmd-bwn-alert-desc {
  font-size: 11px;
  font-family: var(--font-num);
  color: var(--text);
  line-height: 1.5;
}
[data-page="index"] .cmd-bwn-checklist,
[data-page="command"] .cmd-bwn-checklist {
  display: flex; flex-direction: column;
  gap: 6px;
}
[data-page="index"] .cmd-bwn-check,
[data-page="command"] .cmd-bwn-check {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
}
[data-page="index"] .cmd-bwn-chk-icon,
[data-page="command"] .cmd-bwn-chk-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 22px; text-align: center;
}
[data-page="index"] .cmd-bwn-chk-icon.run  { color: var(--danger);  animation: pp 1.4s infinite; }
[data-page="index"] .cmd-bwn-chk-icon.ok   { color: var(--success); }
[data-page="index"] .cmd-bwn-chk-icon.warn { color: var(--warning); }
[data-page="index"] .cmd-bwn-chk-icon.dim  { color: var(--text-muted); }
[data-page="command"] .cmd-bwn-chk-icon.run  { color: var(--danger);  animation: pp 1.4s infinite; }
[data-page="command"] .cmd-bwn-chk-icon.ok   { color: var(--success); }
[data-page="command"] .cmd-bwn-chk-icon.warn { color: var(--warning); }
[data-page="command"] .cmd-bwn-chk-icon.dim  { color: var(--text-muted); }
[data-page="index"] .cmd-bwn-chk-label,
[data-page="command"] .cmd-bwn-chk-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline;
}
[data-page="index"] .cmd-bwn-chk-val,
[data-page="command"] .cmd-bwn-chk-val {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  margin-left: 6px;
}
[data-page="index"] .cmd-bwn-chk-val.run  { color: var(--danger);  }
[data-page="index"] .cmd-bwn-chk-val.ok   { color: var(--success); }
[data-page="index"] .cmd-bwn-chk-val.warn { color: var(--warning); }
[data-page="index"] .cmd-bwn-chk-val.dim  { color: var(--text-muted); }
[data-page="command"] .cmd-bwn-chk-val.run  { color: var(--danger);  }
[data-page="command"] .cmd-bwn-chk-val.ok   { color: var(--success); }
[data-page="command"] .cmd-bwn-chk-val.warn { color: var(--warning); }
[data-page="command"] .cmd-bwn-chk-val.dim  { color: var(--text-muted); }

[data-page="index"] .cmd-bwn-foot,
[data-page="command"] .cmd-bwn-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}
[data-page="index"] .cmd-bwn-btn,
[data-page="command"] .cmd-bwn-btn {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
  transition: all .15s;
  border-radius: var(--radius);
  text-transform: uppercase;
}
[data-page="index"] .cmd-bwn-btn-close,
[data-page="command"] .cmd-bwn-btn-close { border-color: var(--border-strong); color: var(--text-muted); }
[data-page="index"] .cmd-bwn-btn-close:hover,
[data-page="command"] .cmd-bwn-btn-close:hover { color: var(--text); border-color: var(--text-soft); }
[data-page="index"] .cmd-bwn-btn-danger,
[data-page="command"] .cmd-bwn-btn-danger { border-color: var(--danger); color: var(--danger); background: rgba(255, 34, 68, 0.08); }
[data-page="index"] .cmd-bwn-btn-danger:hover,
[data-page="command"] .cmd-bwn-btn-danger:hover { background: rgba(255, 34, 68, 0.18); }
[data-page="index"] .cmd-bwn-btn-primary,
[data-page="command"] .cmd-bwn-btn-primary { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
[data-page="index"] .cmd-bwn-btn-primary:hover,
[data-page="command"] .cmd-bwn-btn-primary:hover { background: rgba(0, 245, 255, 0.18); }

/* Account Quick-Card */
[data-page="index"] .cmd-modal-acct,
[data-page="command"] .cmd-modal-acct { max-width: 560px; }
[data-page="index"] .cmd-modal-id,
[data-page="command"] .cmd-modal-id { display: flex; flex-direction: column; gap: 4px; }
[data-page="index"] .cmd-acnum,
[data-page="command"] .cmd-acnum {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--primary);
  letter-spacing: 2.5px;
}
[data-page="index"] .cmd-acname,
[data-page="command"] .cmd-acname {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
[data-page="index"] .cmd-acstat,
[data-page="command"] .cmd-acstat {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--success);
  color: var(--success);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.8px;
  border-radius: var(--radius-sm);
}
[data-page="index"] .cmd-acbody,
[data-page="command"] .cmd-acbody { padding: 0; overflow-y: auto; }
[data-page="index"] .cmd-acgrid,
[data-page="command"] .cmd-acgrid {
  display: flex; flex-direction: column;
}
[data-page="index"] .cmd-acgrid-col,
[data-page="command"] .cmd-acgrid-col {
  padding: 6px 18px;
}
[data-page="index"] .cmd-acgrid-title,
[data-page="command"] .cmd-acgrid-title { display: none; }
[data-page="index"] .cmd-acrow,
[data-page="command"] .cmd-acrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(0, 245, 255, 0.06);
  gap: 12px;
}
[data-page="index"] .cmd-acrow:last-child,
[data-page="command"] .cmd-acrow:last-child { border-bottom: none; }
[data-page="index"] .cmd-acrl,
[data-page="command"] .cmd-acrl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  white-space: nowrap;
  text-transform: uppercase;
}
[data-page="index"] .cmd-acrv,
[data-page="command"] .cmd-acrv {
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
[data-page="index"] .cmd-acrv-big,
[data-page="command"] .cmd-acrv-big {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}
[data-page="index"] .cmd-acbtns,
[data-page="command"] .cmd-acbtns {
  display: flex; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
[data-page="index"] .cmd-acbtn,
[data-page="command"] .cmd-acbtn {
  flex: 1;
  padding: 10px 8px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: all .15s;
  border-radius: var(--radius);
  text-align: center;
  text-transform: uppercase;
}
[data-page="index"] .cmd-acbtn-pri,
[data-page="command"] .cmd-acbtn-pri { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
[data-page="index"] .cmd-acbtn-pri:hover,
[data-page="command"] .cmd-acbtn-pri:hover { background: rgba(0, 245, 255, 0.18); }
[data-page="index"] .cmd-acbtn-green,
[data-page="command"] .cmd-acbtn-green { border-color: var(--border); color: var(--text-muted); }
[data-page="index"] .cmd-acbtn-green:hover,
[data-page="command"] .cmd-acbtn-green:hover { border-color: var(--success); color: var(--success); background: rgba(0, 255, 136, 0.06); }
[data-page="index"] .cmd-acbtn-dim,
[data-page="command"] .cmd-acbtn-dim { border-color: var(--border); color: var(--text-muted); }
[data-page="index"] .cmd-acbtn-dim:hover,
[data-page="command"] .cmd-acbtn-dim:hover { border-color: var(--primary); color: var(--primary); }
[data-page="index"] .cmd-acbtn-close,
[data-page="command"] .cmd-acbtn-close { border-color: var(--border); color: var(--text-muted); }
[data-page="index"] .cmd-acbtn-close:hover,
[data-page="command"] .cmd-acbtn-close:hover { border-color: var(--text-soft); color: var(--text); }

/* ============================================================================
   BILLING — Bill Detail Modal inner classes (.bd-*)
   Replaces all hardcoded Enterprise inline styles in the JS-generated HTML
   ============================================================================ */
.bd-wrap         { padding: 10px 14px; }
.bd-grid2        { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.bd-grid3        { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.bd-grid3-meta   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-bottom: 8px; }
.bd-lbl          { font-family: var(--font-display); font-size: 7px; color: var(--text-muted); letter-spacing: 2px; margin-bottom: 2px; }
.bd-val          { font-family: var(--font-mono);    font-size: 11px; color: var(--text); }
.bd-val-lg       { font-family: var(--font-num);     font-size: 14px; font-weight: 700; color: var(--text); }
.bd-val-acct     { font-family: var(--font-mono);    font-size: 11px; color: var(--primary); }
.bd-val-addr     { font-size: 10px; color: var(--text-soft); }
.bd-mini-lbl     { font-family: var(--font-mono); font-size: 7px; color: var(--text-muted); letter-spacing: .5px; margin-bottom: 2px; }

/* mini stat boxes (AMOUNT DUE, LAST PMT) */
.bd-stat         { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px; text-align: center; }
.bd-stat-amt     { font-family: var(--font-num); font-size: 18px; font-weight: 800; }
.bd-stat-pmt     { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--success); }
.bd-stats-row    { display: flex; gap: 6px; margin-top: 4px; }

/* reading boxes */
.bd-read-box     { text-align: center; padding: 6px 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.bd-read-lbl     { font-family: var(--font-mono); font-size: 7px; color: var(--text-muted); letter-spacing: .5px; margin-bottom: 2px; }
.bd-read-val     { font-family: var(--font-num); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }
.bd-read-val.accent { color: var(--primary); }
.bd-read-sub     { font-family: var(--font-mono); font-size: 7px; color: var(--text-muted); margin-top: 2px; }

/* meta date row */
.bd-meta-cell    { padding: 2px 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 8px; }
.bd-meta-cell.c  { text-align: center; }
.bd-meta-cell.r  { text-align: right; }

/* section headings */
.bd-section-hdr  {
  font-family: var(--font-display);
  font-size: 7px;
  color: var(--primary);
  letter-spacing: 2px;
  padding: 5px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* charge rows */
.bd-crow         { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(0,245,255,.05); }
.bd-crow:last-child { border-bottom: none; }
.bd-crow-lbl     { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.bd-crow-val     { font-family: var(--font-mono); font-size: 10px; color: var(--text); }
.bd-crow-val.warn  { color: var(--warning); }
.bd-crow-val.danger { color: var(--danger); }

/* period total row */
.bd-total-row    {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0 4px;
  border-top: 2px solid var(--primary);
  margin-top: 4px;
}
.bd-total-lbl    { font-family: var(--font-display); font-size: 9px; color: var(--primary); letter-spacing: 1.5px; }
.bd-total-val    { font-family: var(--font-num); font-size: 20px; font-weight: 800; color: var(--primary); }

/* bill detail modal status badge */
.bd-status-badge {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  margin-top: 2px;
  color: var(--text-muted);
}

/* billing table — invoice print button cleanup */
[data-page="billing"] .pay-quick.inv-btn {
  border-color: var(--border);
  color: var(--primary);
}