/* ═══════════════════════════════════════════════════════════════════════════
   Portal penyewa bid-spr — sistem desain (docs/sistem-desain-portal.md).

   Cara berpikir: Wastu MG (mg.wastubumamedia.id, ~/wastu-mg/design-preview)
   — abu murni, kartu putih 16 px tanpa bayang, padding lega, lencana
   bergaris, tabel berkepala abu, sidebar putih dengan blok pengguna, gerbang
   masuk gelap berkisi dengan satu kartu.
   Warna merek: merah app.viswork.id (#DC2626) sebagai SATU-SATUNYA aksen.

   Aturan: komponen memakai PERAN, bukan hex; tanpa gaya sebaris (CSP
   style-src 'self'); tema bawaan ikut sistem, <html data-tema> memaksa.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/source-sans-3.woff2) format('woff2');
}

/* ── Token ─────────────────────────────────────────────────────────────── */

:root {
  /* Merek (viswork) */
  --merek-0: #FEF4F4; --merek-50: #FBE9E9; --merek-100: #F6D2D2;
  --merek-200: #DC2626; --merek-300: #BA2020; --merek-tinta: #B91C1C;
  /* Gelap sekunder: petak logo, sakelar tema aktif, avatar */
  --sekunder: #0F172A;
  /* Abu (Wastu MG) */
  --abu-0: #FFFFFF; --abu-25: #FAFAFA; --abu-50: #F5F5F5; --abu-100: #E5E5E5;
  --abu-200: #D4D4D4; --abu-300: #A3A3A3; --abu-400: #737373; --abu-500: #525252;
  --abu-600: #404040; --abu-700: #262626; --abu-800: #171717; --abu-900: #0A0A0A;
  /* Peringatan (Wastu MG) */
  --sukses-0: #D2F0D2; --sukses-tinta: #13801A;
  --awas-0: #FFF6E0; --awas-tinta: #8A5A00;
  --galat-0: #FEEFF2; --galat-tinta: #B3122F;
  --info-tinta: #106A97;

  --font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-h3: 32px; --fs-h4: 24px; --fs-h5: 20px; --fs-h6: 18px;
  --fs-m: 16px; --fs-s: 14px; --fs-xs: 12px;

  --r-kecil: 8px; --r: 12px; --r-besar: 16px; --r-pil: 999px;
  --sisi-lebar: 270px; --sisi-ciut: 76px;
  --bawah-aman: env(safe-area-inset-bottom, 0px);

  /* Peran — terang (bawaan Wastu MG) */
  --latar: var(--abu-25);
  --permukaan: var(--abu-0);
  --permukaan-redup: var(--abu-50);
  --permukaan-sorot: #F7F7F7;
  --garis: var(--abu-100);
  --garis-kuat: var(--abu-200);
  --teks: var(--abu-900);
  --teks-2: var(--abu-600);
  --teks-3: var(--abu-400);
  --aksen: var(--merek-200);
  --aksen-sorot: var(--merek-300);
  --aksen-lembut: var(--merek-0);
  --aksen-tinta: var(--merek-tinta);
  --di-atas-aksen: #FFFFFF;
  --fokus: 0 0 0 3px rgba(220, 38, 38, 0.28);
  --bayang: 0 4px 16px rgba(10, 10, 10, 0.06);
  --bayang-besar: 0 16px 48px rgba(10, 10, 10, 0.16);
  --belang: var(--abu-25);
  --tema-aktif: var(--sekunder); --tema-aktif-teks: #FFFFFF;
  color-scheme: light;
}

/* Peran — gelap (pemetaan Wastu MG). Dua pemicu; isinya harus sama. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='terang']) {
    --latar: #0B1424; --permukaan: #111D31; --permukaan-redup: #16243B; --permukaan-sorot: #1A2A44;
    --garis: #22334F; --garis-kuat: #2E4366;
    --teks: #F2F4F8; --teks-2: #C2CAD8; --teks-3: #8592A8;
    --aksen: #EF4444; --aksen-sorot: #DC2626; --aksen-lembut: rgba(239, 68, 68, 0.14); --aksen-tinta: #FCA5A5;
    --sukses-0: rgba(31, 182, 32, 0.16); --sukses-tinta: #8FDB90;
    --awas-0: rgba(255, 189, 76, 0.16); --awas-tinta: #FBD982;
    --galat-0: rgba(223, 28, 65, 0.16); --galat-tinta: #F59AAE;
    --info-tinta: #7EDCF1;
    --bayang: 0 4px 16px rgba(0, 0, 0, 0.3); --bayang-besar: 0 16px 48px rgba(0, 0, 0, 0.5);
    --belang: rgba(255, 255, 255, 0.02);
    --tema-aktif: #F2F4F8; --tema-aktif-teks: #0B1424;
    color-scheme: dark;
  }
}
:root[data-tema='gelap'] {
  --latar: #0B1424; --permukaan: #111D31; --permukaan-redup: #16243B; --permukaan-sorot: #1A2A44;
  --garis: #22334F; --garis-kuat: #2E4366;
  --teks: #F2F4F8; --teks-2: #C2CAD8; --teks-3: #8592A8;
  --aksen: #EF4444; --aksen-sorot: #DC2626; --aksen-lembut: rgba(239, 68, 68, 0.14); --aksen-tinta: #FCA5A5;
  --sukses-0: rgba(31, 182, 32, 0.16); --sukses-tinta: #8FDB90;
  --awas-0: rgba(255, 189, 76, 0.16); --awas-tinta: #FBD982;
  --galat-0: rgba(223, 28, 65, 0.16); --galat-tinta: #F59AAE;
  --info-tinta: #7EDCF1;
  --bayang: 0 4px 16px rgba(0, 0, 0, 0.3); --bayang-besar: 0 16px 48px rgba(0, 0, 0, 0.5);
  --belang: rgba(255, 255, 255, 0.02);
  --tema-aktif: #F2F4F8; --tema-aktif-teks: #0B1424;
  color-scheme: dark;
}

/* ── Dasar ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; background: var(--latar); color: var(--teks);
  font-family: var(--font); font-size: var(--fs-m); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r-kecil); }
.pustaka-ikon { display: none; }
svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.angka { font-variant-numeric: tabular-nums; }

/* ── Gerbang: masuk & daftar (pola halaman masuk Wastu MG) ─────────────── */

.gerbang {
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 32px 16px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(220, 38, 38, 0.2), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 72px 72px,
    #0A1220;
  color: #F2F4F8;
}
.gerbang-kotak { width: min(480px, 100%); text-align: center; }
.gerbang-tanda {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 24px;
  border: 1px solid rgba(220, 38, 38, 0.5); border-radius: 20px; background: var(--sekunder); color: #EF4444;
  box-shadow: 0 12px 40px rgba(220, 38, 38, 0.22);
}
.gerbang-tanda svg { width: 40px; height: 40px; }
.gerbang-judul { font-size: var(--fs-h4); }
.gerbang-kartu {
  display: grid; gap: 16px; margin-top: 32px; padding: 24px; text-align: left;
  border: 1px solid #22334F; border-radius: var(--r-besar); background: rgba(17, 29, 49, 0.9);
}
.gerbang-kartu .bidang-label { color: #F2F4F8; }
.gerbang-kartu .bidang-bantu, .gerbang-petunjuk { color: #8592A8; }
.gerbang-kartu .isian { background: #0B1424; border-color: #2E4366; color: #F2F4F8; }
.gerbang-kartu .isian::placeholder { color: #66748C; }
.gerbang-petunjuk { font-size: var(--fs-xs); text-align: center; }
.gerbang-kaki { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; font-size: var(--fs-s); color: #8592A8; }
.gerbang-kaki svg { width: 16px; height: 16px; }

/* ── Aplikasi: sidebar + isi ───────────────────────────────────────────── */

.aplikasi { display: grid; grid-template-columns: var(--sisi-lebar) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.aplikasi.ciut { grid-template-columns: var(--sisi-ciut) minmax(0, 1fr); }

.sisi {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  padding: 20px 12px 16px; background: var(--permukaan); border-right: 1px solid var(--garis);
}
.sisi-merek { display: flex; align-items: center; gap: 12px; padding: 0 6px 20px; }
.tanda-merek { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--sekunder); color: #EF4444; }
.tanda-merek svg { width: 22px; height: 22px; }
.sisi-judul { font-size: var(--fs-s); font-weight: 600; line-height: 1.25; white-space: nowrap; letter-spacing: 0.02em; }
.sisi-judul small { display: block; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; color: var(--teks-3); }
.sisi-ciut { margin-left: auto; }
.sisi-nav { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.nav-grup + .nav-grup { margin-top: 12px; }
.nav-grup-label { padding: 6px 6px 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--teks-2); }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 10px; background: none;
  font-size: var(--fs-s); color: var(--teks-2); white-space: nowrap; cursor: pointer;
}
.nav-item:hover { background: var(--permukaan-sorot); color: var(--teks); }
.nav-item[aria-current='page'] { border-color: var(--garis); background: var(--aksen-lembut); color: var(--aksen-tinta); font-weight: 500; }
.sisi-pengguna { display: flex; align-items: center; gap: 12px; padding: 16px 6px 0; border-top: 1px solid var(--garis); }
.sisi-pengguna-meta { min-width: 0; font-size: var(--fs-s); font-weight: 500; line-height: 1.3; }
.sisi-pengguna-meta small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); font-weight: 400; color: var(--teks-3); }
.sisi-pengguna .tbl-ikon { margin-left: auto; }

.aplikasi.ciut .sisi-judul, .aplikasi.ciut .nav-grup-label, .aplikasi.ciut .nav-teks,
.aplikasi.ciut .sisi-pengguna-meta, .aplikasi.ciut .sisi-pengguna .tbl-ikon { display: none; }
.aplikasi.ciut .sisi-merek { flex-direction: column; }
.aplikasi.ciut .sisi-ciut { margin: 0; transform: rotate(180deg); }
.aplikasi.ciut .nav-item { justify-content: center; padding: 8px; }
.aplikasi.ciut .sisi-pengguna { justify-content: center; }

.isi { min-width: 0; padding: 28px 32px 48px; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.topbar-judul { font-size: var(--fs-h4); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-aksi { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tirai { position: fixed; inset: 0; z-index: 30; border: 0; background: rgba(10, 10, 10, 0.4); }
.hanya-sempit { display: none !important; }

/* ── Tombol ────────────────────────────────────────────────────────────── */

.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 1px solid var(--garis); border-radius: var(--r);
  background: var(--permukaan); color: var(--teks); font-size: var(--fs-m); font-weight: 500;
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.tbl:hover:not(:disabled) { background: var(--permukaan-sorot); }
.tbl:disabled { opacity: 0.55; cursor: progress; }
.tbl-primer { border-color: var(--aksen); background: var(--aksen); color: var(--di-atas-aksen); }
.tbl-primer:hover:not(:disabled) { border-color: var(--aksen-sorot); background: var(--aksen-sorot); }
.tbl-penuh { width: 100%; }
.tbl-kecil { min-height: 36px; padding: 0 12px; font-size: var(--fs-s); }
.tbl-kecil svg { width: 16px; height: 16px; }

.tbl-ikon {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--garis); border-radius: 50%; background: var(--permukaan); color: var(--teks); cursor: pointer;
}
.tbl-ikon:hover { background: var(--permukaan-sorot); }
.tbl-ikon-kecil { width: 32px; height: 32px; }
.tbl-ikon-kecil svg { width: 16px; height: 16px; }
.tbl-ikon-bahaya { color: var(--aksen); }

/* Rem darurat: aksi utama topbar. */
.tbl-rem {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--aksen); border-radius: var(--r-pil); background: var(--aksen); color: var(--di-atas-aksen);
  font-size: var(--fs-s); font-weight: 600; cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.tbl-rem:hover:not(:disabled) { background: var(--aksen-sorot); border-color: var(--aksen-sorot); }
.tbl-rem svg { width: 18px; height: 18px; stroke-width: 2; }
.tbl-rem.tertarik { background: var(--permukaan); border-color: var(--aksen); color: var(--aksen-tinta); }
.tbl-rem:disabled { opacity: 0.6; cursor: progress; }

.sakelar-tema { display: inline-flex; padding: 3px; border: 1px solid var(--garis); border-radius: var(--r-pil); background: var(--permukaan); }
.sakelar-tema button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--teks-2); cursor: pointer; }
.sakelar-tema svg { width: 16px; height: 16px; }
.sakelar-tema button[aria-pressed='true'] { background: var(--tema-aktif); color: var(--tema-aktif-teks); }

.avatar {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px;
  border: 1px solid var(--garis); border-radius: 50%; background: var(--permukaan-redup);
  font-size: var(--fs-s); font-weight: 600; text-transform: uppercase;
}
.avatar-gelap { border-color: transparent; background: var(--sekunder); color: #FCA5A5; }

/* ── Kartu & kisi ──────────────────────────────────────────────────────── */

.halaman { display: grid; gap: 16px; }
.kartu { min-width: 0; padding: 24px; border: 1px solid var(--garis); border-radius: var(--r-besar); background: var(--permukaan); }
.kartu-kepala { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.kartu-judul { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h6); font-weight: 600; }
.kartu-judul svg { width: 22px; height: 22px; }
.kartu-sub { margin-top: 2px; font-size: var(--fs-s); color: var(--teks-3); }
.kartu-aksi { margin-left: auto; }

.kisi { display: grid; gap: 16px; }
.kisi > * { min-width: 0; }
.kisi-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Slot berdampingan (satu kolom per slot). */
.kisi-slot { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.kisi-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* Kartu statistik. */
.stat-label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h6); font-weight: 500; }
.stat-label svg { color: var(--teks-3); stroke-width: 1.5; }
.stat-baris { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.stat-nilai { font-size: var(--fs-h3); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-nilai.kritis { color: var(--aksen); }
.stat-kaki { margin-top: 10px; font-size: var(--fs-s); color: var(--teks-3); }
.stat-kaki.galat { color: var(--galat-tinta); }

/* Chip (tren Wastu MG): latar lembut, untuk keadaan ringkas di kartu stat. */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r-kecil); font-size: var(--fs-xs); background: var(--permukaan-redup); color: var(--teks-2); }
.chip:empty { display: none; }
.chip.sukses { background: var(--sukses-0); color: var(--sukses-tinta); }
.chip.bahaya { background: var(--galat-0); color: var(--galat-tinta); }

/* Lencana: bergaris, warna dari teks (Wastu MG). */
.lencana { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--r-pil); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.lencana:empty { display: none; }
.lencana.sukses { color: var(--sukses-tinta); }
.lencana.bahaya { color: var(--galat-tinta); }
.lencana.awas { color: var(--awas-tinta); }
.lencana.info { color: var(--info-tinta); }
.lencana.netral { border-color: var(--garis-kuat); color: var(--teks); }
.lencana.aksen { border-color: var(--aksen); background: var(--aksen); color: var(--di-atas-aksen); }

.spanduk { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--galat-tinta); border-radius: var(--r); background: var(--galat-0); color: var(--teks); font-size: var(--fs-s); }
.spanduk svg { color: var(--galat-tinta); }
.spanduk strong { color: var(--galat-tinta); }

/* Daftar baris (Perlu perhatian, Riwayat terbaru). */
.daftar-baris { list-style: none; margin: 0; padding: 0; }
.daftar-baris li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.daftar-baris li:first-child { padding-top: 0; }
.daftar-baris li:last-child { border-bottom: 0; padding-bottom: 0; }
.daftar-baris .lencana { flex: none; }
.daftar-teks { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-s); }
.daftar-teks strong { font-weight: 500; overflow-wrap: anywhere; }
.daftar-teks small { font-size: var(--fs-xs); color: var(--teks-3); }
.daftar-kosong { color: var(--teks-3); font-size: var(--fs-s); }

/* ── Isian ─────────────────────────────────────────────────────────────── */

.formulir { display: grid; gap: 16px; }
/* Formulir selebar kartu: bidang berpasangan, tombol satu baris penuh. */
.formulir-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.formulir-dua > .baris-tombol { grid-column: 1 / -1; }
.bidang { display: grid; gap: 8px; }
.bidang-label { font-size: var(--fs-s); font-weight: 500; }
.bidang-label small { font-weight: 400; color: var(--teks-3); }
.bidang-bantu { font-size: var(--fs-xs); color: var(--teks-3); }
.isian {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--garis-kuat); border-radius: var(--r); background: var(--permukaan); font-size: var(--fs-m);
}
.isian::placeholder { color: var(--teks-3); }
.isian:focus { border-color: var(--aksen); outline: none; box-shadow: var(--fokus); }
.isian[readonly] { background: var(--permukaan-redup); color: var(--teks-2); }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 12px; }
.baris-isian { display: flex; align-items: flex-end; gap: 8px; }
.baris-isian .bidang { flex: 1; min-width: 0; }

/* ── Tabel (Wastu MG) ──────────────────────────────────────────────────── */

.bungkus-tabel { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r-besar); padding: 8px; }
.tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.tabel th { padding: 12px 16px; background: var(--permukaan-redup); font-weight: 500; text-align: left; white-space: nowrap; }
.tabel th:first-child { border-radius: var(--r-kecil) 0 0 var(--r-kecil); }
.tabel th:last-child { border-radius: 0 var(--r-kecil) var(--r-kecil) 0; }
.tabel td { padding: 12px 16px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.tabel tbody tr:nth-child(even) td { background: var(--belang); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .kanan { text-align: right; }
.tabel .redup { color: var(--teks-3); }
.tabel .tebal { font-weight: 500; }
.tabel-lipat td { white-space: normal; }
.tabel-lipat td:first-child { white-space: nowrap; color: var(--teks-3); width: 1%; }
.tabel-padat th, .tabel-padat td { padding: 8px 12px; }

/* Rincian kunci–nilai. */
.rincian { display: grid; margin: 0; }
/* Rincian selebar kartu: butir berjajar dalam kisi bergaris (label di atas,
   nilai di bawah). Jalur pasti supaya tidak ada petak kosong: 6 jalur di
   layar lebar (butir lebar = 2), 2 kolom di layar menengah, 1 di HP;
   `dense` mengisi celah yang ditinggalkan butir lebar. */
.rincian-kisi {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1px; margin: 0;
  background: var(--garis); border: 1px solid var(--garis); border-radius: var(--r-besar); overflow: hidden;
}
.rincian-kisi > .butir-lebar { grid-column: span 2; }
@media (max-width: 1279px) { .rincian-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rincian-kisi > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--permukaan); }
.rincian-kisi dt { color: var(--teks-2); font-size: var(--fs-s); }
.rincian-kisi dd { margin: 0; font-size: var(--fs-m); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rincian > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.rincian > div:first-child { padding-top: 0; }
.rincian > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rincian dt { color: var(--teks-2); font-size: var(--fs-s); }
.rincian dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ── Kartu slot ────────────────────────────────────────────────────────── */

.slot-kepala { margin-bottom: 20px; }
.slot-kepala-atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: 8px; }
.slot-nomor { font-size: var(--fs-xs); font-weight: 500; color: var(--teks-3); }
.slot-lencana { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lot-nama { font-size: var(--fs-h6); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.lot-kode { font-size: var(--fs-s); color: var(--teks-3); }
.slot-kosong { padding: 24px; border: 1px dashed var(--garis-kuat); border-radius: var(--r); color: var(--teks-3); font-size: var(--fs-s); text-align: center; }

.slot-inti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.slot-panel { padding: 16px; border: 1px solid var(--garis); border-radius: var(--r); min-width: 0; }
.slot-panel-label { font-size: var(--fs-s); color: var(--teks-2); }
.mundur-angka { margin-top: 4px; font-size: 44px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mundur-jam { margin-top: 4px; font-size: var(--fs-xs); color: var(--teks-3); font-variant-numeric: tabular-nums; }
.mundur progress {
  display: block; width: 100%; height: 4px; margin-top: 12px; border: 0; border-radius: 2px;
  appearance: none; -webkit-appearance: none; background: var(--garis); color: var(--teks-3); overflow: hidden;
}
.mundur progress::-webkit-progress-bar { background: var(--garis); border-radius: 2px; }
.mundur progress::-webkit-progress-value { background: currentColor; border-radius: 2px; }
.mundur progress::-moz-progress-bar { background: currentColor; border-radius: 2px; }
.mundur.dekat .mundur-angka { color: var(--awas-tinta); }
.mundur.dekat progress { color: #F59E0B; }
.mundur.kritis { border-color: var(--aksen); }
.mundur.kritis .mundur-angka { color: var(--aksen); }
.mundur.kritis progress { color: var(--aksen); }
.mundur.tutup .mundur-angka { color: var(--teks-3); }
.harga-nilai { margin-top: 4px; font-size: var(--fs-h4); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.harga-kita { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--garis); }
.harga-kita-nilai { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.harga-kita .slot-panel-label { display: block; font-size: var(--fs-xs); }

.slot-rincian { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.slot-rincian > div, .slot-rincian > div:first-child, .slot-rincian > div:last-child { padding: 10px 0; border-bottom: 1px solid var(--garis); }
.slot-gerak { margin-top: 16px; }
.slot-gerak-judul { margin-bottom: 8px; font-size: var(--fs-s); font-weight: 500; }
.slot-catatan { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 12px; border-radius: var(--r-kecil); background: var(--awas-0); color: var(--awas-tinta); font-size: var(--fs-s); }
.slot-catatan:empty { display: none; }

  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 24px;
  list-style: none; cursor: pointer; font-size: var(--fs-s); font-weight: 500;
}

/* Segmen mode (Wastu MG). */
.segmen { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: var(--r); background: var(--permukaan-redup); }
.segmen .tbl { min-height: 36px; border: 0; border-radius: var(--r-kecil); background: none; font-size: var(--fs-s); color: var(--teks-2); }
.segmen .tbl[aria-pressed='true'] { background: var(--permukaan); box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06); color: var(--teks); font-weight: 600; }

/* Bilah alat di atas tabel (cari + saringan), pola Wastu MG. */
.bilah-alat { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.cari { position: relative; flex: 0 1 360px; }
.cari svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--teks-3); }
.cari .isian { min-height: 44px; padding-left: 40px; }
.segmen-sempit { display: inline-grid; grid-template-columns: repeat(2, auto); }
.segmen-sempit .tbl { padding: 0 16px; }
.daftar-kosong:empty { display: none; }
.catatan { font-size: 13px; color: var(--teks-3); }
#s-lelang-kunci { margin: 0 0 16px; }
.daftar-kosong.galat { color: var(--galat-tinta); }
.kartu > .daftar-kosong { margin-bottom: 12px; }
.jarak-atas { margin-top: 16px; }

/* Lelang saya: lencana berdampingan, ringkasan saringan aktif. */
.sel-lencana { white-space: normal; }
.tabel td.sel-lot { white-space: normal; min-width: 170px; }
.tabel td.sel-lencana { max-width: 240px; }
.tabel td.sel-tanggal { font-variant-numeric: tabular-nums; }
.tabel td.sel-ujl { font-variant-numeric: tabular-nums; }
/* Tabel yang bergulir di dalam kotaknya (Lelang saya): kepala tetap,
   50 baris berikutnya digambar saat gulir mendekati ujung. */
.tabel-gulir { max-height: max(420px, calc(100dvh - 220px)); overflow: auto; padding-top: 0; scrollbar-width: thin; }
.tabel-gulir thead th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--garis); }
/* Kotak di kisi dua kolom (halaman Slot): setinggi kartu sebelahnya. */
.tabel-gulir-sedang { max-height: 480px; }
.tabel-lanjut { height: 1px; }
.sel-ujl .daftar-teks { align-items: flex-start; gap: 4px; }
.sel-ujl strong { font-weight: 600; }
/* Tabel banyak kolom: judul boleh melipat, padding sel lebih rapat. */
.tabel-rapat th { white-space: normal; line-height: 1.3; vertical-align: bottom; }
.tabel-rapat th, .tabel-rapat td { padding-left: 10px; padding-right: 10px; }
.lot-kepala { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sel-lencana .lencana { margin: 2px 4px 2px 0; }
/* Tabel lebar: lencana dalam satu sel bertumpuk, supaya kolom tetap sempit. */
.tabel-rapat td.sel-lencana .lencana { display: flex; width: max-content; margin: 3px 0; }
.angka-saring { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pil); background: var(--aksen); color: var(--di-atas-aksen); font-size: var(--fs-xs); font-weight: 600; }
.angka-saring:empty { display: none; }
.saringan-aktif { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.chip-saring { min-height: 32px; padding: 0 12px; border: 1px solid var(--garis-kuat); border-radius: var(--r-pil); background: var(--permukaan-redup); color: var(--teks); font-size: var(--fs-s); cursor: pointer; }
.chip-saring:hover { border-color: var(--aksen); }

/* Dialog bawaan peramban (<dialog>), gaya kartu Wastu MG. */
.dialog {
  width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 24px;
  border: 1px solid var(--garis); border-radius: var(--r-besar); background: var(--permukaan); color: var(--teks);
  box-shadow: var(--bayang-besar);
}
.dialog::backdrop { background: rgba(10, 10, 10, 0.45); }
.dialog-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dialog-aksi { display: grid; gap: 12px; margin-top: 20px; }
.dialog-baris-aksi .tbl { width: 100%; }
.dialog-baris-aksi .bidang-bantu { display: block; margin-top: 6px; }
.dialog-kaki { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.grup-pilihan + .grup-pilihan { margin-top: 16px; }
.pilihan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pilihan .tbl[aria-pressed='true'] { border-color: var(--aksen); background: var(--aksen-lembut); color: var(--aksen-tinta); font-weight: 600; }

/* Dialog konfirmasi: ikon nada, judul, pesan, rincian, Batal + tindakan. */
.dialog-konfirmasi { width: min(460px, calc(100% - 32px)); }
.konfirmasi-kepala { display: flex; align-items: flex-start; gap: 16px; }
.konfirmasi-ikon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: 50%; background: var(--aksen-lembut); color: var(--aksen);
}
.konfirmasi-ikon svg { width: 22px; height: 22px; stroke-width: 1.9; }
.dialog-konfirmasi:not(.bahaya) .konfirmasi-ikon { background: var(--permukaan-redup); color: var(--teks-2); }
.konfirmasi-pesan:empty { display: none; }
.konfirmasi-pesan { margin-top: 6px; font-size: var(--fs-s); color: var(--teks-2); line-height: 1.55; }
.konfirmasi-rincian { margin-top: 20px; padding: 4px 16px; border: 1px solid var(--garis); border-radius: var(--r); background: var(--permukaan-redup); }
.konfirmasi-rincian > div, .konfirmasi-rincian > div:first-child, .konfirmasi-rincian > div:last-child { padding: 10px 0; }
.konfirmasi-rincian dd { font-weight: 600; }
.dialog-konfirmasi .dialog-kaki .tbl { min-width: 112px; }
.tbl-bahaya { border-color: var(--aksen); background: var(--aksen); color: var(--di-atas-aksen); }
.tbl-bahaya:hover:not(:disabled) { border-color: var(--aksen-sorot); background: var(--aksen-sorot); }

/* Kanan kepala kartu slot: lencana status + aksi Atur strategi. */
.slot-aksi { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.tbl-strategi { gap: 6px; }
.tbl-strategi svg { width: 16px; height: 16px; }

/* Dialog Atur strategi: dua bagian berlangkah. */
.dialog-strategi { width: min(560px, calc(100% - 32px)); }
.strategi-bagian { padding: 20px 0; border-top: 1px solid var(--garis); }
.strategi-bagian:last-of-type { padding-bottom: 0; }
.strategi-kepala { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.strategi-kepala h3 { font-size: var(--fs-m); font-weight: 600; }
.strategi-langkah { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--permukaan-redup); border: 1px solid var(--garis); font-size: var(--fs-s); font-weight: 600; color: var(--teks-2); }
.strategi-rincian { margin-bottom: 16px; padding: 4px 16px; border: 1px solid var(--garis); border-radius: var(--r); }
.strategi-rincian > div, .strategi-rincian > div:first-child, .strategi-rincian > div:last-child { padding: 10px 0; }
.strategi-status-lencana { margin-left: auto; align-self: center; }
/* Tombol di dalam isian (kanan), mis. "Ubah" pada budget yang terkunci. */
.isian-awalan { position: relative; }
.tbl-sisip {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); background: var(--permukaan);
  color: var(--teks); font: inherit; font-size: var(--fs-s); font-weight: 500; cursor: pointer;
}
.tbl-sisip:hover { background: var(--permukaan-sorot); }
.tbl-sisip svg { width: 16px; height: 16px; }
.tbl-sisip[hidden] { display: none; }
.isian-awalan:has(.tbl-sisip:not([hidden])) .isian { padding-right: 100px; }
/* Terkunci: angka inilah yang dipakai asisten. */
.isian-awalan.terkunci .isian { background: var(--permukaan-redup); color: var(--teks); font-weight: 600; cursor: default; }
.baris-tombol-kanan { justify-content: flex-end; }
.isian-awalan { display: flex; align-items: stretch; }
.isian-awalan > span { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--garis-kuat); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: var(--permukaan-redup); color: var(--teks-2); font-weight: 500; }
.isian-awalan .isian { border-radius: 0 var(--r) var(--r) 0; font-variant-numeric: tabular-nums; }
.bidang-bantu.galat { color: var(--galat-tinta); }

/* Kata sandi dengan tombol tampilkan/sembunyikan di dalam isian. */
.isian-sandi { position: relative; display: block; }
.isian-sandi .isian { padding-right: 52px; }
.tbl-mata {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--r-kecil); background: none; color: var(--teks-3); cursor: pointer;
}
.tbl-mata:hover { color: var(--teks); background: var(--permukaan-sorot); }
.tbl-mata[aria-pressed='true'] { color: var(--aksen); }

/* ── Kabar ─────────────────────────────────────────────────────────────── */

#pesan {
  position: fixed; z-index: 50; right: 24px; bottom: calc(24px + var(--bawah-aman));
  width: min(400px, calc(100% - 32px)); padding: 14px 16px;
  border: 1px solid var(--garis); border-radius: var(--r); background: var(--permukaan); color: var(--teks);
  box-shadow: var(--bayang-besar); font-size: var(--fs-s); cursor: pointer;
}
#pesan:empty { display: none; }
#pesan.galat { border-color: var(--galat-tinta); color: var(--galat-tinta); }
#pesan.ok { border-color: var(--sukses-tinta); color: var(--sukses-tinta); }

/* ── Responsif (Wastu MG: laci ≤ 860 px) ───────────────────────────────── */

@media (max-width: 1100px) {
  .kisi-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kisi-slot, .kisi-dua { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .formulir-dua { grid-template-columns: minmax(0, 1fr); }
  .tabel-gulir { max-height: none; }
  .rincian-kisi { grid-template-columns: minmax(0, 1fr); }
  .rincian-kisi > .butir-lebar { grid-column: auto; }
  .aplikasi, .aplikasi.ciut { grid-template-columns: minmax(0, 1fr); }
  .sisi { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sisi-lebar); transform: translateX(-100%); transition: transform 0.2s; }
  .aplikasi.laci-buka .sisi { transform: none; box-shadow: var(--bayang-besar); }
  .aplikasi.ciut .sisi-judul, .aplikasi.ciut .nav-grup-label, .aplikasi.ciut .nav-teks,
  .aplikasi.ciut .sisi-pengguna-meta, .aplikasi.ciut .sisi-pengguna .tbl-ikon { display: revert; }
  .sisi-ciut { display: none !important; }
  .hanya-sempit { display: inline-grid !important; }
  .isi { padding: 16px 16px calc(96px + var(--bawah-aman)); }
  .topbar { margin-bottom: 16px; }
  .topbar-judul { font-size: var(--fs-h5); }
  .kisi-dua { grid-template-columns: minmax(0, 1fr); }
  /* Rem darurat: tombol apung di jangkauan jempol. */
  .tbl-rem { position: fixed; z-index: 45; right: 16px; bottom: calc(16px + var(--bawah-aman)); min-height: 52px; padding: 0 20px; font-size: var(--fs-m); box-shadow: var(--bayang-besar); }
  #pesan { right: 16px; bottom: calc(84px + var(--bawah-aman)); }
}
/* Tabel → kartu per baris di layar sempit (pola daftar HP); label kolom
   dari atribut data-label (Rust), bukan gaya sebaris. */
@media (max-width: 860px) {
  .tabel-kartu thead { display: none; }
  .tabel-kartu, .tabel-kartu tbody, .tabel-kartu tr, .tabel-kartu td { display: block; width: 100%; }
  .bungkus-tabel:has(.tabel-kartu) { padding: 0; border: 0; overflow: visible; max-height: none; }
  .tabel-kartu tr { margin-bottom: 12px; padding: 12px 16px; border: 1px solid var(--garis); border-radius: var(--r); background: var(--permukaan); }
  .tabel-kartu tbody tr:nth-child(even) td { background: none; }
  .tabel-kartu td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; white-space: normal; text-align: right; }
  .tabel-kartu td::before { content: attr(data-label); flex: none; color: var(--teks-3); font-size: var(--fs-xs); text-align: left; }
  .tabel-kartu td[data-label=''] ::before, .tabel-kartu td[data-label='']::before { content: none; }
  .tabel-kartu td.sel-lot { display: block; min-width: 0; text-align: left; padding-bottom: 8px; border-bottom: 1px solid var(--garis); margin-bottom: 4px; }
  .tabel-kartu td.sel-lot::before { content: none; }
  .tabel-kartu td.sel-lencana { max-width: none; justify-content: flex-end; flex-wrap: wrap; column-gap: 6px; row-gap: 4px; }
  .tabel-kartu td.sel-lencana::before { margin-right: auto; }
  .tabel-kartu.tabel-rapat td.sel-lencana .lencana { display: inline-flex; margin: 0; }
  .tabel-kartu .sel-ujl .daftar-teks { align-items: flex-end; }
  .tabel-kartu td.sel-aksi { justify-content: stretch; padding-top: 8px; }
  .tabel-kartu td.sel-aksi .tbl { width: 100%; }
  .tabel-kartu td.sel-aksi .tbl-ikon { width: 40px; height: 40px; margin-left: auto; }
}
@media (max-width: 560px) {
  .kisi-stat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .kartu { padding: 16px; }
  .stat-label { font-size: var(--fs-s); }
  .stat-label svg { display: none; }
  .stat-baris { margin-top: 8px; }
  .stat-nilai { font-size: var(--fs-h5); }
  .slot-kepala { margin-bottom: 16px; }
  .slot-kepala-atas { flex-wrap: wrap; }
  .slot-inti { grid-template-columns: minmax(0, 1fr); }
  .slot-rincian { grid-template-columns: minmax(0, 1fr); }
  .kendali { margin: 16px -16px -16px; }
  .kendali > summary { padding: 0 16px; }
  .kendali-isi { padding: 4px 16px 16px; }
  .mundur-angka { font-size: 48px; }
}