/* ==============================================================
   GLASS THEME — satu-satunya sumber pengaturan glassmorphism
   untuk seluruh sistem (login, dashboard, toast notifikasi).

   Mau ganti "rasa" glass di SEMUA halaman? Cukup ubah variable
   di :root / [data-theme="dark"] di bawah ini. Tidak perlu
   sentuh style.css, dashboardsuperadmin.html, atau notifikasi-toast.js
   satu-satu lagi.
============================================================== */

:root {
  /* --- Kekuatan blur, dipakai semua permukaan kaca --- */
  --glass-blur: 6px;

  /* --- Latar halaman (dipakai halaman data/tabel) --- */
  --body-bg: #f5f7fb;

  /* --- Warna teks --- */
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-muted: #a0aec0;

  /* --- Warna brand/aksen --- */
  --brand: #2b6cb0;
  --brand-hover: #2c5282;
  --brand-underline: rgba(43, 108, 176, 0.2);

  /* --- Resep glassmorphism (hype4.academy generator: blur 6, refraction 0.05, depth 0) ---
     --glass-a  : dipakai elemen "tipis" (sidebar, topbar, tombol bulat, dst)
     --card-a   : dipakai kartu/modal/toast (angka sama, dipisah biar bisa
                  dibedakan nanti kalau perlu tanpa ubah semantik nama)      */
  --glass-a: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: rgba(0, 0, 0, 0.1);

  --card-a: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.3);
  --card-shadow: rgba(0, 0, 0, 0.1);
  --card-hover-a: rgba(255, 255, 255, 0.1);
  --card-hover-shadow: rgba(0, 0, 0, 0.14);

  --input-bg: rgba(255, 255, 255, 0.6);
  --input-bg-hover: rgba(255, 255, 255, 0.9);
  --input-border: rgba(255, 255, 255, 0.5);

  /* ==============================================================
     KELUARGA KE-2: "LIQUID GLASS" — dipakai halaman data/tabel
     (datatam, tracker, datapdi, auditor, datalocal, revisi).
     Beda resep sengaja: gradient dua warna + blur lebih tebal +
     saturate() + inset highlight, biar kesan lebih "basah/premium"
     dibanding flat glass di atas (login/dashboard).
  ============================================================== */
  --liquid-a: rgba(255, 255, 255, 0.34);
  --liquid-b: rgba(255, 255, 255, 0.16);
  --liquid-border: rgba(255, 255, 255, 0.4);
  --liquid-inset-hi: rgba(255, 255, 255, 0.6);
  --panel-shadow: rgba(31, 38, 135, 0.2);

  --stat-bg: rgba(255, 255, 255, 0.5);
  --table-header-bg: #d1dceb;
  --table-border: rgba(255, 255, 255, 0.5);
  --table-row-hover: rgba(255, 255, 255, 0.4);
  --divider: #e2e8f0;

  /* FAB & Toast — liquid glass lebih pekat */
  --fab-a: rgba(255, 255, 255, 0.58);
  --fab-b: rgba(255, 255, 255, 0.32);
  --fab-inset-hi: rgba(255, 255, 255, 0.95);
  --fab-inset-glow: rgba(255, 255, 255, 0.18);
  --fab-border: rgba(255, 255, 255, 0.85);

  /* Modal (preview/rename/edit) */
  --modal-a: rgba(255, 255, 255, 0.58);
  --modal-b: rgba(255, 255, 255, 0.32);
  --modal-c: rgba(255, 255, 255, 0.46);
  --modal-inset-hi: rgba(255, 255, 255, 0.95);
  --modal-inset-glow: rgba(255, 255, 255, 0.18);
  --modal-border: rgba(255, 255, 255, 0.85);
  --modal-img-border: rgba(255, 255, 255, 0.6);

  /* Panel kiri "Klinik Revisi" (revisi.html) */
  --item-bg: rgba(255, 255, 255, 0.6);
  --item-bg-hover: rgba(255, 255, 255, 0.9);

  --particle-line: 89,120,182;
}

[data-theme="dark"] {
  --body-bg: #0e1420;
  --text-primary: #e8ecf5;
  --text-secondary: #a9b6cc;
  --text-muted: #6b7891;

  --brand: #6fa8dc;
  --brand-hover: #8dbbe6;
  --brand-underline: rgba(111, 168, 220, 0.25);

  --glass-a: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-shadow: rgba(0, 0, 0, 0.4);

  --card-a: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.16);
  --card-shadow: rgba(0, 0, 0, 0.4);
  --card-hover-a: rgba(255, 255, 255, 0.09);
  --card-hover-shadow: rgba(0, 0, 0, 0.5);

  --input-bg: rgba(255, 255, 255, 0.08);
  --input-bg-hover: rgba(255, 255, 255, 0.14);
  --input-border: rgba(255, 255, 255, 0.16);

  --liquid-a: rgba(255, 255, 255, 0.09);
  --liquid-b: rgba(255, 255, 255, 0.03);
  --liquid-border: rgba(255, 255, 255, 0.12);
  --liquid-inset-hi: rgba(255, 255, 255, 0.16);
  --panel-shadow: rgba(0, 0, 0, 0.4);

  --stat-bg: rgba(255, 255, 255, 0.06);
  --table-header-bg: #1b2536;
  --table-border: rgba(255, 255, 255, 0.1);
  --table-row-hover: rgba(255, 255, 255, 0.06);
  --divider: rgba(255, 255, 255, 0.12);

  --fab-a: rgba(255, 255, 255, 0.13);
  --fab-b: rgba(255, 255, 255, 0.04);
  --fab-inset-hi: rgba(255, 255, 255, 0.28);
  --fab-inset-glow: rgba(255, 255, 255, 0.08);
  --fab-border: rgba(255, 255, 255, 0.16);

  --modal-a: rgba(255, 255, 255, 0.13);
  --modal-b: rgba(255, 255, 255, 0.04);
  --modal-c: rgba(255, 255, 255, 0.08);
  --modal-inset-hi: rgba(255, 255, 255, 0.28);
  --modal-inset-glow: rgba(255, 255, 255, 0.08);
  --modal-border: rgba(255, 255, 255, 0.16);
  --modal-img-border: rgba(255, 255, 255, 0.16);

  --item-bg: rgba(255, 255, 255, 0.06);
  --item-bg-hover: rgba(255, 255, 255, 0.14);

  --particle-line: 110,145,210;
}

/* ==============================================================
   UTILITY CLASS — tinggal tempel class="glass" di elemen mana pun
   yang butuh efek kaca. Radius/padding/posisi tetap diatur di CSS
   masing-masing elemen seperti biasa. TANPA border, TANPA shadow —
   satu resep blur yang sama dipakai di seluruh sistem.
============================================================== */
.glass {
  background: var(--glass-a);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 2px 10px var(--glass-shadow);
}

.glass-card {
  background: var(--card-a);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 2px 10px var(--card-shadow);
}

.glass-card:hover {
  background: var(--card-hover-a);
}

/* ==============================================================
   UTILITY "LIQUID GLASS" — dipakai halaman data/tabel (panel filter,
   table-container, chart-panel). Sekarang resepnya SAMA PERSIS dengan
   .glass di atas (flat, blur 6px, tanpa border/shadow), cuma warnanya
   beda (lebih terang) lewat --liquid-a.
============================================================== */
.liquid-glass {
  background: var(--liquid-a);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 2px 10px var(--panel-shadow);
}

/* Kartu modal (preview PDF, edit noka, rename, dst) — blur HANYA di
   badan kartu ini sendiri. Overlay gelap di belakangnya TIDAK diblur
   (lihat .modal-overlay per halaman), jadi cuma kartunya yang kaca. */
.liquid-modal {
  background: var(--modal-a);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 4px 16px var(--panel-shadow);
}

/* Tombol FAB (Divisi 1-4) & toast progress — dipakai di datatam.html & auditor.html */
.liquid-fab {
  background: var(--fab-a);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 2px 10px var(--panel-shadow);
}