/* =========================================================
   Zapim Portal — DARK theme override layer
   Pure token override keyed off [data-theme="dark"]
   ========================================================= */

[data-theme="dark"] {
  color-scheme: dark;

  --bg:         #05070a;
  --bg-soft:    #0a0d10;
  --bg-panel:   #12161b;
  --bg-muted:   #0e1216;
  --surface:    #0e1217;
  --surface-2:  #161b22;
  --surface-hi: #1b2028;

  --line:        #1e242c;
  --line-strong: #2a313a;

  --ink:   #eaf2e2;
  --ink-2: #c9d3bd;
  --ink-3: #8a9480;
  --ink-4: #6a7464;
  --ink-5: #4a5247;

  /* Lime hue unchanged; ink-on-lime slightly deeper */
  --lime:        #a3e635;
  --lime-2:      #bef264;
  --lime-ink:    #0a1400;
  --lime-soft:   #1a2a06;
  --lime-soft-2: #223a0a;

  --danger:      #f87171;
  --danger-soft: #2a0f12;
  --warn:        #fbbf24;
  --warn-soft:   #2a1f07;
  --info:        #38bdf8;
  --info-soft:   #0b1e2b;

  --shadow-1:   0 1px 0 rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
  --shadow-2:   0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --shadow-pop: 0 10px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
}

/* Brand mark — keep a dark frame in dark mode (icon image is colorful) */
[data-theme="dark"] .brand-mark {
  background: var(--bg-panel);
}
[data-theme="dark"] .brand-mark::after {
  background: var(--lime);
  border-color: var(--bg);
}

/* Avatars get a darker tile bg + readable initials */
[data-theme="dark"] .avatar-sm,
[data-theme="dark"] .avatar-md,
[data-theme="dark"] .workspace .ws-avatar {
  background: var(--surface-2);
  color: var(--ink-2);
}
[data-theme="dark"] .avatar-stack > * + * { border-color: var(--bg); }

/* Belt-and-braces: ensure topbar follows tokens in dark mode */
[data-theme="dark"] .topbar { background: var(--bg); border-bottom-color: var(--line); }
[data-theme="dark"] .topbar .crumbs a { color: var(--ink-3); }
[data-theme="dark"] .topbar .crumbs .here { color: var(--ink); }
[data-theme="dark"] .topbar .crumbs .sep { color: var(--ink-4); }

/* Action inversion: ink-bg actions become lime-bg in dark */
[data-theme="dark"] .nav-item.active {
  background: var(--lime);
  color: var(--lime-ink);
}
[data-theme="dark"] .nav-item.active .nav-icon { color: var(--lime-ink); }
[data-theme="dark"] .nav-item.active .nav-count {
  background: var(--lime-ink);
  color: var(--lime);
}

[data-theme="dark"] .btn-dark {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-ink);
}
[data-theme="dark"] .btn-dark:hover {
  background: var(--lime-2);
  border-color: var(--lime-2);
}

[data-theme="dark"] .btn { background: var(--bg-panel); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .btn:hover { background: var(--surface-hi); border-color: var(--line-strong); }

/* Funnel default fill = lime in dark too */
[data-theme="dark"] .funnel-row .funnel-fill { background: var(--ink-3); }
[data-theme="dark"] .funnel-row.lime .funnel-fill { background: var(--lime); }
[data-theme="dark"] .funnel-row .funnel-track { background: var(--line); }

/* Progress default fill */
[data-theme="dark"] .progress > i { background: var(--ink-3); }
[data-theme="dark"] .progress.lime > i { background: var(--lime); }

/* Wallet number stays bright */
[data-theme="dark"] .wallet-amount { color: var(--ink); }

/* Topbar num-badge */
[data-theme="dark"] .icon-btn .num-badge {
  background: var(--lime);
  color: var(--lime-ink);
  border-color: var(--bg);
}

/* Chips in dark — pale tinted bg becomes deep tint, text uses bright variant */
[data-theme="dark"] .chip { background: var(--bg-panel); border-color: var(--line); color: var(--ink-2); }
[data-theme="dark"] .chip::before { background: var(--ink-4); }
[data-theme="dark"] .chip.success {
  background: var(--lime-soft);
  border-color: #2b4a10;
  color: var(--lime-2);
}
[data-theme="dark"] .chip.success::before { background: var(--lime-2); }
[data-theme="dark"] .chip.warn {
  background: var(--warn-soft);
  border-color: #4a3a0a;
  color: var(--warn);
}
[data-theme="dark"] .chip.warn::before { background: var(--warn); }
[data-theme="dark"] .chip.danger {
  background: var(--danger-soft);
  border-color: #4a1517;
  color: var(--danger);
}
[data-theme="dark"] .chip.danger::before { background: var(--danger); }
[data-theme="dark"] .chip.info {
  background: var(--info-soft);
  border-color: #1e3a4d;
  color: var(--info);
}
[data-theme="dark"] .chip.info::before { background: var(--info); }

/* Env chip — lime stays */
[data-theme="dark"] .env-chip {
  background: var(--lime-soft);
  border-color: #2b4a10;
  color: var(--lime-2);
}
[data-theme="dark"] .env-chip .env-dot { background: var(--lime-2); }

/* Banner — lime gradient, deep tints */
[data-theme="dark"] .banner {
  border-color: #2b4a10;
}
[data-theme="dark"] .banner-title { color: var(--lime-2); }
[data-theme="dark"] .banner-sub { color: var(--lime-2); opacity: 0.8; }

/* Sub-nav active dot stays lime */
[data-theme="dark"] .nav-sub .nav-item.active {
  background: var(--surface-hi);
  color: var(--ink);
}

/* Search ring */
[data-theme="dark"] .search:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(163,230,53,0.18);
}

/* Tab indicator stays lime */
[data-theme="dark"] .tab.active { color: var(--ink); border-bottom-color: var(--lime); }

/* Cards rely on borders, not shadows in dark */
[data-theme="dark"] .card,
[data-theme="dark"] .kpi {
  box-shadow: none;
}

/* Donut inner cutout */
[data-theme="dark"] .donut::after { background: var(--surface); }