/* theme.css – global design tokens (dark default + light override)
   + bridge ke variabel Bootstrap (bs-body-color, card, dll)
*/

/* Prefer dark, tapi tetap support light */
:root {
  color-scheme: dark light;

  /* =======================================
     DARK THEME – DEFAULT
     ======================================= */
  /* Base backgrounds */
  --bg: #000000;
  --bg-2: #161618;
  --bg-3: #212124;

  /* Surfaces */
  --surface: #161618;
  --surface-2: #212124;
  --surface-login: #161618;
  --bg-muted: #161618;

  /* Text */
  --text: #ffffff;
  --txt: #ffffff;
  --muted: #818181;
  --placeholder: #818181;

  /* Borders */
  --border: #212124;
  --border-soft: #2c2c2e;
  --border-focus: #0a84ff;

  /* Accent / primary */
  --accent: #0a84ff;
  --acc: #0a84ff;
  --hover: #212124;

  /* Semantic colors */
  --danger: #ff453a;
  --success: #32d74b;
  --success-soft: rgba(50,215,75,.18);
  --warning: #ffd60a;
  --warning-soft: rgba(255,214,10,.20);
  --info: #0a84ff;
  --info-soft: rgba(10,132,255,.18);

  /* Gradient background global */
  --bg-gradient: linear-gradient(180deg,#000000,#161618 60%);

  /* Shadows */
  --shadow-soft: 0 10px 24px rgba(0,0,0,.5);
  --shadow-strong: 0 18px 45px rgba(0,0,0,.7);

  /* ===== Bridge ke Bootstrap (body & card) ===== */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
}

/* Explicit kalau html punya data-theme="dark" */
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #161618;
  --bg-3: #212124;

  --surface: #161618;
  --surface-2: #212124;
  --surface-login: #161618;
  --bg-muted: #161618;

  --text: #ffffff;
  --txt: #ffffff;
  --muted: #818181;
  --placeholder: #818181;

  --border: #212124;
  --border-soft: #2c2c2e;
  --border-focus: #0a84ff;

  --accent: #0a84ff;
  --acc: #0a84ff;
  --hover: #212124;

  --danger: #ff453a;
  --success: #32d74b;
  --success-soft: rgba(50,215,75,.18);
  --warning: #ffd60a;
  --warning-soft: rgba(255,214,10,.20);
  --info: #0a84ff;
  --info-soft: rgba(10,132,255,.18);

  --bg-gradient: linear-gradient(180deg,#000000,#161618 60%);

  --shadow-soft: 0 10px 24px rgba(0,0,0,.5);
  --shadow-strong: 0 18px 45px rgba(0,0,0,.7);

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
}

/* =======================================
   LIGHT THEME – hanya saat data-theme="light"
   ======================================= */
:root[data-theme="light"] {
  /* Base backgrounds */
  --bg: #ffffff;
  --bg-2: #f2f2f7;
  --bg-3: #e5e5ea;

  /* Surfaces */
  --surface: #f9fafb;
  --surface-2: #ffffff;
  --surface-login: #ffffff;
  --bg-muted: #f9fafb;

  /* Text */
  --text: #111111;
  --txt: #111111;
  --muted: #818181;
  --placeholder: #9e9e9e;

  /* Borders */
  --border: #d1d5db;
  --border-soft: #e5e5ea;
  --border-focus: #0a84ff;

  /* Accent / primary */
  --accent: #0a84ff;
  --acc: #0a84ff;
  --hover: #e5e5ea;

  /* Semantic colors */
  --danger: #ff3b30;
  --success: #34c759;
  --success-soft: rgba(52,199,89,.08);
  --warning: #ffcc00;
  --warning-soft: rgba(255,204,0,.10);
  --info: #0a84ff;
  --info-soft: rgba(10,132,255,.08);

  /* Gradient background global */
  --bg-gradient: linear-gradient(180deg,#f2f2f7,#ffffff 60%);

  /* Shadows */
  --shadow-soft: 0 8px 22px rgba(0,0,0,.06);
  --shadow-strong: 0 12px 30px rgba(0,0,0,.15);

  /* Bridge ke Bootstrap */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
}

/* ===== Base layout & komponen utama ===== */

body {
  background: var(--bg-gradient);
  color: var(--text);
}

/* Card / panel utama ikut tema */
.card,
.card-body {
  background-color: var(--surface);
  color: var(--text);
}

.modal-content {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--border-soft);
}

/* =======================================================
   TABLE: SELALU LIGHT MODE (tidak ikut dark theme)
   ======================================================= */

/* Di dark mode, paksa table tetap bergaya “light” */
:root[data-theme="dark"] .table {
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: #f8f9fa;
  --bs-table-hover-bg: #f1f3f5;
  --bs-table-border-color: #dee2e6;
  --bs-table-color: #212529;

  background-color: #ffffff;
  color: #212529;
}

/* Pastikan teks di baris striped/hover tetap gelap */
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  color: #212529;
}

:root[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  color: #212529;
}

/* DataTables wrapper ikut netral, supaya tidak kena dark style agresif */
:root[data-theme="dark"] .dataTables_wrapper .dataTables_info,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
  color: #e5e5ea;
}