/* ═══════════════════════════════════════════════════════════════
   THEME 2 — "Midnight Neon" — A bold, compact, glassmorphic look.
   Active when data-palette="2" is on <html>.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. LIGHT palette — warm slate + electric cyan ────────── */
:root[data-palette="2"] {
  --brand:#0891b2; --brand-600:#0e7490; --brand-700:#155e75; --brand-soft:#cffafe;
  --violet:#f97316; --sky:#06b6d4; --pink:#e11d48;
  --ink:#1e293b; --ink-2:#334155; --muted:#475569; --muted-2:#64748b;
  --bg:#f0fdfa; --surface:#ffffff; --line:#ccfbf1; --line-2:#e0f7fa;
  --success:#059669; --success-soft:#d1fae5; --warn:#d97706; --warn-soft:#fef3c7;
  --danger:#dc2626; --danger-soft:#fee2e2; --info:#0284c7; --info-soft:#e0f2fe;
  --sidebar:#0f172a; --sidebar-2:#1e293b; --sidebar-ink:#94a3b8; --sidebar-active:rgba(8,145,178,.25);
  --radius:12px; --radius-sm:8px; --radius-xs:6px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
}

/* Light — dark sidebar (always dark) */
:root[data-palette="2"] .sidebar{background:#0f172a;color:#94a3b8;border-right:1px solid #1e293b}
:root[data-palette="2"] .sidebar .logo{color:#f1f5f9;border-bottom-color:#1e293b}
:root[data-palette="2"] .sidebar .logo .mark{background:linear-gradient(135deg,#06b6d4,#0891b2);box-shadow:0 4px 20px rgba(6,182,212,.5)}
:root[data-palette="2"] .sidebar .nav a{color:#94a3b8}
:root[data-palette="2"] .sidebar .nav a:hover{background:rgba(8,145,178,.15);color:#e2e8f0}
:root[data-palette="2"] .sidebar .nav a.active{background:linear-gradient(90deg,#0891b2,#06b6d4);color:#fff;box-shadow:0 4px 20px rgba(6,182,212,.4)}
:root[data-palette="2"] .sidebar .nav a .tag{background:rgba(6,182,212,.2);color:#67e8f9}
:root[data-palette="2"] .sidebar .nav a.active .tag{background:rgba(255,255,255,.2);color:#fff}
:root[data-palette="2"] .sidebar .who{background:#1e293b;border-color:#334155}
:root[data-palette="2"] .sidebar .who .av{background:linear-gradient(135deg,#06b6d4,#f97316)}
:root[data-palette="2"] .sidebar .who .nm{color:#e2e8f0}
:root[data-palette="2"] .sidebar .who .rl{color:#64748b}
:root[data-palette="2"] .sidebar .grp{color:#475569}

/* Light — topbar glassy */
:root[data-palette="2"] .topbar{background:rgba(240,253,250,.9);backdrop-filter:saturate(200%) blur(14px);border-bottom-color:#ccfbf1}
:root[data-palette="2"] .topbar .icobtn{background:#f0fdfa;border-color:#99f6e4}

/* Light — atmosphere */
:root[data-palette="2"] .shell{
  background-image:
    radial-gradient(800px 400px at 90% -8%, rgba(6,182,212,.12), transparent 60%),
    radial-gradient(600px 400px at -5% 40%, rgba(249,115,22,.08), transparent 55%) !important;
}

/* ── 2. DARK palette — deep space + neon cyan ─────────────── */
:root[data-palette="2"][data-theme="dark"] {
  --brand:#22d3ee; --brand-600:#06b6d4; --brand-700:#67e8f9; --brand-soft:rgba(34,211,238,.12);
  --brand-link:#67e8f9;
  --ink:#f1f5f9; --ink-2:#cbd5e1; --muted:#94a3b8; --muted-2:#64748b;
  --bg:#020617; --surface:#0f172a; --surface-2:#1e293b; --line:#1e293b; --line-2:#334155;
  --success:#34d399; --success-soft:rgba(52,211,153,.12);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.12);
  --danger:#fb7185; --danger-soft:rgba(251,113,133,.12);
  --info:#38bdf8; --info-soft:rgba(56,189,248,.12);
  --sidebar:#020617; --sidebar-2:#0f172a; --sidebar-ink:#94a3b8; --sidebar-active:rgba(34,211,238,.15);
  --shadow:0 1px 3px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-lg:0 8px 32px rgba(0,0,0,.6);
  --code-bg:#020617; --code-ink:#a7f3d0;
}
:root[data-palette="2"][data-theme="dark"] .sidebar{background:#020617;border-right-color:#1e293b}
:root[data-palette="2"][data-theme="dark"] .sidebar .logo{border-bottom-color:#1e293b}
:root[data-palette="2"][data-theme="dark"] .sidebar .nav a.active{background:linear-gradient(90deg,#0891b2,#06b6d4);box-shadow:0 4px 20px rgba(6,182,212,.35)}
:root[data-palette="2"][data-theme="dark"] .sidebar .who{background:#0f172a;border-color:#1e293b}
:root[data-palette="2"][data-theme="dark"] .topbar{background:rgba(15,23,42,.9);border-bottom-color:#1e293b}
:root[data-palette="2"][data-theme="dark"] .topbar .icobtn{background:#1e293b;border-color:#334155;color:#94a3b8}
:root[data-palette="2"][data-theme="dark"] input,
:root[data-palette="2"][data-theme="dark"] select,
:root[data-palette="2"][data-theme="dark"] textarea{background:#1e293b;color:#f1f5f9;border-color:#334155}
:where(:root[data-palette="2"][data-theme="dark"]) a{color:var(--brand-link)}

/* Dark — atmosphere with neon glow */
:root[data-palette="2"][data-theme="dark"] .shell{
  background-image:
    radial-gradient(800px 400px at 90% -8%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(600px 400px at -5% 40%, rgba(249,115,22,.05), transparent 55%) !important;
}

/* ── 3. COMPACT LAYOUT — tighter spacing everywhere ────────── */
:root[data-palette="2"] .main{padding:16px 20px;max-width:1600px}
:root[data-palette="2"] .page-head{margin-bottom:14px}
:root[data-palette="2"] .page-head h1{font-size:20px}

/* Tighter sidebar */
:root[data-palette="2"] .sidebar{width:230px;--sb:230px}
:root[data-palette="2"] .sidebar .logo{padding:16px 18px 14px}
:root[data-palette="2"] .sidebar .nav{padding:8px 10px 14px}
:root[data-palette="2"] .sidebar .nav a{padding:8px 11px;font-size:13px;border-radius:8px;margin-bottom:2px;gap:10px}
:root[data-palette="2"] .sidebar .nav a .ic{font-size:14px}
:root[data-palette="2"] .sidebar .who{margin:6px 10px 12px;padding:10px}
:root[data-palette="2"] .content{margin-left:230px}

/* Tighter topbar */
:root[data-palette="2"] .topbar{height:52px;padding:0 20px}
:root[data-palette="2"] .topbar .page-t{font-size:14px}
:root[data-palette="2"] .topbar .icobtn{width:34px;height:34px;border-radius:8px}

/* Compact stat cards */
:root[data-palette="2"] .stats{gap:12px}
:root[data-palette="2"] .statc{padding:14px 16px;border-radius:var(--radius);gap:4px}
:root[data-palette="2"] .statc .ic{width:36px;height:36px;border-radius:9px;font-size:16px}
:root[data-palette="2"] .statc .val{font-size:22px}
:root[data-palette="2"] .statc .lbl{font-size:12px}

/* Compact cards */
:root[data-palette="2"] .card{border-radius:var(--radius);margin-bottom:14px}
:root[data-palette="2"] .card .card-h{padding:12px 16px}
:root[data-palette="2"] .card .card-b{padding:14px 16px}
:root[data-palette="2"] .card .card-h h2{font-size:13.5px}

/* Compact tables */
:root[data-palette="2"] thead th{padding:10px 14px;font-size:10px}
:root[data-palette="2"] tbody td{padding:10px 14px;font-size:13px}
:root[data-palette="2"] .badge{padding:3px 9px;font-size:11px;border-radius:6px}

/* Compact buttons */
:root[data-palette="2"] .btn{padding:8px 14px;border-radius:8px;font-size:13px;box-shadow:0 2px 8px rgba(8,145,178,.25)}
:root[data-palette="2"] .btn:hover{box-shadow:0 4px 16px rgba(8,145,178,.4)}

/* ── 4. DASHBOARD-SPECIFIC — compact KPIs, ops ────────────── */
:root[data-palette="2"] .dashx{gap:14px}
:root[data-palette="2"] .dashx .dx-kpis{gap:10px}
:root[data-palette="2"] .dashx .dx-kpi{min-height:120px;padding:12px 14px;border-radius:var(--radius)}
:root[data-palette="2"] .dashx .dx-kpi .val{font-size:22px}

:root[data-palette="2"] .dashx .dx-ops{gap:10px}
:root[data-palette="2"] .dashx .dx-op{padding:12px;border-radius:var(--radius);gap:10px}

:root[data-palette="2"] .dashx .dx-trio{gap:12px}
:root[data-palette="2"] .dashx .dx-qa{gap:8px}
:root[data-palette="2"] .dashx .dx-qbtn{padding:12px 6px;border-radius:var(--radius-sm);font-size:11px}
:root[data-palette="2"] .dashx .dx-qi{width:36px;height:36px;border-radius:9px;font-size:16px}

/* ── 5. NEON ACCENTS — glowing borders on hover ───────────── */
:root[data-palette="2"] .statc:hover,
:root[data-palette="2"] .dashx .dx-op:hover,
:root[data-palette="2"] .dashx .dx-qbtn:hover{
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand), var(--shadow-lg);
}
:root[data-palette="2"] .sidebar .nav a.active{
  box-shadow:0 0 0 1px rgba(6,182,212,.5), 0 4px 20px rgba(6,182,212,.4);
}

/* ── 6. ACCOUNTS — compact action toolbar ─────────────────── */
:root[data-palette="2"] .act-btn{width:34px;height:34px;flex:0 0 34px;border-radius:8px}
:root[data-palette="2"] .act-btn svg{width:16px;height:16px}

/* ── 7. LOGIN page — completely different look ────────────── */
:root[data-palette="2"] .login-wrap{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(6,182,212,.3), transparent),
    radial-gradient(900px 500px at 110% 110%, rgba(249,115,22,.2), transparent),
    #020617 !important;
}
:root[data-palette="2"] .login-card{
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(6,182,212,.25);
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(6,182,212,.08), inset 0 1px 0 rgba(255,255,255,.06);
  color:#e2e8f0;
}
:root[data-palette="2"] .login-card h1{color:#f1f5f9}
:root[data-palette="2"] .login-card p{color:#94a3b8}
:root[data-palette="2"] .login-card .mark{
  background:linear-gradient(135deg,#06b6d4,#f97316);
  box-shadow:0 10px 30px rgba(6,182,212,.5);
}
:root[data-palette="2"] .login-card label{color:#cbd5e1}
:root[data-palette="2"] .login-card input,
:root[data-palette="2"] .login-card select{
  background:rgba(30,41,59,.8);
  border:1px solid rgba(6,182,212,.2);
  color:#f1f5f9;
  border-radius:10px;
}
:root[data-palette="2"] .login-card input:focus{
  border-color:#06b6d4;
  box-shadow:0 0 0 3px rgba(6,182,212,.2);
}
:root[data-palette="2"] .login-card input::placeholder{color:#64748b}
:root[data-palette="2"] .login-card .btn,
:root[data-palette="2"] .login-card button[type="button"]{
  background:linear-gradient(90deg,#0891b2,#06b6d4);
  box-shadow:0 4px 20px rgba(6,182,212,.4);
  border:none;
  color:#fff;
}
:root[data-palette="2"] .login-card .btn:hover{
  box-shadow:0 6px 30px rgba(6,182,212,.6);
}
:root[data-palette="2"] .login-card .otp-note{color:#94a3b8}
:root[data-palette="2"] .login-card .error-msg,
:root[data-palette="2"] .login-card .alert{
  background:rgba(251,113,133,.12);
  border-color:rgba(251,113,133,.3);
  color:#fb7185;
}
/* Theme toggle buttons on login — glassmorphic */
:root[data-palette="2"] .login-card #paletteBtn,
:root[data-palette="2"] .login-card #themeBtn{
  background:rgba(6,182,212,.15) !important;
  border:1px solid rgba(6,182,212,.3) !important;
  color:#67e8f9 !important;
  backdrop-filter:blur(8px);
}
:root[data-palette="2"] .login-card #paletteBtn:hover,
:root[data-palette="2"] .login-card #themeBtn:hover{
  background:rgba(6,182,212,.3) !important;
}

/* ── 8. TOPBAR theme buttons — bigger, styled ─────────────── */
:root[data-palette="2"] .topbar #paletteBtn{
  background:linear-gradient(90deg,#0891b2,#06b6d4) !important;
  color:#fff !important;
  border:none !important;
  padding:6px 14px;
  border-radius:8px;
  font-weight:700;
  box-shadow:0 2px 10px rgba(6,182,212,.3);
}
:root[data-palette="2"] .topbar #paletteBtn:hover{
  box-shadow:0 4px 16px rgba(6,182,212,.5);
}
:root:not([data-palette="2"]) .topbar #paletteBtn{
  background:linear-gradient(90deg,#4f46e5,#6366f1) !important;
  color:#fff !important;
  border:none !important;
  padding:6px 14px;
  border-radius:8px;
  font-weight:700;
  box-shadow:0 2px 10px rgba(99,102,241,.3);
}

/* ── 9. BENTO overrides — sharper corners ─────────────────── */
:root[data-palette="2"] .card,
:root[data-palette="2"] .statc,
:root[data-palette="2"] .rpt-box,
:root[data-palette="2"] .ra-card,
:root[data-palette="2"] .ra-mcard{
  border-radius:12px;
}