/* ===== DARK MODE ===== */
[data-theme="dark"] {
  /* Native control theming (selects, date pickers, scrollbars) follow dark theme */
  color-scheme: dark;

  /* Surface overrides — ocean depth base (kept warm/blue, not near-black) */
  --surface:  var(--ws-bg-base);       /* #04243A — the ocean tone owner prefers */
  --card:     rgba(10, 44, 66, 0.55);  /* frosted glass fill */
  --bg:       var(--ws-bg-base);
  --input-bg: var(--ws-bg-base);

  /* Text — flip to light values */
  --ws-text-muted: #94A3B8;            /* lighter muted reads fine on dark ocean bg */
  --dark: var(--ws-text-primary);      /* #F0F4F8 */
  --txt:  var(--ws-text-primary);
  --navy: var(--ws-text-secondary);    /* #8DDBE6 — headings glow slightly */
  --g2:   #1E3A4A;                     /* border/divider gray-blue */
  --g3:   var(--ws-text-muted);        /* #94A3B8 */

  /* Borders */
  --border: var(--ws-border);          /* rgba(42,171,219,.15) */
  --brd:    var(--ws-border);

  /* Accent tints — all derive from lagoon #2AABDB */
  --teal-light:         rgba(42, 171, 219, .12);
  --sand:               var(--ws-gold-dark);          /* #C9976A */
  --glass-bg:           rgba(42, 171, 219, 0.08);
  --glass-border:       rgba(42, 171, 219, 0.20);
  --glass-glow:         0 0 24px rgba(42, 171, 219, 0.10);

  /* Deep Ocean Glass recipe — dark: frosted panes lit by a bright top edge */
  --glass-fill:         linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  --glass-fill-strong:  linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  --glass-edge:         rgba(255,255,255,.30);   /* the light edge — non-negotiable */
  --row-hover:          rgba(42, 171, 219, 0.09);
  --btn-glow:           0 4px 14px rgba(42, 171, 219, 0.32);
  --input-focus-border: rgba(42, 171, 219, 0.50);

  --row-alt-bg:  rgba(255, 255, 255, .03);
  --tick-color:  var(--ws-text-muted);

  /* Notice boxes — translucent tints read on the dark ocean card; lighten the text */
  --ws-notice-info-bg:     rgba(56, 189, 248, .12);
  --ws-notice-info-border: rgba(56, 189, 248, .30);
  --ws-notice-info-text:   var(--ws-cyan-light);    /* #67E8F9 */
  --ws-notice-ok-bg:       rgba(34, 197, 94, .12);
  --ws-notice-ok-border:   rgba(34, 197, 94, .30);
  --ws-notice-ok-text:     var(--ws-success-light);  /* #4ADE80 */
}

[data-theme="dark"] body {
  background: transparent;
  color: var(--dark);
}

[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 10% 90%, rgba(var(--ws-accent-rgb), .12) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 10%, rgba(var(--ws-gold-rgb), .07) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(var(--ws-bg-base-rgb), .90) 0%, var(--ws-bg-base) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Main content */
[data-theme="dark"] #main {
  background: transparent;
}

/* Glass fallback — when backdrop-filter is unsupported/throttled, the
   white-translucent fill would read invisible. Fall back to an opaque ocean tint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="dark"] .card,
  [data-theme="dark"] .sc { background: rgba(10, 44, 66, .92); }
  [data-theme="dark"] .mdl { background: #0a2c42; }
}

/* Cards — Deep Ocean Glass: frosted pane + bright top edge */
[data-theme="dark"] .card {
  background: var(--glass-fill);
  border-color: var(--glass-border);
  box-shadow:
    0 8px 24px rgba(var(--ws-black-rgb), .45),
    inset 0 1px 0 var(--glass-edge);
}

[data-theme="dark"] .sc {
  background: var(--glass-fill-strong);
  border-color: var(--glass-border);
  box-shadow:
    0 8px 24px rgba(var(--ws-black-rgb), .40),
    inset 0 1px 0 var(--glass-edge);
}

[data-theme="dark"] .card-hd {
  border-bottom-color: var(--g2);
}

/* Modals — strong glass */
[data-theme="dark"] .mdl {
  background: var(--glass-fill-strong);
  box-shadow:
    0 20px 50px rgba(var(--ws-black-rgb), .55),
    inset 0 1px 0 var(--glass-edge);
}

[data-theme="dark"] .mdl-hd {
  background: linear-gradient(135deg, var(--ws-bg-surface), var(--card));
  border-bottom-color: var(--g2);
}

[data-theme="dark"] .mdl-hd button:hover {
  background: var(--g2);
  color: var(--dark);
}

[data-theme="dark"] .mdl-ft {
  background: var(--ws-bg-surface);
  border-top-color: var(--g2);
}

/* Tables */
[data-theme="dark"] .tw {
  border-color: rgba(var(--ws-white-rgb), .07);
}

[data-theme="dark"] th {
  background: var(--ws-bg-surface);
  color: rgba(var(--ws-muted-rgb), .9);
  border-bottom-color: rgba(var(--ws-white-rgb), .1);
}

[data-theme="dark"] td {
  border-bottom-color: rgba(var(--ws-white-rgb), .04);
  color: var(--dark);
}

[data-theme="dark"] tbody tr:nth-child(even) td {
  background: rgba(var(--ws-white-rgb), .022);
}

[data-theme="dark"] tbody tr:hover td {
  background: rgba(var(--ws-accent-rgb), .08);
}

[data-theme="dark"] .tr td {
  background: rgba(var(--ws-accent-rgb), .10) !important;
  border-top-color: rgba(var(--ws-accent-rgb), .30);
  color: var(--teal-mid);
}

/* Forms */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--ws-bg-base);
  border-color: var(--g2);
  color: var(--dark);
}

[data-theme="dark"] input:hover,
[data-theme="dark"] select:hover {
  border-color: var(--ws-accent-muted);
}

[data-theme="dark"] .fg label {
  color: var(--g3);
}

[data-theme="dark"] .mode-box {
  background: var(--ws-bg-surface);
  border-color: var(--g2);
}

/* Eyebrows glow brighter on the dark ocean */
[data-theme="dark"] .eyebrow { color: var(--ws-accent-bright); }

/* Money & moments — Sunset Gold reads beautifully on the dark ocean */
[data-theme="dark"] .rab-footer .rf-row.total span:last-child { color: var(--ws-gold-bright); }

/* Buttons */
[data-theme="dark"] .btn.out {
  background: var(--ws-bg-surface);
  border-color: var(--g2);
  color: var(--dark);
}

[data-theme="dark"] .btn.out:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
}

[data-theme="dark"] .ib {
  background: var(--ws-bg-surface);
  border-color: var(--g2);
  color: var(--g3);
}

[data-theme="dark"] .ib:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
}

/* Pagination */
[data-theme="dark"] .pg-btn {
  background: var(--ws-bg-surface);
  border-color: var(--g2);
  color: var(--dark);
}

[data-theme="dark"] .pg-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
}

/* Page headers */
[data-theme="dark"] .ph h1 {
  color: var(--dark);
}

/* Search bar */
[data-theme="dark"] .srch input {
  background: var(--card);
}

/* Settings mode buttons */
[data-theme="dark"] .set-mode-btn {
  background: var(--ws-bg-surface);
  border-color: var(--g2);
  color: var(--g3);
}

/* Swatch active ring in dark mode */
[data-theme="dark"] .set-sw.active {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(var(--ws-white-rgb), .2);
}

/* Alert items */
[data-theme="dark"] .dash-alert-item {
  background: var(--ws-bg-surface);
}

/* Trip / booking table row backgrounds — use new status colors */
[data-theme="dark"] .bb {
  background: rgba(var(--ws-info-rgb), .15);   /* info: violet */
  color: var(--ws-info-light);
}

[data-theme="dark"] .bg {
  background: rgba(var(--ws-success-rgb), .15);    /* success: lagoon green */
  color: var(--ws-success-light);
}

[data-theme="dark"] .by {
  background: rgba(var(--ws-warning-rgb), .15);    /* warning: amber */
  color: var(--ws-warning);
}

[data-theme="dark"] .br {
  background: rgba(var(--ws-danger-rgb), .15);     /* danger: coral red */
  color: var(--ws-danger-light);
}

/* Toolbar / misc */
[data-theme="dark"] .tbar .ib {
  background: var(--ws-bg-surface);
}


/* ===== COLOR SCHEME: LAGOON (default — new ocean palette) ===== */
[data-scheme="teal"],
[data-scheme="lagoon"] {
  --teal:       var(--ws-accent);       /* #2AABDB */
  --teal-d:     var(--ws-accent-dark);  /* #1A8FA8 */
  --teal-mid:   var(--ws-accent-mid);   /* #4FC3D4 */
  --teal-light: rgba(42, 171, 219, .1);
  --border:     var(--ws-border);
}

[data-theme="dark"][data-scheme="teal"],
[data-theme="dark"][data-scheme="lagoon"] {
  --teal-light: rgba(42, 171, 219, .12);
}

/* ===== COLOR SCHEME: OCEAN (deep blue-teal variant) ===== */
[data-scheme="ocean"] {
  --teal:       var(--ws-accent-muted); /* #0E5C8A — deeper sea */
  --teal-d:     #083A5C;
  --teal-light: rgba(14, 92, 138, .1);
  --teal-mid:   var(--ws-accent-dark);  /* #1A8FA8 */
  --border:     rgba(14, 92, 138, .15);
}

[data-scheme="ocean"] #sb a.active {
  background: rgba(14, 92, 138, .2);
  color: var(--ws-accent-light);
  border-color: rgba(14, 92, 138, .3);
}

[data-theme="dark"][data-scheme="ocean"] {
  --teal-light: rgba(14, 92, 138, .12);
}

/* ===== COLOR SCHEME: BLUE ===== */
[data-scheme="blue"] {
  --teal: #2563eb;
  --teal-d: #1d4ed8;
  --teal-light: #eff6ff;
  --teal-mid: #3b82f6;
  --border: rgba(37, 99, 235, .12);
}

[data-scheme="blue"] #sb a.active {
  background: rgba(37, 99, 235, .2);
  color: #93c5fd;
  border-color: rgba(37, 99, 235, .3);
}

[data-theme="dark"][data-scheme="blue"] {
  --teal-light: rgba(37, 99, 235, .12);
}

/* ===== COLOR SCHEME: PURPLE ===== */
[data-scheme="purple"] {
  --teal: #7c3aed;
  --teal-d: #6d28d9;
  --teal-light: #f5f3ff;
  --teal-mid: #8b5cf6;
  --border: rgba(124, 58, 237, .12);
}

[data-scheme="purple"] #sb a.active {
  background: rgba(124, 58, 237, .2);
  color: #c4b5fd;
  border-color: rgba(124, 58, 237, .3);
}

[data-theme="dark"][data-scheme="purple"] {
  --teal-light: rgba(124, 58, 237, .12);
}

/* Stronger shadow tokens for dark mode depth */
[data-theme="dark"] {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.25);
  --shadow-xl: 0 12px 32px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.25);
  --muted: var(--ws-text-muted);
}

/* Trip docs — itinerary day cards */
[data-theme="dark"] .td-day {
  background: var(--ws-bg-elevated);
  border-color: rgba(var(--ws-white-rgb), .07);
}

[data-theme="dark"] .td-pill {
  background: var(--ws-bg-card);
  border-color: rgba(var(--ws-white-rgb), .1);
  color: var(--g3);
}

[data-theme="dark"] .td-day-title,
[data-theme="dark"] .td-item-time,
[data-theme="dark"] .td-item-desc,
[data-theme="dark"] .td-add-inp {
  background: var(--ws-bg-base);
  border-color: rgba(var(--ws-white-rgb), .1);
  color: var(--dark);
}

/* Fix #14: Toast dark mode overrides */
[data-theme="dark"] .toast {
  background: #1e293b;
  color: var(--ws-text-primary);
  border-color: rgba(var(--ws-white-rgb), .1);
}

/* ── Cards (additional) ── */
[data-theme="dark"] .card-hd h3 { color: var(--ws-cyan); }
[data-theme="dark"] .sc .val { color: var(--ws-text-primary); }
[data-theme="dark"] .sc { background: var(--ws-bg-elevated); border-color: rgba(var(--ws-white-rgb), .07); }

/* ── Forms (additional) ── */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(var(--ws-accent-rgb), .2);
}
[data-theme="dark"] input:disabled {
  background: #071520;
  color: #475569;
  opacity: 1;
  cursor: not-allowed;
}
[data-theme="dark"] .sec-lbl {
  background: rgba(var(--ws-accent-rgb), .08);
  color: #5eead4;
  border-left-color: var(--teal);
}
[data-theme="dark"] select option {
  background: var(--ws-bg-elevated);
  color: var(--ws-text-primary);
}

/* ── Buttons (additional) ── */
[data-theme="dark"] .ib.danger:hover {
  border-color: var(--red);
  color: var(--ws-danger-light);
  background: var(--red-bg);
}

/* ── Modals (additional) ── */
[data-theme="dark"] .mdl-hd h2 { color: var(--ws-cyan); }
[data-theme="dark"] .mdl-body { background: transparent; }

/* ── Delete confirm modal ── */
[data-theme="dark"] .mdl-hd[style*="#fff5f5"] {
  background: rgba(153,27,27,.15) !important;
}
[data-theme="dark"] #del-details {
  background: #0a1929 !important;
  border-color: rgba(var(--ws-white-rgb), .08) !important;
  color: var(--dark) !important;
}
[data-theme="dark"] [style*="background:#fef2f2"] {
  background: rgba(153,27,27,.15) !important;
  border-color: var(--red-border) !important;
}

/* ── RAB / Calculator ── */
[data-theme="dark"] .rab-footer {
  background: var(--glass-bg);
  border-color: var(--ws-border);
}
[data-theme="dark"] .rf-row {
  color: var(--ws-text-primary);
  border-bottom-color: rgba(var(--ws-white-rgb), .06);
}
[data-theme="dark"] .rf-row.total {
  border-top-color: rgba(var(--ws-accent-rgb), .25);
  color: var(--ws-gold);
}
[data-theme="dark"] .rf-row.total span:last-child { color: var(--ws-gold); }

/* ── Layanan cards & dropdowns ── */
[data-theme="dark"] .lv-row-card {
  background: var(--ws-bg-base);
  border-color: rgba(var(--ws-white-rgb), .08);
}
[data-theme="dark"] .lv-row-card.active {
  border-color: var(--teal);
  background: rgba(var(--ws-accent-rgb), .08);
}
[data-theme="dark"] .lv-dropdown-menu {
  background: var(--ws-bg-surface);
  border-color: rgba(var(--ws-white-rgb), .1);
}
[data-theme="dark"] .lv-search {
  background: var(--ws-bg-surface);
  border-bottom-color: rgba(var(--ws-white-rgb), .08);
}
[data-theme="dark"] .lv-opt { border-bottom-color: rgba(var(--ws-white-rgb), .04); }
[data-theme="dark"] .lv-opt:hover,
[data-theme="dark"] .lv-opt.selected { background: rgba(var(--ws-accent-rgb), .12); }
[data-theme="dark"] .lv-opt .lv-opt-name { color: var(--ws-text-primary); }
[data-theme="dark"] .lv-add-btn {
  background: rgba(var(--ws-accent-rgb), .05);
  border-top-color: rgba(var(--ws-white-rgb), .08);
}
[data-theme="dark"] .lv-add-btn:hover {
  background: rgba(var(--ws-accent-rgb), .12);
}

/* ── Summary box ── */
[data-theme="dark"] .sum-box {
  background: rgba(var(--ws-accent-rgb), .06);
  border-color: rgba(var(--ws-accent-rgb), .18);
}
[data-theme="dark"] .sum-row { color: var(--ws-text-muted); }
[data-theme="dark"] .sum-row.total {
  color: var(--ws-gold);
  border-top-color: rgba(var(--ws-accent-rgb), .2);
}
[data-theme="dark"] .sum-row.green { color: var(--ws-success-light); }
[data-theme="dark"] .sum-row.red   { color: var(--ws-danger-light); }

/* ── Dashboard ── */
[data-theme="dark"] .dash-collection-hd span { color: var(--ws-text-muted); }
[data-theme="dark"] .dash-progress-wrap { background: rgba(var(--ws-white-rgb), .08); }

/* ── Settings page ── */
[data-theme="dark"] .set-mode-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--ws-white);
}
[data-theme="dark"] .set-divider { border-top-color: rgba(var(--ws-white-rgb), .07); }

/* ── Finance tabs ── */
[data-theme="dark"] .fin-tab-bar { background: var(--ws-bg-base); }
[data-theme="dark"] .fin-tab-btn.active {
  background: var(--ws-bg-surface);
  color: var(--navy);
  box-shadow: 0 2px 8px rgba(var(--ws-black-rgb), .4);
}
[data-theme="dark"] .fin-tab-btn:hover:not(.active) {
  background: rgba(var(--ws-white-rgb), .05);
  color: var(--dark);
}

/* ── Todo items ── */
[data-theme="dark"] .todo-item {
  background: var(--ws-bg-card);
  border-color: var(--ws-border);
}
[data-theme="dark"] .todo-item.done { background: var(--ws-bg-surface); opacity: .65; }

/* ── Invoice modal ── */
[data-theme="dark"] #inv-modal-wrap { background: var(--card) !important; }
[data-theme="dark"] #inv-modal-hd {
  background: linear-gradient(135deg, var(--ws-bg-base), var(--ws-bg-surface)) !important;
  border-bottom-color: rgba(var(--ws-white-rgb), .08) !important;
}
[data-theme="dark"] #inv-mob-tabs { border-bottom-color: rgba(var(--ws-white-rgb), .08) !important; }
[data-theme="dark"] #inv-tab-preview {
  background: var(--ws-bg-base) !important;
  color: var(--ws-text-muted) !important;
}
[data-theme="dark"] #inv-settings-panel {
  background: var(--surface) !important;
  border-right-color: rgba(var(--ws-white-rgb), .08) !important;
}
[data-theme="dark"] #inv-type-box {
  background: var(--blue-bg) !important;
  border-color: rgba(var(--ws-info-rgb), .2) !important;
}
[data-theme="dark"] #inv-dp-settings { border-top-color: rgba(var(--ws-info-rgb), .2) !important; }
[data-theme="dark"] #dp-nom-btn {
  background: var(--ws-bg-base) !important;
  color: var(--dark) !important;
  border-color: rgba(var(--ws-white-rgb), .15) !important;
}
[data-theme="dark"] #dp-summary {
  background: rgba(var(--ws-info-rgb), .08) !important;
  border-color: rgba(var(--ws-info-rgb), .2) !important;
}
[data-theme="dark"] #inv-tip-box {
  background: rgba(var(--ws-gold-rgb), .06) !important;
  border-color: rgba(var(--ws-gold-rgb), .15) !important;
  color: var(--dark) !important;
}
[data-theme="dark"] #inv-preview-panel { background: var(--ws-bg-base) !important; }

/* ── Penawaran modal ── */
[data-theme="dark"] #pen-modal-wrap { background: var(--card) !important; }
[data-theme="dark"] #pen-modal-hd {
  background: linear-gradient(135deg, var(--ws-bg-base), var(--ws-bg-surface)) !important;
  border-bottom-color: rgba(var(--ws-white-rgb), .08) !important;
}

/* ── WhatsApp template buttons ── */
[data-theme="dark"] [id^="wa-tmpl-"][style*="#f0fdf4"] {
  background: rgba(37,211,102,.1) !important;
  border-color: rgba(37,211,102,.3) !important;
  color: var(--ws-success-light) !important;
}
[data-theme="dark"] #wa-waba-send-fields {
  background: rgba(var(--ws-accent-rgb), .1) !important;
  border-color: rgba(var(--ws-accent-rgb), .25) !important;
}

/* ── Portal send info boxes ── */
[data-theme="dark"] #pts-info-original {
  background: rgba(var(--ws-accent-rgb), .1) !important;
  border-color: rgba(var(--ws-accent-rgb), .2) !important;
  color: var(--ws-text-secondary) !important;
}
[data-theme="dark"] #pts-info-v2 {
  background: rgba(var(--ws-info-rgb), .1) !important;
  border-color: rgba(var(--ws-info-rgb), .2) !important;
  color: var(--ws-info) !important;
}

/* ===== LIGHT THEME GLASSMORPHIC ===== */
[data-theme="light"] {
  --glass-bg:     rgba(42, 171, 219, 0.04);
  --glass-border: rgba(42, 171, 219, 0.12);
  --glass-glow:   0 0 20px rgba(42, 171, 219, 0.06);
  --row-hover:    rgba(42, 171, 219, 0.05);
  --btn-glow:     0 4px 12px rgba(42, 171, 219, 0.28);
  --card:         rgba(255, 255, 255, 0.95);
  --input-bg:     #ffffff;
  --input-focus-border: rgba(42, 171, 219, 0.5);

  /* Semantic color tints — updated to new status colors */
  --red-bg:     rgba(232, 72, 58, 0.06);
  --red-border: rgba(232, 72, 58, 0.15);
  --green-bg:   rgba(45, 189, 133, 0.06);
  --yellow-bg:  rgba(245, 166, 35, 0.06);
  --blue-bg:    rgba(167, 139, 250, 0.06);
  --orange-bg:  rgba(249, 115, 22, 0.06);
}

/* Sidebar: match dark theme's glassmorphic effect */
[data-theme="light"] #sb {
  background: rgba(var(--ws-white-rgb), .45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 2px solid rgba(var(--ws-slate-rgb), .2);
  box-shadow: inset 0 1px 0 rgba(var(--ws-white-rgb), .8);
}

[data-theme="light"] #sb a:hover {
  background: rgba(var(--ws-slate-rgb), .06);
  color: var(--teal);
}

[data-theme="light"] #sb a.active {
  background: rgba(var(--ws-accent-rgb), .15);
  color: var(--teal);
  border-left-color: var(--teal);
}

[data-theme="light"] .sb-sec {
  color: rgba(var(--ws-dark-rgb), .7);
}

/* Sidebar text colors - darken for contrast on light transparent background */
[data-theme="light"] #sb {
  color: rgba(var(--ws-dark-rgb), .85);
}

[data-theme="light"] #sb a {
  color: rgba(var(--ws-dark-rgb), .75);
}

[data-theme="light"] .sb-brand {
  color: rgba(var(--ws-dark-rgb), .85);
}

[data-theme="light"] .sync-status {
  background: var(--ws-success-bg);
  color: #059669;
  border-color: rgba(var(--ws-success-rgb), .3);
}

/* Cards: neutral glass borders and backgrounds */
[data-theme="light"] .card {
  background: var(--card);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-md), var(--glass-glow);
}

[data-theme="light"] .card::before {
  background: radial-gradient(circle, rgba(var(--ws-slate-rgb), .06), transparent);
}

[data-theme="light"] .card-hd {
  border-bottom-color: rgba(var(--ws-slate-rgb), .1);
}

/* Stat cards: prominent neutral glass background */
[data-theme="light"] .sc {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

[data-theme="light"] .sc:hover {
  box-shadow: var(--shadow-md), 0 0 32px rgba(var(--ws-slate-rgb), .08);
  border-color: rgba(var(--ws-slate-rgb), .15);
  transform: translateY(-3px);
}

[data-theme="light"] .sc-ico {
  background: rgba(var(--ws-accent-rgb), .1);
}

/* Forms: neutral borders with teal focus */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--input-bg);
  border-color: rgba(var(--ws-slate-rgb), .12);
  color: var(--dark);
}

[data-theme="light"] input:hover,
[data-theme="light"] select:hover {
  border-color: rgba(var(--ws-slate-rgb), .2);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(var(--ws-accent-rgb), .1);
}

[data-theme="light"] input:disabled {
  background: #f8fafc;
  color: rgba(var(--ws-dark-rgb), .4);
  opacity: 1;
  cursor: not-allowed;
}

[data-theme="light"] .fg label {
  color: rgba(var(--ws-dark-rgb), .7);
}

[data-theme="light"] .mode-box {
  background: rgba(var(--ws-white-rgb), .9);
  border-color: rgba(var(--ws-slate-rgb), .15);
}

/* Tables: neutral glass with subtle row backgrounds */
[data-theme="light"] .tw {
  border-color: rgba(var(--ws-slate-rgb), .1);
}

[data-theme="light"] th {
  background: rgba(var(--ws-slate-rgb), .03);
  color: rgba(var(--ws-dark-rgb), .8);
  border-bottom-color: rgba(var(--ws-slate-rgb), .12);
}

[data-theme="light"] td {
  border-bottom-color: rgba(var(--ws-slate-rgb), .06);
  color: var(--dark);
}

[data-theme="light"] tbody tr:nth-child(even) td {
  background: rgba(var(--ws-slate-rgb), .02);
}

[data-theme="light"] tbody tr:hover td {
  background: var(--row-hover);
}

[data-theme="light"] .tr td {
  background: rgba(var(--ws-accent-rgb), .08) !important;
  border-top-color: rgba(var(--ws-accent-rgb), .2);
  color: var(--teal);
}

/* Buttons: neutral secondary with teal hover/focus */
[data-theme="light"] .btn.out {
  background: rgba(var(--ws-white-rgb), .9);
  border-color: rgba(var(--ws-slate-rgb), .15);
  color: var(--dark);
}

[data-theme="light"] .btn.out:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(var(--ws-accent-rgb), .05);
  box-shadow: 0 4px 12px rgba(var(--ws-accent-rgb), .2);
}

[data-theme="light"] .ib {
  background: rgba(var(--ws-white-rgb), .9);
  border-color: rgba(var(--ws-slate-rgb), .15);
  color: rgba(var(--ws-dark-rgb), .7);
}

[data-theme="light"] .ib:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(var(--ws-accent-rgb), .05);
}

[data-theme="light"] .ib.danger:hover {
  border-color: var(--red);
  color: var(--ws-danger-light);
  background: var(--red-bg);
}

[data-theme="light"] .pg-btn {
  background: rgba(var(--ws-white-rgb), .9);
  border-color: rgba(var(--ws-slate-rgb), .15);
  color: var(--dark);
}

[data-theme="light"] .pg-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(var(--ws-accent-rgb), .05);
}

/* Modals: semi-transparent with glassmorphism */
[data-theme="light"] .mdl {
  background: rgba(var(--ws-white-rgb), .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 20px 25px -5px rgba(var(--ws-black-rgb), .15);
}

[data-theme="light"] .mdl-hd {
  background: linear-gradient(135deg, rgba(var(--ws-white-rgb), .95), rgba(240, 245, 250, 0.95));
  border-bottom-color: rgba(var(--ws-slate-rgb), .08);
}

[data-theme="light"] .mdl-hd h2 {
  color: var(--dark);
}

[data-theme="light"] .mdl-hd button:hover {
  background: rgba(var(--ws-slate-rgb), .1);
  color: var(--dark);
}

[data-theme="light"] .mdl-body {
  background: rgba(248, 250, 252, 0.98);
}

[data-theme="light"] .mdl-ft {
  background: rgba(240, 245, 250, 0.95);
  border-top-color: rgba(var(--ws-slate-rgb), .08);
}

/* Settings page mode buttons */
[data-theme="light"] .set-mode-btn {
  background: rgba(var(--ws-white-rgb), .9);
  border-color: rgba(var(--ws-slate-rgb), .15);
  color: rgba(var(--ws-dark-rgb), .6);
}

[data-theme="light"] .set-mode-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--ws-white);
}

[data-theme="light"] .set-divider {
  border-top-color: rgba(var(--ws-slate-rgb), .08);
}

/* Summary boxes */
[data-theme="light"] .sum-box {
  background: var(--glass-bg);
  border-color: rgba(var(--ws-slate-rgb), .12);
}

[data-theme="light"] .sum-row {
  color: rgba(var(--ws-dark-rgb), .7);
}

[data-theme="light"] .sum-row.total {
  color: var(--teal);
  border-top-color: rgba(var(--ws-slate-rgb), .1);
}

/* Search bar */
[data-theme="light"] .srch input {
  background: var(--card);
  border-color: rgba(var(--ws-slate-rgb), .12);
}

/* Toast notifications */
[data-theme="light"] .toast {
  background: rgba(15, 23, 42, 0.95);
  color: var(--ws-text-primary);
  border-color: rgba(var(--ws-black-rgb), .15);
  box-shadow: 0 10px 15px -3px rgba(var(--ws-black-rgb), .2);
}

/* Sidebar logo styling */
[data-theme="dark"] #sb-logo {
  filter: brightness(0) invert(1);
}

[data-theme="light"] #sb-logo {
  filter: none;
}

/* Sidebar tagline styling */
[data-theme="light"] .sb-tagline {
  color: rgba(var(--ws-dark-rgb), .35);
}