/* ============================================================================
   Surya Pro — PALET TEMA (diatur superadmin lewat /superadmin/tema)

   Berkas ini HANYA menukar warna. Susunan halaman, ukuran huruf, jarak, dan
   seluruh fitur TIDAK berubah sama sekali.

   Cara kerja: setiap tema menimpa "variabel warna" yang sudah dipakai oleh
   static/style.css (area admin) dan static/catalog.css (halaman pelanggan).
   Dua halaman itu dipisah oleh penanda pada <body>:

     body.shell-admin    -> halaman admin / sistem (Daftar Barang, form, user)
     body.shell-katalog  -> halaman pelanggan (etalase katalog)

   Tema "gelap" sengaja SAMA PERSIS dengan tampilan Surya Pro sebelumnya,
   sehingga yang belum memilih tema tidak melihat perubahan apa pun.

   Semua pasangan warna sudah diukur rasio kontrasnya (rumus WCAG) lewat
   tests/cek_kontras_tema_local.py supaya tulisan tidak ada yang sulit dibaca.

   PENTING: jangan menulis pasangan tanda bintang-garis-miring di dalam teks
   komentar (bisa menelan aturan CSS berikutnya tanpa pesan galat).
   ============================================================================ */

/* ─── 1. MODE GELAP (bawaan — tampilan lama, tidak berubah) ───────────────── */
body.shell-admin.tema-gelap {
  --bg: #0d1117;
  --bg-2: #161b22;
  --card: #161b22;
  --border: #21262d;
  --text: #c9d1d9;
  --muted: #8b949e;
  --accent: #00ff41;
  --accent-rgb: 0, 255, 65;
  --accent-dim: rgba(0, 255, 65, 0.12);
  --on-accent: #001a00;
  --danger: #ff5555;
  --danger-rgb: 255, 85, 85;
  --warn: #ffc800;
  --warn-rgb: 255, 200, 0;
}
body.shell-katalog.tema-gelap {
  --navy: #091e40;
  --navy-deep: #051230;
  --navy-soft: #122a56;
  --navy-panel: #0d2249;
  --navy-soft-rgb: 18, 42, 86;
  --navy-deep-rgb: 5, 18, 48;
  --orange: #f97316;
  --orange-dark: #ea580c;
  --orange-soft: #fff4ec;
  --accent-softer: #fde0cf;
  --orange-rgb: 249, 115, 22;
  --bg: #eef1f6;
  --bg-2: #e2e8f0;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --garis: #c3cad6;
}

/* ─── 2. PASTEL PINK ──────────────────────────────────────────────────────── */
body.shell-admin.tema-pink {
  --bg: #fdf1f5;
  --bg-2: #ffe7ef;
  --card: #ffffff;
  --border: #f4cedb;
  --text: #462936;
  --muted: #7f5d6a;
  --accent: #c9457a;
  --accent-rgb: 201, 69, 122;
  --accent-dim: rgba(201, 69, 122, 0.14);
  --on-accent: #ffffff;
  --danger: #b23a2e;
  --danger-rgb: 178, 58, 46;
  --warn: #a8720a;
  --warn-rgb: 168, 114, 10;
}
body.shell-katalog.tema-pink {
  --navy: #8a3d5c;
  --navy-deep: #6b2c46;
  --navy-soft: #a85470;
  --navy-panel: #9b4a68;
  --navy-soft-rgb: 168, 84, 112;
  --navy-deep-rgb: 107, 44, 70;
  --orange: #c74375;
  --orange-dark: #b23a68;
  --orange-soft: #fff2f7;
  --accent-softer: #f9d7e4;
  --orange-rgb: 199, 67, 117;
  --bg: #fdeef3;
  --bg-2: #f7dde7;
  --card: #ffffff;
  --text: #43262f;
  --muted: #8d6b75;
  --garis: #f0cdd9;
}

/* ─── 3. PASTEL BLUE ──────────────────────────────────────────────────────── */
body.shell-admin.tema-biru {
  --bg: #f1f7fd;
  --bg-2: #e5f0fb;
  --card: #ffffff;
  --border: #c8dcf0;
  --text: #21354a;
  --muted: #5b7388;
  --accent: #2b74b5;
  --accent-rgb: 43, 116, 181;
  --accent-dim: rgba(43, 116, 181, 0.14);
  --on-accent: #ffffff;
  --danger: #b23a2e;
  --danger-rgb: 178, 58, 46;
  --warn: #a8720a;
  --warn-rgb: 168, 114, 10;
}
body.shell-katalog.tema-biru {
  --navy: #274a73;
  --navy-deep: #1b3557;
  --navy-soft: #3a6390;
  --navy-panel: #2c537f;
  --navy-soft-rgb: 58, 99, 144;
  --navy-deep-rgb: 27, 53, 87;
  --orange: #3a7cc2;
  --orange-dark: #33689f;
  --orange-soft: #eff6fd;
  --accent-softer: #d9e8f7;
  --orange-rgb: 58, 124, 194;
  --bg: #eef4fb;
  --bg-2: #dde9f6;
  --card: #ffffff;
  --text: #20303f;
  --muted: #64798c;
  --garis: #c9dcf0;
}

/* ─── 4. KRIM PUTIH ───────────────────────────────────────────────────────── */
body.shell-admin.tema-krem {
  --bg: #faf7f0;
  --bg-2: #f2ecdf;
  --card: #fffdf8;
  --border: #e1d8c5;
  --text: #34302a;
  --muted: #77705f;
  --accent: #8a6a3b;
  --accent-rgb: 138, 106, 59;
  --accent-dim: rgba(138, 106, 59, 0.14);
  --on-accent: #ffffff;
  --danger: #a04a40;
  --danger-rgb: 160, 74, 64;
  --warn: #8f6a0f;
  --warn-rgb: 143, 106, 15;
}
body.shell-katalog.tema-krem {
  --navy: #55452f;
  --navy-deep: #3e3222;
  --navy-soft: #6b573c;
  --navy-panel: #5d4c34;
  --navy-soft-rgb: 107, 87, 60;
  --navy-deep-rgb: 62, 50, 34;
  --orange: #977340;
  --orange-dark: #8a6a38;
  --orange-soft: #fbf6ec;
  --accent-softer: #f0e5d1;
  --orange-rgb: 151, 115, 64;
  --bg: #f7f2e8;
  --bg-2: #f0e9db;
  --card: #fffdf7;
  --text: #3a352c;
  --muted: #7d7666;
  --garis: #ddd4c1;
}

/* ─── 5. PASTEL ORANGE ────────────────────────────────────────────────────── */
body.shell-admin.tema-oranye {
  --bg: #fef5ee;
  --bg-2: #ffe9da;
  --card: #ffffff;
  --border: #f6d3ba;
  --text: #46301f;
  --muted: #87705c;
  --accent: #b8571a;
  --accent-rgb: 184, 87, 26;
  --accent-dim: rgba(184, 87, 26, 0.14);
  --on-accent: #ffffff;
  --danger: #b23a2e;
  --danger-rgb: 178, 58, 46;
  --warn: #a8720a;
  --warn-rgb: 168, 114, 10;
}
body.shell-katalog.tema-oranye {
  --navy: #7a4a2b;
  --navy-deep: #5c3720;
  --navy-soft: #96593a;
  --navy-panel: #86502e;
  --navy-soft-rgb: 150, 89, 58;
  --navy-deep-rgb: 92, 55, 32;
  --orange: #c25f20;
  --orange-dark: #b3561b;
  --orange-soft: #fff2e6;
  --accent-softer: #fbdfc8;
  --orange-rgb: 194, 95, 32;
  --bg: #fdf0e6;
  --bg-2: #f9e4d2;
  --card: #ffffff;
  --text: #46301f;
  --muted: #8a7060;
  --garis: #f0d6bf;
}

/* ─── Penyesuaian kecil supaya tema terang tetap enak dipakai ───────────── */
body.shell-admin.tema-pink .table-wrap table tbody tr:hover,
body.shell-admin.tema-biru .table-wrap table tbody tr:hover,
body.shell-admin.tema-krem .table-wrap table tbody tr:hover,
body.shell-admin.tema-oranye .table-wrap table tbody tr:hover {
  background: var(--accent-dim);
}

body.shell-katalog.tema-pink .phone-frame,
body.shell-katalog.tema-biru .phone-frame,
body.shell-katalog.tema-krem .phone-frame,
body.shell-katalog.tema-oranye .phone-frame {
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ─── Kartu pilihan tema di halaman Pengaturan Tema ──────────────────────── */
.tema-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.tema-card {
  border: 2px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.tema-card.aktif { border-color: var(--accent); }
.tema-contoh { display: flex; height: 62px; }
.tema-contoh span { flex: 1; }
.tema-info { padding: 12px 14px 14px; }
.tema-nama { font-weight: 700; font-size: 15px; color: var(--text); }
.tema-ket { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }
.tema-pil {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--border);
}
.tema-pil.pakai { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }