/* ==========================================================================
   Legal Management System — lapisan tampilan (komponen)
   Mengikuti PANDUAN-DESAIN-UI.md (1 September 2026).

   TOKEN warna/bentuk/ukuran & mode terang/gelap kini berasal dari
   dermaesthetics-core (brand.css), dimuat SEBELUM berkas ini lewat mount /brand.
   Berkas ini memuat font, gaya elemen dasar, dan komponen khas LMS.
   Jangan menulis nilai heksadesimal langsung di komponen — pakai token brand.css.
   ========================================================================== */

/* ---------- Bagian 2: font, dilayani sendiri dari /static/fonts ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/IBMPlexSans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/IBMPlexSans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/IBMPlexMono-600.woff2') format('woff2')}


/* ==========================================================================
   DASAR — Bagian 2: skala tipografi
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;color:var(--teks);background:var(--latar);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
a{color:var(--aksen);text-decoration:none}
a:hover{text-decoration:underline}

/* Cincin fokus tunggal untuk seluruh antarmuka (Bagian 8) */
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px;border-radius:3px}

h1{font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
h2{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 10px}
h3{font-size:15px;font-weight:600;line-height:1.3;color:var(--teks);margin:0 0 8px}

/* Label dalam kapitalisasi kalimat — bukan huruf besar semua (Bagian 2 & 9.8) */
label,.label{display:block;font-size:12.5px;font-weight:500;line-height:1.3;
  color:var(--teks-2);margin:0 0 5px}
.kecil{font-size:12px;line-height:1.4;color:var(--teks-2)}
.teks-abu{color:var(--teks-3)}
.teks-merah{color:var(--st-merah);font-weight:600}

/* Data terstruktur: nomor surat, kode, checksum (Bagian 2) */
.mono,code,kbd{font-family:"IBM Plex Mono",Consolas,monospace;font-variant-ligatures:none}
code{font-size:13px;background:var(--permukaan-naik);border:1px solid var(--garis);
  padding:1px 6px;border-radius:5px;color:var(--teks-2)}

svg.ikon{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.ikon-kecil{width:15px;height:15px}

/* ==========================================================================
   Bagian 3: TATA LETAK
   ========================================================================== */
.layout{display:flex;min-height:100vh}
.utama{flex:1;min-width:0;display:flex;flex-direction:column}
.konten{flex:1;width:100%;padding:var(--padding-isi)}   /* tanpa lebar maksimum */

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--lebar-sidebar);flex-shrink:0;background:var(--sidebar);color:var(--sb-teks);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  transition:width var(--gerak-panel) ease;
}
body.sidebar-sempit .sidebar{width:var(--lebar-sidebar-sempit)}

.brand{display:flex;align-items:center;gap:10px;padding:0 16px;height:var(--tinggi-topbar);
  flex-shrink:0;border-bottom:1px solid var(--sb-garis);overflow:hidden}
.brand-logo{width:34px;height:34px;flex-shrink:0;object-fit:contain;display:block}
/* Slot logo kosong — isi dengan meletakkan berkas di app/static/logo.png */
.brand-logo-kosong{border:1px dashed var(--sb-teks-2);border-radius:8px;opacity:.55}
.brand-teks{min-width:0}
.brand-nama{font-size:13.5px;font-weight:600;color:#fff;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:11.5px;color:var(--sb-teks-2);line-height:1.35;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sidebar-sempit .brand-teks{display:none}
body.sidebar-sempit .brand{justify-content:center;padding:0}

.sidebar nav{flex:1;padding:10px 10px 14px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.sidebar nav a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;margin-bottom:2px;
  color:var(--sb-teks);font-size:14px;border-radius:var(--r-sm);position:relative;
  white-space:nowrap;transition:background var(--gerak-baris),color var(--gerak-baris);
}
.sidebar nav a:hover{background:var(--sb-aktif);color:#fff;text-decoration:none}
.sidebar nav a.aktif{background:var(--sb-aktif);color:#fff;font-weight:500}
.sidebar nav a.aktif::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;
  width:3px;border-radius:0 3px 3px 0;background:var(--aksen)}
.sidebar nav a.aktif svg.ikon{stroke:var(--aksen)}
.nav-teks{overflow:hidden;text-overflow:ellipsis}
body.sidebar-sempit .nav-teks,
body.sidebar-sempit .nav-sep span,
body.sidebar-sempit .nav-panah{display:none}
body.sidebar-sempit .sidebar nav a{justify-content:center;padding:9px 0}

/* Pemisah bagian Administrasi (Bagian 3) */
.nav-sep{margin:16px 0 6px;padding:0 11px;font-size:12px;font-weight:500;
  color:var(--sb-teks-2);display:flex;align-items:center;gap:8px}
.nav-sep::after{content:"";flex:1;height:1px;background:var(--sb-garis)}
body.sidebar-sempit .nav-sep{margin:12px 8px 6px;padding:0}
body.sidebar-sempit .nav-sep::after{flex:1}

/* Menu bertingkat — terbuka sendiri bila salah satu anaknya aktif.
   Kepala grup memakai <summary> asli: buka-tutup dan navigasi papan ketik
   bekerja tanpa JavaScript. */
.sidebar nav summary{
  display:flex;align-items:center;gap:11px;padding:9px 11px;margin-bottom:2px;
  color:var(--sb-teks);font-size:14px;border-radius:var(--r-sm);cursor:pointer;
  white-space:nowrap;list-style:none;position:relative;
  transition:background var(--gerak-baris),color var(--gerak-baris);
}
.sidebar nav summary::-webkit-details-marker{display:none}
.sidebar nav summary:hover{background:var(--sb-aktif);color:#fff}
.sidebar nav summary.aktif{background:var(--sb-aktif);color:#fff;font-weight:500}
.sidebar nav summary.aktif::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;
  width:3px;border-radius:0 3px 3px 0;background:var(--aksen)}
.sidebar nav summary.aktif svg.ikon:first-child{stroke:var(--aksen)}
.nav-panah{margin-left:auto;transition:transform var(--gerak-panel)}
.nav-grup[open] .nav-panah{transform:rotate(90deg)}
.nav-anak{overflow:hidden;padding-left:10px;margin:2px 0 2px 20px;
  border-left:1px solid var(--sb-garis)}
.nav-anak a{font-size:13.5px;padding:7px 11px}
.nav-anak a.aktif::before{display:none}
body.sidebar-sempit .nav-anak{display:none}
body.sidebar-sempit .sidebar nav summary{justify-content:center;padding:9px 0}

.sidebar-kredit{padding:10px 16px 14px;font-size:11px;line-height:1.45;
  color:var(--sb-teks-2);border-top:1px solid var(--sb-garis)}
body.sidebar-sempit .sidebar-kredit{display:none}

/* ---------- Bilah atas ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  height:var(--tinggi-topbar);padding:0 var(--padding-isi);flex-shrink:0;
  background:var(--permukaan);border-bottom:1px solid var(--garis);
}
.topbar .sisa{flex:1}

.ikon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--garis);
  background:transparent;color:var(--teks-2);cursor:pointer;padding:0;
  transition:background var(--gerak-baris),color var(--gerak-baris)}
.ikon-btn:hover{background:var(--permukaan-naik);color:var(--teks);border-color:var(--garis-tegas)}
.menu-toggle{display:none}
.sempitkan{display:inline-flex}

/* Lonceng dengan penanda jumlah */
.lonceng{position:relative}
.lonceng .titik{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--st-merah);color:#fff;font-size:10.5px;
  font-weight:600;line-height:16px;text-align:center;border:2px solid var(--permukaan)}

/* Menu avatar */
.menu-akun{position:relative}
.menu-akun>button{display:flex;align-items:center;gap:9px;background:transparent;
  border:1px solid transparent;border-radius:var(--r-sm);padding:5px 9px 5px 5px;
  color:var(--teks);font-size:14px;font-weight:500;cursor:pointer}
.menu-akun>button:hover{background:var(--permukaan-naik);border-color:var(--garis)}
.avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--aksen);color:var(--aksen-kontras);display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.menu-akun .nm{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-turun{
  position:absolute;right:0;top:calc(100% + 8px);min-width:248px;z-index:40;
  background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--r);
  box-shadow:var(--bayang-2);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--gerak-panel),transform var(--gerak-panel),visibility var(--gerak-panel);
}
.menu-akun.buka .menu-turun{opacity:1;visibility:visible;transform:none}
.menu-turun .kepala{padding:9px 11px 11px;border-bottom:1px solid var(--garis);margin-bottom:6px}
.menu-turun .kepala .nm{font-size:14px;font-weight:600;max-width:none}
.menu-turun .kepala .em{font-size:12.5px;color:var(--teks-2);word-break:break-all}
.menu-turun a,.menu-turun button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;
  background:transparent;border:none;border-radius:var(--r-sm);color:var(--teks);
  font-size:14px;font-weight:400;text-align:left;cursor:pointer;justify-content:flex-start}
.menu-turun a:hover,.menu-turun button:hover{background:var(--permukaan-naik);
  text-decoration:none;color:var(--teks);filter:none}
/* Form pembungkus tombol Keluar tidak boleh mengubah tata letak menu. */
.menu-turun .menu-keluar{margin:0}
.menu-turun .menu-keluar button{min-height:0}

/* ---------- Kepala halaman (Bagian 3) ---------- */
.kepala-halaman{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.kepala-ikon{width:48px;height:48px;flex-shrink:0;border-radius:12px;
  background:var(--aksen-lembut);color:var(--aksen);
  display:flex;align-items:center;justify-content:center}
.kepala-ikon svg.ikon{width:22px;height:22px}
.kepala-teks{min-width:0;flex:1}
.kepala-teks h1{margin:0}
.kepala-sub{font-size:14px;color:var(--teks-2);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kepala-aksi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}

/* ==========================================================================
   Bagian 4: KOMPONEN
   ========================================================================== */

/* ---------- Panel umum ---------- */
.panel{background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--bayang);margin-bottom:18px}
.panel>h2:first-child,.panel>.judul-flex:first-child{margin-top:0}
.panel-rapat{padding:0;overflow:hidden}
.panel-kepala{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--garis)}
.panel-kepala h2{margin:0}
.panel-kepala .sisa{flex:1}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.judul-flex{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-bottom:14px}
.judul-flex h1,.judul-flex h2{margin-bottom:0}

/* ---------- 4.1 Kartu ringkasan ---------- */
.kartu-baris{display:grid;gap:14px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.kartu{
  position:relative;display:flex;align-items:flex-start;gap:12px;
  background:var(--permukaan);border:1px solid var(--garis);border-radius:var(--r);
  padding:16px;box-shadow:var(--bayang);color:inherit;
  transition:border-color var(--gerak-baris),box-shadow var(--gerak-baris);
}
a.kartu:hover{border-color:var(--garis-tegas);box-shadow:var(--bayang-2);text-decoration:none}
.kartu-isi{flex:1;min-width:0}
.kartu .label{font-size:12.5px;font-weight:500;color:var(--teks-2);margin:0 0 6px}
.kartu .angka{font-size:32px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.kartu-ikon{width:40px;height:40px;flex-shrink:0;border-radius:10px;
  background:var(--aksen-lembut);color:var(--aksen);
  display:flex;align-items:center;justify-content:center}
/* Kartu berstatus kritis: garis kiri 3px berwarna status */
.kartu-kritis{border-left:3px solid var(--garis)}
.kartu-kritis.k-merah{border-left-color:var(--st-merah)}
.kartu-kritis.k-merah .kartu-ikon{background:var(--st-merah-bg);color:var(--st-merah)}
.kartu-kritis.k-hitam{border-left-color:var(--st-hitam)}
.kartu-kritis.k-hitam .kartu-ikon{background:var(--st-hitam-bg);color:var(--st-hitam)}

/* ---------- 4.2 Pil status ---------- */
/* Aturan keras Bagian 1.4: titik berwarna DAN teks — warna tidak berdiri sendiri */
.pil{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;
  border-radius:var(--r-pill);font-size:12.5px;font-weight:500;white-space:nowrap;
  background:var(--st-abu-bg);color:var(--st-abu)}
.pil::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0}
.pil-MERAH{background:var(--st-merah-bg);color:var(--st-merah)}
.pil-ORANYE{background:var(--st-oranye-bg);color:var(--st-oranye)}
.pil-HIJAU{background:var(--st-hijau-bg);color:var(--st-hijau)}
.pil-HITAM{background:var(--st-hitam-bg);color:var(--st-hitam)}
.pil-ABU{background:var(--st-abu-bg);color:var(--st-abu)}
.pil-netral{background:var(--permukaan-naik);color:var(--teks-2)}
.pil-netral::before{display:none}
.pil-info{background:var(--info-bg);color:var(--info)}
.pil-peringatan{background:var(--peringatan-bg);color:var(--peringatan)}

/* ---------- 4.3 Tabel ---------- */
/* Pembungkus tabel adalah kontainer gulung dua arah. Karena overflow-x:auto
   sudah menjadikannya scrollport, kepala tabel menempel pada pembungkus
   (top:0) — bukan pada halaman. Batas tinggi membuat badan tabel bergulung
   di dalamnya sementara kepala tetap terlihat. */
/* --tinggi-atas dipasang per pembungkus oleh app.js dari posisi elemen
   sebenarnya. Nilai cadangan 210px hanya berlaku bila JavaScript mati. */
.tabel-bungkus{overflow:auto;max-height:calc(100dvh - var(--tinggi-atas, 210px));
  min-height:220px;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
table{width:auto;min-width:100%;border-collapse:separate;border-spacing:0;
  font-size:14px;line-height:1.4}
th{
  position:sticky;top:0;z-index:3;
  background:var(--permukaan);text-align:left;padding:0 14px;height:40px;
  white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--teks-2);
  box-shadow:inset 0 -1px 0 var(--garis);
}
td{padding:0 14px;height:44px;border-bottom:1px solid var(--garis);
  background:var(--permukaan);vertical-align:middle;white-space:nowrap}
/* Judul boleh panjang: potong dengan elipsis, nilai penuh di tooltip & detail */
td.kol-judul{max-width:420px;overflow:hidden;text-overflow:ellipsis}
td.rapat{padding-top:9px;padding-bottom:9px;height:auto}
tbody tr:last-child td{border-bottom:none}
/* Tanpa loreng zebra — sorot hanya saat kursor lewat */
tbody tr:hover td{background:var(--aksen-lembut)}
tbody tr.terpilih td{background:var(--aksen-lembut)}
tr.dapat-klik{cursor:pointer}

/* Kolom terkunci — memperbaiki kelemahan Bagian 9.1 */
th.kunci-kiri,td.kunci-kiri{position:sticky;left:0;z-index:2}
th.kunci-kiri{z-index:4}
th.kunci-kanan,td.kunci-kanan{position:sticky;right:0;z-index:2;text-align:right}
th.kunci-kanan{z-index:4}
td.kunci-kiri,td.kunci-kanan{background:var(--permukaan)}
tbody tr:hover td.kunci-kiri,tbody tr:hover td.kunci-kanan{
  background:color-mix(in srgb,var(--aksen) 14%,var(--permukaan))}
.tabel-gulung td.kunci-kiri,.tabel-gulung th.kunci-kiri{
  box-shadow:1px 0 0 var(--garis),6px 0 12px -8px rgba(0,0,0,.45)}
.tabel-gulung td.kunci-kanan,.tabel-gulung th.kunci-kanan{
  box-shadow:-1px 0 0 var(--garis),-6px 0 12px -8px rgba(0,0,0,.45)}

/* Kolom warna EWS diletakkan di kiri, tepat setelah nomor (Bagian 4.3) */
td.kol-warna,th.kol-warna{width:1%;white-space:nowrap}
td.kol-nomor{font-family:"IBM Plex Mono",Consolas,monospace;font-size:13px;white-space:nowrap}
td.kol-angka,th.kol-angka{text-align:right;font-variant-numeric:tabular-nums}
td.kol-aksi{white-space:nowrap}
td.kol-aksi .tombol,td.kol-aksi button{margin-left:6px}

/* Sisa hari sebagai angka bertanda */
.sisa-hari{font-variant-numeric:tabular-nums;white-space:nowrap}
.sisa-hari.lewat{color:var(--st-merah);font-weight:600}

/* Pemotongan nomor di tengah — bagian awal dan akhir yang membedakan */
.potong-tengah{display:inline-flex;max-width:100%;overflow:hidden;
  font-family:"IBM Plex Mono",Consolas,monospace;font-size:13px;white-space:nowrap}
.potong-tengah .awal{overflow:hidden;text-overflow:ellipsis;min-width:0}
.potong-tengah .akhir{flex-shrink:0}

/* Sel tanpa data — jangan biarkan kosong (Bagian 4.3) */
.kosong-sel{color:var(--teks-3)}

/* Pengatur kolom */
.pengatur-kolom{position:relative}
.pengatur-kolom .daftar{
  position:absolute;right:0;top:calc(100% + 8px);z-index:35;min-width:230px;
  max-height:340px;overflow-y:auto;background:var(--permukaan);
  border:1px solid var(--garis);border-radius:var(--r);box-shadow:var(--bayang-2);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--gerak-panel),transform var(--gerak-panel),visibility var(--gerak-panel);
}
.pengatur-kolom.buka .daftar{opacity:1;visibility:visible;transform:none}
.pengatur-kolom .daftar label{display:flex;align-items:center;gap:9px;margin:0;
  padding:7px 9px;border-radius:var(--r-sm);font-size:13.5px;font-weight:400;
  color:var(--teks);cursor:pointer}
.pengatur-kolom .daftar label:hover{background:var(--permukaan-naik)}

/* ---------- 4.4 Baris filter ---------- */
.filter-baris{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filter-baris>div{min-width:150px}
.filter-baris label{margin-bottom:4px}
.filter-cari{flex:1;min-width:220px}
.filter-pil{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.pil-filter{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 11px;
  border-radius:var(--r-pill);background:var(--aksen-lembut);color:var(--aksen);
  font-size:12.5px;font-weight:500}
.pil-filter .lepas{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:none;background:transparent;color:inherit;
  border-radius:50%;cursor:pointer;padding:0;font-size:14px;line-height:1}
.pil-filter .lepas:hover{background:color-mix(in srgb,var(--aksen) 22%,transparent);filter:none}

/* ---------- 4.5 Halaman detail ---------- */
.detail-tata{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.detail-aksi{position:sticky;top:calc(var(--tinggi-topbar) + var(--padding-isi))}
.detail-aksi .tombol,.detail-aksi button{width:100%;margin-bottom:8px}
.detail-aksi form{display:block}

/* Field baca-saja sebagai kotak terpindai cepat */
.field-baca{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.field-kotak{background:var(--permukaan-naik);border:1px solid var(--garis);
  border-radius:var(--r-sm);padding:11px 13px;min-width:0}
.field-kotak .label{margin-bottom:4px}
.field-kotak .nilai{display:flex;align-items:center;gap:8px;font-size:14px;
  color:var(--teks);min-width:0}
.field-kotak .nilai svg.ikon{color:var(--teks-3)}
.field-kotak .nilai .teks{overflow:hidden;text-overflow:ellipsis}

/* Tombol salin di sebelah nomor */
.salin{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--garis);background:transparent;color:var(--teks-2);
  border-radius:var(--r-sm);cursor:pointer;padding:0;flex-shrink:0}
.salin:hover{background:var(--permukaan-naik);color:var(--teks);filter:none}

/* Tab */
.tab-baris{display:flex;gap:4px;border-bottom:1px solid var(--garis);margin-bottom:16px;
  overflow-x:auto;scrollbar-width:none}
.tab-baris::-webkit-scrollbar{display:none}
.tab{padding:10px 14px;border:none;background:transparent;color:var(--teks-2);
  font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;
  border-radius:0;white-space:nowrap}
.tab:hover{color:var(--teks);background:transparent;filter:none}
.tab.aktif{color:var(--aksen);border-bottom-color:var(--aksen)}
.tab-isi{display:none}
.tab-isi.aktif{display:block}

/* ---------- 4.6 Formulir ---------- */
input[type=text],input[type=password],input[type=email],input[type=date],
input[type=number],input[type=file],input[type=search],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--garis-tegas);border-radius:var(--r-sm);
  font-size:14px;font-family:inherit;background:var(--permukaan);color:var(--teks);
  transition:border-color var(--gerak-baris),box-shadow var(--gerak-baris);min-height:38px;
}
input[type=file]{padding:6px 8px;font-size:13px;color:var(--teks-2)}
input[type=file]::file-selector-button{border:1px solid var(--garis-tegas);
  background:var(--permukaan-naik);color:var(--teks-2);border-radius:5px;padding:5px 11px;
  margin-right:10px;font-size:13px;font-family:inherit;cursor:pointer}
select{appearance:none;-webkit-appearance:none;background-image:var(--panah);
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:30px;cursor:pointer}
textarea{min-height:76px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--teks-3)}
input:hover,select:hover,textarea:hover{border-color:var(--teks-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aksen);
  box-shadow:0 0 0 3px var(--aksen-lembut)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--aksen);
  margin-right:7px;cursor:pointer}
label:has(input[type=checkbox]),label:has(input[type=radio]){
  display:flex;align-items:center;gap:2px;font-weight:400;color:var(--teks);cursor:pointer}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 18px}
.form-blok{margin-bottom:22px}
.form-blok>h3{padding-bottom:8px;border-bottom:1px solid var(--garis);margin-bottom:14px}
.field{min-width:0}

/* Galat sebaris — menjelaskan cara memperbaiki, bukan hanya "tidak valid" */
.galat{display:block;font-size:12.5px;color:var(--st-merah);margin-top:5px}
.field-galat input,.field-galat select,.field-galat textarea{border-color:var(--st-merah)}
.field-galat input:focus,.field-galat select:focus,.field-galat textarea:focus{
  box-shadow:0 0 0 3px var(--st-merah-bg)}

/* Kolom bersyarat: muncul tepat di bawah pemicunya */
.bersyarat{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows 120ms ease}
.bersyarat.tampil{grid-template-rows:1fr}
.bersyarat>.isi{min-height:0;overflow:hidden}

/* Pratinjau nomor: besar, monospasi, dapat dibandingkan karakter per karakter */
.pratinjau-nomor{font-family:"IBM Plex Mono",Consolas,monospace;font-size:18px;
  font-weight:600;line-height:1.45;letter-spacing:-.01em;color:var(--aksen);
  background:var(--permukaan-naik);border:1px solid var(--garis);border-radius:var(--r-sm);
  padding:14px;word-break:break-all}

/* Tombol simpan menempel di bawah pada formulir panjang */
.form-kaki{position:sticky;bottom:0;z-index:10;display:flex;gap:10px;align-items:center;
  padding:14px 0;margin-top:8px;background:var(--latar);
  border-top:1px solid var(--garis)}
.form-kaki .sisa{flex:1}

/* ---------- Tombol ---------- */
button,.tombol{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--aksen);color:var(--aksen-kontras);border:1px solid transparent;
  border-radius:var(--r-sm);padding:9px 16px;font-size:14px;font-weight:500;
  font-family:inherit;cursor:pointer;line-height:1.35;white-space:nowrap;min-height:38px;
  transition:filter var(--gerak-baris),background var(--gerak-baris),border-color var(--gerak-baris);
}
button:hover,.tombol:hover{filter:brightness(1.08);text-decoration:none;color:var(--aksen-kontras)}
button:active,.tombol:active{filter:brightness(.95)}
.tombol-abu{background:transparent;color:var(--teks-2);border-color:var(--garis-tegas)}
.tombol-abu:hover{background:var(--permukaan-naik);color:var(--teks);filter:none}
.tombol-merah{background:var(--st-merah);color:#fff}
.tombol-merah:hover{color:#fff}
.tombol-kecil{padding:5px 11px;font-size:13px;min-height:30px;border-radius:6px}
form.inline{display:inline-flex;gap:6px;align-items:center}

/* ---------- 4.7 Keadaan kosong ---------- */
.kosong{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:52px 24px;text-align:center;color:var(--teks-2)}
.kosong .ikon-bulat{width:52px;height:52px;border-radius:50%;background:var(--permukaan-naik);
  display:flex;align-items:center;justify-content:center;color:var(--teks-3)}
.kosong .ikon-bulat svg.ikon{width:24px;height:24px}
.kosong p{font-size:14px;max-width:420px}

/* ---------- 4.8 Pemberitahuan ----------
   Dua hal yang berbeda dan sengaja dibedakan:
   .notis — keadaan halaman yang menetap (EWS belum jalan, nomor VOID, arsip
            rusak). Menempel pada isinya, tidak hilang sendiri.
   .toast — umpan balik atas tindakan pengguna. Selalu lewat window.toast(). */
.notis{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-radius:var(--r-sm);margin-bottom:14px;font-size:14px;
  border:1px solid transparent}
.notis-info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--teks)}
.notis-sukses{background:var(--st-hijau-bg);border-color:color-mix(in srgb,var(--st-hijau) 35%,transparent);color:var(--st-hijau)}
.notis-error{background:var(--st-merah-bg);border-color:color-mix(in srgb,var(--st-merah) 35%,transparent);color:var(--st-merah)}

/* Toast di kanan bawah */
.toast-wadah{position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
  max-width:calc(100vw - 40px)}
.toast{display:flex;align-items:flex-start;gap:10px;min-width:280px;max-width:400px;
  padding:13px 15px;border-radius:var(--r);background:var(--permukaan);
  border:1px solid var(--garis);box-shadow:var(--bayang-2);font-size:14px;
  pointer-events:auto;animation:toast-masuk var(--gerak-toast) ease}
.toast-teks{flex:1;min-width:0}
.toast-tutup{flex-shrink:0;width:22px;height:22px;min-height:0;padding:0;
  border:none;background:transparent;color:var(--teks-3);font-size:18px;
  line-height:1;border-radius:50%;cursor:pointer}
.toast-tutup:hover{background:var(--permukaan-naik);color:var(--teks);filter:none}
.toast.pergi{animation:toast-keluar var(--gerak-toast) ease forwards}
.toast-sukses{border-left:3px solid var(--st-hijau)}
.toast-sukses svg.ikon{color:var(--st-hijau)}
.toast-error{border-left:3px solid var(--st-merah)}
.toast-error svg.ikon{color:var(--st-merah)}
.toast-info svg.ikon{color:var(--info)}
@keyframes toast-masuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toast-keluar{to{opacity:0;transform:translateY(8px)}}

/* Dialog konfirmasi yang menyebut akibatnya */
/* margin:auto wajib ditulis ulang — reset *{margin:0} di atas menimpa nilai
   bawaan peramban, sehingga dialog modal menempel di kiri atas. */
dialog.konfirmasi{margin:auto;border:1px solid var(--garis);border-radius:var(--r);padding:0;
  background:var(--permukaan);color:var(--teks);max-width:460px;width:calc(100% - 40px);
  box-shadow:var(--bayang-2)}
dialog.konfirmasi::backdrop{background:rgba(0,0,0,.55)}
dialog.konfirmasi .isi{padding:20px}
dialog.konfirmasi h2{margin-bottom:8px}
dialog.konfirmasi p{font-size:14px;color:var(--teks-2)}
dialog.konfirmasi .kaki{display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;border-top:1px solid var(--garis);background:var(--permukaan-naik)}

.info-kotak{background:var(--aksen-lembut);
  border:1px solid color-mix(in srgb,var(--aksen) 22%,transparent);
  border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;color:var(--teks-2);margin:12px 0}
.info-kotak strong,.info-kotak code{color:var(--teks)}
.kotak-peringatan{background:var(--peringatan-bg);
  border:1px solid color-mix(in srgb,var(--peringatan) 32%,transparent);
  border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;color:var(--teks);margin:12px 0}

/* ---------- Grafik batang ---------- */
.bar-chart{display:flex;align-items:flex-end;gap:14px;height:170px;padding:10px 2px 0}
.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%}
.bar{width:78%;max-width:62px;min-height:3px;border-radius:6px 6px 2px 2px;
  background:var(--aksen);transition:filter var(--gerak-baris)}
.bar-item:hover .bar{filter:brightness(1.15)}
.bar-nilai{font-size:13px;font-weight:600;margin-bottom:6px}
.bar-label{font-size:12px;color:var(--teks-2);margin-top:7px;white-space:nowrap}

/* ---------- Rincian draft email ---------- */
details.draft summary{cursor:pointer;color:var(--aksen);font-size:13.5px;
  list-style:none;user-select:none}
details.draft summary::-webkit-details-marker{display:none}
details.draft summary::before{content:"\25b8\00a0";font-size:11px}
details.draft[open] summary::before{content:"\25be\00a0"}
details.draft pre{background:var(--permukaan-naik);border:1px solid var(--garis);
  border-radius:var(--r-sm);padding:12px 14px;font-size:13px;white-space:pre-wrap;
  margin-top:8px;font-family:"IBM Plex Mono",Consolas,monospace;max-height:300px;overflow:auto}

/* ---------- Bagian 5: halaman masuk ---------- */
.login-bungkus{display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:24px;background:
    radial-gradient(1000px 520px at 50% -10%,var(--aksen-lembut),transparent),
    var(--latar)}
.login-kotak{background:var(--permukaan);border:1px solid var(--garis);padding:32px;
  border-radius:14px;box-shadow:var(--bayang-2);width:100%;max-width:380px}
.login-kotak .brand-logo{width:56px;height:56px;margin-bottom:18px}
.login-kotak h1{font-size:22px;margin-bottom:4px}
.login-kotak .kredit{line-height:1.5;border-top:1px solid var(--garis);
  padding-top:16px;margin-top:22px}
.login-kotak button[type=submit]{width:100%;margin-top:18px}
/* Kolom isian berikon */
.isian-ikon{position:relative}
.isian-ikon svg.ikon{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--teks-3);pointer-events:none}
.isian-ikon input{padding-left:38px}

/* ==========================================================================
   Bagian 7: RESPONSIF
   ========================================================================== */
@media (max-width:1400px){
  .detail-tata{grid-template-columns:1fr 300px}
}
@media (max-width:1100px){
  .detail-tata{grid-template-columns:1fr}
  .detail-aksi{position:static}
  .dua-kolom{grid-template-columns:1fr}
}
@media (max-width:1100px) and (min-width:901px){
  /* Sidebar menyempit otomatis jadi ikon */
  .sidebar{width:var(--lebar-sidebar-sempit)}
  .brand-teks,.nav-teks,.nav-sep span,.nav-panah,.nav-anak,.sidebar-kredit{display:none}
  .sidebar nav a,.sidebar nav summary{justify-content:center;padding:9px 0}
  .brand{justify-content:center;padding:0}
  .sempitkan{display:none}
}

/* Di bawah 900px: sidebar jadi laci, tabel jadi kartu per baris (Bagian 7) */
@media (max-width:900px){
  :root{--padding-isi:16px}
  .menu-toggle{display:inline-flex}
  .sempitkan{display:none}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;width:var(--lebar-sidebar);
    transform:translateX(-100%);transition:transform var(--gerak-panel) ease;
    box-shadow:var(--bayang-2)}
  body.nav-buka .sidebar{transform:none}
  body.nav-buka::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50}
  body.sidebar-sempit .sidebar{width:var(--lebar-sidebar)}
  body.sidebar-sempit .brand-teks,body.sidebar-sempit .nav-teks,
  body.sidebar-sempit .nav-sep span,body.sidebar-sempit .sidebar-kredit{display:block}
  body.sidebar-sempit .sidebar nav a{justify-content:flex-start;padding:9px 11px}

  .kepala-halaman{flex-wrap:wrap}
  .kepala-aksi{width:100%}
  .kepala-aksi .tombol,.kepala-aksi button{flex:1}
  .kartu-baris{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .kartu .angka{font-size:26px}
  .menu-akun .nm,.menu-akun .nav-panah{display:none}

  /* Tabel berubah bentuk menjadi kartu — bukan tabel yang digulung */
  table.jadi-kartu,table.jadi-kartu tbody,table.jadi-kartu tr,table.jadi-kartu td{display:block}
  table.jadi-kartu thead{display:none}
  table.jadi-kartu tr{background:var(--permukaan);border:1px solid var(--garis);
    border-radius:var(--r);margin-bottom:10px;padding:12px 14px}
  .tabel-bungkus{max-height:none;min-height:0;overflow:visible}
  table.jadi-kartu td{height:auto;padding:4px 0;border:none;background:transparent;
    display:flex;align-items:baseline;gap:10px;white-space:normal}
  table.jadi-kartu td.kol-judul{max-width:none;overflow:visible;text-overflow:clip}
  table.jadi-kartu td::before{content:attr(data-label);flex:0 0 108px;
    font-size:12.5px;font-weight:500;color:var(--teks-2)}
  table.jadi-kartu td.kunci-kiri,table.jadi-kartu td.kunci-kanan{position:static}
  table.jadi-kartu td.sembunyi-mobil{display:none}
  table.jadi-kartu tbody tr:hover td{background:transparent}
}

/* ==========================================================================
   Bagian 6 & 8: hormati prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Daftar berpoin pada halaman petunjuk */
ul.daftar-poin{margin:8px 0 12px 20px;line-height:1.7}
ul.daftar-poin li{margin-bottom:3px}

/* ==========================================================================
   CETAK
   ========================================================================== */
@media print{
  .sidebar,.topbar,.filter-baris,.filter-pil,.kepala-aksi,.detail-aksi,
  button,.tombol,.toast-wadah,.form-kaki{display:none!important}
  body{background:#fff;color:#000;font-size:11px}
  .konten{padding:0}
  .panel{box-shadow:none;border:1px solid #ccc;break-inside:avoid;margin-bottom:10px}
  .dua-kolom,.detail-tata{grid-template-columns:1fr}
  th,td{position:static;height:auto;padding:5px 8px}
  a{color:inherit;text-decoration:none}
}