/* ══════════════════════════════════════════════════════════════════════
   Adder IdP — Design Token System & Multi-Palette Theming
   ──────────────────────────────────────────────────────────────────────
   Dark default tokens are defined in base.html :root.
   This file:
     1. Bootstrap root var alignment for dark default
     2. Per-palette token overrides (dark variants: midnight, ocean,
        aurora, dusk, sunset; light variant: light)
     3. Light-base component overrides via html[data-base="light"]
     4. Page-specific fixes for hardcoded colors
   ══════════════════════════════════════════════════════════════════════ */

/* ── Bootstrap root alignment — dark default ─────────────────────────── */
:root {
  --bs-body-bg:           #07090f;
  --bs-body-color:        #e2e8f0;
  --bs-card-bg:           #0d0f1a;
  --bs-card-color:        #e2e8f0;
  --bs-card-border-color: rgba(255,255,255,.07);
  --bs-border-color:      rgba(255,255,255,.07);
  --bs-tertiary-bg:       rgba(255,255,255,.04);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK PALETTE VARIANTS — only bg/surface/accent differ from :root
   ═══════════════════════════════════════════════════════════════════════ */

/* Midnight — deep navy + blue */
:root[data-theme="midnight"] {
  --bg:      #010a1e; --surface:#071525;
  --accent:  #3b82f6; --accent-l:#60a5fa; --accent-g:rgba(59,130,246,.3);
  --bs-body-bg:#010a1e; --bs-card-bg:#071525;
  --bs-card-border-color:rgba(255,255,255,.07); --bs-border-color:rgba(255,255,255,.07);
}
/* Ocean — dark teal + cyan */
:root[data-theme="ocean"] {
  --bg:      #031318; --surface:#071c22;
  --accent:  #06b6d4; --accent-l:#22d3ee; --accent-g:rgba(6,182,212,.3);
  --bs-body-bg:#031318; --bs-card-bg:#071c22;
  --bs-card-border-color:rgba(255,255,255,.07); --bs-border-color:rgba(255,255,255,.07);
}
/* Aurora — dark forest + emerald */
:root[data-theme="aurora"] {
  --bg:      #031208; --surface:#071a0e;
  --accent:  #10b981; --accent-l:#34d399; --accent-g:rgba(16,185,129,.3);
  --bs-body-bg:#031208; --bs-card-bg:#071a0e;
  --bs-card-border-color:rgba(255,255,255,.07); --bs-border-color:rgba(255,255,255,.07);
}
/* Dusk — warm dark + rose */
:root[data-theme="dusk"] {
  --bg:      #130810; --surface:#1c0e17;
  --accent:  #ec4899; --accent-l:#f472b6; --accent-g:rgba(236,72,153,.3);
  --bs-body-bg:#130810; --bs-card-bg:#1c0e17;
  --bs-card-border-color:rgba(255,255,255,.07); --bs-border-color:rgba(255,255,255,.07);
}
/* Sunset — warm dark + amber */
:root[data-theme="sunset"] {
  --bg:      #130a03; --surface:#1a1006;
  --accent:  #f59e0b; --accent-l:#fbbf24; --accent-g:rgba(245,158,11,.3);
  --bs-body-bg:#130a03; --bs-card-bg:#1a1006;
  --bs-card-border-color:rgba(255,255,255,.07); --bs-border-color:rgba(255,255,255,.07);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT PALETTE — complete token override
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {

  /* Layer backgrounds */
  --bg:             #f1f5f9;
  --surface:        #ffffff;
  --surface-2:      rgba(0,0,0,.03);
  --surface-hover:  rgba(0,0,0,.05);
  --surface-active: rgba(0,0,0,.04);
  /* Borders */
  --border:         rgba(0,0,0,.09);
  --border-h:       rgba(0,0,0,.18);
  /* Text */
  --text:           #0f172a;
  --text-sub:       rgba(0,0,0,.6);
  --text-muted:     rgba(0,0,0,.38);
  /* Accent */
  --accent:         #4f46e5;
  --accent-l:       #6366f1;
  --accent-g:       rgba(99,102,241,.18);
  /* Semantic */
  --success:        #059669;
  --warning:        #d97706;
  --danger:         #dc2626;
  --info:           #0891b2;
  /* Misc */
  --autofill-bg:    #f0f0ff;
  --link-hover:     #4338ca;
  /* Bootstrap overrides */
  --bs-body-bg:           #f1f5f9;
  --bs-body-color:        #0f172a;
  --bs-card-bg:           #ffffff;
  --bs-card-color:        #0f172a;
  --bs-card-border-color: rgba(0,0,0,.09);
  --bs-border-color:      rgba(0,0,0,.09);
  --bs-tertiary-bg:       rgba(0,0,0,.03);
}

/* ── Light theme: base & layout ──────────────────────────────────────── */
html[data-base="light"] body         { background:var(--bg) !important; color:var(--text) !important; }
html[data-base="light"] body::before { display:none; }
html[data-base="light"] a:hover      { color:var(--link-hover); }
html[data-base="light"] code         { color:var(--accent); background:rgba(99,102,241,.09); }

/* ── Light theme: sidebar ────────────────────────────────────────────── */
html[data-base="light"] .a-sidebar::-webkit-scrollbar-thumb         { background:rgba(0,0,0,.12); }
html[data-base="light"] .a-nav-link:hover                           { background:var(--surface-hover); color:var(--text); }
html[data-base="light"] .a-nav-link.active                          { background:rgba(99,102,241,.1); color:var(--accent); }
html[data-base="light"] .a-nav-link.active i                        { color:var(--accent); }
html[data-base="light"] .a-nav-link.nav-danger                      { color:rgba(220,38,38,.75); }
html[data-base="light"] .a-nav-link.nav-danger:hover                { background:rgba(220,38,38,.07); color:var(--danger); }
html[data-base="light"] .a-nav-trigger:hover                        { background:var(--surface-hover); color:var(--text); }
html[data-base="light"] .a-nav-trigger[aria-expanded="true"]        { background:var(--surface-active); color:var(--text); }
html[data-base="light"] .a-logout                                   { color:rgba(0,0,0,.25) !important; }
html[data-base="light"] .a-logout:hover                             { color:var(--danger) !important; }

/* ── Light theme: forms ──────────────────────────────────────────────── */
html[data-base="light"] .form-control,
html[data-base="light"] .form-select                                { background:#fff !important; border:1px solid rgba(0,0,0,.14) !important; color:var(--text) !important; }
html[data-base="light"] .form-control::placeholder                  { color:rgba(0,0,0,.3) !important; }
html[data-base="light"] .form-control:focus,
html[data-base="light"] .form-select:focus                          { background:#fff !important; color:var(--text) !important; }
html[data-base="light"] .form-control:-webkit-autofill,
html[data-base="light"] .form-control:-webkit-autofill:focus        { -webkit-text-fill-color:var(--text) !important; -webkit-box-shadow:0 0 0 1000px var(--autofill-bg) inset !important; }
html[data-base="light"] .form-select option                         { background:#fff; color:var(--text); }
html[data-base="light"] .form-label                                 { color:rgba(0,0,0,.5) !important; }
html[data-base="light"] .form-check-input                           { background-color:rgba(0,0,0,.07) !important; border-color:rgba(0,0,0,.2) !important; }
html[data-base="light"] .input-group-text                           { background:rgba(0,0,0,.05) !important; border-color:rgba(0,0,0,.14) !important; color:var(--text-muted) !important; }

/* ── Light theme: buttons ────────────────────────────────────────────── */
html[data-base="light"] .btn-close                                  { filter:none !important; opacity:.55; }
html[data-base="light"] .btn-secondary                              { background:rgba(0,0,0,.06) !important; border:1px solid var(--border) !important; color:var(--text) !important; }
html[data-base="light"] .btn-secondary:hover                        { background:rgba(0,0,0,.1) !important; color:var(--text) !important; }
html[data-base="light"] .btn-outline-secondary                      { border-color:var(--border) !important; color:var(--text-sub) !important; }
html[data-base="light"] .btn-outline-secondary:hover                { background:rgba(0,0,0,.05) !important; color:var(--text) !important; }

/* ── Light theme: modals ─────────────────────────────────────────────── */
html[data-base="light"] .modal-content                              { background:var(--surface) !important; border-color:var(--border) !important; color:var(--text) !important; }
html[data-base="light"] .modal-backdrop.show                        { opacity:.4; }

/* ── Light theme: dropdowns ──────────────────────────────────────────── */
html[data-base="light"] .dropdown-menu                              { background:var(--surface) !important; border-color:var(--border) !important; box-shadow:0 8px 30px rgba(0,0,0,.12) !important; }
html[data-base="light"] .dropdown-item                              { color:var(--text-sub) !important; }
html[data-base="light"] .dropdown-item:hover                        { background:rgba(99,102,241,.07) !important; color:var(--text) !important; }

/* ── Light theme: tables ─────────────────────────────────────────────── */
html[data-base="light"] .table {
  --bs-table-bg:transparent; --bs-table-striped-bg:rgba(0,0,0,.02);
  --bs-table-hover-bg:rgba(99,102,241,.05); --bs-table-color:var(--text);
  --bs-table-border-color:var(--border); color:var(--text) !important;
}
html[data-base="light"] .table thead th                             { background:rgba(0,0,0,.025) !important; color:var(--text-muted) !important; }
html[data-base="light"] .table td                                   { color:var(--text) !important; }
html[data-base="light"] .table-hover tbody tr:hover td              { background:rgba(99,102,241,.05) !important; }
html[data-base="light"] .table-light,
html[data-base="light"] .table-light th                             { background:rgba(0,0,0,.025) !important; color:var(--text-muted) !important; }

/* ── Light theme: list groups ────────────────────────────────────────── */
html[data-base="light"] .list-group-item                            { background:rgba(0,0,0,.02) !important; border-color:var(--border) !important; color:var(--text) !important; }
html[data-base="light"] .list-group-item:hover                      { background:rgba(99,102,241,.05) !important; }
html[data-base="light"] .list-group-item.active                     { background:rgba(99,102,241,.12) !important; border-color:rgba(99,102,241,.3) !important; color:var(--accent) !important; }

/* ── Light theme: pagination ─────────────────────────────────────────── */
html[data-base="light"] .page-link                                  { background:rgba(0,0,0,.03) !important; border-color:var(--border) !important; color:var(--text-sub) !important; }
html[data-base="light"] .page-link:hover                            { background:rgba(99,102,241,.08) !important; color:var(--accent) !important; }

/* ── Light theme: nav tabs ───────────────────────────────────────────── */
html[data-base="light"] .nav-tabs .nav-link                         { color:var(--text-sub); }
html[data-base="light"] .nav-tabs .nav-link:hover                   { background:var(--surface-active); color:var(--text); }
html[data-base="light"] .nav-tabs .nav-link.active                  { background:rgba(0,0,0,.03) !important; border-color:var(--border) var(--border) transparent !important; color:var(--accent) !important; }
html[data-base="light"] .tab-content                                { background:var(--surface-2); border-color:var(--border); }

/* ── Light theme: progress ───────────────────────────────────────────── */
html[data-base="light"] .progress                                   { background:rgba(0,0,0,.07) !important; }

/* ── Light theme: alerts ─────────────────────────────────────────────── */
html[data-base="light"] .alert-primary   { background:rgba(79,70,229,.07)  !important; border-color:rgba(79,70,229,.22)  !important; color:#3730a3 !important; }
html[data-base="light"] .alert-success   { background:rgba(5,150,105,.08)  !important; border-color:rgba(5,150,105,.25)  !important; color:#065f46 !important; }
html[data-base="light"] .alert-danger    { background:rgba(220,38,38,.08)  !important; border-color:rgba(220,38,38,.25)  !important; color:#991b1b !important; }
html[data-base="light"] .alert-warning   { background:rgba(217,119,6,.08)  !important; border-color:rgba(217,119,6,.25)  !important; color:#92400e !important; }
html[data-base="light"] .alert-info      { background:rgba(8,145,178,.08)  !important; border-color:rgba(8,145,178,.25)  !important; color:#164e63 !important; }
html[data-base="light"] .alert-secondary { background:rgba(0,0,0,.04)      !important; border-color:var(--border)        !important; color:var(--text-sub) !important; }
html[data-base="light"] .alert-dark      { background:rgba(0,0,0,.04)      !important; border-color:var(--border)        !important; color:var(--text-sub) !important; }

/* ── Light theme: badges ─────────────────────────────────────────────── */
html[data-base="light"] .badge.bg-primary   { background:rgba(79,70,229,.1)   !important; color:#3730a3 !important; border-color:rgba(79,70,229,.2)  !important; }
html[data-base="light"] .badge.bg-success   { background:rgba(5,150,105,.12)  !important; color:#065f46 !important; border-color:rgba(5,150,105,.25) !important; }
html[data-base="light"] .badge.bg-danger    { background:rgba(220,38,38,.1)   !important; color:#991b1b !important; border-color:rgba(220,38,38,.22) !important; }
html[data-base="light"] .badge.bg-warning   { background:rgba(217,119,6,.12)  !important; color:#92400e !important; border-color:rgba(217,119,6,.22) !important; }
html[data-base="light"] .badge.bg-info      { background:rgba(8,145,178,.1)   !important; color:#164e63 !important; border-color:rgba(8,145,178,.22) !important; }
html[data-base="light"] .badge.bg-secondary { background:rgba(0,0,0,.08)      !important; color:var(--text-muted)     !important; border-color:var(--border)     !important; }
html[data-base="light"] .badge.bg-dark      { background:rgba(0,0,0,.08)      !important; color:var(--text-muted)     !important; border-color:var(--border)     !important; }

/* ── Light theme: cards (explicit override for colored stat cards) ───── */
html[data-base="light"] .card.bg-primary,
html[data-base="light"] .card.text-white.bg-primary { background:rgba(99,102,241,.09)  !important; border-color:rgba(99,102,241,.22) !important; }
html[data-base="light"] .card.bg-success,
html[data-base="light"] .card.text-white.bg-success { background:rgba(5,150,105,.08)   !important; border-color:rgba(5,150,105,.2)   !important; }
html[data-base="light"] .card.bg-info,
html[data-base="light"] .card.text-white.bg-info    { background:rgba(8,145,178,.07)   !important; border-color:rgba(8,145,178,.2)   !important; }
html[data-base="light"] .card.bg-warning,
html[data-base="light"] .card.text-white.bg-warning { background:rgba(217,119,6,.08)   !important; border-color:rgba(217,119,6,.2)   !important; }
html[data-base="light"] .card.bg-danger,
html[data-base="light"] .card.text-white.bg-danger  { background:rgba(220,38,38,.07)   !important; border-color:rgba(220,38,38,.2)   !important; }

/* ── Light theme: utility classes ────────────────────────────────────── */
html[data-base="light"] .text-primary { color:var(--accent-l) !important; }
html[data-base="light"] .text-success { color:var(--success)  !important; }
html[data-base="light"] .text-danger  { color:var(--danger)   !important; }
html[data-base="light"] .text-warning { color:var(--warning)  !important; }
html[data-base="light"] .text-info    { color:var(--info)     !important; }
html[data-base="light"] .text-muted   { color:var(--text-muted) !important; }
html[data-base="light"] .lead         { color:var(--text-sub) !important; }
html[data-base="light"] small,
html[data-base="light"] .small        { color:var(--text-muted) !important; }
html[data-base="light"] h1, html[data-base="light"] h2,
html[data-base="light"] h3, html[data-base="light"] h4,
html[data-base="light"] h5, html[data-base="light"] h6 { color:var(--text) !important; }

/* ── Light theme: login page ─────────────────────────────────────────── */
html[data-base="light"] .l-bg {
  background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(99,102,241,.1) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 80%, rgba(139,92,246,.07) 0%, transparent 60%),
              #f1f5f9;
}
html[data-base="light"] .l-orb:nth-child(1) { background:rgba(99,102,241,.1); }
html[data-base="light"] .l-orb:nth-child(2) { background:rgba(139,92,246,.07); }
html[data-base="light"] .l-orb:nth-child(3) { background:rgba(16,185,129,.04); }
html[data-base="light"] .l-grid {
  background-image: linear-gradient(rgba(99,102,241,.018) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(99,102,241,.018) 1px, transparent 1px);
}
html[data-base="light"] .l-form-wrap  { background:rgba(0,0,0,.02); border-left-color:rgba(0,0,0,.06); }
html[data-base="light"] .l-card       { background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.08); box-shadow:0 20px 60px rgba(0,0,0,.1), 0 0 0 1px rgba(255,255,255,.6) inset; }
html[data-base="light"] .l-card-title { color:#0f172a; }
html[data-base="light"] .l-card-sub   { color:rgba(0,0,0,.45); }
html[data-base="light"] .l-headline   { color:#0f172a; }
html[data-base="light"] .l-logo-name  { color:#0f172a; }
html[data-base="light"] .l-sub        { color:rgba(0,0,0,.5); }
html[data-base="light"] .l-feat       { color:rgba(0,0,0,.55); }
html[data-base="light"] .l-field label                            { color:rgba(0,0,0,.45); }
html[data-base="light"] .l-field input,
html[data-base="light"] .l-field input.form-control               { background:rgba(0,0,0,.04) !important; border:1px solid rgba(0,0,0,.1); color:#0f172a !important; }
html[data-base="light"] .l-field input::placeholder               { color:rgba(0,0,0,.3); }
html[data-base="light"] .l-field input:focus,
html[data-base="light"] .l-field input.form-control:focus         { background:rgba(255,255,255,.95) !important; border-color:#6366f1; color:#0f172a !important; }
html[data-base="light"] .l-field-ico                              { color:rgba(0,0,0,.3); }
html[data-base="light"] .l-err                                    { color:#991b1b; }
html[data-base="light"] .l-divider::before,
html[data-base="light"] .l-divider::after                         { background:rgba(0,0,0,.1); }
html[data-base="light"] .l-divider span                           { color:rgba(0,0,0,.3); }
html[data-base="light"] .l-social     { border-color:rgba(0,0,0,.1); background:rgba(0,0,0,.03); color:rgba(0,0,0,.8); }
html[data-base="light"] .l-social:hover { background:rgba(0,0,0,.07); border-color:rgba(0,0,0,.18); color:#0f172a; }
html[data-base="light"] .l-register   { color:rgba(0,0,0,.4); }
html[data-base="light"] .l-register a { color:#4f46e5; }

/* -----------------------------------------------------------------------
   LIGHT BASE � additional fixes for hardcoded template colors
   ----------------------------------------------------------------------- */

/* Force text-white to respect theme in light mode */
html[data-base="light"] .text-white          { color:var(--text) !important; }

/* Sidebar hardcoded white label + logo */
html[data-base="light"] .a-logo-text         { color:var(--text) !important; }
html[data-base="light"] .a-logo-text em      { color:var(--accent-l) !important; }
html[data-base="light"] .a-nav-label         { color:var(--text-muted) !important; }
html[data-base="light"] .a-topbar-brand      { color:var(--text-muted) !important; }
html[data-base="light"] .a-user-name         { color:var(--text) !important; }
html[data-base="light"] .a-user-email        { color:var(--text-muted) !important; }

/* user_apps.html hardcoded white text */
html[data-base="light"] .apps-greeting       { color:var(--text) !important; }
html[data-base="light"] .app-name            { color:var(--text) !important; }
html[data-base="light"] .app-desc            { color:var(--text-muted) !important; }
html[data-base="light"] .app-card            { background:rgba(0,0,0,.025) !important; border-color:rgba(0,0,0,.08) !important; }
html[data-base="light"] .app-card:hover      { border-color:rgba(99,102,241,.3) !important; box-shadow:0 8px 24px rgba(0,0,0,.1); }
html[data-base="light"] .app-card-footer     { border-top-color:rgba(0,0,0,.06) !important; }
html[data-base="light"] .app-icon-wrap.default { background:rgba(0,0,0,.07) !important; color:var(--text-muted) !important; }
html[data-base="light"] .empty-state         { color:var(--text-muted) !important; }
html[data-base="light"] .empty-icon          { color:rgba(0,0,0,.2) !important; }

/* Settings page hardcoded white colors */
html[data-base="light"] .settings-section        { background:rgba(0,0,0,.025) !important; border-color:rgba(0,0,0,.08) !important; }
html[data-base="light"] .settings-section-header h5 { color:var(--text) !important; }
html[data-base="light"] .settings-section-header  { border-bottom-color:rgba(0,0,0,.06) !important; }
html[data-base="light"] .s-label                  { color:rgba(0,0,0,.45) !important; }
html[data-base="light"] .s-hint                   { color:rgba(0,0,0,.35) !important; }
html[data-base="light"] .s-section-title          { color:rgba(0,0,0,.4) !important; }
html[data-base="light"] .s-divider                { background:rgba(0,0,0,.06) !important; }
html[data-base="light"] .info-row                 { border-bottom-color:rgba(0,0,0,.05) !important; }
html[data-base="light"] .info-key                 { color:rgba(0,0,0,.4) !important; }
html[data-base="light"] .info-val                 { color:var(--text-sub) !important; }

/* Card text-white content (stat cards) */
html[data-base="light"] .card.text-white *   { color:var(--text) !important; }

/* Grid overlay: hide in light mode */
html[data-base="light"] body::before         { display:none; }

/* -----------------------------------------------------------------------
   LIGHT BASE � additional fixes for hardcoded template colors
   ----------------------------------------------------------------------- */

/* Force text-white to respect theme in light mode */
html[data-base="light"] .text-white          { color:var(--text) !important; }

/* Sidebar hardcoded white label + logo */
html[data-base="light"] .a-logo-text         { color:var(--text) !important; }
html[data-base="light"] .a-logo-text em      { color:var(--accent-l) !important; }
html[data-base="light"] .a-nav-label         { color:var(--text-muted) !important; }
html[data-base="light"] .a-topbar-brand      { color:var(--text-muted) !important; }
html[data-base="light"] .a-user-name         { color:var(--text) !important; }
html[data-base="light"] .a-user-email        { color:var(--text-muted) !important; }

/* user_apps.html hardcoded white text */
html[data-base="light"] .apps-greeting       { color:var(--text) !important; }
html[data-base="light"] .app-name            { color:var(--text) !important; }
html[data-base="light"] .app-desc            { color:var(--text-muted) !important; }
html[data-base="light"] .app-card            { background:rgba(0,0,0,.025) !important; border-color:rgba(0,0,0,.08) !important; }
html[data-base="light"] .app-card:hover      { border-color:rgba(99,102,241,.3) !important; box-shadow:0 8px 24px rgba(0,0,0,.1); }
html[data-base="light"] .app-card-footer     { border-top-color:rgba(0,0,0,.06) !important; }
html[data-base="light"] .app-icon-wrap.default { background:rgba(0,0,0,.07) !important; color:var(--text-muted) !important; }
html[data-base="light"] .empty-state         { color:var(--text-muted) !important; }
html[data-base="light"] .empty-icon          { color:rgba(0,0,0,.2) !important; }

/* Settings page hardcoded white colors */
html[data-base="light"] .settings-section        { background:rgba(0,0,0,.025) !important; border-color:rgba(0,0,0,.08) !important; }
html[data-base="light"] .settings-section-header h5 { color:var(--text) !important; }
html[data-base="light"] .settings-section-header  { border-bottom-color:rgba(0,0,0,.06) !important; }
html[data-base="light"] .s-label                  { color:rgba(0,0,0,.45) !important; }
html[data-base="light"] .s-hint                   { color:rgba(0,0,0,.35) !important; }
html[data-base="light"] .s-section-title          { color:rgba(0,0,0,.4) !important; }
html[data-base="light"] .s-divider                { background:rgba(0,0,0,.06) !important; }
html[data-base="light"] .info-row                 { border-bottom-color:rgba(0,0,0,.05) !important; }
html[data-base="light"] .info-key                 { color:rgba(0,0,0,.4) !important; }
html[data-base="light"] .info-val                 { color:var(--text-sub) !important; }

/* Card text-white content (stat cards) */
html[data-base="light"] .card.text-white *   { color:var(--text) !important; }

/* Grid overlay: hide in light mode */
html[data-base="light"] body::before         { display:none; }