/* =========================================================
   SIMOPRO v4 — DESIGN SYSTEM
   Dark  : Prism — Cyan · Sky + Lime
   Light : Warm Ivory — Krem hangat, ramah mata
   ========================================================= */

/* ── DARK MODE (default) ── */
:root {
  /* Backgrounds — slate biru-laut, bukan pitch black */
  --bg0:#080f14;
  --bg1:#0d1821;
  --bg2:#112030;
  --bg3:#152638;
  --bg4:#1a2d41;
  --bg5:#1f3449;

  /* Borders */
  --bdr:rgba(255,255,255,.07);
  --bdr2:rgba(255,255,255,.12);
  --bdr3:rgba(255,255,255,.20);

  /* Text — lebih terang untuk High Contrast di monitor produksi */
  --txt:#e8f8ff;
  --txt2:#8bc4d8;
  --txt3:#4a8aaa;
  --txt4:#2a5570;

  /* Amber — HANYA login btn / CTA eksklusif */
  --amber:#fbbf24;
  --amber2:#d4a017;
  --amber-dim:rgba(251,191,36,.11);

  /* Cyan — primary Prism (nav active, logo, focus, tab) */
  --teal:#22d3ee;
  --teal2:#06b6d4;
  --teal-dim:rgba(34,211,238,.11);

  /* Lime — accent positif (data naik, OEE bagus) */
  --green:#a3e635;
  --green2:#84cc16;
  --green-dim:rgba(163,230,53,.11);

  /* Sky — info / link */
  --blue:#38bdf8;
  --blue-dim:rgba(56,189,248,.11);

  /* Mesin down / error */
  --red:#f87171;
  --red-dim:rgba(248,113,113,.11);

  /* Idle / peringatan ringan */
  --yellow:#fcd34d;
  --yellow-dim:rgba(252,211,77,.11);

  /* Maintenance */
  --purple:#a78bfa;

  /* Alias — dipakai di index.html/script.js (nama lama), disamakan ke token resmi
     supaya ikut berubah otomatis mengikuti tema terang/gelap. Ini yang membuat
     tombol "Tambah/Simpan/Buat" sebelumnya transparan + teks putih di mode terang. */
  --accent:     var(--teal);
  --accent-rgb: 34,211,238;
  --txt1:       var(--txt);

  /* Typography */
  --mono:'JetBrains Mono',monospace;
  --display:'Syne',sans-serif;
  --body:'DM Sans',sans-serif;

  /* Layout — tidak diubah */
  --sw:240px;
  --th:52px;
  --rad:6px;
  --rad2:10px;

  /* Shadow & overlay */
  --shadow:0 2px 12px rgba(0,0,0,.50);
  --modal-overlay-bg:rgba(0,0,0,.68);
  --login-glow:0 0 40px rgba(34,211,238,.07);
}

/* ── LIGHT MODE — WARM IVORY ── */
[data-theme="light"] {

  /* Backgrounds — krem berlapis, makin dalam makin hangat */
  --bg0:#f5f0e8;   /* page bg  — krem utama         */
  --bg1:#fffdf8;   /* sidebar, topbar — putih gading */
  --bg2:#fffdf8;   /* card, panel — putih gading     */
  --bg3:#ede8de;   /* inner card, input bg           */
  --bg4:#e4ddd0;   /* hover state                    */
  --bg5:#d8cfc0;   /* active / scrollbar thumb       */

  /* Borders — coklat warm, bukan abu dingin */
  --bdr:rgba(80,50,10,.10);
  --bdr2:rgba(80,50,10,.17);
  --bdr3:rgba(80,50,10,.28);

  /* Text — coklat tua, bukan hitam murni */
  --txt:#1c1208;   /* primary — coklat tinta  */
  --txt2:#4a3518;  /* secondary               */
  --txt3:#8a6840;  /* muted / label           */
  --txt4:#c0a07a;  /* disabled / placeholder  */

  /* Amber — sedikit lebih gelap agar kontras di bg warm */
  --amber:#b87310;
  --amber2:#8f5608;
  --amber-dim:rgba(184,115,16,.12);

  /* Cyan — diturunkan agar kontras di atas krem */
  --teal:#0779a0;
  --teal2:#055f80;
  --teal-dim:rgba(7,121,160,.11);

  /* Lime — diturunkan untuk kontras */
  --green:#3d7a0a;
  --green2:#2d5e06;
  --green-dim:rgba(61,122,10,.11);

  --blue:#1668b0;
  --blue-dim:rgba(22,104,176,.10);

  --red:#c0282a;
  --red-dim:rgba(192,40,42,.10);

  --yellow:#9a6b00;
  --yellow-dim:rgba(154,107,0,.11);

  --purple:#7030c0;

  /* Alias — samakan dengan mode terang (lihat catatan di :root) */
  --accent-rgb: 7,121,160;

  /* Shadow & overlay */
  --shadow:0 2px 12px rgba(80,50,10,.14);
  --modal-overlay-bg:rgba(28,18,8,.55);
  --login-glow:0 0 40px rgba(7,121,160,.06);
}

/* ── BASE ── */
* { box-sizing:border-box; margin:0; padding:0 }
body {
  font-family: var(--body);
  background:  var(--bg0);
  color:       var(--txt);
  min-height:  100vh;
  display:     flex;
  overflow-x:  hidden;
  transition:  background .25s ease, color .25s ease;
}

/* ── THEME TRANSITION ── */
*, *::before, *::after {
  transition:
    background-color .25s ease,
    border-color     .25s ease,
    color            .2s  ease,
    box-shadow       .25s ease;
}
.logo-dot, .sp-down .sp-dot, .pill-live i,
.btn, .nav-item, .mach-card, .is-cell,
.tab-btn, .icon-btn, .del-btn, .modal-close {
  transition:
    background-color .15s ease,
    border-color     .15s ease,
    color            .15s ease,
    transform        .15s ease,
    opacity          .15s ease;
}

/* ── LIGHT MODE OVERRIDES — Komponen spesifik ── */

/* Tabel hover — warm tint */
[data-theme="light"] .tbl tbody tr:hover {
  background: rgba(80,50,10,.03);
}

/* ri-row active */
[data-theme="light"] .ri-row:active td {
  background: rgba(7,121,160,.06);
}

/* Input focus — cyan warm ivory */
[data-theme="light"] .fg input:focus,
[data-theme="light"] .fg select:focus,
[data-theme="light"] .fg textarea:focus {
  border-color: var(--teal);
  box-shadow:   0 0 0 3px rgba(7,121,160,.13);
}

/* Nav active light — cyan */
[data-theme="light"] .nav-item.active {
  background:        var(--teal-dim);
  color:             var(--teal);
  border-left-color: var(--teal);
}
[data-theme="light"] .nav-item:hover {
  background: var(--bg3);
  color:      var(--txt);
}

/* Tab active light — cyan */
[data-theme="light"] .tab-btn.active {
  color:              var(--teal);
  border-bottom-color:var(--teal);
}

/* Form section title light — cyan */
[data-theme="light"] .fs-title {
  color:        var(--teal);
  border-bottom-color: var(--teal-dim);
}

/* OEE fill light — cyan */
[data-theme="light"] .oee-fill {
  background: var(--teal);
}

/* Card shadow ringan — memberi kedalaman di atas bg krem */
[data-theme="light"] .card,
[data-theme="light"] .metric,
[data-theme="light"] .mach-card {
  box-shadow: 0 1px 3px rgba(80,50,10,.08);
}

/* Metric bar track — warm */
[data-theme="light"] .bar-mini {
  background: var(--bg4);
}

/* Scrollbar — warm ivory */
[data-theme="light"] ::-webkit-scrollbar       { width:6px; height:6px }
[data-theme="light"] ::-webkit-scrollbar-track  { background:var(--bg3) }
[data-theme="light"] ::-webkit-scrollbar-thumb  { background:var(--bg5); border-radius:3px }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:var(--txt4) }

/* Scrollbar — dark */
::-webkit-scrollbar       { width:6px; height:6px }
::-webkit-scrollbar-track  { background:var(--bg2) }
::-webkit-scrollbar-thumb  { background:var(--bg5); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--txt4) }

/* Modal overlay */
[data-theme="light"] .modal-overlay { background:var(--modal-overlay-bg) }

/* Login box shadow */
[data-theme="light"] .login-box {
  box-shadow: var(--login-glow), 0 4px 24px rgba(80,50,10,.14);
}

/* Snackbar light */
[data-theme="light"] #snack {
  background:  var(--bg2);
  border-color: var(--bdr2);
  color:        var(--txt);
  box-shadow:   0 4px 20px rgba(80,50,10,.18);
}

/* Chart.js */
[data-theme="light"] canvas { filter:none }

/* ── LAP-CLASSIC — HIGH CONTRAST ──
   Dihapus: background:white !important (biang keladi card putih di dark mode)
   Diganti: mengikuti tema + styling High Contrast lap-classic ada di ui.css */
.lap-classic {
  background: transparent;
  color:      var(--txt);
}
[data-theme="light"] .lap-classic {
  background: var(--bg2);
  color:      var(--txt);
}

/* ── TOGGLE BUTTON — Warm Ivory: toggle pakai cyan ── */
.theme-toggle {
  width:         34px;
  height:        20px;
  border-radius: 10px;
  background:    var(--bg5);
  border:        1px solid var(--bdr2);
  position:      relative;
  cursor:        pointer;
  flex-shrink:   0;
  transition:    background .25s ease;
  padding:       0;
  display:       flex;
  align-items:   center;
}
.theme-toggle::after {
  content:       '';
  position:      absolute;
  left:          2px;
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    var(--txt3);
  transition:    transform .25s ease, background .25s ease;
}
[data-theme="light"] .theme-toggle {
  background:   var(--teal-dim);
  border-color: var(--teal);
}
[data-theme="light"] .theme-toggle::after {
  transform:  translateX(14px);
  background: var(--teal);
}
.theme-toggle-wrap {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.theme-toggle-icon {
  font-size:  11px;
  color:      var(--txt3);
  transition: color .2s;
}
[data-theme="light"] .theme-toggle-icon { color:var(--teal) }