/* =====================================================================
   TEMPLATE TAMPILAN
   ---------------------------------------------------------------------
   Semua warna, jarak, dan bentuk sudut diambil dari variabel CSS di sini.
   Untuk membuat tema baru, salin salah satu blok [data-tema="..."] di bawah,
   ganti namanya, sesuaikan nilainya, lalu daftarkan namanya pada
   daftar TEMA di /js/tema.js supaya muncul di halaman Tampilan.

   Tidak perlu menyentuh style.css sama sekali.
   ===================================================================== */

/* ---------- TEMA: Navy (bawaan) ---------- */
:root,
[data-tema="navy"] {
  --ink: #0A1220;          /* latar sidebar bagian atas */
  --ink-2: #111B2E;        /* latar sidebar bagian bawah */
  --ink-3: #1B2740;        /* tombol utama saat disorot */
  --surface: #EEF1F5;      /* latar halaman */
  --card: #FFFFFF;         /* latar kartu dan tabel */
  --line: #DCE2E8;         /* garis pembatas */
  --text: #152030;         /* teks utama */
  --muted: #5C6B7C;        /* teks sekunder */
  --cyan: #0891B2;         /* warna aksen */
  --cyan-soft: #E0F6FA;
  --green: #15803D;
  --green-soft: #DCFCE7;
  --green-dot: #22C55E;
  --red: #B91C1C;
  --red-soft: #FEE2E2;
}

/* ---------- TEMA: Teal ---------- */
[data-tema="teal"] {
  --ink: #06231F;
  --ink-2: #0B322B;
  --ink-3: #14483E;
  --surface: #EDF3F1;
  --card: #FFFFFF;
  --line: #D7E3DF;
  --text: #12231F;
  --muted: #5A6F69;
  --cyan: #0D9488;
  --cyan-soft: #D7F5F0;
  --green: #15803D;
  --green-soft: #DCFCE7;
  --green-dot: #22C55E;
  --red: #B91C1C;
  --red-soft: #FEE2E2;
}

/* ---------- TEMA: Slate (netral abu) ---------- */
[data-tema="slate"] {
  --ink: #1E293B;
  --ink-2: #273449;
  --ink-3: #334155;
  --surface: #F1F3F6;
  --card: #FFFFFF;
  --line: #DDE1E8;
  --text: #1B2230;
  --muted: #64748B;
  --cyan: #475569;
  --cyan-soft: #E7EBF1;
  --green: #15803D;
  --green-soft: #DCFCE7;
  --green-dot: #22C55E;
  --red: #B91C1C;
  --red-soft: #FEE2E2;
}

/* ---------- TEMA: Plum ---------- */
[data-tema="plum"] {
  --ink: #1E1030;
  --ink-2: #2A1745;
  --ink-3: #3B2160;
  --surface: #F2EFF7;
  --card: #FFFFFF;
  --line: #E0D9EC;
  --text: #1F1730;
  --muted: #6B6280;
  --cyan: #7C3AED;
  --cyan-soft: #EDE9FE;
  --green: #15803D;
  --green-soft: #DCFCE7;
  --green-dot: #22C55E;
  --red: #B91C1C;
  --red-soft: #FEE2E2;
}

/* ---------- TEMA: Gelap ---------- */
[data-tema="gelap"] {
  --ink: #0B0F17;
  --ink-2: #121826;
  --ink-3: #1E293B;
  --surface: #0F1520;
  --card: #161D2B;
  --line: #29344A;
  --text: #E2E8F0;
  --muted: #93A1B5;
  --cyan: #38BDF8;
  --cyan-soft: #12303F;
  --green: #4ADE80;
  --green-soft: #10331F;
  --green-dot: #22C55E;
  --red: #F87171;
  --red-soft: #3A1717;
}

/* Penyesuaian khusus mode gelap agar elemen berlatar terang ikut menyesuaikan */
[data-tema="gelap"] thead th,
[data-tema="gelap"] .matrix-grup td { background: #1B2334; }
[data-tema="gelap"] tbody td { border-bottom-color: #232D40; }
[data-tema="gelap"] tbody tr:hover { background: #1B2334; }
[data-tema="gelap"] .note-box,
[data-tema="gelap"] .upload-hint { background: #1B2334; }
[data-tema="gelap"] .note-box code,
[data-tema="gelap"] .upload-hint code { background: #0F1520; border-color: var(--line); }
[data-tema="gelap"] .btn { background: var(--card); color: var(--text); }
[data-tema="gelap"] .btn:hover { background: #1E2637; border-color: #3A465F; }
[data-tema="gelap"] .btn.primary { background: var(--cyan); border-color: var(--cyan); color: #0B0F17; }
[data-tema="gelap"] .btn.primary:hover { background: #7DD3FC; }
[data-tema="gelap"] .field input,
[data-tema="gelap"] .field select,
[data-tema="gelap"] .field textarea,
[data-tema="gelap"] .search-box input,
[data-tema="gelap"] select.filter-select,
[data-tema="gelap"] .check-table input[type=text] { background: var(--card); color: var(--text); border-color: var(--line); }
[data-tema="gelap"] .stat-card,
[data-tema="gelap"] .lok-card,
[data-tema="gelap"] .riw-item { background: var(--card); }
[data-tema="gelap"] .progress { background: #232D40; }
[data-tema="gelap"] tbody tr.done { background: #142519; }
[data-tema="gelap"] tbody tr.issue { background: #2A1616; }
[data-tema="gelap"] .badge.draft { background: #3A2E12; color: #FCD34D; }
[data-tema="gelap"] .badge.belum,
[data-tema="gelap"] .aksi-pill { background: #232D40; color: var(--muted); }
[data-tema="gelap"] .hint-akses { background: #3A2E12; color: #FCD34D; }

/* =====================================================================
   KEPADATAN — mengatur jarak dan ukuran huruf secara global
   ===================================================================== */

[data-kepadatan="rapat"] {
  --sidebar-w: 226px;
  --nav-pad: 7px 10px;
  --sel-pad: 8px 14px;
  --baris-pad: 9px 12px;
  --kartu-pad: 12px 14px;
  --skala: 0.94;
}
[data-kepadatan="normal"] {
  --sidebar-w: 252px;
  --nav-pad: 9px 12px;
  --sel-pad: 12px 16px;
  --baris-pad: 13px 16px;
  --kartu-pad: 16px 18px;
  --skala: 1;
}
[data-kepadatan="lega"] {
  --sidebar-w: 278px;
  --nav-pad: 12px 14px;
  --sel-pad: 15px 20px;
  --baris-pad: 17px 20px;
  --kartu-pad: 22px 24px;
  --skala: 1.06;
}

[data-kepadatan] thead th { padding: var(--sel-pad); }
[data-kepadatan] tbody td { padding: var(--baris-pad); }
[data-kepadatan] .panel,
[data-kepadatan] .stat-card,
[data-kepadatan] .lok-card { padding: var(--kartu-pad); }
[data-kepadatan="rapat"] body { font-size: 13px; }
[data-kepadatan="lega"] body { font-size: 15px; }
[data-kepadatan="rapat"] .stat-card .num { font-size: 22px; }
[data-kepadatan="lega"] .stat-card .num { font-size: 30px; }

/* =====================================================================
   SUDUT — bentuk lengkung kartu, tombol, dan input
   ===================================================================== */

[data-sudut="tajam"] { --radius: 2px; }
[data-sudut="sedang"] { --radius: 10px; }
[data-sudut="bulat"] { --radius: 16px; }

[data-sudut="tajam"] .btn,
[data-sudut="tajam"] .field input,
[data-sudut="tajam"] .field select,
[data-sudut="tajam"] .field textarea,
[data-sudut="tajam"] .search-box input,
[data-sudut="tajam"] select.filter-select,
[data-sudut="tajam"] .nav-item,
[data-sudut="tajam"] .modal { border-radius: 2px; }
[data-sudut="bulat"] .btn,
[data-sudut="bulat"] .field input,
[data-sudut="bulat"] .field select,
[data-sudut="bulat"] .search-box input,
[data-sudut="bulat"] select.filter-select { border-radius: 999px; }
[data-sudut="bulat"] .nav-item { border-radius: 14px; }
[data-sudut="bulat"] .modal { border-radius: 20px; }

/* =====================================================================
   LEBAR ISI — batas maksimal area konten
   ===================================================================== */

[data-lebar="penuh"] #main > * { max-width: none; }
[data-lebar="sedang"] #main > * { max-width: 1280px; }
[data-lebar="sempit"] #main > * { max-width: 1040px; }

/* =====================================================================
   KOMPONEN PAGINATION (dipakai semua tabel dan daftar)
   ===================================================================== */

.paginasi {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 4px 2px; font-size: 12.5px; color: var(--muted);
}
.paginasi-info { white-space: nowrap; }
.paginasi-kanan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paginasi select {
  padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 12.5px; font-family: 'Inter', sans-serif;
}
.paginasi-nav { display: flex; gap: 4px; align-items: center; }
.hal-btn {
  min-width: 31px; height: 31px; padding: 0 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 7px; font-size: 12.5px; font-family: 'JetBrains Mono', monospace;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.hal-btn:hover:not(:disabled):not(.aktif) { border-color: var(--cyan); color: var(--cyan); }
.hal-btn.aktif { background: var(--cyan); border-color: var(--cyan); color: #fff; font-weight: 700; cursor: default; }
.hal-btn:disabled { opacity: .4; cursor: not-allowed; }
.hal-elipsis { color: var(--muted); padding: 0 2px; font-family: 'JetBrains Mono', monospace; }