/* ============================================================
   KOPUSAD OLT MANAGER — Theme layer (Dark default + Light mode)
   Dark = tampilan asli template (tanpa override).
   Light = aktif saat <html data-theme="light">.
   Hanya me-remap palet slate + beberapa tint aksen; semua !important
   agar menang atas utility Tailwind bawaan.
   ============================================================ */

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* transisi halus saat berganti tema */
body, aside, main, header, table, tr, td, th, input, select, button, a, div, span {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* tombol toggle tema */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .5rem; font-size: .95rem;
  border: 1px solid rgba(148,163,184,.35); background: transparent; cursor: pointer;
  line-height: 1; user-select: none;
}
.theme-toggle:hover { background: rgba(148,163,184,.15); }

/* ===================== LIGHT THEME (soft / low-glare) ===================== */
/* Palet lembut: tanpa putih murni. Latar halaman abu kebiruan tenang,
   kartu off-white hangat, kontras rendah, dipisah oleh border tipis. */

/* --- surfaces (latar) --- */
[data-theme="light"] .bg-slate-950            { background-color:#e4e8ef !important; }  /* halaman */
[data-theme="light"] .bg-slate-950\/80        { background-color:rgba(228,232,239,.85) !important; }
[data-theme="light"] .bg-slate-900            { background-color:#f3f5f9 !important; }  /* kartu & sidebar (off-white) */
[data-theme="light"] .bg-slate-800            { background-color:#e8ecf2 !important; }  /* input / header tabel */
[data-theme="light"] .bg-slate-800\/50        { background-color:#eceff4 !important; }
[data-theme="light"] .bg-slate-800\/40        { background-color:#e8ecf2 !important; }
[data-theme="light"] .bg-slate-700            { background-color:#dbe1ea !important; }
[data-theme="light"] .bg-slate-700\/50        { background-color:#e0e5ed !important; }

/* hover surfaces */
[data-theme="light"] .hover\:bg-slate-800:hover     { background-color:#e8ecf2 !important; }
[data-theme="light"] .hover\:bg-slate-800\/40:hover { background-color:#e9edf3 !important; }
[data-theme="light"] .hover\:bg-slate-700:hover     { background-color:#dbe1ea !important; }

/* --- borders (tipis, lembut) --- */
[data-theme="light"] .border-slate-800 { border-color:#dce1ea !important; }
[data-theme="light"] .border-slate-700 { border-color:#ccd3de !important; }
[data-theme="light"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color:#e2e6ee !important; }

/* --- text (tidak hitam pekat, lebih kalem) --- */
[data-theme="light"] .text-white      { color:#1f2937 !important; }
[data-theme="light"] .text-slate-200  { color:#273243 !important; }
[data-theme="light"] .text-slate-300  { color:#3b4759 !important; }
[data-theme="light"] .text-slate-400  { color:#566071 !important; }
[data-theme="light"] .text-slate-500  { color:#6b7484 !important; }
[data-theme="light"] .text-slate-600  { color:#97a0ae !important; }
[data-theme="light"] .hover\:text-white:hover     { color:#1f2937 !important; }
[data-theme="light"] .hover\:text-slate-300:hover { color:#3b4759 !important; }

/* --- soft accent surfaces (tint gelap -> tint terang) + teks kontras --- */
[data-theme="light"] .bg-emerald-950\/40 { background-color:#ecfdf5 !important; }
[data-theme="light"] .bg-amber-950\/40,
[data-theme="light"] .bg-amber-950\/30   { background-color:#fffbeb !important; }
[data-theme="light"] .bg-red-950\/50,
[data-theme="light"] .bg-red-950\/40     { background-color:#fef2f2 !important; }

[data-theme="light"] .text-emerald-300 { color:#047857 !important; }
[data-theme="light"] .text-amber-300   { color:#b45309 !important; }
[data-theme="light"] .text-red-300     { color:#b91c1c !important; }

[data-theme="light"] .border-emerald-900 { border-color:#a7f3d0 !important; }
[data-theme="light"] .border-amber-900   { border-color:#fde68a !important; }
[data-theme="light"] .border-red-900     { border-color:#fecaca !important; }

/* angka/aksen -400 agar cukup kontras di latar putih */
[data-theme="light"] .text-blue-400    { color:#2563eb !important; }
[data-theme="light"] .text-emerald-400 { color:#059669 !important; }
[data-theme="light"] .text-amber-400   { color:#d97706 !important; }
[data-theme="light"] .text-red-400     { color:#dc2626 !important; }
[data-theme="light"] .text-cyan-400    { color:#0891b2 !important; }
[data-theme="light"] .text-violet-400  { color:#7c3aed !important; }
[data-theme="light"] .text-blue-300    { color:#1d4ed8 !important; }

/* --- kedalaman lembut untuk kartu (bukan garis keras) --- */
[data-theme="light"] .bg-slate-900.rounded-xl,
[data-theme="light"] .bg-slate-900.rounded-2xl {
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05) !important;
}

/* ===================== Brand title (judul app) ===================== */
.brand-title {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
  background-image: linear-gradient(95deg, #ffffff 0%, #bfdbfe 45%, #60a5fa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="light"] .brand-title {
  background-image: linear-gradient(95deg, #0f172a 0%, #1e40af 60%, #2563eb 100%);
}
.brand-sub {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* ===================== Sidebar collapse ===================== */
.sb-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .5rem; font-size: 1.05rem;
  border: 1px solid rgba(148,163,184,.35); background: transparent; cursor: pointer;
  line-height: 1; user-select: none;
}
.sb-toggle:hover { background: rgba(148,163,184,.15); }
html[data-sidebar="collapsed"] #sidebar { display: none; }