/* ═══════════════════════════════════════════════════════════════════════════
   NEXUNOVA RMS — VISUAL HIERARCHY OVERHAUL v1.0
   Loaded LAST — wins all cascade conflicts.
   Enforces: unified primary palette, typography scale, card design, button
   hierarchy, sidebar clean state, table design, status badges, empty states.

   Do NOT edit individual page CSS to change design — edit this file only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ DESIGN TOKENS ═══════════════════════════════════════════════════════════
   Single source of truth. All overrides reference these.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Primary — blue-600 */
  --v-primary:       #2563EB;
  --v-primary-dark:  #1D4ED8;
  --v-primary-soft:  rgba(37, 99, 235, 0.10);
  --v-primary-ring:  rgba(37, 99, 235, 0.25);

  /* Status */
  --v-success:       #10B981;
  --v-success-soft:  rgba(16, 185, 129, 0.10);
  --v-warning:       #F59E0B;
  --v-warning-soft:  rgba(245, 158, 11, 0.10);
  --v-danger:        #EF4444;
  --v-danger-soft:   rgba(239, 68, 68, 0.10);
  --v-neutral-soft:  rgba(107, 114, 128, 0.10);

  /* Card tokens */
  --v-card-radius:   12px;
  --v-card-shadow:   0 1px 4px rgba(0, 0, 0, 0.06);
  --v-card-shadow-h: 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* ══ 1. TYPOGRAPHY HIERARCHY ═════════════════════════════════════════════════
   3 font sizes max per page. Enforce consistently.
   ─────────────────────────────────────────────────────────────────────────── */

/* L1 — Page titles: 24px / 700 */
.ph h2,
h1.page-title,
.inv-title,
.pg-title,
h1.h-page-title {
  font-size:               24px !important;
  font-weight:             700 !important;
  letter-spacing:          -0.3px !important;
  line-height:             1.25 !important;
  color:                   var(--x-text) !important;
  -webkit-text-fill-color: var(--x-text) !important;
  background:              none !important;
  background-clip:         unset !important;
  margin:                  0 !important;
}

/* L2 — Section headings: 16px / 600 */
.ch h3, .card h3, .card > .ch > h3,
h3.section-title, .sec-heading {
  font-size:   16px !important;
  font-weight: 600 !important;
  color:       var(--x-text) !important;
}

/* L3 — Labels / captions: 12px / 500 uppercase */
.fl, .lb,
.prj-kpi-label, .dkpi-lbl, .kpi-label, .kpi-lbl,
.dash-fin-lbl, .dash-section-lbl,
.prj-section-label, .prj-dsec-title,
.nav-grp-lbl, .sb-grp-lbl, .nav-sec {
  font-size:               12px !important;
  font-weight:             500 !important;
  text-transform:          uppercase !important;
  letter-spacing:          0.06em !important;
  color:                   var(--x-text-3) !important;
  -webkit-text-fill-color: var(--x-text-3) !important;
  opacity:                 1 !important;
}

/* Body / values: 14px / 400 */
.tbl td, table.t tbody td, .pay-tbl tbody td, .tw tbody td {
  font-size: 14px !important;
  color:     var(--x-text-2) !important;
}

/* KPI big numbers: 28px / 700 */
.dkpi-val, .kpi-value, .kpi-val,
.prj-kpi-value, .prj-overall-num {
  font-size:               28px !important;
  font-weight:             700 !important;
  color:                   var(--x-text) !important;
  -webkit-text-fill-color: var(--x-text) !important;
  background:              none !important;
  background-clip:         unset !important;
}

/* Subtitle / description text */
.ph p, .ph-l > p {
  font-size:               14px !important;
  font-weight:             400 !important;
  color:                   var(--x-text-3) !important;
  -webkit-text-fill-color: var(--x-text-3) !important;
  margin-top:              4px !important;
}

/* ══ 2. CARD DESIGN — uniform across all modules ═════════════════════════════
   Standard box-shadow depth. No filter:drop-shadow (expensive, breaks overflow).
   No bounce easing — clean 2px lift on hover, border highlight.
   ─────────────────────────────────────────────────────────────────────────── */
.card, .kpi, .stat-card, .dkpi, .dash-kpi,
.dash-qa-btn, .panel, .prj-kpi-card {
  background:              var(--x-surface) !important;
  border:                  1px solid var(--x-border) !important;
  border-radius:           var(--v-card-radius) !important;
  box-shadow:              0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06) !important;
  filter:                  none !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  position:                relative !important;
  transition:              box-shadow .18s ease, transform .18s cubic-bezier(.4,0,.2,1),
                           border-color .18s ease !important;
}
.card:hover, .kpi:hover, .stat-card:hover,
.dkpi:hover, .dash-kpi:hover, .dash-qa-btn:hover, .prj-kpi-card:hover {
  box-shadow:   0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08) !important;
  filter:       none !important;
  transform:    translateY(-2px) !important;
  border-color: rgba(37,99,235,0.20) !important;
}

/* card ::before / ::after — disabled (no sweep animation) */
.card::before, .card::after,
.kpi::before, .stat-card::before,
.dash-kpi::before, .dash-qa-btn::before {
  display:    none !important;
  background: none !important;
  content:    none !important;
}

/* Light mode */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .dash-kpi,
[data-theme="light"] .dash-qa-btn,
[data-theme="light"] .dash-fin-bar {
  background:              #FFFFFF !important;
  backdrop-filter:         none !important;
  -webkit-backdrop-filter: none !important;
  border-color:            #E5E7EB !important;
  box-shadow:              0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04) !important;
  filter:                  none !important;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .dash-kpi:hover,
[data-theme="light"] .dash-qa-btn:hover {
  box-shadow:   0 4px 12px rgba(15,23,42,.10), 0 0 0 1px rgba(37,99,235,.12) !important;
  filter:       none !important;
  border-color: rgba(37,99,235,0.30) !important;
}

/* ══ 3. COLOR SYSTEM — replace ALL cyan with primary ══════════════════════════
   Remove: #00d9ff / --nx-cyan / rgba(0,217,255,...) from every element.
   ─────────────────────────────────────────────────────────────────────────── */

/* Override the root cyan vars to primary so any code that slips through uses primary */
:root {
  --nx-cyan:        #2563EB !important;
  --nxn-cyan:       #2563EB !important;
  --nxn-cyan-dim:   rgba(37, 99, 235, 0.12) !important;
  --brand:          #2563EB !important;
  --brand2:         #818CF8 !important;
  --brand3:         #A5B4FC !important;
  --brand-bg:       rgba(37, 99, 235, 0.08) !important;
}

/* ══ 4. BUTTON HIERARCHY — 4 tiers, consistent ═══════════════════════════════
   ─────────────────────────────────────────────────────────────────────────── */

/* T1 — Primary: solid primary (NOT aurora gradient) */
.btn-g, .btn-d,
.prj-btn-primary,
.prj-row-act-btn.primary {
  background:              var(--v-primary) !important;
  border:                  1px solid var(--v-primary) !important;
  color:                   #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight:             600 !important;
  border-radius:           8px !important;
  filter:                  none !important;
  box-shadow:              0 1px 3px rgba(37,99,235,0.20) !important;
  transition:              background 180ms ease, border-color 180ms ease,
                           box-shadow 180ms ease, transform 160ms ease !important;
}
.btn-g:hover, .btn-d:hover,
.prj-btn-primary:hover {
  background:              var(--v-primary-dark) !important;
  border-color:            var(--v-primary-dark) !important;
  color:                   #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  filter:                  none !important;
  transform:               translateY(-1px) !important;
  box-shadow:              0 4px 12px rgba(37,99,235,0.30) !important;
}

/* T2 — Secondary / Ghost: white bg, gray border */
.btn-gh,
.prj-btn-ghost, .prj-btn-insights,
.prj-row-act-btn:not(.primary) {
  background:              var(--x-surface-2) !important;
  border:                  1px solid var(--x-border) !important;
  color:                   var(--x-text-2) !important;
  -webkit-text-fill-color: var(--x-text-2) !important;
  border-radius:           8px !important;
  font-weight:             500 !important;
  box-shadow:              none !important;
  filter:                  none !important;
}
.btn-gh:hover,
.prj-btn-ghost:hover, .prj-btn-insights:hover,
.prj-row-act-btn:not(.primary):hover {
  background:              var(--x-surface-hover) !important;
  border-color:            var(--x-border-2) !important;
  color:                   var(--x-text) !important;
  -webkit-text-fill-color: var(--x-text) !important;
}

/* Success button — green (btn-gr was aurora green gradient) */
.btn-gr {
  background:              var(--v-success) !important;
  border:                  1px solid var(--v-success) !important;
  color:                   #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight:             600 !important;
  filter:                  none !important;
  box-shadow:              0 1px 3px rgba(16,185,129,0.20) !important;
}
.btn-gr:hover {
  background:              #059669 !important;
  border-color:            #059669 !important;
  filter:                  none !important;
  transform:               translateY(-1px) !important;
  box-shadow:              0 4px 12px rgba(16,185,129,0.25) !important;
}

/* T3 — Destructive: red-50 bg, red text */
.btn-r {
  background:              var(--v-danger-soft) !important;
  border:                  1px solid rgba(239, 68, 68, 0.30) !important;
  color:                   var(--v-danger) !important;
  -webkit-text-fill-color: var(--v-danger) !important;
  border-radius:           8px !important;
  box-shadow:              none !important;
}
.btn-r:hover {
  background:              rgba(239,68,68,0.18) !important;
  border-color:            rgba(239,68,68,0.50) !important;
  opacity:                 1 !important;
}

/* T4 — Ghost / Filter: gray-100 bg */
.btn-filter, .inv-filter-btn,
.prj-view-btn,
[class*="btn-filter"], [class*="filter-btn"] {
  background:    var(--x-surface-2) !important;
  border:        1px solid var(--x-border) !important;
  color:         var(--x-text-2) !important;
  border-radius: 8px !important;
}
.btn-filter:hover, .inv-filter-btn:hover,
[class*="filter-btn"]:hover {
  background:    var(--x-surface-hover) !important;
  border-color:  var(--x-border-2) !important;
  color:         var(--x-text) !important;
}
.prj-view-btn.active {
  background:              var(--x-surface) !important;
  color:                   var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
  box-shadow:              0 1px 4px rgba(0,0,0,0.12) !important;
}

/* Active insight toggle */
.prj-btn-insights.active {
  background:              var(--v-primary-soft) !important;
  border-color:            rgba(37,99,235,0.40) !important;
  color:                   var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
}

/* ══ 5. INPUT FOCUS RINGS — primary (NOT cyan) ════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.inp:focus,
.inp-light:focus {
  border-color: var(--v-primary) !important;
  box-shadow:   0 0 0 3px var(--v-primary-ring) !important;
  outline:      none !important;
}

/* Select arrow — primary stroke */
select,
.inp-light,
.fbar select,
.mov select,
select.inp-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(37%2C99%2C235%2C0.6)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 10px center !important;
  background-size:     12px 12px !important;
}

/* Filter dropdowns — ensure background always present (ALL pages) */
.fbar select, .prj-filter-select, .fnav-month, .rops-sel,
[class*="filter"] select, [class*="filter"] input {
  background-color: var(--x-input-bg) !important;
  border:           1px solid var(--x-border-2) !important;
  color:            var(--x-text) !important;
  border-radius:    8px !important;
  padding-right:    30px !important;
}
.fbar select:focus, .prj-filter-select:focus,
.fnav-month:focus, .rops-sel:focus {
  border-color: var(--v-primary) !important;
  box-shadow:   0 0 0 2px var(--v-primary-ring) !important;
}

/* ── GLOBAL light-mode: ALL select/browse/filter dropdowns ────────────────
   Covers every page: Projects, Inventory forms, Cancellation, Transfers,
   Ownership Chain, and any future page using a <select> filter.
   Uses background-color (NOT background shorthand) to preserve SVG arrows. */
[data-theme="light"] select,
[data-theme="light"] .fnav-month,
[data-theme="light"] .rops-sel,
[data-theme="light"] .fbar select,
[data-theme="light"] .prj-filter-select,
[data-theme="light"] [class*="filter"] select {
  background-color: #FFFFFF !important;
  border:           1px solid #E5E7EB !important;
  color:            #374151 !important;
  border-radius:    8px !important;
}
[data-theme="light"] .prj-filter-select.active {
  background-color: var(--v-primary-soft) !important;
  border-color:     var(--v-primary) !important;
  color:            var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
}

/* ── Light-mode: Reports period tab buttons (.rpt-stab) ────────────────────
   Dark theme uses transparent bg + var(--line) border — invisible on white. */
[data-theme="light"] .rpt-stab {
  background:   #FFFFFF !important;
  border-color: #E5E7EB !important;
  color:        #374151 !important;
}
[data-theme="light"] .rpt-stab:hover {
  background:   #F3F4F6 !important;
  border-color: #D1D5DB !important;
}
[data-theme="light"] .rpt-stab.active {
  background:              rgba(37,99,235,0.10) !important;
  border-color:            rgba(37,99,235,0.35) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
}

/* ── Light-mode: Super-admin filter buttons (.sa-filter-btn) ───────────────
   Dark theme uses color: rgba(255,255,255,0.45) — invisible on white. */
[data-theme="light"] .sa-filter-btn {
  background:   #F9FAFB !important;
  border-color: #E5E7EB !important;
  color:        #374151 !important;
}
[data-theme="light"] .sa-filter-btn.active {
  background:              rgba(37,99,235,0.10) !important;
  border-color:            rgba(37,99,235,0.30) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
}

/* ══ 6. TABLE DESIGN — clean, no zebra ═══════════════════════════════════════ */

/* Header row */
.tbl thead tr, table.t thead tr, .pay-tbl thead tr, .tw thead tr,
.ss-tbl thead tr {
  background: var(--x-surface-2) !important;
  border-bottom: 1px solid var(--x-border) !important;
}
.tbl th, table.t thead th, .pay-tbl thead th, .tw thead th {
  font-size:      12px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color:          var(--x-text-3) !important;
  padding:        12px 16px !important;
}

/* Remove gradient underline on thead */
.tbl thead th::after {
  background: none !important;
  opacity:    0 !important;
  display:    none !important;
}

/* Body rows */
.tbl tbody tr, table.t tbody tr, .pay-tbl tbody tr, .tw tbody tr {
  border-bottom:  1px solid var(--x-border) !important;
  background:     transparent !important;
  border-left:    none !important;     /* kill cyan left border */
}
.tbl tbody tr:hover,
table.t tbody tr:hover,
.pay-tbl tbody tr:hover,
.tw tbody tr:hover {
  background:        var(--x-surface-2) !important;
  border-left-color: transparent !important;
}
.tbl td, table.t tbody td {
  padding: 12px 16px !important;
}

/* First column — readable but not gradient */
.tbl tbody tr td:first-child {
  font-weight: 500 !important;
  color:       var(--x-text) !important;
  -webkit-text-fill-color: var(--x-text) !important;
}

/* ══ 7. STATUS BADGES — semantic, consistent sizing ══════════════════════════
   All: rounded-full · px-2.5 py-0.5 · text-xs · font-medium
   ─────────────────────────────────────────────────────────────────────────── */

/* Base badge reset */
.badge {
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           4px !important;
  padding:       3px 10px !important;
  font-size:     12px !important;
  font-weight:   500 !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  border:        1px solid transparent !important;
  white-space:   nowrap !important;
  border-color:  transparent !important;
}

/* Success / Active / Paid / Verified */
.badge.bi, .badge.bc, .badge.bin, .badge.bwp,
.badge-paid, .badge-available,
.badge.badge-success, .badge.badge-active, .badge.badge-verified {
  background:              rgba(16, 185, 129, 0.10) !important;
  color:                   #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  border-color:            rgba(16,185,129,0.20) !important;
}

/* Pending / Warning / Partial */
.badge.bj, .badge.bdi,
.badge-partial, .badge.badge-pending, .badge.badge-warning {
  background:              rgba(245, 158, 11, 0.10) !important;
  color:                   #D97706 !important;
  -webkit-text-fill-color: #D97706 !important;
  border-color:            rgba(245,158,11,0.20) !important;
}

/* Danger / Cancelled / Overdue */
.badge.bd, .badge.bni,
.badge-overdue, .badge.badge-danger, .badge.badge-cancelled {
  background:              rgba(239, 68, 68, 0.10) !important;
  color:                   #DC2626 !important;
  -webkit-text-fill-color: #DC2626 !important;
  border-color:            rgba(239,68,68,0.20) !important;
}

/* Neutral / Default */
.badge.bnr, .badge.ba,
.badge.badge-neutral, .badge.badge-default {
  background:              var(--x-surface-2) !important;
  color:                   var(--x-text-3) !important;
  -webkit-text-fill-color: var(--x-text-3) !important;
  border-color:            var(--x-border) !important;
}

/* Primary / Brand */
.badge.badge-brand, .badge.brand {
  background:              var(--v-primary-soft) !important;
  color:                   var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
  border-color:            rgba(37,99,235,0.20) !important;
}

/* .b-dot — hide (used in some badge variants) */
.b-dot { display: none !important; }

/* ══ 8. SIDEBAR — clean blue-600 active state ════════════════════════════════
   Active: left border 3px blue-600 + 8% tint · border-radius 0 6px 6px 0
   ─────────────────────────────────────────────────────────────────────────── */

/* Active nav item */
.ni.on, .ni.active {
  background:              rgba(37, 99, 235, 0.08) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  font-weight:             500 !important;
  border:                  none !important;
  border-left:             3px solid #2563EB !important;
  border-radius:           0 6px 6px 0 !important;
  box-shadow:              none !important;
  padding-left:            9px !important;
}
.ni.ni-sub.on, .ni.ni-sub.active { padding-left: 19px !important; }
.ni.on .ni-ic,
.ni.active .ni-ic,
.ni.on span,
.ni.active span {
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
}
.ni.on .ni-lb, .ni.active .ni-lb {
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
}

/* Accent bar via border-left; disable ::before */
.ni.on::before, .ni.active::before { display: none !important; }

/* Nav item hover — neutral, no cyan tint */
.ni:hover {
  background:              var(--bg-sidebar-hover, rgba(255,255,255,0.05)) !important;
  color:                   var(--text-sidebar, rgba(255,255,255,0.85)) !important;
  -webkit-text-fill-color: var(--text-sidebar, rgba(255,255,255,0.85)) !important;
  transform:               none !important;
  box-shadow:              none !important;
}
.ni:hover .ni-ic {
  color:                   var(--text-sidebar, rgba(255,255,255,0.85)) !important;
  -webkit-text-fill-color: var(--text-sidebar, rgba(255,255,255,0.85)) !important;
  transform:               none !important;
}
.ni::before { display: none !important; }   /* remove shimmer sweep */

/* Override per-group colored nav items from app.css — all unified to primary */
.nav-group[data-gid="setup"]      .ni.on,
.nav-group[data-gid="operations"] .ni.on,
.nav-group[data-gid="followup"]   .ni.on,
.nav-group[data-gid="analytics"]  .ni.on,
.nav-group[data-gid="system"]     .ni.on {
  background:              rgba(37,99,235,0.08) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  border-left:             3px solid #2563EB !important;
  box-shadow:              none !important;
}

/* Override per-group hover colors from app.css — all unified */
.nav-group[data-gid="setup"]      .ni:hover,
.nav-group[data-gid="operations"] .ni:hover,
.nav-group[data-gid="followup"]   .ni:hover,
.nav-group[data-gid="analytics"]  .ni:hover,
.nav-group[data-gid="system"]     .ni:hover {
  color:                   var(--text-sidebar, rgba(255,255,255,0.82)) !important;
  -webkit-text-fill-color: var(--text-sidebar, rgba(255,255,255,0.82)) !important;
  border-left-color:       transparent !important;
}

/* Override per-group colored group headers from app.css */
.nav-group[data-gid="setup"]      .nav-group-hd,
.nav-group[data-gid="operations"] .nav-group-hd,
.nav-group[data-gid="followup"]   .nav-group-hd,
.nav-group[data-gid="analytics"]  .nav-group-hd,
.nav-group[data-gid="system"]     .nav-group-hd {
  color: var(--x-text-3, rgba(255,255,255,0.40)) !important;
}
.nav-group[data-gid="setup"]      .nav-group-hd:hover,
.nav-group[data-gid="operations"] .nav-group-hd:hover,
.nav-group[data-gid="followup"]   .nav-group-hd:hover,
.nav-group[data-gid="analytics"]  .nav-group-hd:hover,
.nav-group[data-gid="system"]     .nav-group-hd:hover {
  color:      var(--x-text-2, rgba(255,255,255,0.70)) !important;
  background: var(--bg-sidebar-hover, rgba(255,255,255,0.04)) !important;
}

/* Light-mode sidebar — full visibility enforcement */
[data-theme="light"] .ni:hover,
[data-theme="light"] .ni:hover .ni-ic,
[data-theme="light"] .ni:hover span {
  color:                   var(--text-sidebar, #334155) !important;
  -webkit-text-fill-color: var(--text-sidebar, #334155) !important;
}
[data-theme="light"] .ni.on,
[data-theme="light"] .ni.active {
  background:              rgba(37,99,235,0.12) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
}
[data-theme="light"] .ni.on .ni-ic,
[data-theme="light"] .ni.active .ni-ic,
[data-theme="light"] .ni.on span,
[data-theme="light"] .ni.active span,
[data-theme="light"] .ni.on .ni-lb,
[data-theme="light"] .ni.active .ni-lb {
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
}
[data-theme="light"] .ni.on .ni-bdg,
[data-theme="light"] .ni.active .ni-bdg {
  background:              rgba(37,99,235,0.12) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
}

/* Group guide-line turns primary on active */
.nav-grp-body:has(.ni.on)::before {
  background: rgba(37,99,235,0.50) !important;
  opacity:    0.60 !important;
}

/* Sidebar brand name — remove aurora gradient, readable solid text */
.sb-hd-name {
  background:              none !important;
  -webkit-background-clip: unset !important;
  background-clip:         unset !important;
  color:                   #F4F5F8 !important;
  -webkit-text-fill-color: #F4F5F8 !important;
  font-weight:             700 !important;
  letter-spacing:          0 !important;
  transition:              letter-spacing 0ms !important;
}
.sb-hd-name > span {
  background:              none !important;
  -webkit-background-clip: unset !important;
  background-clip:         unset !important;
  -webkit-text-fill-color: inherit !important;
  animation:               none !important;
  transform:               none !important;
  filter:                  none !important;
}
[data-theme="light"] .sb-hd-name {
  color:                   #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
}

/* Sidebar sub-label — remove cyan color */
.sb-hd-sub {
  color:                   var(--text-sidebar-muted, #64748B) !important;
  -webkit-text-fill-color: var(--text-sidebar-muted, #64748B) !important;
}

/* Sidebar brand header gradient line — remove cyan */
.sb-hd::after { background: var(--border-sidebar, #1E293B) !important; opacity: 0.6 !important; }

/* Sidebar action buttons — remove colored left-border accents */
.sb-act-pay, .sb-act-call, .sb-act-sell {
  background:   var(--bg-sidebar-hover, rgba(255,255,255,0.04)) !important;
  border-color: var(--border-sidebar, rgba(255,255,255,0.08)) !important;
  color:        var(--text-sidebar, rgba(255,255,255,0.65)) !important;
  box-shadow:   none !important;
}
.sb-act-pay:hover, .sb-act-call:hover, .sb-act-sell:hover {
  background:   rgba(37,99,235,0.12) !important;
  border-color: rgba(37,99,235,0.30) !important;
  color:        var(--text-sidebar, rgba(255,255,255,0.90)) !important;
}

/* Logout button */
.btn-out:hover {
  background:   rgba(239,68,68,0.10) !important;
  border-color: rgba(239,68,68,0.25) !important;
  color:        #EF4444 !important;
}

/* ══ 9. TOPBAR — clean, 56px ═════════════════════════════════════════════════ */

/* Company name chip — truncate, never overflow */
#tb-c, .tb-chip.co {
  max-width:     160px !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  white-space:   nowrap !important;
  min-width:     0 !important;
  flex-shrink:   1 !important;
}

/* All chips uniform 32px height, pill shape */
.tb-chip {
  height:        32px !important;
  display:       inline-flex !important;
  align-items:   center !important;
  border-radius: 6px !important;
  padding:       0 12px !important;
}

/* Theme toggle — primary (not cyan) */
.tb-theme-toggle {
  border-color: rgba(37,99,235,0.25) !important;
  background:   rgba(37,99,235,0.08) !important;
  color:        rgba(37,99,235,0.85) !important;
  box-shadow:   none !important;
}
.tb-theme-toggle:hover {
  background:   rgba(37,99,235,0.15) !important;
  border-color: rgba(37,99,235,0.50) !important;
  color:        #2563EB !important;
  box-shadow:   0 0 10px rgba(37,99,235,0.20) !important;
}

/* Topbar search hover — primary */
.tb-search:hover {
  border-color: var(--v-primary) !important;
}

/* ══ 10. PAGE HEADER STRUCTURE — enforce .ph layout ══════════════════════════ */
.ph {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         0 0 16px !important;
  gap:             16px !important;
  margin-bottom:   24px !important;
  flex-wrap:       wrap !important;
  border-bottom:   none !important;
}

/* Page wrapper padding */
.pw {
  padding: 24px 32px 40px !important;
}
@media (max-width: 1024px) {
  .pw { padding: 20px 24px 36px !important; }
}
@media (max-width: 768px) {
  .pw { padding: 16px 14px 28px !important; }
}

/* ══ 11. EMPTY STATES — centered, simple ═════════════════════════════════════ */
.empty, .t-empty, .ud-empty, .inv-empty,
.prj-empty {
  padding:         56px 24px !important;
  text-align:      center !important;
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
}

/* Icons — gray, no fancy gradient box */
.empty .ei, .t-empty .ei {
  font-size:     48px !important;
  color:         var(--x-text-4) !important;
  margin-bottom: 14px !important;
  opacity:       0.7 !important;
  background:    none !important;
  border:        none !important;
  width:         auto !important;
  height:        auto !important;
  -webkit-text-fill-color: var(--x-text-4) !important;
}
.ud-empty-ic, .inv-empty-ic {
  color:      var(--x-text-4) !important;
  background: none !important;
  border:     none !important;
}
.prj-empty-icon {
  color:   var(--x-text-4) !important;
  opacity: 0.7 !important;
}

/* Heading */
.empty .et, .inv-empty-ttl, .prj-empty-ttl,
.t-empty .et, .ud-empty-title {
  font-size:   15px !important;
  font-weight: 500 !important;
  color:       var(--x-text-3) !important;
  -webkit-text-fill-color: var(--x-text-3) !important;
  margin-top:  0 !important;
}

/* Subtext */
.prj-empty-sub, .inv-empty-sub, .ud-empty-desc {
  font-size:   14px !important;
  color:       var(--x-text-4) !important;
  -webkit-text-fill-color: var(--x-text-4) !important;
  max-width:   380px !important;
}

/* CTA button in empty state */
.prj-empty-link {
  color:                   var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
}

/* ══ 12. SCROLLBARS — primary (not cyan) ══════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.20) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.35) !important;
}
.sb-nav::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.25) !important;
}

/* ══ 13. SECTION HEADERS — gray (not cyan) ═══════════════════════════════════ */
.sec-hd, .inv-sec-hd {
  color:                   var(--x-text-3) !important;
  -webkit-text-fill-color: var(--x-text-3) !important;
  border-bottom:           1px solid var(--x-border) !important;
}
[data-theme="light"] .sec-hd,
[data-theme="light"] .inv-sec-hd {
  color:                   #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
  border-bottom-color:     rgba(0,0,0,0.08) !important;
}

/* ══ 14. TABS / SEGMENTED CONTROLS — primary active ═══════════════════════════ */
.tab.on, .tab.active,
.seg-btn.on, .pill.on,
.inv-tab.active, .inv-tab.on,
.ud-tab.active, .ud-tab.on {
  background:              rgba(37,99,235,0.10) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  border-color:            rgba(37,99,235,0.30) !important;
}
[data-theme="light"] .tab.on, [data-theme="light"] .tab.active,
[data-theme="light"] .seg-btn.on, [data-theme="light"] .pill.on {
  background:              rgba(37,99,235,0.10) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
  border-color:            rgba(37,99,235,0.30) !important;
}

/* ══ 15. LINKS — primary ══════════════════════════════════════════════════════ */
.lnk, a.lnk, .more-link,
.prj-view-link {
  color:                   var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
}
.lnk:hover, a.lnk:hover {
  color:                   var(--v-primary-dark) !important;
  -webkit-text-fill-color: var(--v-primary-dark) !important;
}

/* ══ 16. SELECTION HIGHLIGHT ═════════════════════════════════════════════════ */
::selection {
  background: rgba(37, 99, 235, 0.20) !important;
  color:      var(--x-text) !important;
}

/* ══ 17. FOCUS RINGS — keyboard navigation ═══════════════════════════════════ */
button:focus-visible, a:focus-visible,
[role="button"]:focus-visible, .btn:focus-visible {
  outline:        2px solid var(--v-primary) !important;
  outline-offset: 2px !important;
  box-shadow:     none !important;
}

/* ══ 18. MODALS — remove cyan gradient top line ══════════════════════════════ */
.mob::before, .mob-inner::before,
.mov .md::before {
  background: none !important;
  display:    none !important;
}
/* Modal title — primary focus ring */
.mov input:focus, .mov select:focus, .mov textarea:focus {
  border-color: var(--v-primary) !important;
  box-shadow:   0 0 0 3px var(--v-primary-ring) !important;
}

/* ══ 19. TOAST — subtle primary border ════════════════════════════════════════ */
.toast, .notify-item, .n-item {
  border-color: rgba(37,99,235,0.20) !important;
  box-shadow:   0 8px 24px rgba(0,0,0,0.20) !important;
  backdrop-filter: none !important;
}

/* ══ 20. GLOW PILL — primary ══════════════════════════════════════════════════ */
.glow-pill {
  background: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(168,85,247,0.09)) !important;
  border:     1px solid rgba(37,99,235,0.28) !important;
  color:      var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
}

/* ══ 21. DEMO BANNER — primary palette ════════════════════════════════════════ */
.demo-banner-inner {
  background:         linear-gradient(90deg, rgba(37,99,235,.18), rgba(139,92,246,.12)) !important;
  border-bottom-color: rgba(37,99,235,.3) !important;
}
.demo-banner-cta {
  background:   rgba(37,99,235,.3) !important;
  border-color: rgba(37,99,235,.5) !important;
  color:        #C4B5FD !important;
}
.demo-banner-cta:hover {
  background: rgba(37,99,235,.5) !important;
  color:      #FFFFFF !important;
}

/* ══ 22. FOOTER BRAND NAME — primary gradient ═════════════════════════════════ */
.aurora-foot-brand-name,
.erp-footer-brand strong {
  background:              linear-gradient(90deg, #2563EB, #7C3AED) !important;
  -webkit-background-clip: text !important;
  background-clip:         text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ══ 23. KPI CARD HOVER — subtle shadow only, no accent stripe ═══════════════ */
.dash-kpi:hover {
  box-shadow: 0 0 0 1px rgba(37,99,235,0.15),
              0 8px 24px rgba(37,99,235,0.06) !important;
}
/* No accent stripe — pseudo-elements stay dead */
.dash-kpi::before,
.dash-kpi:hover::before { display: none !important; }

/* ══ 24. LIGHT MODE — clean gray-100 bg (no gradient orbs) ══════════════════ */
[data-theme="light"] body {
  background:            #F3F4F6 !important;
  background-attachment: initial !important;
}
[data-theme="light"] body::before,
[data-theme="light"] body::after {
  display: none !important;
}

/* ══ 25. SKELETON SHIMMER — primary tint ══════════════════════════════════════ */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(37,99,235,0.04) 0%,
    rgba(37,99,235,0.09) 50%,
    rgba(37,99,235,0.04) 100%) !important;
  background-size: 200% 100% !important;
}

/* ══ 26. STATUS DOTS ══════════════════════════════════════════════════════════ */
.dot.ok,  .status-dot.ok  { background: var(--v-success) !important; box-shadow: 0 0 6px var(--v-success) !important; }
.dot.warn,.status-dot.warn { background: var(--v-warning) !important; box-shadow: 0 0 6px var(--v-warning) !important; }
.dot.err, .status-dot.err  { background: var(--v-danger) !important;  box-shadow: 0 0 6px var(--v-danger) !important; }
.dot.info,.status-dot.info  { background: var(--v-primary) !important; box-shadow: 0 0 6px var(--v-primary) !important; }

/* ══ 27. REMOVE VISUAL CLUTTER ════════════════════════════════════════════════
   Random colored borders, duplicate labels, noise elements.
   ─────────────────────────────────────────────────────────────────────────── */

/* Kill top gradient line on modal boxes */
.mov .mob::before, .mov .mob-inner::before { display: none !important; }

/* Kill aurora gradient card top-line that was in saas-polish */
.card::before { display: none !important; }

/* Table header — no colored gradient bottom line */
.tbl thead th::after { display: none !important; }

/* Sidebar shimmer sweep on hover — remove */
.ni::before { display: none !important; }

/* Wave animation on sb-hd hover — disable */
.sb-hd:hover .sb-hd-name { letter-spacing: 0 !important; }
.sb-hd:hover .sb-hd-name > span { animation: none !important; }
@keyframes sbHdLetterWave {
  0%, 100% { transform: none; filter: none; }
}

/* ══ 28. PRINT — safe mode ════════════════════════════════════════════════════ */
@media print {
  .btn, .card, .tbl, .badge {
    box-shadow:  none !important;
    filter:      none !important;
    transform:   none !important;
    animation:   none !important;
  }
  .skeleton, .glow-pill { animation: none !important; }
  ::selection { background: #e8e8e8 !important; color: #000 !important; }
}

/* ══ 29. REDUCED MOTION ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 100ms !important;
    animation-duration:  100ms !important;
  }
}

/* ══ 32. .mo MODAL SYSTEM — new module pages (banks, blacklist, legalcases,
   escalations, receivables, payables, agenttransactions, users)
   These pages use .mo/.mo-box/.mo-hd/.mo-bd/.mo-ft with no CSS defined.
   ─────────────────────────────────────────────────────────────────────────── */

/* Overlay */
.mo {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
  overflow-y: auto;
}

/* Card */
.mo-box {
  background:    var(--x-surface, #111827);
  border:        1px solid var(--x-border, rgba(255,255,255,0.10));
  border-radius: 14px;
  width:         100%;
  max-height:    calc(100vh - 40px);
  overflow-y:    auto;
  box-shadow:    0 24px 64px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.30);
  position:      relative;
  animation:     mo-slide-in 0.18s ease-out both;
}
@keyframes mo-slide-in {
  from { transform: scale(0.97) translateY(6px); opacity: 0; }
  to   { transform: scale(1) translateY(0);      opacity: 1; }
}

/* Header */
.mo-hd {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         15px 20px;
  border-bottom:   1px solid var(--x-border, rgba(255,255,255,0.08));
  font-size:       15px;
  font-weight:     700;
  color:                   var(--x-text, #F4F5F8);
  -webkit-text-fill-color: var(--x-text, #F4F5F8);
  position:        sticky;
  top:             0;
  background:      var(--x-surface, #111827);
  z-index:         1;
  border-radius:   14px 14px 0 0;
}

/* Body */
.mo-bd {
  padding: 18px 20px;
}

/* Footer */
.mo-ft {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             8px;
  padding:         13px 20px;
  border-top:      1px solid var(--x-border, rgba(255,255,255,0.08));
  position:        sticky;
  bottom:          0;
  background:      var(--x-surface, #111827);
  border-radius:   0 0 14px 14px;
}

/* Close button */
.mo-cl {
  background:              none;
  border:                  none;
  width:                   28px;
  height:                  28px;
  border-radius:           6px;
  color:                   var(--x-text-3, rgba(255,255,255,0.40));
  -webkit-text-fill-color: var(--x-text-3, rgba(255,255,255,0.40));
  font-size:               16px;
  line-height:             1;
  cursor:                  pointer;
  display:                 flex;
  align-items:             center;
  justify-content:         center;
  transition:              all 0.15s;
  flex-shrink:             0;
  padding:                 0;
}
.mo-cl:hover {
  background:              rgba(239,68,68,0.12);
  color:                   #EF4444;
  -webkit-text-fill-color: #EF4444;
}

/* Light-mode modal */
[data-theme="light"] .mo-box {
  background:   #FFFFFF;
  border-color: #E5E7EB;
  box-shadow:   0 20px 60px rgba(15,23,42,0.14), 0 4px 16px rgba(15,23,42,0.08);
}
[data-theme="light"] .mo-hd {
  background:              #FFFFFF;
  border-bottom-color:     #E5E7EB;
  color:                   #0F172A;
  -webkit-text-fill-color: #0F172A;
}
[data-theme="light"] .mo-ft {
  background:          #FFFFFF;
  border-top-color:    #E5E7EB;
}
[data-theme="light"] .mo-cl {
  color:                   #9CA3AF;
  -webkit-text-fill-color: #9CA3AF;
}

/* ══ 33. .fi FORM INPUTS — new module pages ═══════════════════════════════════
   Used in modal forms for blacklist, legalcases, escalations, receivables,
   payables, agenttransactions, banks, users pages. No CSS existed for this.
   ─────────────────────────────────────────────────────────────────────────── */

.fi, .inp, .inp-light {
  width:            100%;
  padding:          8px 11px;
  background-color: var(--x-input-bg, #0F1320);
  border:           1px solid var(--x-border-2, rgba(255,255,255,0.16));
  border-radius:    8px;
  color:                   var(--x-text, #F4F5F8);
  -webkit-text-fill-color: var(--x-text, #F4F5F8);
  font-size:        13px;
  font-family:      'Inter', 'Plus Jakarta Sans', sans-serif;
  outline:          none;
  transition:       border-color 0.15s, box-shadow 0.15s;
  box-sizing:       border-box;
  display:          block;
}
.fi:focus, .inp:focus, .inp-light:focus {
  border-color: var(--v-primary, #2563EB);
  box-shadow:   0 0 0 3px var(--v-primary-ring, rgba(37,99,235,0.25));
}
.fi::placeholder, .inp::placeholder, .inp-light::placeholder {
  color:                   var(--x-text-4, rgba(255,255,255,0.22));
  -webkit-text-fill-color: var(--x-text-4, rgba(255,255,255,0.22));
  opacity: 1;
}
select.fi {
  -webkit-appearance: none;
  appearance:         none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(37%2C99%2C235%2C0.6)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  background-size:     12px 12px;
  padding-right:       30px;
  cursor:              pointer;
}
select.fi option {
  background: var(--x-modal-bg, #111827);
  color:      var(--x-text, #F4F5F8);
}
textarea.fi {
  resize:     vertical;
  min-height: 60px;
}

/* Light-mode .fi / .inp / .inp-light */
[data-theme="light"] .fi,
[data-theme="light"] .inp,
[data-theme="light"] .inp-light {
  background-color:        #FFFFFF !important;
  border-color:            #E5E7EB !important;
  color:                   #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
[data-theme="light"] .fi::placeholder,
[data-theme="light"] .inp::placeholder,
[data-theme="light"] .inp-light::placeholder {
  color:                   #9CA3AF !important;
  -webkit-text-fill-color: #9CA3AF !important;
}
[data-theme="light"] select.fi {
  background-color: #FFFFFF;
}
[data-theme="light"] select.fi option {
  background: #FFFFFF;
  color:      #374151;
}

/* ══ 34. .btn-gh.on — active filter tabs in new module pages ═════════════════
   bl-ftab.on, lc-ftab.on, esc-ftab.on etc. have no active style without this.
   ─────────────────────────────────────────────────────────────────────────── */

.btn-gh.on {
  background-color:        rgba(37,99,235,0.10) !important;
  border-color:            rgba(37,99,235,0.35) !important;
  color:                   #2563EB !important;
  -webkit-text-fill-color: #2563EB !important;
}

/* ══ 30. COMPONENTS — d-kpi hover text color ════════════════════════════════ */
.d-kpi:hover .d-kpi-val,
.d-kpi:hover [class*="-val"],
.d-kpi:hover [class*="-value"] {
  color:                   var(--x-text) !important;
  -webkit-text-fill-color: var(--x-text) !important;
  text-shadow:             none !important;
}

/* ══ 31. AURORA TOPBAR TRIGGER — primary ═════════════════════════════════════
   The aurora notification bar trigger button
   ─────────────────────────────────────────────────────────────────────────── */
.aurora-topbar-trigger {
  background:  linear-gradient(90deg, rgba(37,99,235,0.10), rgba(139,92,246,0.08)) !important;
  border-color: rgba(37,99,235,0.30) !important;
}
.aurora-topbar-trigger:hover {
  background:  linear-gradient(90deg, rgba(37,99,235,0.20), rgba(139,92,246,0.14)) !important;
  border-color: rgba(37,99,235,0.55) !important;
}
.aurora-topbar-trigger:focus-visible {
  outline: 2px solid rgba(37,99,235,0.60) !important;
}
.aurora-topbar.is-open .aurora-topbar-bar {
  border-bottom-color: rgba(37,99,235,0.40) !important;
}
.aurora-topbar-bar {
  border-bottom-color: rgba(37,99,235,0.18) !important;
}
.aurora-topbar.is-open .aurora-topbar-trigger {
  background:   linear-gradient(90deg, rgba(37,99,235,0.24), rgba(139,92,246,0.18)) !important;
  border-color: rgba(37,99,235,0.60) !important;
}

/* ══ 32. INVENTORY AURORA — override cyan filter buttons ════════════════════ */
.inv-aurora-filter-btn.active,
.inv-aurora-filter-btn:focus,
.inv-tab-btn.active, .inv-tab-btn.on,
[class*="inv-"][class*="-btn"].active {
  background:              rgba(37,99,235,0.12) !important;
  border-color:            rgba(37,99,235,0.35) !important;
  color:                   var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
}

/* Inventory progress / status fill colors — keep semantic colors */
.inv-aurora-card:hover {
  border-color: rgba(37,99,235,0.25) !important;
  box-shadow:   0 4px 12px rgba(37,99,235,0.06) !important;
}

/* ══ 33. SUPER-ADMIN CSS — override status badge & button colors ════════════ */
.sa-status {
  color:        var(--x-text-3) !important;
  border-color: var(--x-border) !important;
}
.sa-status.approved { color: var(--v-success) !important; border-color: rgba(16,185,129,0.25) !important; }
.sa-status.rejected { color: var(--v-danger) !important;  border-color: rgba(239,68,68,0.25) !important; }
.sa-status.pending  { color: var(--v-warning) !important; border-color: rgba(245,158,11,0.25) !important; }

/* ══ 34. PAYMENT WALL — override cyan elements ═══════════════════════════════ */
.pw2-btn:not([class*="btn-r"]):not([class*="ghost"]):not([class*="whatsapp"]) {
  background:   var(--v-primary) !important;
  border-color: var(--v-primary) !important;
  color:        #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ══ 35. PAGE HEADER — ensure no stray action buttons outside .ph-r ════════ */
/* Enforce all action buttons in page header be in .ph-r */
.ph .btn, .ph .btn-g, .ph .btn-gh { flex-shrink: 0 !important; }
.ph-r { flex-shrink: 0 !important; gap: 8px !important; }

/* ══ 36. SIDEBAR BADGE — primary (not red dot for normal items) ══════════════ */
.ni-bdg {
  background: var(--v-danger) !important;
  box-shadow:  0 0 6px rgba(239,68,68,0.35) !important;
}
.nav-group-bdg {
  background: var(--v-danger) !important;
  box-shadow:  0 0 6px rgba(239,68,68,0.30) !important;
}

/* ══ 37. BK REMINDER (backup reminder in sidebar) — amber ═══════════════════ */
#bk-reminder {
  background:   rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.25) !important;
  color:        var(--v-warning) !important;
}

/* ══ 38. STAT / KPI CARDS — plain border only, no colored accent lines ═══════
   Kills every ::before / ::after accent stripe on all card variants.
   Border is always 1px solid #E5E7EB (light) or rgba(255,255,255,0.08) (dark).
   ─────────────────────────────────────────────────────────────────────────── */
.db-kpi::before, .db-kpi::after,
.kpi::before,    .kpi::after,
.stat-card::before, .stat-card::after,
.dash-kpi::before,  .dash-kpi::after,
.dkpi::before,      .dkpi::after,
.dash-qa-btn::before, .dash-qa-btn::after,
.prj-kpi-card::before, .prj-kpi-card::after {
  display:    none !important;
  background: none !important;
  content:    none !important;
}

/* Light mode: hard #E5E7EB border */
[data-theme="light"] .db-kpi,
[data-theme="light"] .kpi,
[data-theme="light"] .stat-card,
[data-theme="light"] .dash-kpi,
[data-theme="light"] .dkpi,
[data-theme="light"] .prj-kpi-card {
  border:       1px solid #E5E7EB !important;
  border-bottom: 1px solid #E5E7EB !important;
}

/* Dark mode: consistent dark border */
[data-theme="dark"] .db-kpi,
[data-theme="dark"] .kpi,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dash-kpi,
[data-theme="dark"] .dkpi,
[data-theme="dark"] .prj-kpi-card {
  border:       1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ══ 39. FORM GROUPS — .fg inside modals needs vertical rhythm ════════════════
   components.css defines .fg as flex-column gap-4px but no margin.
   Inside modal body .mo-bd, each group needs breathing room.
   ─────────────────────────────────────────────────────────────────────────── */
.mo-bd .fg,
.mov .mb .fg,
.form-body .fg,
.fgs .fg {
  margin-bottom: 13px !important;
}
.mo-bd .fg:last-child,
.fgs .fg:last-child {
  margin-bottom: 0 !important;
}

/* Two-column form row (use inside .mo-bd for side-by-side fields) */
.fg-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
@media (max-width: 520px) {
  .fg-row { grid-template-columns: 1fr !important; }
}

/* Form section divider inside modals */
.fg-sep {
  font-size:      11px !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color:          var(--x-text-3) !important;
  -webkit-text-fill-color: var(--x-text-3) !important;
  padding:        12px 0 6px !important;
  border-top:     1px solid var(--x-border) !important;
  margin-top:     4px !important;
}
.fg-sep:first-child { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }

/* ══ 40. AMOUNT INPUTS — .inp-amt ════════════════════════════════════════════
   Used on: payments, sales, admin targets, payment-wall.
   Needs: tabular (fixed-width) numbers, slightly larger font to read amounts.
   ─────────────────────────────────────────────────────────────────────────── */
.inp-amt {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  letter-spacing:        0.01em !important;
  font-weight:           500 !important;
  text-align:            right !important;
}
.inp-amt::placeholder {
  font-weight:  400 !important;
  text-align:   left !important;
  letter-spacing: 0 !important;
}

/* ══ 41. MODAL SIZE VARIANTS ═════════════════════════════════════════════════
   .mo-sm  = narrow (460px) — quick confirm dialogs
   .mo-md  = medium (600px) — standard forms  [default .mo-box has no max-w]
   .mo-lg  = large (800px) — complex forms
   .mo-xl  = extra large (1000px) — wizard/preview
   ─────────────────────────────────────────────────────────────────────────── */
.mo-box { max-width: 600px !important; }
.mo-sm  .mo-box { max-width: 460px !important; }
.mo-md  .mo-box { max-width: 600px !important; }
.mo-lg  .mo-box { max-width: 820px !important; }
.mo-xl  .mo-box { max-width: 1020px !important; }

/* ══ 42. .d-kpi CARD DESIGN — matching .db-kpi style ════════════════════════
   Several module pages use .d-kpi (not .db-kpi) for their KPI strips.
   ─────────────────────────────────────────────────────────────────────────── */
.d-kpi {
  background:    var(--x-surface) !important;
  border:        1px solid var(--x-border) !important;
  border-radius: var(--v-card-radius) !important;
  box-shadow:    var(--v-card-shadow) !important;
  padding:       16px 20px !important;
  transition:    box-shadow 150ms, border-color 150ms !important;
}
.d-kpi:hover {
  box-shadow:   var(--v-card-shadow-h) !important;
  border-color: rgba(37,99,235,0.20) !important;
}
.d-kpi::before, .d-kpi::after { display: none !important; }
[data-theme="light"] .d-kpi { background: #FFFFFF !important; border-color: #E5E7EB !important; }

/* ══ 43. PAGE HEADER RIGHT (ph-r) — consistent button gap ═══════════════════ */
.ph-r {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  flex-shrink: 0 !important;
  flex-wrap:   wrap !important;
}

/* ══ 44. SEARCH BAR — primary focus consistent across all pages ═══════════════ */
.sinp:focus, .sbar input:focus,
.tb-search:focus, [class*="search"] input:focus {
  border-color: var(--v-primary) !important;
  outline:      none !important;
}

/* ══ 45. NUMBER CHIPS / COUNTS — consistent pill style ══════════════════════
   Used in module page filter tabs to show record counts.
   ─────────────────────────────────────────────────────────────────────────── */
.count-chip {
  display:       inline-flex !important;
  align-items:   center !important;
  justify-content: center !important;
  min-width:     20px !important;
  height:        18px !important;
  padding:       0 5px !important;
  font-size:     11px !important;
  font-weight:   600 !important;
  border-radius: 999px !important;
  background:    var(--v-primary-soft) !important;
  color:         var(--v-primary) !important;
  -webkit-text-fill-color: var(--v-primary) !important;
  border:        1px solid rgba(37,99,235,0.20) !important;
}

/* ══ 46. LOADING SHIMMER — used across module list views ═════════════════════ */
.shimmer-row {
  height:        40px !important;
  background:    linear-gradient(
    90deg,
    var(--x-surface-2) 0%,
    var(--x-surface-hover) 50%,
    var(--x-surface-2) 100%
  ) !important;
  background-size: 200% 100% !important;
  border-radius:   6px !important;
  animation:       ui-shimmer 1.4s ease-in-out infinite !important;
  margin-bottom:   6px !important;
}
@keyframes ui-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ══ 47. MOBILE RESPONSIVE — ensure all module pages stack cleanly ═══════════ */
@media (max-width: 600px) {
  .ph { flex-direction: column !important; align-items: flex-start !important; }
  .ph-r { width: 100% !important; justify-content: flex-start !important; }
  .mo-box { border-radius: 12px 12px 0 0 !important; margin-top: auto !important; }
  .mo { align-items: flex-end !important; padding: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DRAMATIC OVERHAUL v2.0 — Dark sidebar · White-card headers · Zebra tables
   All rules below use maximum specificity or !important to beat everything.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ╔══ 1. SIDEBAR — REMOVED 2026-05-27 ═════════════════════════════════════════╗
   The former "ALWAYS DARK NAVY" override (which forced dark navy regardless of
   theme) has been deleted to allow a true light-mode sidebar. New rules live in
   §48 PREMIUM TRANSFORMATION at the end of this file.
   ╚════════════════════════════════════════════════════════════════════════════╝ */

/* ╔══ 2. PAGE HEADERS — WHITE CARD BAR ════════════════════════════════════════╗
   Solid white card, 12px radius, subtle shadow — visible on every page
   ╚════════════════════════════════════════════════════════════════════════════╝ */
.ph,
[data-theme="light"] .ph {
  background:    #FFFFFF !important;
  border:        1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding:       16px 20px !important;
  margin-bottom: 20px !important;
  box-shadow:    0 1px 4px rgba(15,23,42,0.07),
                 0 0   0   1px rgba(15,23,42,0.03) !important;
}
[data-theme="dark"] .ph {
  background:  var(--x-surface, #0F172A) !important;
  border-color: var(--x-border, rgba(255,255,255,0.09)) !important;
  box-shadow:   0 1px 4px rgba(0,0,0,0.30) !important;
}

/* ╔══ 3. TABLES — ALTERNATING ROWS + BOLD HEADERS ═════════════════════════════╗
   thead: #F8FAFC bg, 700 weight headers, 2px bottom border
   tbody: white odd / #F8FAFC even / #EFF6FF hover
   ╚════════════════════════════════════════════════════════════════════════════╝ */
table.t thead tr,
.tbl thead tr,
.tw  thead tr,
.pay-tbl thead tr {
  background: #F8FAFC !important;
}
table.t thead th,
.tbl    thead th,
.tw     thead th,
.pay-tbl thead th,
.ss-tbl thead th {
  font-weight:    700 !important;
  color:          #374151 !important;
  font-size:      11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  background:     #F8FAFC !important;
  border-bottom:  2px solid #E2E8F0 !important;
  padding:        10px 16px !important;
}
[data-theme="dark"] table.t thead th,
[data-theme="dark"] .tbl thead th,
[data-theme="dark"] .tw  thead th,
[data-theme="dark"] .pay-tbl thead th {
  background:   rgba(255,255,255,0.04) !important;
  color:        rgba(255,255,255,0.45) !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}

/* Zebra rows — light mode only (dark overrides follow below) */
[data-theme="light"] table.t tbody tr:nth-child(odd),
[data-theme="light"] .tbl    tbody tr:nth-child(odd),
[data-theme="light"] .tw     tbody tr:nth-child(odd),
[data-theme="light"] .pay-tbl tbody tr:nth-child(odd) { background: #FFFFFF !important; }

[data-theme="light"] table.t tbody tr:nth-child(even),
[data-theme="light"] .tbl    tbody tr:nth-child(even),
[data-theme="light"] .tw     tbody tr:nth-child(even),
[data-theme="light"] .pay-tbl tbody tr:nth-child(even) { background: #F8FAFC !important; }

[data-theme="light"] table.t tbody tr:hover,
[data-theme="light"] .tbl    tbody tr:hover,
[data-theme="light"] .tw     tbody tr:hover,
[data-theme="light"] .pay-tbl tbody tr:hover { background: #EFF6FF !important; }

[data-theme="dark"] table.t tbody tr:nth-child(odd),
[data-theme="dark"] .tbl    tbody tr:nth-child(odd),
[data-theme="dark"] .tw     tbody tr:nth-child(odd)  { background: transparent !important; }

[data-theme="dark"] table.t tbody tr:nth-child(even),
[data-theme="dark"] .tbl    tbody tr:nth-child(even),
[data-theme="dark"] .tw     tbody tr:nth-child(even) { background: rgba(255,255,255,0.025) !important; }

[data-theme="dark"] table.t tbody tr:hover,
[data-theme="dark"] .tbl    tbody tr:hover,
[data-theme="dark"] .tw     tbody tr:hover { background: rgba(37,99,235,0.08) !important; }

/* ╔══ 4. PRIMARY BUTTONS — #2563EB, no exceptions ═════════════════════════════╗
   Covers every button class variant used across the codebase
   ╚════════════════════════════════════════════════════════════════════════════╝ */
.btn-g, .btn-d, .btn-p, .btn-primary,
button.btn-g, button.btn-d,
.db-btn.primary, .ph-r .btn-g, .ph-r .btn-d,
[class*="btn-save"], [class*="save-btn"] {
  background:              #2563EB !important;
  border-color:            #2563EB !important;
  color:                   #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight:             600 !important;
  box-shadow:              0 1px 3px rgba(37,99,235,0.25) !important;
}
.btn-g:hover, .btn-d:hover, .btn-p:hover, .btn-primary:hover,
.db-btn.primary:hover {
  background:              #1D4ED8 !important;
  border-color:            #1D4ED8 !important;
  color:                   #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow:              0 4px 12px rgba(37,99,235,0.35) !important;
}

/* ╔══ 5. DASHBOARD — compact 3-row layout ═════════════════════════════════════╗
   Row 1: 4 KPI cards
   Row 2: Trend 60% | Follow-ups 40%
   Row 3: Recent Payments 50% | Overdue Units 50%
   ╚════════════════════════════════════════════════════════════════════════════╝ */
.db.ani {
  display:        flex !important;
  flex-direction: column !important;
  gap:            16px !important;
  padding:        0 0 48px !important;
}

/* KPI row — always 4 columns */
.db-kpis {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:                   16px !important;
}

/* Officer "At a Glance" carries 5 KPIs (adds My Monthly Target) — 5 across so the 5th doesn't orphan */
.db-kpis.db-kpis-5 { grid-template-columns: repeat(5, 1fr) !important; }

/* Row 2: 60 / 40 */
.db-row2 {
  display:               grid !important;
  grid-template-columns: 3fr 2fr !important;
  gap:                   16px !important;
  align-items:           start !important;
}

/* Row 3: 50 / 50 */
.db-row3 {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   16px !important;
  align-items:           start !important;
}

/* Follow-up rows */
.db-fu-row {
  display:         flex !important;
  align-items:     center !important;
  gap:             10px !important;
  padding:         9px 16px !important;
  cursor:          pointer !important;
  border-bottom:   1px solid var(--x-border, #F1F5F9) !important;
  transition:      background 0.15s !important;
}
.db-fu-row:last-child { border-bottom: none !important; }
.db-fu-row:hover { background: var(--x-surface-2, #F8FAFC) !important; }

.db-fu-dt {
  flex-shrink:   0 !important;
  font-size:     10px !important;
  font-weight:   600 !important;
  padding:       2px 7px !important;
  border-radius: 99px !important;
  white-space:   nowrap !important;
}
.db-fu-dt.red    { background: #FEE2E2; color: #B91C1C; }
.db-fu-dt.amber  { background: #FEF3C7; color: #92400E; }
.db-fu-dt.blue   { background: #DBEAFE; color: #1E40AF; }

.db-fu-body      { flex: 1; min-width: 0; }
.db-fu-name      { font-size: 12px; font-weight: 600; color: var(--x-text, #0F172A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-fu-note      { font-size: 11px; color: var(--x-text-3, #6B7280); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.db-fu-ch {
  flex-shrink:   0 !important;
  font-size:     10px !important;
  font-weight:   500 !important;
  color:         var(--x-text-3, #9CA3AF) !important;
  padding:       2px 6px !important;
  border:        1px solid var(--x-border, #E5E7EB) !important;
  border-radius: 4px !important;
}

/* Dark mode follow-up adjustments */
[data-theme="dark"] .db-fu-row:hover { background: rgba(255,255,255,0.04) !important; }
[data-theme="dark"] .db-fu-dt.red    { background: rgba(220,38,38,0.18); color: #FCA5A5; }
[data-theme="dark"] .db-fu-dt.amber  { background: rgba(217,119,6,0.18); color: #FCD34D; }
[data-theme="dark"] .db-fu-dt.blue   { background: rgba(37,99,235,0.18); color: #93C5FD; }

/* Responsive collapse */
@media (max-width: 1024px) {
  .db-row2, .db-row3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 1180px) {
  .db-kpis.db-kpis-5 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .db-kpis, .db-kpis.db-kpis-5 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .db-kpis, .db-kpis.db-kpis-5 { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   §48 PREMIUM TRANSFORMATION (2026-05-27; scoped to #s-app 2026-05-27 emergency)
   Phase 5 polish pass. Appended last; wins all prior conflicts. Pairs with the
   dark-navy override removal at the top of §1 above.

   🚫 ALL RULES BELOW ARE SCOPED TO `#s-app` so they cannot leak into the login
      screen (`#s-login`), the setup wizard, or buyer-portal.html. Body-bg rules
      use `#s-app` directly (instead of `body`) so login keeps its own background.
      Re-introducing un-scoped selectors here will break the login page — when
      adding new rules in §48 always prefix `#s-app `.

   Sections:
     · Sidebar light-mode (replacement for the deleted dark-navy block)
     · Typography hierarchy
     · KPI card redesign
     · Card / panel design
     · Table design
     · Topbar clean
     · Button system
     · Breadcrumb
     · Light-mode page bg
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR LIGHT MODE ───────────────────────────────────────────────────── */
/* Selector audit 2026-05-27: the spec's .sb-nav-lbl / .sb-nav-a / .sb-nav-ic
   classes do NOT exist in this codebase. _mkNi() in js/ui.js renders nav items
   as <div class="ni"><span class="ni-ic"><span class="ni-lb"><span class="ni-bdg">.
   Active state is .ni.on (NOT .ni.active — nel.classList.add('on') at ui.js:652).
   Group labels are .nav-grp-lbl. CSS values below are unchanged from the spec. */
[data-theme="light"] #s-app .sb,
[data-theme="light"] #s-app .sb-nav,
[data-theme="light"] #s-app .sb-col-btn,
[data-theme="light"] #s-app .sb-ws,
[data-theme="light"] #s-app .sb-user-zone {
  background: #F8FAFC !important;
  border-right: 1px solid #E2E8F0 !important;
}
[data-theme="light"] #s-app .nav-grp-lbl {
  color: #64748B !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
[data-theme="light"] #s-app .ni {
  color: #374151 !important;
}
[data-theme="light"] #s-app .ni:hover {
  background: #EFF6FF !important;
  color: #2563EB !important;
}
[data-theme="light"] #s-app .ni.on {
  background: #EFF6FF !important;
  color: #2563EB !important;
  font-weight: 600 !important;
}
[data-theme="light"] #s-app .ni-ic,
[data-theme="light"] #s-app .ni-lb {
  color: inherit !important;
}

/* ── TYPOGRAPHY HIERARCHY ─────────────────────────────────────────────────── */
#s-app .ph h1, #s-app .page-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em !important;
}
#s-app .ph h2, #s-app .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}
#s-app .ph p, #s-app .page-subtitle, #s-app .ph-sub {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}
#s-app .tbl th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
}
#s-app .tbl td {
  font-size: 13px !important;
  color: var(--text-primary) !important;
  padding: 12px 16px !important;
}

/* ── KPI CARD REDESIGN ────────────────────────────────────────────────────── */
#s-app .db-kpi {
  border-radius: 12px !important;
  padding: 20px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-surface, #FFFFFF) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.2s ease !important;
}
#s-app .db-kpi:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
#s-app .db-kpi-hd {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#s-app .db-kpi-val {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 8px 0 4px !important;
}

/* ── CARD / PANEL DESIGN ──────────────────────────────────────────────────── */
#s-app .card, #s-app .panel, #s-app .db-card, #s-app [class*="-card"], #s-app [class*="-panel"] {
  border-radius: 12px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-surface, #FFFFFF) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* ── TABLE DESIGN ─────────────────────────────────────────────────────────── */
#s-app .tbl { border-collapse: separate !important; border-spacing: 0 !important; }
#s-app .tbl thead tr { background: transparent !important; }
#s-app .tbl tbody tr {
  border-bottom: 1px solid var(--border-color) !important;
  transition: background 0.15s !important;
}
#s-app .tbl tbody tr:hover { background: #F8FAFC !important; }
#s-app .tbl tbody tr:nth-child(even) { background: transparent !important; }

/* ── TOPBAR CLEAN ─────────────────────────────────────────────────────────── */
#s-app .aurora-topbar, #s-app .aurora-topbar-bar {
  height: 56px !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: var(--bg-surface, #FFFFFF) !important;
  box-shadow: none !important;
}
#s-app .atb-current, #s-app .atb-current-name {
  font-size: 14px !important;
  font-weight: 600 !important;
}
#s-app .atb-current-lbl {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
}

/* ── BUTTON SYSTEM ────────────────────────────────────────────────────────── */
#s-app .btn-g, #s-app .btn-d, #s-app button[class*="btn-primary"],
#s-app .btn.primary, #s-app [class*="add-btn"], #s-app .action-btn-primary {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  border: none !important;
  transition: background 0.2s !important;
}
#s-app .btn-g:hover, #s-app .btn-d:hover {
  background: #1D4ED8 !important;
}
#s-app .btn-gh {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  transition: all 0.2s !important;
}
#s-app .btn-gh:hover {
  border-color: #2563EB !important;
  color: #2563EB !important;
}

/* ── BREADCRUMB ───────────────────────────────────────────────────────────── */
#s-app .breadcrumb, #s-app .bc, #s-app [class*="breadcrumb"] {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}
#s-app .breadcrumb a, #s-app .bc a { color: var(--text-muted) !important; }
#s-app .breadcrumb .current, #s-app .bc .active {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

/* ── LIGHT MODE PAGE BG ───────────────────────────────────────────────────── */
/* body → #s-app: applies the page-bg to the app shell, leaving login untouched. */
[data-theme="light"] #s-app,
[data-theme="light"] #s-app .app-content,
[data-theme="light"] #s-app .main-content,
[data-theme="light"] #s-app .pg {
  background: #F1F5F9 !important;
}
[data-theme="light"] #s-app .card,
[data-theme="light"] #s-app .panel,
[data-theme="light"] #s-app .db-card,
[data-theme="light"] #s-app .db-kpi {
  background: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §48 DARK MODE PARALLELS (added 2026-05-27; scoped to #s-app 2026-05-27)
   Mirrors the [data-theme="light"] rules above so both themes look intentional.
   Typography, buttons, breadcrumb, and card border-radius/shadow are NOT
   mirrored here — they are already theme-agnostic in §48 (use var(--text-primary)
   / --bg-surface / --border-color which auto-swap per theme.css).

   🚫 ALL RULES BELOW ARE SCOPED TO `#s-app` so they cannot leak into the login
      screen, the setup wizard, or buyer-portal.html. Body-bg rules use `#s-app`
      directly (instead of `body`) so login keeps its own background.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── SIDEBAR DARK MODE ────────────────────────────────────────────────────── */
[data-theme="dark"] #s-app .sb,
[data-theme="dark"] #s-app .sb-nav,
[data-theme="dark"] #s-app .sb-col-btn,
[data-theme="dark"] #s-app .sb-ws,
[data-theme="dark"] #s-app .sb-user-zone {
  background: #0F172A !important;
  border-right: 1px solid #1E293B !important;
}
[data-theme="dark"] #s-app .nav-grp-lbl {
  color: #475569 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
[data-theme="dark"] #s-app .ni {
  color: #94A3B8 !important;
}
[data-theme="dark"] #s-app .ni:hover {
  background: #1E293B !important;
  color: #E2E8F0 !important;
}
[data-theme="dark"] #s-app .ni.on {
  background: rgba(37,99,235,0.15) !important;
  color: #60A5FA !important;
  font-weight: 600 !important;
}
[data-theme="dark"] #s-app .ni-ic,
[data-theme="dark"] #s-app .ni-lb {
  color: inherit !important;
}

/* ── KPI CARDS DARK ──────────────────────────────────────────────────────── */
[data-theme="dark"] #s-app .db-kpi {
  background: #1E293B !important;
  border-color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] #s-app .db-kpi-hd {
  color: #64748B !important;
}
[data-theme="dark"] #s-app .db-kpi-val {
  color: #F1F5F9 !important;
}

/* ── CARDS / PANELS DARK ─────────────────────────────────────────────────── */
[data-theme="dark"] #s-app .card,
[data-theme="dark"] #s-app .panel,
[data-theme="dark"] #s-app .db-card,
[data-theme="dark"] #s-app [class*="-card"],
[data-theme="dark"] #s-app [class*="-panel"] {
  background: #1E293B !important;
  border-color: #334155 !important;
}

/* ── TOPBAR DARK ─────────────────────────────────────────────────────────── */
[data-theme="dark"] #s-app .aurora-topbar,
[data-theme="dark"] #s-app .aurora-topbar-bar {
  background: #0F172A !important;
  border-bottom: 1px solid #1E293B !important;
}

/* ── PAGE BG DARK ────────────────────────────────────────────────────────── */
/* body → #s-app: applies the page-bg to the app shell, leaving login untouched. */
[data-theme="dark"] #s-app,
[data-theme="dark"] #s-app .app-content,
[data-theme="dark"] #s-app .main-content,
[data-theme="dark"] #s-app .pg {
  background: #0B1120 !important;
}

/* ── TABLE DARK ──────────────────────────────────────────────────────────── */
[data-theme="dark"] #s-app .tbl tbody tr:hover {
  background: #1E293B !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   REBIRTH — Display typography + asymmetric KPI composition (2026-05-27)
   ──────────────────────────────────────────────────────────────────────────
   Visual primitives for the premium-product visual rebirth: display titles,
   eyebrow rhythm, lede paragraphs, featured + secondary stat composition.
   Theme-aware. Used by Clients / Units / PDC / Dashboard hero blocks.
   ══════════════════════════════════════════════════════════════════════════ */

.rb-page         { padding-top: 6px; }

.rb-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.rb-crumb .lnk   { color: var(--text-muted); cursor: pointer; transition: color 140ms; }
.rb-crumb .lnk:hover { color: var(--text-primary); }
.rb-crumb .sep   { opacity: .35; }
.rb-crumb .cur   { color: var(--text-primary); }

.rb-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.rb-hero-text    { min-width: 0; max-width: 660px; }
.rb-title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0;
}
.rb-lede {
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 560px;
  margin: 18px 0 0;
  font-weight: 400;
}
.rb-lede b { color: var(--text-primary); font-weight: 600; }
.rb-lede .pos { color: #16A34A; font-weight: 600; }
.rb-lede .neg { color: #DC2626; font-weight: 600; }
.rb-lede .info { color: #7C3AED; font-weight: 600; }
.rb-hero-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

/* Section markers between major page zones */
.rb-section          { margin-top: 40px; }
.rb-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rb-section-eyebrow::after {
  content:'';
  flex: 1;
  height: 1px;
  background: var(--border-color);
  margin-left: 4px;
}

/* Asymmetric KPI grid: featured + secondary stack */
.rb-kpi-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 980px) { .rb-kpi-grid { grid-template-columns: 1fr; } }

.rb-stat-feature {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
[data-theme="dark"] .rb-stat-feature { box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.rb-stat-feature::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 320px; height: 320px;
  background: radial-gradient(circle at 100% 0, rgba(37,99,235,.10), transparent 62%);
  pointer-events: none;
}
[data-theme="dark"] .rb-stat-feature::before { background: radial-gradient(circle at 100% 0, rgba(37,99,235,.18), transparent 62%); }

.rb-feat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
}
.rb-feat-value {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 12px 0 18px;
  position: relative;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.rb-feat-value .cur {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
}
.rb-feat-value small {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
}
.rb-feat-bar {
  height: 6px;
  border-radius: 99px;
  overflow: hidden;
  display: flex;
  margin-bottom: 14px;
  background: var(--bg-elevated);
  position: relative;
}
.rb-feat-bar > span { height: 100%; }
.rb-feat-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-muted);
  position: relative;
}
.rb-feat-legend .li { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: color 130ms; }
.rb-feat-legend .li:hover { color: var(--text-primary); }
.rb-feat-legend .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rb-feat-legend b { color: var(--text-primary); font-weight: 600; }

/* Secondary stat tiles — stacked next to the featured card */
.rb-sec-stack { display: flex; flex-direction: column; gap: 10px; }
.rb-stat-sec {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--rb-accent, #2563EB);
  border-radius: 14px;
  cursor: pointer;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
  position: relative;
}
.rb-stat-sec:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
[data-theme="dark"] .rb-stat-sec:hover { box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.rb-stat-sec.on {
  border-color: var(--rb-accent, #2563EB);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--rb-accent, #2563EB) 22%, transparent);
}
.rb-stat-sec .v {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 62px;
}
.rb-stat-sec .l { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rb-stat-sec .l-t {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.rb-stat-sec .l-s {
  font-size: 11px;
  color: var(--text-muted);
}
.rb-stat-sec .arr {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 160ms ease, color 160ms ease;
  opacity: .6;
}
.rb-stat-sec:hover .arr,
.rb-stat-sec.on .arr {
  color: var(--rb-accent, #2563EB);
  transform: translateX(3px);
  opacity: 1;
}

/* Fallback for browsers without color-mix() */
@supports not (color: color-mix(in srgb, red 50%, white)) {
  .rb-stat-sec.on { box-shadow: 0 8px 22px rgba(37,99,235,.22); }
}

/* ── KPI sweep: override browser-extension data-sleek-line injection ────────
   Extension injects <div data-sleek-line> with hardcoded blue gradient.
   !important beats the extension's inline style (no !important on their end). */
#_kpi0 [data-sleek-line] { background: linear-gradient(90deg,#DC2626,#EF4444) !important; }
#_kpi1 [data-sleek-line] { background: linear-gradient(90deg,#16A34A,#22C55E) !important; }
#_kpi2 [data-sleek-line] { background: linear-gradient(90deg,#2563EB,#6366F1) !important; }
#_kpi3 [data-sleek-line] { background: linear-gradient(90deg,#D97706,#F59E0B) !important; }

/* ── KPI card sweep lines (ID selectors beat the ::before kill rule above) ─── */
#_kpi0, #_kpi1, #_kpi2, #_kpi3 {
  position: relative !important;
  overflow: hidden !important;
}
#_kpi0::before, #_kpi1::before, #_kpi2::before, #_kpi3::before {
  display:          block !important;
  content:          '' !important;
  position:         absolute !important;
  top:              0 !important;
  left:             0 !important;
  height:           3px !important;
  width:            0% !important;
  border-radius:    10px 10px 0 0 !important;
  transition:       width .35s cubic-bezier(.4,0,.2,1) !important;
  z-index:          5 !important;
  pointer-events:   none !important;
  background:       transparent !important;
}
#_kpi0::before { background: linear-gradient(90deg,#DC2626,#EF4444) !important; }
#_kpi1::before { background: linear-gradient(90deg,#16A34A,#22C55E) !important; }
#_kpi2::before { background: linear-gradient(90deg,#2563EB,#6366F1) !important; }
#_kpi3::before { background: linear-gradient(90deg,#D97706,#F59E0B) !important; }
#_kpi0:hover::before, #_kpi1:hover::before,
#_kpi2:hover::before, #_kpi3:hover::before { width: 100% !important; }

/* ── Projects page: KPI strip (zp-kpi) — nth-child color match ──────────── */
#prj-kpi .zp-kpi:nth-child(1) [data-sleek-line] { background: linear-gradient(90deg,#6b7280,#9CA3AF) !important; }
#prj-kpi .zp-kpi:nth-child(2) [data-sleek-line] { background: linear-gradient(90deg,#10b981,#34D399) !important; }
#prj-kpi .zp-kpi:nth-child(3) [data-sleek-line] { background: linear-gradient(90deg,#f59e0b,#FCD34D) !important; }
#prj-kpi .zp-kpi:nth-child(4) [data-sleek-line] { background: linear-gradient(90deg,#8b5cf6,#A78BFA) !important; }

/* ── Projects page: project grid cards (zp-card) — data-col match ───────── */
.zp-card[data-col="#2563EB"] [data-sleek-line] { background: linear-gradient(90deg,#2563EB,#60A5FA) !important; }
.zp-card[data-col="#7C3AED"] [data-sleek-line] { background: linear-gradient(90deg,#7C3AED,#A78BFA) !important; }
.zp-card[data-col="#059669"] [data-sleek-line] { background: linear-gradient(90deg,#059669,#34D399) !important; }
.zp-card[data-col="#D97706"] [data-sleek-line] { background: linear-gradient(90deg,#D97706,#FCD34D) !important; }
.zp-card[data-col="#DC2626"] [data-sleek-line] { background: linear-gradient(90deg,#DC2626,#FCA5A5) !important; }
.zp-card[data-col="#0891B2"] [data-sleek-line] { background: linear-gradient(90deg,#0891B2,#67E8F9) !important; }
.zp-card[data-col="#EA580C"] [data-sleek-line] { background: linear-gradient(90deg,#EA580C,#FDBA74) !important; }
.zp-card[data-col="#4F46E5"] [data-sleek-line] { background: linear-gradient(90deg,#4F46E5,#818CF8) !important; }
.zp-card[data-col="#0D9488"] [data-sleek-line] { background: linear-gradient(90deg,#0D9488,#5EEAD4) !important; }
.zp-card[data-col="#9333EA"] [data-sleek-line] { background: linear-gradient(90deg,#9333EA,#D8B4FE) !important; }
.zp-card[data-col="#65A30D"] [data-sleek-line] { background: linear-gradient(90deg,#65A30D,#BEF264) !important; }
.zp-card[data-col="#BE185D"] [data-sleek-line] { background: linear-gradient(90deg,#BE185D,#FBCFE8) !important; }

/* ── All Units page: KPI cards sweep ─────────────────────────────────────── */
#_u-kpi0 [data-sleek-line] { background: linear-gradient(90deg,#2563EB,#60A5FA) !important; }
#_u-kpi1 [data-sleek-line] { background: linear-gradient(90deg,#16A34A,#34D399) !important; }
#_u-kpi2 [data-sleek-line] { background: linear-gradient(90deg,#7C3AED,#A78BFA) !important; }
#_u-kpi3 [data-sleek-line] { background: linear-gradient(90deg,#DC2626,#FCA5A5) !important; }

/* ── All Units page: grid + board cards — same palette match ────────────── */
.inv-grid-card[data-col="#2563EB"] [data-sleek-line],.inv-board-card[data-col="#2563EB"] [data-sleek-line] { background: linear-gradient(90deg,#2563EB,#60A5FA) !important; }
.inv-grid-card[data-col="#7C3AED"] [data-sleek-line],.inv-board-card[data-col="#7C3AED"] [data-sleek-line] { background: linear-gradient(90deg,#7C3AED,#A78BFA) !important; }
.inv-grid-card[data-col="#059669"] [data-sleek-line],.inv-board-card[data-col="#059669"] [data-sleek-line] { background: linear-gradient(90deg,#059669,#34D399) !important; }
.inv-grid-card[data-col="#D97706"] [data-sleek-line],.inv-board-card[data-col="#D97706"] [data-sleek-line] { background: linear-gradient(90deg,#D97706,#FCD34D) !important; }
.inv-grid-card[data-col="#DC2626"] [data-sleek-line],.inv-board-card[data-col="#DC2626"] [data-sleek-line] { background: linear-gradient(90deg,#DC2626,#FCA5A5) !important; }
.inv-grid-card[data-col="#0891B2"] [data-sleek-line],.inv-board-card[data-col="#0891B2"] [data-sleek-line] { background: linear-gradient(90deg,#0891B2,#67E8F9) !important; }
.inv-grid-card[data-col="#EA580C"] [data-sleek-line],.inv-board-card[data-col="#EA580C"] [data-sleek-line] { background: linear-gradient(90deg,#EA580C,#FDBA74) !important; }
.inv-grid-card[data-col="#4F46E5"] [data-sleek-line],.inv-board-card[data-col="#4F46E5"] [data-sleek-line] { background: linear-gradient(90deg,#4F46E5,#818CF8) !important; }
.inv-grid-card[data-col="#0D9488"] [data-sleek-line],.inv-board-card[data-col="#0D9488"] [data-sleek-line] { background: linear-gradient(90deg,#0D9488,#5EEAD4) !important; }
.inv-grid-card[data-col="#9333EA"] [data-sleek-line],.inv-board-card[data-col="#9333EA"] [data-sleek-line] { background: linear-gradient(90deg,#9333EA,#D8B4FE) !important; }
.inv-grid-card[data-col="#65A30D"] [data-sleek-line],.inv-board-card[data-col="#65A30D"] [data-sleek-line] { background: linear-gradient(90deg,#65A30D,#BEF264) !important; }
.inv-grid-card[data-col="#BE185D"] [data-sleek-line],.inv-board-card[data-col="#BE185D"] [data-sleek-line] { background: linear-gradient(90deg,#BE185D,#FBCFE8) !important; }