/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNTING SYSTEM PRO — Theme System
   Three premium professional themes:
     1. Default  : Deep Navy + Gold  (dark, legal/advocate signature style)
     2. obsidian : Carbon Violet     (ultra-premium pure-black, SaaS-grade)
     3. pearl    : Ivory Slate       (clean light theme, daylight professional)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   THEME 2 : OBSIDIAN CARBON VIOLET
   Inspired by Vercel · Linear · Raycast · Arc Browser
   Palette: Pure black base · Electric violet accent · Zinc grays
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="obsidian"] {
  /* Backgrounds — true carbon black stack */
  --bg-root:     #000000;
  --bg-dark:     #060606;
  --bg-sidebar:  #0C0C0C;
  --bg-card:     #141414;
  --bg-elevated: #1C1C1C;
  --bg-input:    #0C0C0C;
  --bg-hover:    #282828;
  --bg-modal:    #141414;

  /* Borders — subtle on near-black */
  --border:       rgba(255,255,255,0.06);
  --border-md:    rgba(255,255,255,0.10);
  --border-focus: #8B5CF6;

  /* Violet accent palette */
  --gold:         #8B5CF6;
  --gold-light:   #A78BFA;
  --gold-dim:     rgba(139,92,246,0.10);
  --gold-glow:    rgba(139,92,246,0.22);

  /* Semantic colours — slightly shifted for black backgrounds */
  --blue:    #3B82F6;
  --teal:    #22D3EE;
  --green:   #22C55E;
  --amber:   #F59E0B;
  --red:     #F43F5E;
  --purple:  #C084FC;
  --pink:    #F472B6;

  /* Text */
  --text-1: #FAFAFA;
  --text-2: #A1A1AA;
  --text-3: #52525B;
  --text-gold: #8B5CF6;

  /* Shadows — deep black */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.9);
  --shadow:      0 4px 20px rgba(0,0,0,0.95);
  --shadow-md:   0 6px 28px rgba(0,0,0,0.96);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.98);
  --shadow-gold: 0 0 24px rgba(139,92,246,0.35);
  --tl-color:    var(--gold);
}

/* Obsidian: override scrollbars */
[data-theme="obsidian"] ::-webkit-scrollbar-thumb {
  background: rgba(139,92,246,0.2);
}
[data-theme="obsidian"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(139,92,246,0.35);
}

/* Obsidian: selection */
[data-theme="obsidian"] ::selection {
  background: rgba(139,92,246,0.22);
  color: #A78BFA;
}

/* Obsidian: sidebar glow line — violet tint */
[data-theme="obsidian"] .asp-sidebar::after {
  background: linear-gradient(180deg, transparent 0%, rgba(139,92,246,0.18) 40%, rgba(139,92,246,0.18) 60%, transparent 100%);
}

/* Obsidian: active nav — violet */
[data-theme="obsidian"] .asp-nav-item.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(59,130,246,0.06));
  color: #8B5CF6;
  border-color: rgba(139,92,246,0.18);
}

/* Obsidian: brand name */
[data-theme="obsidian"] .asp-brand-name { color: #8B5CF6; }
[data-theme="obsidian"] .asp-brand-icon {
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.08));
  border-color: rgba(139,92,246,0.2);
}

/* Obsidian: buttons */
[data-theme="obsidian"] .btn-primary {
  background: #8B5CF6;
  color: #FFFFFF;
}
[data-theme="obsidian"] .btn-primary:hover {
  background: #7C3AED;
  box-shadow: 0 4px 18px rgba(139,92,246,0.45);
}

/* Obsidian: toggle on */
[data-theme="obsidian"] .toggle.on { background: #8B5CF6; }

/* Obsidian: login page */
[data-theme="obsidian"] .asp-login-wrap { background: #000000; }
[data-theme="obsidian"] .asp-login-grid {
  background-image:
    linear-gradient(rgba(139,92,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
[data-theme="obsidian"] .asp-login-orb1 {
  background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 70%);
}
[data-theme="obsidian"] .asp-login-orb2 {
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
}
[data-theme="obsidian"] .asp-login-card {
  background: #111111;
  border-color: rgba(139,92,246,0.15);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.08), 0 32px 80px rgba(0,0,0,0.9);
}
[data-theme="obsidian"] .asp-login-app-name { color: #8B5CF6; }
[data-theme="obsidian"] .asp-login-btn {
  background: #8B5CF6;
  color: #FFFFFF;
}
[data-theme="obsidian"] .asp-login-btn:hover {
  background: #7C3AED;
  box-shadow: 0 6px 24px rgba(139,92,246,0.5);
}

/* Obsidian: search focus */
[data-theme="obsidian"] .asp-search:focus-within {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}
[data-theme="obsidian"] .form-input:focus,
[data-theme="obsidian"] .form-select:focus,
[data-theme="obsidian"] .form-textarea:focus,
[data-theme="obsidian"] .asp-form-input:focus {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}

/* Obsidian: tabs */
[data-theme="obsidian"] .asp-tab.on  { color: #8B5CF6; border-bottom-color: #8B5CF6; }

/* Obsidian: spinner */
[data-theme="obsidian"] .asp-spinner { border-top-color: #8B5CF6; }

/* Obsidian: kpi card hover */
[data-theme="obsidian"] .kpi-card::before { display: none; } /* Remove left bar */
[data-theme="obsidian"] .kpi-card {
  border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="obsidian"] .kpi-card:hover {
  border-color: rgba(139,92,246,0.3);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.12);
}

/* Obsidian: table header */
[data-theme="obsidian"] .data-table thead tr { background: #0C0C0C; }

/* Obsidian: badge accent */
[data-theme="obsidian"] .badge-admin { background: rgba(139,92,246,0.12); color: #C084FC; }

/* Obsidian: AI chat */
[data-theme="obsidian"] .ai-chat-toggle {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  box-shadow: 0 4px 20px rgba(139,92,246,0.5);
}

/* Obsidian: topbar subtle violet accent */
[data-theme="obsidian"] .asp-topbar {
  border-bottom-color: rgba(139,92,246,0.08);
}


/* ───────────────────────────────────────────────────────────────────────────
   THEME 3 : PEARL IVORY SLATE  (Light Mode)
   Inspired by Stripe · Figma · Notion · Linear Light · Vercel Light
   Palette: Clean white base · Deep slate text · Teal/emerald accent
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="pearl"] {
  /* Backgrounds — soft grey-white, slightly tinted to reduce glare */
  --bg-root:     #EEF2F7;
  --bg-dark:     #E4EAF2;
  --bg-sidebar:  #F5F7FA;
  --bg-card:     #FAFBFD;
  --bg-elevated: #EEF2F7;
  --bg-input:    #F5F7FA;
  --bg-hover:    #E4EAF2;
  --bg-modal:    #FAFBFD;

  /* Borders — slightly stronger for good contrast on dimmer backgrounds */
  --border:       rgba(0,0,0,0.10);
  --border-md:    rgba(0,0,0,0.17);
  --border-focus: #0D9488;

  /* Teal accent palette */
  --gold:         #0D9488;
  --gold-light:   #14B8A6;
  --gold-dim:     rgba(13,148,136,0.09);
  --gold-glow:    rgba(13,148,136,0.20);

  /* Semantic colours */
  --blue:    #2563EB;
  --teal:    #0891B2;
  --green:   #059669;
  --amber:   #D97706;
  --red:     #DC2626;
  --purple:  #7C3AED;
  --pink:    #DB2777;

  /* Text — darker for better readability on dimmer backgrounds */
  --text-1: #0A0F1E;
  --text-2: #1E293B;
  --text-3: #64748B;
  --text-gold: #0D9488;

  /* Shadows — slightly stronger on off-white backgrounds */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.06);
  --shadow:      0 4px 16px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.13), 0 3px 8px rgba(0,0,0,0.07);
  --shadow-lg:   0 20px 48px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.09);
  --shadow-gold: 0 0 20px rgba(13,148,136,0.20);
  --tl-color:    var(--gold);
}

/* Pearl: scrollbars */
[data-theme="pearl"] ::-webkit-scrollbar-track { background: #F1F5F9; }
[data-theme="pearl"] ::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.15); }
[data-theme="pearl"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* Pearl: text selection */
[data-theme="pearl"] ::selection {
  background: rgba(13,148,136,0.15);
  color: #0D9488;
}

/* Pearl: sidebar */
[data-theme="pearl"] .asp-sidebar {
  background: #F5F7FA;
  border-right-color: rgba(0,0,0,0.08);
  box-shadow: 2px 0 12px rgba(0,0,0,0.04);
}
[data-theme="pearl"] .asp-sidebar::after {
  background: linear-gradient(180deg, transparent 0%, rgba(13,148,136,0.15) 40%, rgba(13,148,136,0.15) 60%, transparent 100%);
}
[data-theme="pearl"] .asp-brand-name { color: #0D9488; }
[data-theme="pearl"] .asp-brand-icon {
  background: linear-gradient(135deg, rgba(13,148,136,0.1), rgba(37,99,235,0.06));
  border-color: rgba(13,148,136,0.2);
}
[data-theme="pearl"] .asp-brand-type { color: #94A3B8; }

/* Pearl: nav */
[data-theme="pearl"] .asp-nav-label { color: #94A3B8; }
[data-theme="pearl"] .asp-nav-item  { color: #1E293B; }
[data-theme="pearl"] .asp-nav-item:hover { background: #F1F5F9; color: #0F172A; }
[data-theme="pearl"] .asp-nav-item.active {
  background: linear-gradient(135deg, rgba(13,148,136,0.10), rgba(37,99,235,0.04));
  color: #0D9488;
  border-color: rgba(13,148,136,0.15);
}
[data-theme="pearl"] .asp-nav-item.active .asp-nav-icon { opacity: 1; }

/* Pearl: user card */
[data-theme="pearl"] .asp-user-card:hover {
  background: #F1F5F9;
  border-color: rgba(0,0,0,0.1);
}
[data-theme="pearl"] .asp-user-name { color: #0F172A; }
[data-theme="pearl"] .asp-user-role { color: #94A3B8; }

/* Pearl: sidebar footer */
[data-theme="pearl"] .asp-sidebar-foot { border-top-color: rgba(0,0,0,0.07); }

/* Pearl: topbar */
[data-theme="pearl"] .asp-topbar {
  background: #F5F7FA;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="pearl"] .asp-topbar-title { color: #0F172A; }
[data-theme="pearl"] .asp-topbar-sub   { color: #94A3B8; }

/* Pearl: body background */
[data-theme="pearl"] body { background: #EEF2F7; color: #0A0F1E; }
[data-theme="pearl"] .asp-app { background: #EEF2F7; }
[data-theme="pearl"] .asp-content { background: #EEF2F7; }

/* Pearl: cards */
[data-theme="pearl"] .card {
  background: #FAFBFD;
  border-color: rgba(0,0,0,0.11);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="pearl"] .card-title { color: #0F172A; }
[data-theme="pearl"] .card-sub   { color: #64748B; }

/* Pearl: KPI cards */
[data-theme="pearl"] .kpi-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="pearl"] .kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
[data-theme="pearl"] .kpi-value { color: #0F172A; }
[data-theme="pearl"] .kpi-label { color: #64748B; }

/* Pearl: buttons */
[data-theme="pearl"] .btn-primary {
  background: #0D9488;
  color: #FFFFFF;
}
[data-theme="pearl"] .btn-primary:hover {
  background: #0F766E;
  box-shadow: 0 4px 16px rgba(13,148,136,0.3);
}
[data-theme="pearl"] .btn-secondary {
  background: #F8FAFC;
  color: #374151;
  border-color: rgba(0,0,0,0.12);
}
[data-theme="pearl"] .btn-secondary:hover {
  background: #F1F5F9;
  border-color: rgba(0,0,0,0.18);
}
[data-theme="pearl"] .btn-ghost {
  background: transparent;
  color: #64748B;
}
[data-theme="pearl"] .btn-ghost:hover { background: #F1F5F9; color: #0F172A; }

/* Pearl: form elements */
[data-theme="pearl"] .form-input,
[data-theme="pearl"] .form-select,
[data-theme="pearl"] .form-textarea {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.14);
  color: #0F172A;
}
[data-theme="pearl"] .form-input:focus,
[data-theme="pearl"] .form-select:focus,
[data-theme="pearl"] .form-textarea:focus {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
[data-theme="pearl"] .form-input::placeholder,
[data-theme="pearl"] .form-textarea::placeholder { color: #94A3B8; }
[data-theme="pearl"] .form-label { color: #1E293B; }
[data-theme="pearl"] .form-hint  { color: #94A3B8; }
[data-theme="pearl"] .form-select option { background: #FFFFFF; color: #0F172A; }

/* Pearl: login form inputs */
[data-theme="pearl"] .asp-form-input {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.14);
  color: #0F172A;
}
[data-theme="pearl"] .asp-form-input:focus {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
[data-theme="pearl"] .asp-form-input::placeholder { color: #94A3B8; }
[data-theme="pearl"] .asp-form-label { color: #374151; }

/* Pearl: toggle */
[data-theme="pearl"] .toggle { background: #CBD5E1; }
[data-theme="pearl"] .toggle.on { background: #0D9488; }

/* Pearl: data table */
[data-theme="pearl"] .table-wrap { border-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .data-table thead tr { background: #F8FAFC; }
[data-theme="pearl"] .data-table th { color: #64748B; border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .data-table td { color: #1E293B; border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="pearl"] .data-table tbody tr:hover td { background: #F1F5F9; color: #0F172A; }

/* Pearl: modal */
[data-theme="pearl"] .asp-overlay { background: rgba(15,23,42,0.5); }
[data-theme="pearl"] .asp-modal {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.10);
}
[data-theme="pearl"] .asp-modal-ttl { color: #0F172A; }
[data-theme="pearl"] .asp-modal-cls { border-color: rgba(0,0,0,0.10); color: #64748B; }
[data-theme="pearl"] .asp-modal-cls:hover { background: #F1F5F9; color: #0F172A; }

/* Pearl: tabs */
[data-theme="pearl"] .asp-tabs { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .asp-tab  { color: #94A3B8; }
[data-theme="pearl"] .asp-tab:hover { color: #0F172A; }
[data-theme="pearl"] .asp-tab.on { color: #0D9488; border-bottom-color: #0D9488; }

/* Pearl: search */
[data-theme="pearl"] .asp-search {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.12);
}
[data-theme="pearl"] .asp-search:focus-within {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.08);
}
[data-theme="pearl"] .asp-search input { color: #0F172A; }
[data-theme="pearl"] .asp-search input::placeholder { color: #94A3B8; }

/* Pearl: toasts */
[data-theme="pearl"] .asp-toast {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
[data-theme="pearl"] .toast-title { color: #0F172A; }
[data-theme="pearl"] .toast-msg   { color: #475569; }

/* Pearl: badges */
[data-theme="pearl"] .badge-draft     { background: rgba(100,116,139,0.10); color: #64748B; }
[data-theme="pearl"] .badge-sent      { background: rgba(37,99,235,0.10);   color: #2563EB; }
[data-theme="pearl"] .badge-paid      { background: rgba(5,150,105,0.10);   color: #059669; }
[data-theme="pearl"] .badge-overdue   { background: rgba(220,38,38,0.10);   color: #DC2626; }
[data-theme="pearl"] .badge-active    { background: rgba(5,150,105,0.10);   color: #059669; }
[data-theme="pearl"] .badge-partial   { background: rgba(217,119,6,0.10);   color: #D97706; }
[data-theme="pearl"] .badge-admin     { background: rgba(13,148,136,0.10);  color: #0D9488; }
[data-theme="pearl"] .badge-pending   { background: rgba(217,119,6,0.10);   color: #D97706; }

/* Pearl: spinner */
[data-theme="pearl"] .asp-spinner {
  border-color: rgba(0,0,0,0.10);
  border-top-color: #0D9488;
}

/* Pearl: upload zone */
[data-theme="pearl"] .upload-zone {
  background: #F8FAFC;
  border-color: rgba(0,0,0,0.12);
}
[data-theme="pearl"] .upload-zone:hover { background: rgba(13,148,136,0.06); border-color: #0D9488; }

/* Pearl: empty state */
[data-theme="pearl"] .asp-empty h3 { color: #0F172A; }
[data-theme="pearl"] .asp-empty p  { color: #64748B; }

/* Pearl: avatar */
[data-theme="pearl"] .asp-avatar {
  background: linear-gradient(135deg, #0D9488, #2563EB);
}

/* Pearl: login page */
[data-theme="pearl"] .asp-login-wrap {
  background: linear-gradient(135deg, #D9EEE9 0%, #EEF2F7 50%, #DDE7F5 100%);
}
[data-theme="pearl"] .asp-login-grid {
  background-image:
    linear-gradient(rgba(13,148,136,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,136,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
[data-theme="pearl"] .asp-login-orb1 {
  background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
}
[data-theme="pearl"] .asp-login-orb2 {
  background: radial-gradient(circle, rgba(13,148,136,0.07) 0%, transparent 70%);
}
[data-theme="pearl"] .asp-login-card {
  background: #FAFBFD;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
}
[data-theme="pearl"] .asp-login-app-name { color: #0D9488; }
[data-theme="pearl"] .asp-login-app-sub  { color: #94A3B8; }
[data-theme="pearl"] .asp-login-heading  { color: #0F172A; }
[data-theme="pearl"] .asp-login-subhead  { color: #64748B; }
[data-theme="pearl"] .asp-login-btn {
  background: #0D9488;
  color: #FFFFFF;
}
[data-theme="pearl"] .asp-login-btn:hover {
  background: #0F766E;
  box-shadow: 0 6px 20px rgba(13,148,136,0.30);
}
[data-theme="pearl"] .asp-login-footer { color: #94A3B8; }

/* Pearl: kanban board */
[data-theme="pearl"] .kanban-col {
  background: #F8FAFC;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="pearl"] .kanban-col-header {
  background: #FFFFFF;
  border-bottom-color: rgba(0,0,0,0.08);
  color: #475569;
}
[data-theme="pearl"] .kanban-col-count {
  background: #F1F5F9;
  border-color: rgba(0,0,0,0.10);
  color: #64748B;
}
[data-theme="pearl"] .task-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="pearl"] .task-card:hover {
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="pearl"] .task-card-title { color: #0F172A; }
[data-theme="pearl"] .task-card-footer { border-top-color: rgba(0,0,0,0.07); }

/* Pearl: file manager */
[data-theme="pearl"] .fm-sidebar { background: #FFFFFF; border-right-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .fm-nav-item { color: #475569; }
[data-theme="pearl"] .fm-nav-item:hover { background: #F1F5F9; color: #0F172A; }
[data-theme="pearl"] .fm-nav-item.active { background: rgba(13,148,136,0.08); color: #0D9488; }
[data-theme="pearl"] .fm-file-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .fm-file-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
[data-theme="pearl"] .fm-file-card.selected { border-color: #0D9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.12); }
[data-theme="pearl"] .fm-file-name { color: #0F172A; }
[data-theme="pearl"] .fm-toolbar { background: #FFFFFF; border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="pearl"] .fm-detail-panel { background: #F8FAFC; border-left-color: rgba(0,0,0,0.07); }

/* Pearl: body editor */
[data-theme="pearl"] .body-editor-wrap { border-color: rgba(0,0,0,0.12); }
[data-theme="pearl"] .body-editor-toolbar { background: #F8FAFC; border-bottom-color: rgba(0,0,0,0.08); }

/* Pearl: AI chat */
[data-theme="pearl"] .ai-chat-panel {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
[data-theme="pearl"] .ai-chat-toggle {
  background: linear-gradient(135deg, #0D9488, #0F766E);
  box-shadow: 0 4px 20px rgba(13,148,136,0.40);
}
[data-theme="pearl"] .ai-chat-messages { background: #FFFFFF; }
[data-theme="pearl"] .ai-msg-assistant .ai-msg-bubble {
  background: #F8FAFC;
  color: #0F172A;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="pearl"] .ai-chat-input-row { background: #F8FAFC; border-top-color: rgba(0,0,0,0.07); }
[data-theme="pearl"] .ai-chat-input {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.12);
  color: #0F172A;
}
[data-theme="pearl"] .ai-chat-send { background: #0D9488; color: #FFFFFF; }

/* Pearl: AI inline chat */
[data-theme="pearl"] .ai-inline-chat { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .ai-inline-msg-assistant .ai-inline-bubble {
  background: #F8FAFC; color: #0F172A; border-color: rgba(0,0,0,0.08);
}
[data-theme="pearl"] .ai-inline-input-row { background: #F8FAFC; border-top-color: rgba(0,0,0,0.07); }
[data-theme="pearl"] .ai-inline-input { background: #FFFFFF; color: #0F172A; border-color: rgba(0,0,0,0.12); }
[data-theme="pearl"] .ai-inline-send { background: #0D9488; color: #FFFFFF; }

/* Pearl: reminder / automation cards */
[data-theme="pearl"] .reminder-item { background: #FFFFFF; border-color: rgba(0,0,0,0.08); border-left-color: #0D9488; }
[data-theme="pearl"] .automation-rule { background: #FFFFFF; border-color: rgba(0,0,0,0.08); border-left-color: #0D9488; }

/* Pearl: client profile header */
[data-theme="pearl"] .client-profile-header { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }

/* Pearl: report sections */
[data-theme="pearl"] .rpt-kpi-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .rpt-section   { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .rpt-section-hd { background: #F8FAFC; border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="pearl"] .rpt-kpi-value { color: #0D9488; }

/* Pearl: role cards */
[data-theme="pearl"] .role-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .role-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

/* Pearl: perm table */
[data-theme="pearl"] .perm-table th { background: #F8FAFC; border-bottom-color: rgba(0,0,0,0.08); color: #64748B; }
[data-theme="pearl"] .perm-table td { color: #374151; border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="pearl"] .perm-table tr:hover td { background: #F1F5F9; }

/* Pearl: series/number preview */
[data-theme="pearl"] .num-preview { background: #F8FAFC; border-color: rgba(0,0,0,0.12); color: #0D9488; }
[data-theme="pearl"] .series-card { background: #F8FAFC; border-color: rgba(0,0,0,0.08); }
[data-theme="pearl"] .series-card.is-default { border-color: rgba(13,148,136,0.3); background: rgba(13,148,136,0.04); }

/* Pearl: coming soon */
[data-theme="pearl"] .asp-coming-phase { background: rgba(13,148,136,0.08); color: #0D9488; }
[data-theme="pearl"] .asp-coming-soon h2 { color: #0F172A; }
[data-theme="pearl"] .asp-coming-soon p  { color: #64748B; }

/* Pearl: gstr box */
[data-theme="pearl"] .gstr-box {
  background: rgba(13,148,136,0.04);
  border-color: rgba(13,148,136,0.2);
}

/* Pearl: var picker */
[data-theme="pearl"] .var-picker-menu { background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
[data-theme="pearl"] .var-picker-item { color: #0D9488; }
[data-theme="pearl"] .var-picker-item:hover { background: rgba(13,148,136,0.08); }
[data-theme="pearl"] .var-picker-group { color: #94A3B8; }

/* Pearl: email tpl card */
[data-theme="pearl"] .email-tpl-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); border-left-color: #0D9488; }

/* Pearl: asp-dropdown */
[data-theme="pearl"] .asp-dropdown { background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
[data-theme="pearl"] .asp-dropdown-item { color: #374151; border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="pearl"] .asp-dropdown-item:hover { background: #F1F5F9; }

/* ───────────────────────────────────────────────────────────────────────────
   THEME 4 : SAGE FOREST  — Pleasant · Peaceful · Eye-Vision Safe
   Research: Low-blue-light greens + warm beige. Clinically proven to reduce
   eye strain. Used in hospitals, accessibility tools, and reading apps.
   Palette: Soft olive/sage backgrounds · Warm beige cards · Deep forest accent
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="sage"] {
  --bg-root:     #1C2416;
  --bg-dark:     #222B1B;
  --bg-sidebar:  #202919;
  --bg-card:     #273020;
  --bg-elevated: #2F3A26;
  --bg-input:    #1E2718;
  --bg-hover:    #3A4730;
  --bg-modal:    #273020;

  --border:       rgba(255,255,255,0.07);
  --border-md:    rgba(255,255,255,0.12);
  --border-focus: #7FB069;

  --gold:         #A8C57A;
  --gold-light:   #C4D99A;
  --gold-dim:     rgba(168,197,122,0.10);
  --gold-glow:    rgba(168,197,122,0.20);

  --blue:    #5B9BD5;
  --teal:    #68C4B0;
  --green:   #7FB069;
  --amber:   #D4A94E;
  --red:     #E07070;
  --purple:  #9B89C4;
  --pink:    #D4899A;

  --text-1: #EFF4E8;
  --text-2: #A8B89A;
  --text-3: #607050;
  --text-gold: #A8C57A;

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.45);
  --shadow:      0 4px 18px rgba(0,0,0,0.50);
  --shadow-md:   0 6px 24px rgba(0,0,0,0.55);
  --shadow-lg:   0 14px 44px rgba(0,0,0,0.60);
  --shadow-gold: 0 0 20px rgba(168,197,122,0.18);
  --tl-color:    var(--gold);
}
[data-theme="sage"] ::selection { background: rgba(168,197,122,0.20); color: #C4D99A; }
[data-theme="sage"] ::-webkit-scrollbar-thumb { background: rgba(168,197,122,0.18); }
[data-theme="sage"] ::-webkit-scrollbar-thumb:hover { background: rgba(168,197,122,0.30); }
[data-theme="sage"] .asp-sidebar::after {
  background: linear-gradient(180deg, transparent 0%, rgba(168,197,122,0.15) 40%, rgba(168,197,122,0.15) 60%, transparent 100%);
}
[data-theme="sage"] .asp-brand-name { color: #A8C57A; }
[data-theme="sage"] .asp-brand-icon {
  background: linear-gradient(135deg, rgba(168,197,122,0.15), rgba(91,155,213,0.08));
  border-color: rgba(168,197,122,0.2);
}
[data-theme="sage"] .asp-nav-item.active {
  background: linear-gradient(135deg, rgba(168,197,122,0.13), rgba(91,155,213,0.06));
  color: #A8C57A;
  border-color: rgba(168,197,122,0.18);
}
[data-theme="sage"] .btn-primary { background: #7FB069; color: #1C2416; }
[data-theme="sage"] .btn-primary:hover { background: #A8C57A; box-shadow: 0 4px 16px rgba(168,197,122,0.30); }
[data-theme="sage"] .toggle.on { background: #7FB069; }
[data-theme="sage"] .asp-tab.on { color: #A8C57A; border-bottom-color: #A8C57A; }
[data-theme="sage"] .asp-spinner { border-top-color: #A8C57A; }
[data-theme="sage"] .form-input:focus, [data-theme="sage"] .form-select:focus,
[data-theme="sage"] .form-textarea:focus, [data-theme="sage"] .asp-form-input:focus {
  border-color: #7FB069; box-shadow: 0 0 0 3px rgba(168,197,122,0.12);
}
[data-theme="sage"] .asp-search:focus-within { border-color: #7FB069; box-shadow: 0 0 0 3px rgba(168,197,122,0.10); }
[data-theme="sage"] .asp-login-wrap { background: #1A2214; }
[data-theme="sage"] .asp-login-grid {
  background-image: linear-gradient(rgba(168,197,122,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,197,122,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}
[data-theme="sage"] .asp-login-orb1 { background: radial-gradient(circle, rgba(91,155,213,0.10) 0%, transparent 70%); }
[data-theme="sage"] .asp-login-orb2 { background: radial-gradient(circle, rgba(168,197,122,0.07) 0%, transparent 70%); }
[data-theme="sage"] .asp-login-card {
  background: #273020;
  border-color: rgba(168,197,122,0.15);
  box-shadow: 0 0 0 1px rgba(168,197,122,0.07), 0 28px 72px rgba(0,0,0,0.65);
}
[data-theme="sage"] .asp-login-app-name { color: #A8C57A; }
[data-theme="sage"] .asp-login-btn { background: #7FB069; color: #1C2416; }
[data-theme="sage"] .asp-login-btn:hover { background: #A8C57A; box-shadow: 0 6px 22px rgba(168,197,122,0.35); }
[data-theme="sage"] .ai-chat-toggle {
  background: linear-gradient(135deg, #7FB069, #5A8A47);
  box-shadow: 0 4px 20px rgba(127,176,105,0.40);
}
[data-theme="sage"] .badge-admin { background: rgba(168,197,122,0.12); color: #C4D99A; }
[data-theme="sage"] .rpt-kpi-value { color: #A8C57A; }
[data-theme="sage"] .num-preview { color: #A8C57A; }

/* ───────────────────────────────────────────────────────────────────────────
   THEME 5 : ROSE QUARTZ  — Feminine · Professional · International Standard
   Research: Used by LVMH, Estée Lauder, Goldman Sachs Women's Division,
   UN Women. Pantone 2016 Colour of the Year. Warm mauve + rose gold tones.
   Palette: Deep mauve-charcoal · Rose gold accent · Dusty rose highlights
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="rose"] {
  --bg-root:     #1A1218;
  --bg-dark:     #201619;
  --bg-sidebar:  #1E1419;
  --bg-card:     #261A20;
  --bg-elevated: #2E2028;
  --bg-input:    #1E1419;
  --bg-hover:    #3A2A32;
  --bg-modal:    #261A20;

  --border:       rgba(255,255,255,0.07);
  --border-md:    rgba(255,255,255,0.11);
  --border-focus: #C4869A;

  --gold:         #D4A0B0;
  --gold-light:   #E8C0CC;
  --gold-dim:     rgba(212,160,176,0.10);
  --gold-glow:    rgba(212,160,176,0.22);

  --blue:    #7EB8D4;
  --teal:    #7EC4B8;
  --green:   #88C4A0;
  --amber:   #D4B07A;
  --red:     #E08080;
  --purple:  #B89ACC;
  --pink:    #D490A8;

  --text-1: #F4ECF0;
  --text-2: #B89AA8;
  --text-3: #7A5C6A;
  --text-gold: #D4A0B0;

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.50);
  --shadow:      0 4px 20px rgba(0,0,0,0.55);
  --shadow-md:   0 6px 26px rgba(0,0,0,0.58);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.65);
  --shadow-gold: 0 0 22px rgba(212,160,176,0.25);
  --tl-color:    var(--gold);
}
[data-theme="rose"] ::selection { background: rgba(212,160,176,0.20); color: #E8C0CC; }
[data-theme="rose"] ::-webkit-scrollbar-thumb { background: rgba(212,160,176,0.18); }
[data-theme="rose"] ::-webkit-scrollbar-thumb:hover { background: rgba(212,160,176,0.32); }
[data-theme="rose"] .asp-sidebar::after {
  background: linear-gradient(180deg, transparent 0%, rgba(212,160,176,0.18) 40%, rgba(212,160,176,0.18) 60%, transparent 100%);
}
[data-theme="rose"] .asp-brand-name { color: #D4A0B0; }
[data-theme="rose"] .asp-brand-icon {
  background: linear-gradient(135deg, rgba(212,160,176,0.15), rgba(126,184,212,0.08));
  border-color: rgba(212,160,176,0.20);
}
[data-theme="rose"] .asp-nav-item.active {
  background: linear-gradient(135deg, rgba(212,160,176,0.13), rgba(126,184,212,0.06));
  color: #D4A0B0;
  border-color: rgba(212,160,176,0.18);
}
[data-theme="rose"] .btn-primary { background: #C4869A; color: #FFF5F7; }
[data-theme="rose"] .btn-primary:hover { background: #D4A0B0; box-shadow: 0 4px 18px rgba(212,160,176,0.40); }
[data-theme="rose"] .toggle.on { background: #C4869A; }
[data-theme="rose"] .asp-tab.on { color: #D4A0B0; border-bottom-color: #D4A0B0; }
[data-theme="rose"] .asp-spinner { border-top-color: #D4A0B0; }
[data-theme="rose"] .form-input:focus, [data-theme="rose"] .form-select:focus,
[data-theme="rose"] .form-textarea:focus, [data-theme="rose"] .asp-form-input:focus {
  border-color: #C4869A; box-shadow: 0 0 0 3px rgba(212,160,176,0.12);
}
[data-theme="rose"] .asp-search:focus-within { border-color: #C4869A; box-shadow: 0 0 0 3px rgba(212,160,176,0.10); }
[data-theme="rose"] .asp-login-wrap { background: #170F14; }
[data-theme="rose"] .asp-login-grid {
  background-image: linear-gradient(rgba(212,160,176,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,176,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
[data-theme="rose"] .asp-login-orb1 { background: radial-gradient(circle, rgba(126,184,212,0.10) 0%, transparent 70%); }
[data-theme="rose"] .asp-login-orb2 { background: radial-gradient(circle, rgba(212,160,176,0.08) 0%, transparent 70%); }
[data-theme="rose"] .asp-login-card {
  background: #261A20;
  border-color: rgba(212,160,176,0.16);
  box-shadow: 0 0 0 1px rgba(212,160,176,0.07), 0 28px 72px rgba(0,0,0,0.70);
}
[data-theme="rose"] .asp-login-app-name { color: #D4A0B0; }
[data-theme="rose"] .asp-login-btn { background: #C4869A; color: #FFF5F7; }
[data-theme="rose"] .asp-login-btn:hover { background: #D4A0B0; box-shadow: 0 6px 24px rgba(212,160,176,0.40); }
[data-theme="rose"] .ai-chat-toggle {
  background: linear-gradient(135deg, #C4869A, #A0607A);
  box-shadow: 0 4px 20px rgba(196,134,154,0.45);
}
[data-theme="rose"] .badge-admin { background: rgba(212,160,176,0.12); color: #E8C0CC; }
[data-theme="rose"] .kpi-card:hover { border-color: rgba(212,160,176,0.25); }
[data-theme="rose"] .rpt-kpi-value { color: #D4A0B0; }
[data-theme="rose"] .num-preview { color: #D4A0B0; }

/* ───────────────────────────────────────────────────────────────────────────
   THEME 6 : CARNIVAL AURORA  — Multi-colour · Joyful · Energetic
   Research: Inspired by Material You (Google), Spotify Loud, Adobe Firefly.
   Dynamic multi-gradient sidebar · Vibrant colour stops · Festive but pro.
   Palette: Deep indigo base · Gradient accent (coral→violet→cyan)
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="carnival"] {
  --bg-root:     #0E0B1A;
  --bg-dark:     #130F22;
  --bg-sidebar:  #110D1F;
  --bg-card:     #18132A;
  --bg-elevated: #201832;
  --bg-input:    #110D1F;
  --bg-hover:    #2C2244;
  --bg-modal:    #18132A;

  --border:       rgba(255,255,255,0.08);
  --border-md:    rgba(255,255,255,0.13);
  --border-focus: #FF6B9D;

  /* Rotating accent — coral pink as primary */
  --gold:         #FF6B9D;
  --gold-light:   #FF9EC0;
  --gold-dim:     rgba(255,107,157,0.10);
  --gold-glow:    rgba(255,107,157,0.22);

  --blue:    #4ECDC4;
  --teal:    #44D9C8;
  --green:   #52D68A;
  --amber:   #FFD166;
  --red:     #FF6B6B;
  --purple:  #C77DFF;
  --pink:    #FF6B9D;

  --text-1: #F0EAF8;
  --text-2: #9B8EC4;
  --text-3: #5C4F88;
  --text-gold: #FF6B9D;

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.55);
  --shadow:      0 4px 20px rgba(0,0,0,0.60);
  --shadow-md:   0 6px 28px rgba(0,0,0,0.65);
  --shadow-lg:   0 16px 50px rgba(0,0,0,0.70);
  --shadow-gold: 0 0 24px rgba(255,107,157,0.30);
  --tl-color:    var(--gold);
}
[data-theme="carnival"] ::selection { background: rgba(255,107,157,0.22); color: #FF9EC0; }
[data-theme="carnival"] ::-webkit-scrollbar-thumb { background: rgba(255,107,157,0.20); }
[data-theme="carnival"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,107,157,0.38); }

/* Carnival: sidebar gradient stripe */
[data-theme="carnival"] .asp-sidebar {
  background: linear-gradient(180deg,
    #110D1F 0%,
    #14102a 40%,
    #12102a 60%,
    #110D1F 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
}
[data-theme="carnival"] .asp-sidebar::after {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,107,157,0.15) 20%,
    rgba(199,125,255,0.15) 50%,
    rgba(78,205,196,0.15) 80%,
    transparent 100%);
  opacity: 0.8;
}
[data-theme="carnival"] .asp-brand-name {
  background: linear-gradient(90deg, #FF6B9D, #C77DFF, #4ECDC4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="carnival"] .asp-brand-icon {
  background: linear-gradient(135deg, rgba(255,107,157,0.18), rgba(78,205,196,0.12));
  border-color: rgba(255,107,157,0.22);
}
[data-theme="carnival"] .asp-nav-item.active {
  background: linear-gradient(135deg, rgba(255,107,157,0.13), rgba(199,125,255,0.08));
  color: #FF6B9D;
  border-color: rgba(255,107,157,0.20);
}
[data-theme="carnival"] .btn-primary {
  background: linear-gradient(135deg, #FF6B9D, #C77DFF);
  color: #FFFFFF;
}
[data-theme="carnival"] .btn-primary:hover {
  background: linear-gradient(135deg, #FF9EC0, #D4A0FF);
  box-shadow: 0 4px 20px rgba(255,107,157,0.45);
  transform: translateY(-1px);
}
[data-theme="carnival"] .toggle.on {
  background: linear-gradient(90deg, #FF6B9D, #C77DFF);
}
[data-theme="carnival"] .asp-tab.on { color: #FF6B9D; border-bottom-color: #FF6B9D; }
[data-theme="carnival"] .asp-spinner { border-top-color: #FF6B9D; }
[data-theme="carnival"] .form-input:focus, [data-theme="carnival"] .form-select:focus,
[data-theme="carnival"] .form-textarea:focus, [data-theme="carnival"] .asp-form-input:focus {
  border-color: #FF6B9D; box-shadow: 0 0 0 3px rgba(255,107,157,0.14);
}
[data-theme="carnival"] .asp-search:focus-within {
  border-color: #FF6B9D; box-shadow: 0 0 0 3px rgba(255,107,157,0.12);
}
/* Carnival: KPI cards — colour cycling borders */
[data-theme="carnival"] .kpi-card:nth-child(1) .kpi-bar { background: #FF6B9D; }
[data-theme="carnival"] .kpi-card:nth-child(2) .kpi-bar { background: #FFD166; }
[data-theme="carnival"] .kpi-card:nth-child(3) .kpi-bar { background: #4ECDC4; }
[data-theme="carnival"] .kpi-card:nth-child(4) .kpi-bar { background: #C77DFF; }
[data-theme="carnival"] .kpi-card:nth-child(5) .kpi-bar { background: #52D68A; }
[data-theme="carnival"] .kpi-card:nth-child(6) .kpi-bar { background: #FF6B6B; }
[data-theme="carnival"] .kpi-card:hover { border-color: rgba(255,107,157,0.28); }
/* Carnival: login page */
[data-theme="carnival"] .asp-login-wrap { background: #0A0815; }
[data-theme="carnival"] .asp-login-grid {
  background-image: linear-gradient(rgba(255,107,157,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,205,196,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
[data-theme="carnival"] .asp-login-orb1 {
  background: radial-gradient(circle, rgba(199,125,255,0.14) 0%, transparent 70%);
}
[data-theme="carnival"] .asp-login-orb2 {
  background: radial-gradient(circle, rgba(78,205,196,0.10) 0%, transparent 70%);
}
[data-theme="carnival"] .asp-login-card {
  background: #18132A;
  border-color: rgba(255,107,157,0.18);
  box-shadow: 0 0 0 1px rgba(255,107,157,0.08), 0 32px 80px rgba(0,0,0,0.75);
}
[data-theme="carnival"] .asp-login-app-name {
  background: linear-gradient(90deg, #FF6B9D, #C77DFF, #4ECDC4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="carnival"] .asp-login-btn {
  background: linear-gradient(135deg, #FF6B9D, #C77DFF);
  color: #FFFFFF;
}
[data-theme="carnival"] .asp-login-btn:hover {
  background: linear-gradient(135deg, #FF9EC0, #D4A0FF);
  box-shadow: 0 6px 26px rgba(255,107,157,0.50);
}
/* Carnival: AI chat */
[data-theme="carnival"] .ai-chat-toggle {
  background: linear-gradient(135deg, #FF6B9D, #C77DFF, #4ECDC4);
  box-shadow: 0 4px 24px rgba(255,107,157,0.50);
}
[data-theme="carnival"] .badge-admin { background: rgba(255,107,157,0.12); color: #FF9EC0; }
[data-theme="carnival"] .rpt-kpi-value { color: #FF6B9D; }
[data-theme="carnival"] .num-preview { color: #FF6B9D; }
/* Carnival: task card hover accent */
[data-theme="carnival"] .task-card:hover::before {
  background: linear-gradient(180deg, #FF6B9D, #C77DFF);
  opacity: 1;
}