/* =====================================================================
   KOMPONEN BERSAMA — dipakai semua menu, semua aplikasi (staf, portal,
   landing). Menu tidak menulis style="" sebaris; kalau butuh bentuk baru
   yang berguna di lebih dari satu menu, tambahkan di sini.
   ===================================================================== */

/* ---------------------------------------------------------- tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--aksen-isi); color: var(--aksen-teks);
  font-weight: 600; font-size: var(--t); white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: background .15s, border-color .15s, opacity .15s, transform .12s, box-shadow .15s;
}
.tombol:hover { background: var(--aksen-isi-hover); }
.tombol:active { transform: scale(.98); }
.tombol:disabled, .tombol[aria-busy="true"] { opacity: .6; cursor: progress; }
.tombol svg { width: 18px; height: 18px; flex: none; }

.tombol--hantu { background: var(--permukaan); color: var(--teks); border-color: var(--garis); }
.tombol--hantu:hover { background: var(--permukaan-2); border-color: var(--garis-kuat); }
.tombol--bahaya { background: var(--bahaya); }
.tombol--bahaya:hover { background: color-mix(in srgb, var(--bahaya) 85%, black); }
.tombol--kecil { min-height: 32px; padding: 0 var(--s-3); font-size: var(--t-kecil); }
.tombol--ikon { width: 40px; padding: 0; }
.tombol--penuh { width: 100%; }

/* Pemutar di dalam tombol yang sedang menunggu server. */
.putar {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ kartu */
.kartu {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r); box-shadow: var(--bayang-1);
}
.kartu__kepala {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--garis);
}
.kartu__kepala h2, .kartu__kepala h3 { font-size: var(--t-sedang); }
.kartu__kepala .keterangan { color: var(--teks-2); font-size: var(--t-kecil); }
.kartu__isi { padding: var(--s-5); }
.kartu__isi--rapat { padding: 0; }
.kartu__kaki {
  display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--garis);
  background: var(--permukaan-2); border-radius: 0 0 var(--r) var(--r);
}
.dorong { margin-left: auto; }

/* ---------------------------------------------------------- lencana */
.lencana {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--r-bulat);
  font-size: var(--t-kecil); font-weight: 600; line-height: 1.6;
  background: var(--permukaan-3); color: var(--teks-2); white-space: nowrap;
}
.lencana::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lencana--polos::before { display: none; }
.lencana--ok      { background: var(--ok-bg);      color: var(--ok); }
.lencana--waspada { background: var(--waspada-bg); color: var(--waspada); }
.lencana--bahaya  { background: var(--bahaya-bg);  color: var(--bahaya); }
.lencana--info    { background: var(--info-bg);    color: var(--info); }
.lencana--aksen   { background: var(--aksen-lembut); color: var(--aksen); }

/* ----------------------------------------------------------- tabel */
.tabel-bungkus { overflow-x: auto; }
.tabel th, .tabel td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; }
.tabel thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--permukaan-2); color: var(--teks-2);
  font-size: var(--t-kecil); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--garis);
}
.tabel tbody tr { border-bottom: 1px solid var(--garis); }
.tabel tbody tr:last-child { border-bottom: 0; }
.tabel tbody tr:hover { background: var(--permukaan-2); }
.tabel .kanan { text-align: right; }

/* Di layar sempit, tabel berubah jadi tumpukan kartu. Label diambil dari
   atribut data-label yang ditulis komponen tabel, jadi menu tidak perlu
   membuat dua tampilan terpisah. */
@media (max-width: 720px) {
  .tabel--susun thead { display: none; }
  .tabel--susun tbody tr { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); }
  .tabel--susun td { display: flex; justify-content: space-between; gap: var(--s-3); padding: 2px 0; }
  .tabel--susun td::before { content: attr(data-label); color: var(--teks-2); font-size: var(--t-kecil); }
  .tabel--susun .kanan { text-align: left; }
}

/* ---------------------------------------------------------- masukan */
.ruas { display: grid; gap: 6px; }
.ruas label { font-size: var(--t-kecil); font-weight: 600; color: var(--teks-2); }
.masukan {
  width: 100%; min-height: 40px; padding: 0 var(--s-3);
  background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.masukan:hover { border-color: var(--garis-kuat); }
.masukan:focus-visible { border-color: var(--aksen); box-shadow: var(--cincin-fokus); }
.masukan--kecil { min-height: 32px; font-size: var(--t-kecil); }
.cari { position: relative; }
.cari svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; color: var(--teks-3); pointer-events: none; }
.cari .masukan { padding-left: 36px; }

/* ------------------------------------------------------------- chip */
.deret-chip { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--garis); border-radius: var(--r-bulat);
  background: var(--permukaan); color: var(--teks-2); font-size: var(--t-kecil); font-weight: 600;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--teks); border-color: var(--teks); color: var(--permukaan); }
.chip .hitung { font-family: var(--mono); opacity: .75; }

/* ------------------------------------------------------------- tab */
.tab-deret {
  display: flex; gap: var(--s-1); padding: var(--s-1);
  background: var(--permukaan-3); border-radius: var(--r); width: fit-content; max-width: 100%;
  overflow-x: auto;
}
.tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--teks-2); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--permukaan); color: var(--teks); box-shadow: var(--bayang-1); }
.tab .hitung {
  min-width: 20px; padding: 0 6px; border-radius: var(--r-bulat);
  background: var(--aksen); color: var(--aksen-teks); font-size: 11px; line-height: 18px; text-align: center;
}

/* ------------------------------------------------------------- KPI */
.kpi-kisi { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi { padding: var(--s-4) var(--s-5); }
.kpi__label { color: var(--teks-2); font-size: var(--t-kecil); font-weight: 600; }
.kpi__nilai { margin-top: var(--s-1); font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi__ubah { margin-top: var(--s-1); font-size: var(--t-kecil); font-weight: 600; }
.kpi__ubah--naik { color: var(--ok); }
.kpi__ubah--turun { color: var(--bahaya); }

/* ------------------------------------------------ keadaan kosong/galat */
.kosong {
  display: grid; justify-items: center; gap: var(--s-2); text-align: center;
  padding: var(--s-7) var(--s-5); color: var(--teks-2);
}
.kosong__ikon {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-2);
  border-radius: 50%; background: var(--permukaan-3); color: var(--teks-2);
}
.kosong__ikon svg { width: 22px; height: 22px; }
.kosong h3 { color: var(--teks); font-size: var(--t-sedang); }
.kosong p { max-width: 46ch; }
.kosong--ok .kosong__ikon { background: var(--ok-bg); color: var(--ok); }
.kosong--galat .kosong__ikon { background: var(--bahaya-bg); color: var(--bahaya); }

/* ------------------------------------------- kerangka saat memuat */
.kerangka {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--permukaan-3) 25%, var(--permukaan-2) 50%, var(--permukaan-3) 75%);
  background-size: 200% 100%; animation: kilau 1.2s ease-in-out infinite;
}
@keyframes kilau { to { background-position: -200% 0; } }
.memuat { display: grid; gap: var(--s-3); padding: var(--s-5); }
.memuat--ringkas { padding: 0; }
.memuat__baris { height: 44px; }
.memuat__baris:nth-child(2) { opacity: .85; }
.memuat__baris:nth-child(3) { opacity: .7; }
.memuat__baris:nth-child(n+4) { opacity: .55; }

/* ----------------------------------------------------------- pita */
.pita {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r);
  border: 1px solid; font-size: var(--t);
}
.pita svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.pita b { display: block; }
.pita__isi { flex: 1; min-width: 0; }
.pita--info    { background: var(--info-bg);    border-color: color-mix(in srgb, var(--info) 25%, transparent);    color: var(--info); }
.pita--waspada { background: var(--waspada-bg); border-color: color-mix(in srgb, var(--waspada) 25%, transparent); color: var(--waspada); }
.pita--bahaya  { background: var(--bahaya-bg);  border-color: color-mix(in srgb, var(--bahaya) 25%, transparent);  color: var(--bahaya); }
.pita--ok      { background: var(--ok-bg);      border-color: color-mix(in srgb, var(--ok) 25%, transparent);      color: var(--ok); }
.pita p { color: var(--teks-2); margin-top: 2px; }

/* ---------------------------------------------------------- dialog */
dialog.dialog {
  width: min(480px, calc(100vw - 32px)); margin: auto; padding: 0;
  border: 1px solid var(--garis); border-radius: var(--r-lg);
  background: var(--permukaan); color: var(--teks); box-shadow: var(--bayang-2);
}
dialog.dialog::backdrop { background: var(--lapis-gelap); }
.dialog__isi { padding: var(--s-5); display: grid; gap: var(--s-3); }
.dialog__isi h2 { font-size: var(--t-besar); }
.dialog__isi p { color: var(--teks-2); }

/* ----------------------------------------------------------- toast */
.toast-wadah {
  position: fixed; z-index: 100; left: 50%; translate: -50% 0;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  display: grid; gap: var(--s-2); width: min(440px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r);
  background: var(--teks); color: var(--permukaan); box-shadow: var(--bayang-2);
  font-weight: 600; animation: muncul .2s ease-out;
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast--galat { background: var(--bahaya); color: #fff; }
@keyframes muncul { from { opacity: 0; translate: 0 8px; } }
@media (max-width: 860px) {
  .toast-wadah { bottom: calc(var(--tinggi-bawah) + var(--s-3) + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------ tata letak */
.tumpuk { display: grid; gap: var(--s-4); }
.tumpuk--lega { gap: var(--s-5); }
.baris { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.kisi-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.teks-2 { color: var(--teks-2); }
.teks-kecil { font-size: var(--t-kecil); }

/* rincian lipat — untuk "jawaban asli perangkat" dan sejenisnya */
details.lipat > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: var(--s-2); }
details.lipat > summary::-webkit-details-marker { display: none; }
details.lipat > summary::before { content: '▸'; transition: rotate .15s; }
details.lipat[open] > summary::before { rotate: 90deg; }
.kode-mentah {
  margin-top: var(--s-3); padding: var(--s-4); border-radius: var(--r-sm);
  background: var(--n-900); color: #E8DDD0; font-family: var(--mono); font-size: 12px;
  white-space: pre-wrap; max-height: 280px; overflow: auto;
}
.teks-ok { color: var(--ok); }
.teks-bahaya { color: var(--bahaya); }
.teks-waspada { color: var(--waspada); }

/* catatan kecil di kiri kaki kartu, tombol didorong ke kanan */
.kaki-catatan { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.kaki-catatan svg { width: 14px; height: 14px; flex: none; }

/* ------------------------------------------------------ formulir */
.ruas__bantu { font-size: var(--t-kecil); color: var(--teks-3); }
.form-kisi { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-kisi .ruas--penuh { grid-column: 1 / -1; }
textarea.masukan { min-height: 88px; padding: var(--s-2) var(--s-3); resize: vertical; }
.kpi__catatan { margin-top: var(--s-1); font-size: var(--t-kecil); color: var(--teks-2); }

/* ------------------------------------------------------ grafik */
.grafik { width: 100%; height: auto; }
.grafik__garis { stroke: var(--garis); stroke-dasharray: 3 4; }
.grafik__batang { fill: color-mix(in srgb, var(--aksen) 28%, var(--permukaan-3)); transition: fill .15s; }
.grafik__batang--kini { fill: var(--aksen); }
.grafik g:hover .grafik__batang { fill: var(--aksen-hover); }
.grafik__label { fill: var(--teks-2); font-size: 12px; font-family: var(--font); }

/* ------------------------------------------------------ daftar baris nilai */
.daftar-nilai { list-style: none; }
.daftar-nilai li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--garis); }
.daftar-nilai li:last-child { border-bottom: 0; }
.daftar-nilai .total { font-weight: 700; background: var(--permukaan-2); }
.daftar-nilai .sub { padding-left: var(--s-6); color: var(--teks-2); }
.angka-kanan { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tabel tfoot td { font-weight: 700; background: var(--permukaan-2); border-top: 1px solid var(--garis-kuat); }

/* ------------------------------------------------------ daftar langkah */
.langkah { list-style: none; }
.langkah li + li { border-top: 1px solid var(--garis); }
.langkah__b { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); color: inherit; text-decoration: none; }
.langkah__b:hover { background: var(--permukaan-2); }
.langkah__b > span:nth-child(2) { flex: 1; }
.langkah__b > svg { color: var(--teks-3); }
.langkah__tanda { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--garis-kuat); color: #fff; }
.langkah__b--selesai .langkah__tanda { background: var(--ok); border-color: var(--ok); }
.langkah__b--selesai > span:nth-child(2) { color: var(--teks-2); text-decoration: line-through; text-decoration-color: var(--teks-3); }
.cetak-saja { display: none; }
@media print { .cetak-saja { display: block; margin-bottom: var(--s-4); } }
.th-pilih { width: auto; }
.rs-tambah, .dp-rincian { border-top: 1px solid var(--garis); }
.pg-tautan { margin-top: var(--s-2); padding: var(--s-2); border-radius: var(--r-sm); background: var(--permukaan); color: var(--teks); word-break: break-all; font-size: var(--t-kecil); }

/* ------------------------------------------------------ amplop keluarga */
.amplop-kisi { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.amplop { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.amplop__kepala { display: flex; align-items: center; gap: var(--s-2); }
.amplop__titik { width: 10px; height: 10px; border-radius: 50%; background: var(--aksen); }
.amplop__saldo { font-size: var(--t-besar); font-weight: 700; font-variant-numeric: tabular-nums; }
.amplop__batang { height: 6px; border-radius: 99px; background: var(--permukaan-3); overflow: hidden; }
.amplop__batang span { display: block; height: 100%; width: var(--isi, 0); border-radius: inherit; background: var(--ok); transition: width .3s; }
.amplop__batang--waspada span { background: var(--waspada); }
.amplop__batang--bahaya span { background: var(--bahaya); }
.ki-baris { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.ki-baris .masukan { width: 180px; text-align: right; }
.km-pilih { width: auto; }
.dft-form { border-top: 1px solid var(--garis); background: var(--permukaan-2); }
.dft-odp { border: 1px solid var(--garis); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); display: grid; gap: var(--s-2); }
.dft-odp__b { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; cursor: pointer; }
.ap-isi { display: inline-block; max-width: 48ch; white-space: pre-wrap; font-size: var(--t-kecil); }
.gd-tambah { border-top: 1px solid var(--garis); }
.intg-kisi { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }