/* ============================================================
   THEME PATCH — Light / Dark Mode
   Tambahkan di bawah :root block yang sudah ada di app.css
   ============================================================ */

/* ── Dark (default, sudah ada) ────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:        #0e0f11;
  --bg2:       #13151a;
  --bg3:       #1a1d24;
  --bg4:       #22262f;
  --border:    #2a2e38;
  --border2:   #363b47;
  --text:      #e8eaf0;
  --text2:     #9ca3b0;
  --text3:     #5c6270;
  --accent:    #f5a623;
  --accent2:   #e8941a;
  --accent-bg: rgba(245,166,35,.12);
  --blue:      #3b82f6;
  --blue-bg:   rgba(59,130,246,.12);
  --green:     #22c55e;
  --green-bg:  rgba(34,197,94,.12);
  --red:       #ef4444;
  --red-bg:    rgba(239,68,68,.12);
  --purple:    #a855f7;
  --purple-bg: rgba(168,85,247,.12);
  --cyan:      #06b6d4;
  --shadow:    0 4px 24px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
}

/* ── Light ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #f5f5f7;
  --bg2:       #ffffff;
  --bg3:       #f0f0f2;
  --bg4:       #e5e5ea;
  --border:    #d1d1d6;
  --border2:   #c7c7cc;
  --text:      #1c1c1e;
  --text2:     #3a3a3c;
  --text3:     #8e8e93;
  --accent:    #d4870a;
  --accent2:   #b8730a;
  --accent-bg: rgba(212,135,10,.10);
  --blue:      #2563eb;
  --blue-bg:   rgba(37,99,235,.10);
  --green:     #16a34a;
  --green-bg:  rgba(22,163,74,.10);
  --red:       #dc2626;
  --red-bg:    rgba(220,38,38,.10);
  --purple:    #9333ea;
  --purple-bg: rgba(147,51,234,.10);
  --cyan:      #0891b2;
  --shadow:    0 4px 24px rgba(0,0,0,.10);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
}

/* ── Penyesuaian komponen untuk light mode ──────────────── */
[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

[data-theme="light"] .card {
  background: var(--bg2);
  border-color: var(--border);
}

[data-theme="light"] #sidebar {
  background: var(--bg2);
  border-right-color: var(--border);
}

[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-item.active {
  background: var(--accent-bg);
}

[data-theme="light"] #topbar {
  background: var(--bg2);
  border-bottom-color: var(--border);
}

[data-theme="light"] .table-wrap table thead th {
  background: var(--bg3);
  color: var(--text3);
}

[data-theme="light"] .table-wrap table tbody tr:hover {
  background: var(--bg3);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--bg2);
  border-color: var(--border2);
  color: var(--text);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

[data-theme="light"] .modal-overlay {
  background: rgba(0,0,0,.35);
}

[data-theme="light"] .modal-box {
  background: var(--bg2);
  border-color: var(--border);
}

[data-theme="light"] .modal-header {
  border-bottom-color: var(--border);
}

[data-theme="light"] .modal-footer {
  border-top-color: var(--border);
  background: var(--bg3);
}

[data-theme="light"] .btn-secondary {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text2);
}

[data-theme="light"] .btn-secondary:hover {
  background: var(--bg4);
}

[data-theme="light"] .btn-icon {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text2);
}

[data-theme="light"] .notif-panel,
[data-theme="light"] .notif-panel-header {
  background: var(--bg2);
  border-color: var(--border);
}

[data-theme="light"] .code {
  background: var(--bg3);
  color: var(--text2);
  border-color: var(--border);
}

[data-theme="light"] .alert-info    { background: var(--blue-bg);   border-color: var(--blue);   color: var(--blue); }
[data-theme="light"] .alert-warning { background: rgba(212,135,10,.10); border-color: var(--accent); color: var(--accent2); }
[data-theme="light"] .alert-danger  { background: var(--red-bg);    border-color: var(--red);    color: var(--red); }

[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg3); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border2); }

/* ── Theme toggle button ────────────────────────────────── */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

/* ── Transisi halus saat ganti theme ────────────────────── */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: .2s;
  transition-timing-function: ease;
}
/* Kecualikan transisi pada animasi & transform */
.btn, .nav-item, input, select { transition: all var(--transition); }