/**
 * Admin UI Themes — override CSS variables per [data-ui-theme]
 * Loaded via @import dari app.css
 */

/* ── Shared surface tokens (defaults = ocean) ─────────────────── */
:root,
[data-ui-theme="ocean"] {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #60a5fa;
  --accent: #38bdf8;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --orange: #f97316;

  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;

  --surface-hover: #f1f5f9;
  --surface-active: #eff6ff;
  --surface-muted: #f8fafc;
  --input-bg: #f1f5f9;
  --input-bg-focus: #ffffff;
  --topbar-bg: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --focus-ring: rgba(59,130,246,0.12);
  --gradient-brand: linear-gradient(135deg, var(--primary), var(--accent));
  --gradient-hero: linear-gradient(135deg, #1e3a5f 0%, var(--primary-dark) 40%, var(--primary) 70%, var(--primary-light) 100%);
  --portal-hero-bg: #0b1e4f;
  --portal-hero-gradient: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent) 100%);
  --portal-card-gradient: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 60%, var(--accent) 100%);
  --portal-card-shadow: rgba(37, 99, 235, 0.35);
  --theme-mode: light;

  /* Tipografi — jelas & kontras */
  --font-sans: 'DM Sans', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* Grafik */
  --chart-1: var(--primary);
  --chart-2: var(--orange);
  --chart-3: var(--success);
  --chart-4: var(--warning);
  --chart-5: var(--accent);
  --chart-grid: #e2e8f0;
  --chart-label: #475569;
  --chart-label-muted: #94a3b8;
  --chart-tooltip-bg: #1e293b;
  --chart-area-opacity: 0.28;
}

/* ── Midnight (dark) ──────────────────────────────────────────── */
[data-ui-theme="midnight"] {
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-light: #93c5fd;
  --accent: #38bdf8;
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;

  --bg: #0f172a;
  --bg-card: #1e293b;
  --bg-sidebar: #1e293b;
  --border: #334155;
  --text: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --surface-hover: #334155;
  --surface-active: #1e3a5f;
  --surface-muted: #0f172a;
  --input-bg: #334155;
  --input-bg-focus: #1e293b;
  --topbar-bg: #1e293b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --focus-ring: rgba(96,165,250,0.2);
  --gradient-brand: linear-gradient(135deg, #3b82f6, #6366f1);
  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #2563eb 70%, #60a5fa 100%);
  --portal-hero-bg: #020617;
  --portal-hero-gradient: linear-gradient(160deg, #0f172a 0%, #1e3a5f 50%, #2563eb 100%);
  --portal-card-gradient: linear-gradient(145deg, #1e293b 0%, #2563eb 60%, #3b82f6 100%);
  --portal-card-shadow: rgba(0, 0, 0, 0.45);
  --theme-mode: dark;

  --font-sans: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --chart-grid: #334155;
  --chart-label: #cbd5e1;
  --chart-label-muted: #64748b;
  --chart-tooltip-bg: #0f172a;
  --chart-area-opacity: 0.35;
}

/* ── Emerald ────────────────────────────────────────────────── */
[data-ui-theme="emerald"] {
  --primary: #10b981;
  --primary-dark: #059669;
  --primary-light: #34d399;
  --accent: #2dd4bf;
  --success: #22c55e;

  --bg: #f0fdf4;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #bbf7d0;
  --text: #14532d;
  --text-secondary: #166534;
  --text-muted: #15803d;

  --surface-hover: #dcfce7;
  --surface-active: #d1fae5;
  --surface-muted: #f0fdf4;
  --input-bg: #ecfdf5;
  --input-bg-focus: #ffffff;
  --topbar-bg: #ffffff;
  --focus-ring: rgba(16,185,129,0.15);
  --gradient-brand: linear-gradient(135deg, #10b981, #14b8a6);
  --gradient-hero: linear-gradient(135deg, #064e3b 0%, var(--primary-dark) 40%, var(--primary) 70%, var(--primary-light) 100%);
  --portal-hero-bg: #022c22;
  --portal-hero-gradient: linear-gradient(160deg, #064e3b 0%, var(--primary-dark) 55%, var(--accent) 100%);
  --portal-card-gradient: linear-gradient(145deg, #047857 0%, var(--primary) 60%, var(--accent) 100%);
  --portal-card-shadow: rgba(16, 185, 129, 0.35);
  --theme-mode: light;
}

/* ── Sunset ─────────────────────────────────────────────────── */
[data-ui-theme="sunset"] {
  --primary: #f97316;
  --primary-dark: #ea580c;
  --primary-light: #fb923c;
  --accent: #fbbf24;
  --success: #22c55e;

  --bg: #fff7ed;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #fed7aa;
  --text: #431407;
  --text-secondary: #9a3412;
  --text-muted: #c2410c;

  --surface-hover: #ffedd5;
  --surface-active: #ffedd5;
  --surface-muted: #fff7ed;
  --input-bg: #fff7ed;
  --input-bg-focus: #ffffff;
  --topbar-bg: #ffffff;
  --focus-ring: rgba(249,115,22,0.15);
  --gradient-brand: linear-gradient(135deg, #f97316, #f59e0b);
  --gradient-hero: linear-gradient(135deg, #7c2d12 0%, var(--primary-dark) 40%, var(--primary) 70%, var(--primary-light) 100%);
  --portal-hero-bg: #431407;
  --portal-hero-gradient: linear-gradient(160deg, #7c2d12 0%, var(--primary-dark) 55%, var(--accent) 100%);
  --portal-card-gradient: linear-gradient(145deg, #c2410c 0%, var(--primary) 60%, var(--accent) 100%);
  --portal-card-shadow: rgba(249, 115, 22, 0.35);
  --theme-mode: light;
}

/* ── Violet ─────────────────────────────────────────────────── */
[data-ui-theme="violet"] {
  --primary: #8b5cf6;
  --primary-dark: #7c3aed;
  --primary-light: #a78bfa;
  --accent: #c084fc;
  --success: #22c55e;

  --bg: #faf5ff;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #e9d5ff;
  --text: #3b0764;
  --text-secondary: #6b21a8;
  --text-muted: #7e22ce;

  --surface-hover: #f3e8ff;
  --surface-active: #ede9fe;
  --surface-muted: #faf5ff;
  --input-bg: #f5f3ff;
  --input-bg-focus: #ffffff;
  --topbar-bg: #ffffff;
  --focus-ring: rgba(139,92,246,0.15);
  --gradient-brand: linear-gradient(135deg, #8b5cf6, #a855f7);
  --gradient-hero: linear-gradient(135deg, #4c1d95 0%, var(--primary-dark) 40%, var(--primary) 70%, var(--primary-light) 100%);
  --portal-hero-bg: #2e1065;
  --portal-hero-gradient: linear-gradient(160deg, #4c1d95 0%, var(--primary-dark) 55%, var(--accent) 100%);
  --portal-card-gradient: linear-gradient(145deg, #6d28d9 0%, var(--primary) 60%, var(--accent) 100%);
  --portal-card-shadow: rgba(139, 92, 246, 0.35);
  --theme-mode: light;
}

/* ── Rose ───────────────────────────────────────────────────── */
[data-ui-theme="rose"] {
  --primary: #f43f5e;
  --primary-dark: #e11d48;
  --primary-light: #fb7185;
  --accent: #fda4af;
  --success: #22c55e;

  --bg: #fff1f2;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #fecdd3;
  --text: #4c0519;
  --text-secondary: #9f1239;
  --text-muted: #be123c;

  --surface-hover: #ffe4e6;
  --surface-active: #ffe4e6;
  --surface-muted: #fff1f2;
  --input-bg: #fff1f2;
  --input-bg-focus: #ffffff;
  --topbar-bg: #ffffff;
  --focus-ring: rgba(244,63,94,0.15);
  --gradient-brand: linear-gradient(135deg, #f43f5e, #fb7185);
  --gradient-hero: linear-gradient(135deg, #881337 0%, var(--primary-dark) 40%, var(--primary) 70%, var(--primary-light) 100%);
  --portal-hero-bg: #4c0519;
  --portal-hero-gradient: linear-gradient(160deg, #881337 0%, var(--primary-dark) 55%, var(--accent) 100%);
  --portal-card-gradient: linear-gradient(145deg, #be123c 0%, var(--primary) 60%, var(--accent) 100%);
  --portal-card-shadow: rgba(244, 63, 94, 0.35);
  --theme-mode: light;
}

/* ── Slate (neutral pro) ────────────────────────────────────── */
[data-ui-theme="slate"] {
  --primary: #475569;
  --primary-dark: #334155;
  --primary-light: #64748b;
  --accent: #94a3b8;

  --bg: #f1f5f9;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #cbd5e1;
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --surface-hover: #e2e8f0;
  --surface-active: #e2e8f0;
  --surface-muted: #f8fafc;
  --input-bg: #e2e8f0;
  --input-bg-focus: #ffffff;
  --topbar-bg: #ffffff;
  --focus-ring: rgba(71,85,105,0.12);
  --gradient-brand: linear-gradient(135deg, #475569, #64748b);
  --gradient-hero: linear-gradient(135deg, #1e293b 0%, var(--primary-dark) 40%, var(--primary) 70%, var(--primary-light) 100%);
  --portal-hero-bg: #0f172a;
  --portal-hero-gradient: linear-gradient(160deg, #1e293b 0%, var(--primary) 55%, #64748b 100%);
  --portal-card-gradient: linear-gradient(145deg, #334155 0%, var(--primary) 60%, #64748b 100%);
  --portal-card-shadow: rgba(71, 85, 105, 0.35);
  --theme-mode: light;
}

/* ── Component overrides (pakai variabel tema) ──────────────── */
body { background: var(--bg); color: var(--text); }
.sidebar { background: var(--bg-sidebar); border-color: var(--border); }
.sidebar-header { border-color: var(--border); }
.sidebar-footer { border-color: var(--border); }
.bandwidth-widget { background: var(--surface-muted); }
.nav-item:hover { background: var(--surface-hover) !important; color: var(--text) !important; }
.nav-item.active { background: var(--surface-active) !important; color: var(--primary) !important; }
.topbar { background: var(--topbar-bg); border-color: var(--border); }
.sidebar-toggle:hover,
.topbar-btn:hover,
.icon-btn-sm:hover,
.modal-close:hover { background: var(--surface-hover) !important; }
.search-box { background: var(--input-bg); border-color: var(--border); }
.search-box:focus-within { background: var(--input-bg-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.logo-icon { background: var(--gradient-brand); }
.user-avatar { background: var(--gradient-brand); }
.bw-bar { background: var(--border); }
.data-table th { background: var(--surface-muted); color: var(--text-secondary); border-color: var(--border); }
.data-table td { border-color: var(--border); }
.stat-card,
.card { background: var(--bg-card); border-color: var(--border); color: var(--text); }

[data-ui-theme="midnight"] .logo-text { color: var(--text); }
[data-ui-theme="midnight"] .nav-section-title { color: var(--text-muted); }
[data-ui-theme="midnight"] .notification-dot { border-color: var(--bg-card); }
[data-ui-theme="midnight"] .search-box input { color: var(--text); }
[data-ui-theme="midnight"] .search-box input::placeholder { color: var(--text-muted); }
[data-ui-theme="midnight"] .bottom-nav { background: var(--bg-card); border-color: var(--border); }
[data-ui-theme="midnight"] .bn-menu { background: var(--bg-card); }
[data-ui-theme="midnight"] .bn-menu-item { background: var(--surface-hover); color: var(--text); }
[data-ui-theme="midnight"] .notif-panel { background: var(--bg-card); color: var(--text); }
[data-ui-theme="midnight"] .notif-panel-hdr { border-color: var(--border); }
[data-ui-theme="midnight"] .notif-item { border-color: var(--border); }
[data-ui-theme="midnight"] .notif-item:hover { background: var(--surface-hover); }
[data-ui-theme="midnight"] .global-search-dropdown { background: var(--bg-card); }
[data-ui-theme="midnight"] .gsd-item { color: var(--text); }
[data-ui-theme="midnight"] .gsd-item:hover { background: var(--surface-hover); }