/* Tema KajiData. Warna Tailwind (lihat js/tailwind.config.js) membaca variabel di sini, jadi template cukup
   memakai kelas biasa dan seluruh situs ikut berganti tema. .theme-static menjaga area yang selalu gelap
   (sidebar konsol, blok kode, panel login) tetap memakai nilai aslinya. */
:root, .theme-static {
  --surface: 255 255 255;
  --slate-50: 248 250 252; --slate-100: 241 245 249; --slate-200: 226 232 240; --slate-300: 203 213 225; --slate-400: 148 163 184; --slate-500: 100 116 139; --slate-600: 71 85 105; --slate-700: 51 65 85; --slate-800: 30 41 59; --slate-900: 15 23 42; --slate-950: 2 6 23;
  --brand-50: 236 253 245; --brand-100: 209 250 229; --brand-200: 167 243 208; --brand-300: 110 231 183; --brand-400: 52 211 153; --brand-500: 16 185 129; --brand-600: 5 150 105; --brand-700: 4 120 87; --brand-800: 6 95 70; --brand-900: 6 78 59; --brand-950: 2 44 34;
  --red-50: 254 242 242; --red-100: 254 226 226; --red-200: 254 202 202; --red-300: 252 165 165; --red-400: 248 113 113; --red-500: 239 68 68; --red-600: 220 38 38; --red-700: 185 28 28; --red-800: 153 27 27; --red-900: 127 29 29; --red-950: 69 10 10;
  --amber-50: 255 251 235; --amber-100: 254 243 199; --amber-200: 253 230 138; --amber-300: 252 211 77; --amber-400: 251 191 36; --amber-500: 245 158 11; --amber-600: 217 119 6; --amber-700: 180 83 9; --amber-800: 146 64 14; --amber-900: 120 53 15; --amber-950: 69 26 3;
  --sky-50: 240 249 255; --sky-100: 224 242 254; --sky-200: 186 230 253; --sky-300: 125 211 252; --sky-400: 56 189 248; --sky-500: 14 165 233; --sky-600: 2 132 199; --sky-700: 3 105 161; --sky-800: 7 89 133; --sky-900: 12 74 110; --sky-950: 8 47 73;
}
.theme-icon-sun { display: none; }

/* Hanya layar: hasil cetak dan PDF selalu terang. Gambar unduhan dibuat server, jadi juga selalu terang. */
@media screen {
  html.dark {
    color-scheme: dark;
  --surface: 20 27 41;
  --slate-50: 14 20 32; --slate-100: 31 40 56; --slate-200: 43 53 69; --slate-300: 59 70 88; --slate-400: 124 138 160; --slate-500: 148 163 184; --slate-600: 180 191 205; --slate-700: 203 213 225; --slate-800: 226 232 240; --slate-900: 241 245 249; --slate-950: 248 250 252;
  --brand-50: 6 44 36; --brand-100: 6 60 47; --brand-200: 6 95 70; --brand-300: 4 120 87; --brand-400: 52 211 153; --brand-500: 16 185 129; --brand-600: 52 211 153; --brand-700: 110 231 183; --brand-800: 167 243 208; --brand-900: 209 250 229; --brand-950: 236 253 245;
  --red-50: 62 20 24; --red-100: 80 24 28; --red-200: 110 34 38; --red-300: 150 50 50; --red-400: 248 113 113; --red-500: 239 68 68; --red-600: 248 113 113; --red-700: 252 165 165; --red-800: 254 202 202; --red-900: 254 226 226; --red-950: 254 242 242;
  --amber-50: 56 38 8; --amber-100: 72 48 8; --amber-200: 104 70 12; --amber-300: 140 96 16; --amber-400: 251 191 36; --amber-500: 245 158 11; --amber-600: 251 191 36; --amber-700: 252 211 77; --amber-800: 253 230 138; --amber-900: 254 243 199; --amber-950: 255 251 235;
  --sky-50: 12 44 66; --sky-100: 12 58 84; --sky-200: 14 80 112; --sky-300: 14 104 144; --sky-400: 56 189 248; --sky-500: 14 165 233; --sky-600: 56 189 248; --sky-700: 125 211 252; --sky-800: 186 230 253; --sky-900: 224 242 254; --sky-950: 240 249 255;
    --series-1: #3987e5; --series-2: #d95926; --chart-grid: #2b3545; --chart-text: #94a3b8;
  }
  html.dark .theme-icon-sun { display: inline; }
  html.dark .theme-icon-moon { display: none; }
  /* Tombol utama gelap menjadi terang, jadi tulisannya ikut berbalik. */
  html.dark .bg-slate-900.text-white:not(.theme-static, .theme-static *) { color: rgb(15 23 42); }
  html.dark dialog::backdrop { background: rgb(0 0 0 / 0.6); }
  html.dark [type="checkbox"]:not(:checked), html.dark [type="radio"]:not(:checked) { background-color: rgb(var(--surface)); }
  html.dark img[data-keep-light] { background: #fff; }

  /* Grafik: warna seri dipilih khusus untuk latar gelap dan lolos validasi buta warna (bukan sekadar dibalik). */
  html.dark svg[role="img"] [stroke="#2a78d6"] { stroke: #3987e5; }
  html.dark svg[role="img"] [fill="#2a78d6"] { fill: #3987e5; }
  html.dark [style*="background:#2a78d6"] { background: #3987e5 !important; }
  html.dark svg[role="img"] [stroke="#eb6834"] { stroke: #d95926; }
  html.dark svg[role="img"] [fill="#eb6834"] { fill: #d95926; }
  html.dark [style*="background:#eb6834"] { background: #d95926 !important; }
  html.dark svg[role="img"] [stroke="#1baf7a"] { stroke: #199e70; }
  html.dark svg[role="img"] [fill="#1baf7a"] { fill: #199e70; }
  html.dark [style*="background:#1baf7a"] { background: #199e70 !important; }
  html.dark svg[role="img"] [stroke="#eda100"] { stroke: #c98500; }
  html.dark svg[role="img"] [fill="#eda100"] { fill: #c98500; }
  html.dark [style*="background:#eda100"] { background: #c98500 !important; }
  html.dark svg[role="img"] [fill="#334155"] { fill: #cbd5e1; }
  html.dark svg[role="img"] [fill="#475569"] { fill: #aab6c6; }
  html.dark svg[role="img"] [fill="#64748b"] { fill: #94a3b8; }
  html.dark svg[role="img"] [fill="#b6bfca"] { fill: #4b586b; }
  html.dark svg[role="img"] [fill="#eef1f4"] { fill: #242d3d; }
  html.dark svg[role="img"] [stroke="#e2e8f0"] { stroke: #2b3545; }
  html.dark svg[role="img"] [stroke="#cbd5e1"] { stroke: #3b4657; }
  html.dark svg[role="img"] [stroke="#475569"] { stroke: #94a3b8; }
  html.dark svg[role="img"] [stroke="#0f172a"] { stroke: #e2e8f0; }
  html.dark svg[role="img"] [stroke="#ffffff"] { stroke: #141b29; }
  html.dark svg[role="img"] .viz-box { fill: #104281; }
  html.dark [style*="background:#f1f5f9"] { background: #1f2838 !important; color: #94a3b8 !important; }
}

/* Lebar isi halaman, sama untuk navbar dan semua konten: lebar tiap breakpoint ditambah 50px. */
.wrap { width: 100%; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .wrap { max-width: 690px; padding-inline: 1.25rem; } }
@media (min-width: 768px) { .wrap { max-width: 818px; } }
@media (min-width: 1024px) { .wrap { max-width: 1074px; padding-inline: 2rem; } }
@media (min-width: 1280px) { .wrap { max-width: 1330px; } }
@media (min-width: 1536px) { .wrap { max-width: 1586px; } }