/* ============================================================
   PTSP2026 — Multi-Theme System
   Tema diaktifkan via atribut [data-theme] pada <html>
   Default: dark (backward compatible)
   ============================================================ */

/* ── TEMA: LIGHT ───────────────────────────────────────────── */
[data-theme="light"] {
    --navy: #112e42;
    --teal: #1f6f65;
    --gold: #c08a3e;
    --brand: #0d6efd;
    --brand-2: #198754;
    --brand-3: #ffc107;
    --brand-danger: #dc3545;
    --brand-purple: #6f42c1;

    --bg: #f0f2f5;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --surface-3: #e9ecef;
    --surface-hover: #dee2e6;

    --line: rgba(0,0,0,0.12);
    --line-soft: rgba(0,0,0,0.06);
    --line-strong: rgba(0,0,0,0.20);

    --ink: #212529;
    --ink-mid: #495057;
    --ink-soft: #6c757d;
    --ink-muted: #adb5bd;

    --bs-body-color: #212529;
    --bs-body-bg: #f0f2f5;
    --bs-card-bg: #ffffff;
    --bs-card-border-color: rgba(0,0,0,0.12);
    --bs-modal-bg: #ffffff;
    --bs-input-bg: #ffffff;
    --bs-input-border-color: #ced4da;
    --bs-input-color: #212529;
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-border-color: rgba(0,0,0,0.15);
    --bs-dropdown-link-color: #212529;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(0,0,0,0.02);
    --bs-table-hover-bg: rgba(0,0,0,0.04);
    --bs-link-color: #0d6efd;
    --bs-border-color: rgba(0,0,0,0.12);
    color-scheme: light;
}
[data-theme="light"] body { background: var(--bg); color: var(--ink); }
[data-theme="light"] .sidebar { background: linear-gradient(180deg, #1a2332 0%, #0f1923 100%); }
[data-theme="light"] .content-area { background: var(--bg); }
[data-theme="light"] .card, [data-theme="light"] .card-soft { background: var(--surface); border-color: var(--line); }
[data-theme="light"] .table { color: var(--ink); }
[data-theme="light"] .form-control, [data-theme="light"] .form-select { background: var(--bs-input-bg); color: var(--ink); border-color: var(--bs-input-border-color); }
[data-theme="light"] .topbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
[data-theme="light"] .topbar, [data-theme="light"] .topbar * { color: var(--ink); }
[data-theme="light"] .badge { opacity: 0.9; }

/* ── TEMA: PROFESSIONAL (Navy + Gold) ──────────────────────── */
[data-theme="professional"] {
    --navy: #112e42;
    --teal: #1f6f65;
    --gold: #c08a3e;
    --brand: #1f6f65;
    --brand-2: #c08a3e;
    --brand-3: #e8b84e;
    --brand-danger: #c0392b;
    --brand-purple: #8e44ad;

    --bg: #f5f1e8;
    --surface: #fffdf8;
    --surface-2: #f9f4ea;
    --surface-3: #efe8da;
    --surface-hover: #e8e0cf;

    --line: rgba(31,111,101,0.15);
    --line-soft: rgba(31,111,101,0.08);
    --line-strong: rgba(31,111,101,0.25);

    --ink: #1f2d3d;
    --ink-mid: #4a5568;
    --ink-soft: #6d7682;
    --ink-muted: #a0aec0;

    --bs-body-color: #1f2d3d;
    --bs-body-bg: #f5f1e8;
    --bs-card-bg: #fffdf8;
    --bs-card-border-color: rgba(31,111,101,0.15);
    --bs-modal-bg: #fffdf8;
    --bs-input-bg: #fffdf8;
    --bs-input-border-color: #d8d0c4;
    --bs-input-color: #1f2d3d;
    --bs-dropdown-bg: #fffdf8;
    --bs-link-color: #1f6f65;
    --bs-border-color: rgba(31,111,101,0.15);
    color-scheme: light;
}
[data-theme="professional"] body { background: var(--bg); color: var(--ink); }
[data-theme="professional"] .sidebar { background: linear-gradient(180deg, #112e42 0%, #0a1929 100%); }
[data-theme="professional"] .content-area { background: var(--bg); }
[data-theme="professional"] .card, [data-theme="professional"] .card-soft { background: var(--surface); border-color: var(--line); }
[data-theme="professional"] .topbar { background: rgba(255,253,248,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
[data-theme="professional"] .topbar, [data-theme="professional"] .topbar * { color: var(--ink); }
[data-theme="professional"] .form-control, [data-theme="professional"] .form-select { background: var(--bs-input-bg); color: var(--ink); border-color: var(--bs-input-border-color); }

/* ── TEMA: OCEAN (Blue gradient) ───────────────────────────── */
[data-theme="ocean"] {
    --navy: #e0f2fe;
    --teal: #0ea5e9;
    --gold: #f59e0b;
    --brand: #0ea5e9;
    --brand-2: #06b6d4;
    --brand-3: #f59e0b;
    --brand-danger: #ef4444;
    --brand-purple: #8b5cf6;

    --bg: #0c1222;
    --surface: #111b2e;
    --surface-2: #162033;
    --surface-3: #1c2840;
    --surface-hover: #243350;

    --line: rgba(14,165,233,0.15);
    --line-soft: rgba(14,165,233,0.08);
    --line-strong: rgba(14,165,233,0.30);

    --ink: #e0f2fe;
    --ink-mid: #93c5fd;
    --ink-soft: #60a5fa;
    --ink-muted: #3b82f6;

    --bs-body-color: #e0f2fe;
    --bs-body-bg: #0c1222;
    --bs-card-bg: #111b2e;
    --bs-input-bg: rgba(255,255,255,0.05);
    --bs-input-border-color: rgba(14,165,233,0.25);
    --bs-link-color: #0ea5e9;
    --bs-border-color: rgba(14,165,233,0.15);
    color-scheme: dark;
}
[data-theme="ocean"] .sidebar { background: linear-gradient(180deg, #0a1628 0%, #071018 100%); }

/* ── Dark theme = default (backward compatible, no [data-theme] needed) ── */

/* Dark theme portal vars (default) */
[data-theme="dark"] {
    --navy: #e2edf7;
    --teal: #00c8ff;
    --gold: #ffc947;
}