/* ═══════════════════════════════════════════════════════════════════════════
   Etd POME — sistem visual produksi
   Arah pemenang: "PITA MUAT–KOSONG"
   Cangkokan: <tfoot> sejajar kolom + kepala grup kolom + kolom lekat
              (dari "Perjalanan Pergi–Pulang")
              nomor SD tiga bobot + .gulung sebagai containing block + mikro-label
              (dari "Tembusan Karbon")

   ATURAN BERKAS INI
   1. Semua warna, ukuran, jarak, radius, dan bayangan hidup sebagai custom
      property di blok TOKEN di bawah. Tidak ada satu pun hex lepas setelah
      blok itu. Kalau kamu butuh warna baru, tambahkan tokennya - jangan
      menuliskan hex di tengah berkas.
   2. Setiap warna punya SATU tugas:
        petrol   -> struktur, aksi, bagian bermuatan pita
        kuningan -> HANYA anomali / perlu ditinjau
        murbei   -> HANYA konstanta yang ditetapkan (0,49 / 0,25 / 3,14 / EF)
        koreksi  -> HANYA aksi merusak dan pesan galat
      Kalau kuning muncul di layar, artinya selalu satu hal: ada yang perlu
      diperiksa. Jangan encerkan aturan ini.
   3. Nol permintaan jaringan. Tanpa @import, tanpa url(http...), tanpa font
      luar. Kepribadian tipografi datang dari skala, bobot, tracking, case,
      dan tabular-nums.
   4. Spesifisitas dijaga rendah dan rata. Komponen dipegang selektor kelas
      tunggal. Selektor elemen hanya dipakai di blok reset paling atas dan di
      dalam ruang lingkup satu komponen (mis. .tabel td). Jangan menambah
      aturan margin/padding pada selektor elemen global - itu sumber klasik
      aturan yang saling membatalkan.

   ── TOKEN WARNA DASAR (tetap, tidak berubah antar tema) ────────────────────
     --kabut    #E6EBEA  ground terang, kelabu dingin bersemu hijau
     --kapur    #F7FAF9  permukaan terang
     --kolam    #0E1A1C  tinta terang / ground gelap, hitam-kehijauan
     --petrol   #0B4A55  struktur, aksi, pita bermuatan
     --kuningan #8A5B12  anomali
     --murbei   #7A3560  konstanta
     --koreksi  #A63A3F  aksi merusak dan galat

   ── TOKEN PERAN (berubah antar tema) ───────────────────────────────────────
     --dasar --permukaan --permukaan-2 --permukaan-3
     --teks --teks-redup --teks-samar
     --garis --garis-halus
     --aksi --aksi-teks --aksi-lembut --aksi-tepi
     --tanda --tanda-teks --tanda-lembut --tanda-tepi
     --konst --konst-lembut
     --bahaya --bahaya-lembut --bahaya-tepi
     --pita-muat --pita-kosong
     --fokus --fokus-halo
     --bayang-warna

   ── SKALA TIPE ─────────────────────────────────────────────────────────────
     --tp-mikro 10.5px   label pra-cetak KAPITAL (kepala grup, label saring)
     --tp-xs    11px     mikro-label, catatan kaki, kepala kolom
     --tp-sm    12px     bantuan di bawah field, meta
     --tp-md    13px     isi tabel, tombol kecil
     --tp-base  14px     badan teks, isian formulir
     --tp-lg    15px     angka Etd (elemen paling keras di halaman)
     --tp-judul clamp(19px,2.4vw,23px)
     --tp-judul-besar clamp(22px,3vw,28px)

   ── SKALA JARAK ────────────────────────────────────────────────────────────
     --s1 4px  --s2 8px  --s3 12px  --s4 16px  --s5 24px  --s6 32px  --s7 48px

   ── RADIUS ─────────────────────────────────────────────────────────────────
     --r1 4px  --r2 7px  --r3 10px  --r-penuh 999px

   ── BAYANGAN ───────────────────────────────────────────────────────────────
     --bayang-1     kartu terangkat
     --bayang-2     bar melayang / panel
     --bayang-lekat tepi kolom lekat saat tabel digeser
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKEN
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* palet dasar */
  --kabut:    #E6EBEA;
  --kapur:    #F7FAF9;
  --kolam:    #0E1A1C;
  --petrol:   #0B4A55;
  --kuningan: #8A5B12;
  --murbei:   #7A3560;
  --koreksi:  #A63A3F;

  /* peran - tema terang */
  --dasar:        var(--kabut);
  --permukaan:    var(--kapur);
  --permukaan-2:  #EFF3F2;
  --permukaan-3:  #E1E8E7;
  --teks:         var(--kolam);
  --teks-redup:   #415255;
  --teks-samar:   #566669;
  --garis:        #C3D0CF;
  --garis-halus:  #DCE4E3;

  --aksi:         var(--petrol);
  --aksi-teks:    #F7FAF9;
  --aksi-lembut:  #DBE9EB;
  --aksi-tepi:    #9CBEC3;

  --tanda:        var(--kuningan);
  --tanda-teks:   #FFFFFF;
  --tanda-lembut: #F7EBD4;
  --tanda-tepi:   #D9BC7E;

  --konst:        var(--murbei);
  --konst-lembut: #F4E6EE;

  --bahaya:       var(--koreksi);
  --bahaya-lembut:#F8E7E7;
  --bahaya-tepi:  #DFAFAF;

  --pita-muat:    var(--petrol);
  --pita-kosong:  #A9C6C9;

  --fokus:        #073B44;
  --fokus-halo:   #F7FAF9;
  --bayang-warna: 14 26 28;

  /* tipe */
  --sans: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", Inter, system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo,
          Consolas, "Liberation Mono", "Courier New", monospace;

  --tp-mikro: 10.5px;
  --tp-xs:    11px;
  --tp-sm:    12px;
  --tp-md:    13px;
  --tp-base:  14px;
  --tp-lg:    15px;
  --tp-judul: clamp(19px, 2.4vw, 23px);
  --tp-judul-besar: clamp(22px, 3vw, 28px);

  --lacak-mikro: .12em;
  --lacak-judul: -.02em;

  /* jarak */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* radius */
  --r1: 4px;
  --r2: 7px;
  --r3: 10px;
  --r-penuh: 999px;

  /* bayangan */
  --bayang-1: 0 1px 2px rgb(var(--bayang-warna) / .06),
              0 1px 1px rgb(var(--bayang-warna) / .04);
  --bayang-2: 0 -1px 0 rgb(var(--bayang-warna) / .06),
              0 -8px 24px rgb(var(--bayang-warna) / .12);
  --bayang-lekat: 6px 0 8px -6px rgb(var(--bayang-warna) / .22);
  --bayang-lekat-kanan: -6px 0 8px -6px rgb(var(--bayang-warna) / .22);

  /* ukuran kerangka */
  --rel-tinggi: 54px;
  --laman-lebar: 1360px;

  /* lebar kolom pasti - dipakai untuk menghitung offset kolom lekat.
     JANGAN menulis offset lekat sebagai style inline di template; semuanya
     diturunkan dari tiga angka ini. */
  --kol-pilih: 40px;
  --kol-etd: 104px;
  --grup-tinggi: 30px;
  --tabel-min: 1204px;
}

/* Tema gelap ditulis DUA KALI supaya tombol tema menang di dua arah:
   sekali untuk preferensi sistem (kecuali pengguna memaksa terang),
   sekali untuk data-theme="dark". Jangan gabungkan - itu justru
   menghilangkan kemampuan memaksa tema terang di perangkat gelap. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --dasar:        var(--kolam);
    --permukaan:    #152528;
    --permukaan-2:  #1B2E31;
    --permukaan-3:  #223A3E;
    --teks:         #DCE7E6;
    --teks-redup:   #A6BABC;
    --teks-samar:   #8FA3A5;
    --garis:        #2C4347;
    --garis-halus:  #223639;

    --aksi:         #5FC2D2;
    --aksi-teks:    #08171A;
    --aksi-lembut:  #173B42;
    --aksi-tepi:    #2F6874;

    --tanda:        #E0A94A;
    --tanda-teks:   #21170A;
    --tanda-lembut: #3A2E14;
    --tanda-tepi:   #6B5527;

    --konst:        #DDA0C6;
    --konst-lembut: #3A2231;

    --bahaya:       #EE8F97;
    --bahaya-lembut:#3C1F22;
    --bahaya-tepi:  #6E393D;

    --pita-muat:    #5FC2D2;
    --pita-kosong:  #2E5960;

    --fokus:        #8FE2EF;
    --fokus-halo:   #0E1A1C;
    --bayang-warna: 0 0 0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --dasar:        var(--kolam);
  --permukaan:    #152528;
  --permukaan-2:  #1B2E31;
  --permukaan-3:  #223A3E;
  --teks:         #DCE7E6;
  --teks-redup:   #A6BABC;
  --teks-samar:   #8FA3A5;
  --garis:        #2C4347;
  --garis-halus:  #223639;

  --aksi:         #5FC2D2;
  --aksi-teks:    #08171A;
  --aksi-lembut:  #173B42;
  --aksi-tepi:    #2F6874;

  --tanda:        #E0A94A;
  --tanda-teks:   #21170A;
  --tanda-lembut: #3A2E14;
  --tanda-tepi:   #6B5527;

  --konst:        #DDA0C6;
  --konst-lembut: #3A2231;

  --bahaya:       #EE8F97;
  --bahaya-lembut:#3C1F22;
  --bahaya-tepi:  #6E393D;

  --pita-muat:    #5FC2D2;
  --pita-kosong:  #2E5960;

  --fokus:        #8FE2EF;
  --fokus-halo:   #0E1A1C;
  --bayang-warna: 0 0 0;
}

:root[data-theme="light"] { color-scheme: light; }

/* ─────────────────────────────────────────────────────────────────────────
   2. RESET
   Satu-satunya tempat selektor elemen boleh mengatur margin/padding.
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;          /* jaring pengaman, BUKAN penambal cacat tata letak */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--dasar);
  color: var(--teks);
  font-family: var(--sans);
  font-size: var(--tp-base);
  line-height: 1.45;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset, legend {
  margin: 0;
  padding: 0;
}
fieldset { border: 0; min-inline-size: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; }
a { color: var(--aksi); text-underline-offset: 2px; }
table { border-collapse: separate; border-spacing: 0; }
img, svg { max-width: 100%; }

/* Fokus keyboard: spesifisitas nol lewat :where(), jadi tidak akan tanpa
   sengaja ditimpa oleh aturan komponen mana pun. JANGAN pernah menulis
   outline:none di berkas ini. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--r1);
}

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

/* ─────────────────────────────────────────────────────────────────────────
   3. UTILITAS
   ───────────────────────────────────────────────────────────────────────── */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lewati {
  position: absolute;
  inset-inline-start: var(--s2);
  inset-block-start: -60px;
  z-index: 60;
  background: var(--aksi);
  color: var(--aksi-teks);
  padding: var(--s2) var(--s4);
  border-radius: var(--r2);
  font-weight: 600;
  text-decoration: none;
}
.lewati:focus { inset-block-start: var(--s2); }

.mono { font-family: var(--mono); }

/* Semua angka WAJIB memakai .num: mono, tabular, rata kanan, tidak patah. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-align: right;
  white-space: nowrap;
}

/* Label pra-cetak. Inilah pemikul kepribadian tipografi halaman ini:
   KAPITAL mungil bertracking lebar, meniru teks tercetak pada kotak isian
   Surat Dispatch. Dipakai untuk label saring dan kepala grup kolom. */
.mikro {
  display: block;
  font-size: var(--tp-mikro);
  font-weight: 700;
  letter-spacing: var(--lacak-mikro);
  text-transform: uppercase;
  color: var(--teks-samar);
  line-height: 1.3;
}

.redup { color: var(--teks-redup); }
.samar { color: var(--teks-samar); }
.nowrap { white-space: nowrap; }
.rata-kanan { text-align: right; }

/* ─────────────────────────────────────────────────────────────────────────
   4. KERANGKA HALAMAN + NAVIGASI
   ───────────────────────────────────────────────────────────────────────── */
.rel {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: var(--permukaan);
  border-block-end: 1px solid var(--garis);
}

.rel-dalam {
  max-inline-size: var(--laman-lebar);
  margin-inline: auto;
  min-block-size: var(--rel-tinggi);
  padding-inline: clamp(var(--s3), 3vw, var(--s5));
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.merek {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  color: var(--teks);
  padding-block: var(--s2);
}
.merek-nama {
  font-size: var(--tp-base);
  font-weight: 700;
  letter-spacing: var(--lacak-judul);
}
.merek-nama em {
  font-style: normal;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--aksi);
}
.merek-sub {
  font-size: var(--tp-xs);
  color: var(--teks-samar);
}

.nav { display: flex; gap: var(--s1); flex-wrap: wrap; }
.nav-tautan {
  display: inline-block;
  padding: var(--s2) var(--s3);
  border-radius: var(--r2);
  font-size: var(--tp-md);
  font-weight: 600;
  color: var(--teks-redup);
  text-decoration: none;
}
.nav-tautan:hover { background: var(--permukaan-2); color: var(--teks); }
.nav-tautan.aktif,
.nav-tautan[aria-current="page"] {
  background: var(--aksi-lembut);
  color: var(--teks);
  box-shadow: inset 0 0 0 1px var(--aksi-tepi);
}

.rel-kanan {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.laman {
  max-inline-size: var(--laman-lebar);
  margin-inline: auto;
  padding: var(--s5) clamp(var(--s3), 3vw, var(--s5)) var(--s7);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Blok judul: judul + meta di kiri, satu aksi utama di kanan. */
.judul-blok {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.judul {
  font-size: var(--tp-judul);
  font-weight: 650;
  letter-spacing: var(--lacak-judul);
  line-height: 1.15;
}
.judul-meta {
  margin-block-start: var(--s1);
  font-size: var(--tp-sm);
  color: var(--teks-samar);
}
.judul-meta .num { font-size: var(--tp-sm); }
.judul-aksi { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────────────────
   5. KARTU
   ───────────────────────────────────────────────────────────────────────── */
.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis-halus);
  border-radius: var(--r3);
  box-shadow: var(--bayang-1);
}
.kartu-kepala {
  padding: var(--s4) var(--s5);
  border-block-end: 1px solid var(--garis-halus);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.kartu-judul {
  font-size: var(--tp-base);
  font-weight: 700;
  letter-spacing: -.01em;
}
.kartu-isi { padding: var(--s5); }
.kartu-isi-rapat { padding: var(--s4); }
.kartu-kaki {
  padding: var(--s4) var(--s5);
  border-block-start: 1px solid var(--garis-halus);
  background: var(--permukaan-2);
  border-end-start-radius: var(--r3);
  border-end-end-radius: var(--r3);
}
/* Kartu tenang: untuk blok penjelas, bukan untuk isi utama. */
.kartu-tenang {
  background: var(--permukaan-2);
  border-color: var(--garis-halus);
  box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. TOMBOL
   ───────────────────────────────────────────────────────────────────────── */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  min-block-size: 36px;
  border-radius: var(--r2);
  border: 1px solid var(--garis);
  background: var(--permukaan);
  color: var(--teks);
  font-size: var(--tp-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.tombol:hover { background: var(--permukaan-2); }
.tombol:disabled,
.tombol[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

.tombol-utama {
  background: var(--aksi);
  border-color: var(--aksi);
  color: var(--aksi-teks);
}
.tombol-utama:hover {
  background: var(--aksi);
  border-color: var(--aksi);
  filter: brightness(1.12);
}

.tombol-kedua {
  background: var(--permukaan);
  border-color: var(--garis);
  color: var(--teks);
}

.tombol-bahaya {
  background: var(--permukaan);
  border-color: var(--bahaya-tepi);
  color: var(--bahaya);
}
.tombol-bahaya:hover { background: var(--bahaya-lembut); }

.tombol-hantu {
  border-color: transparent;
  background: none;
  color: var(--teks-redup);
}
.tombol-hantu:hover { background: var(--permukaan-2); color: var(--teks); }

.tombol-kecil {
  min-block-size: 30px;
  padding: var(--s1) var(--s3);
  font-size: var(--tp-sm);
}
.tombol-lebar { inline-size: 100%; }

/* Tombol ganti tema. Label harus menyebut AKIBATNYA ("Pakai tema gelap"),
   bukan keadaan sekarang, dan tanpa aria-pressed - itu bertabrakan dengan
   labelnya bagi pembaca layar. */
.tombol-tema {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  min-block-size: 34px;
  border: 1px solid var(--garis);
  border-radius: var(--r2);
  background: var(--permukaan);
  color: var(--teks-redup);
  font-size: var(--tp-sm);
  font-weight: 600;
  cursor: pointer;
}
.tombol-tema:hover { background: var(--permukaan-2); color: var(--teks); }
.tombol-tema-ikon {
  inline-size: 13px;
  block-size: 13px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
  flex: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. LENCANA / CHIP
   ───────────────────────────────────────────────────────────────────────── */
.lencana {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 1px var(--s2);
  border-radius: var(--r-penuh);
  border: 1px solid var(--garis);
  background: var(--permukaan-2);
  color: var(--teks-redup);
  font-size: var(--tp-mikro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.7;
}
.lencana-iscc {
  border-color: var(--aksi-tepi);
  background: var(--aksi-lembut);
  color: var(--teks);
}
/* INS dibedakan bentuk DAN warna, karena cabang rumusnya memang beda:
   INS tidak memakai jumlah truk. */
.lencana-ins {
  border-color: var(--tanda-tepi);
  background: var(--tanda-lembut);
  color: var(--teks);
}
.lencana-tanda {
  border-color: var(--tanda-tepi);
  background: var(--tanda-lembut);
  color: var(--tanda);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--tp-xs);
}
.lencana-batal {
  border-color: var(--garis);
  background: var(--permukaan-2);
  color: var(--teks-samar);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--tp-xs);
}

/* ─────────────────────────────────────────────────────────────────────────
   8. BAR SARING + KOTAK CARI
   ───────────────────────────────────────────────────────────────────────── */
.saring {
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s4);
  background: var(--permukaan);
  border: 1px solid var(--garis-halus);
  border-radius: var(--r3);
  box-shadow: var(--bayang-1);
}
.saring-medan {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-inline-size: 0;
}
.saring-medan-lebar { flex: 1 1 260px; }
.saring-aksi { display: flex; gap: var(--s2); margin-inline-start: auto; }

.isian,
.pilihan {
  inline-size: 100%;
  min-block-size: 36px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--garis);
  border-radius: var(--r2);
  background: var(--permukaan);
  color: var(--teks);
  font-size: var(--tp-base);
}
.isian::placeholder { color: var(--teks-samar); opacity: 1; }
.isian:hover, .pilihan:hover { border-color: var(--aksi-tepi); }

/* Isian yang menampung angka atau identitas selalu mono + tabular. */
.isian-num,
.isian[type="date"],
.isian[inputmode="decimal"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.isian-num { text-align: right; }

.pilihan {
  appearance: none;
  padding-inline-end: var(--s6);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right var(--s4) center,
    right calc(var(--s4) - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.cari-bungkus { position: relative; display: block; }
.cari-bungkus .isian { padding-inline-start: var(--s6); }
.cari-ikon {
  position: absolute;
  inset-inline-start: var(--s3);
  inset-block: 0;
  display: flex;
  align-items: center;
  color: var(--teks-samar);
  pointer-events: none;
  font-size: var(--tp-md);
}

/* Segmented control untuk ISCC / INS.
   Sengaja BUKAN dropdown: percabangan rumus adalah keputusan terpenting di
   layar ini dan harus terbaca tanpa diklik. */
.segmen {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--garis);
  border-radius: var(--r2);
  background: var(--permukaan-2);
}
.segmen-opsi { position: relative; display: flex; }
.segmen-opsi input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segmen-opsi span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 54px;
  min-block-size: 30px;
  padding-inline: var(--s3);
  border-radius: var(--r1);
  font-size: var(--tp-md);
  font-weight: 600;
  color: var(--teks-redup);
}
.segmen-opsi input:checked + span {
  background: var(--permukaan);
  color: var(--teks);
  box-shadow: inset 0 0 0 1px var(--garis), var(--bayang-1);
}
.segmen-opsi input:focus-visible + span {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. LEMBAR TABEL DATA
   ───────────────────────────────────────────────────────────────────────── */
.lembar {
  background: var(--permukaan);
  border: 1px solid var(--garis-halus);
  border-radius: var(--r3);
  box-shadow: var(--bayang-1);
  overflow: hidden;               /* mengurung sudut membulat tabel */
}

/* SATU-SATUNYA tempat yang boleh menggulir mendatar.
   position:relative wajib: tanpa itu .gulung bukan containing block, dan
   keturunan sticky/absolute di dalam tabel lolos dari kliping lalu
   melebarkan area gulir akar - cacat yang tersembunyi di balik
   overflow-x:clip pada html. */
.gulung {
  position: relative;
  overflow-x: auto;
  max-inline-size: 100%;
  overscroll-behavior-x: contain;
}

/* Batas tinggi membuat thead dan tfoot benar-benar lekat saat 50 baris
   digulir. Tanpa batas tinggi, .gulung bukan wadah gulir vertikal dan
   position:sticky pada thead tidak melakukan apa-apa. */
@media (min-width: 900px) {
  .gulung { max-block-size: min(74svh, 860px); overflow-y: auto; }
  /* Kalau ada panel "asal angka" yang terbuka, lepaskan batasnya supaya
     rumusnya terbaca utuh. */
  .gulung:has(.baris-asal) { max-block-size: none; overflow-y: visible; }
  .gulung-bebas { max-block-size: none; overflow-y: visible; }
}

/* table-layout:fixed BUKAN pilihan gaya, ini syarat kebenaran.
   Dengan tata letak otomatis, lebar kolom lahir dari isinya, jadi offset
   kolom lekat ("Etd wet nempel 104px dari kanan") meleset dan kolom Etd wet
   menimpa kolom Moisture. Dengan fixed, lebar kolom jadi bagian sistem
   desain: setiap kolom persis selebar yang ditulis di <colgroup>, dan SATU
   kolom (Supplier) menyerap seluruh sisa lebar layar.
   Kalau kamu menambah kolom, tambahkan <col> DAN sesuaikan --tabel-min. */
.tabel {
  table-layout: fixed;
  inline-size: 100%;
  min-inline-size: var(--tabel-min);
  font-size: var(--tp-md);
}
.tabel-sempit { table-layout: auto; min-inline-size: 0; }

/* Lebar kolom daftar pengiriman. Jumlahnya = --tabel-min = 1204px, dipilih
   supaya seluruh tabel MUAT tanpa geser di layar 1280px. Itu bukan angka
   sembarangan: kalau tabel meluap di lebar kerja yang paling umum, kolom
   Etd yang lekat di kanan akan menutupi kolom Moisture saat halaman baru
   dibuka, dan pengguna melihat data tertutup tanpa tahu sebabnya.
   Kolom Fuel/truk sengaja TIDAK ADA di tabel utama: nilainya turunan
   (Solar / Truk) dan sudah tercetak di langkah 1 panel Asal angka. */
.k-pilih    { inline-size: var(--kol-pilih); }
.k-sd       { inline-size: 256px; }
.k-supplier { inline-size: auto; }   /* penyerap sisa lebar - HANYA satu */
.k-tanggal  { inline-size: 108px; }
.k-jarak    { inline-size: 104px; }
.k-solar    { inline-size: 112px; }
.k-truk     { inline-size: 72px; }
.k-tonase   { inline-size: 100px; }
.k-moisture { inline-size: 80px; }
.k-etd      { inline-size: var(--kol-etd); }

/* — kepala grup kolom (cangkokan dari arah "Perjalanan") —
   Dua belas kolom butuh atap. PENGIRIMAN / PERJALANAN / MUATAN / HASIL. */
.tabel thead .grup-baris th {
  padding: var(--s3) var(--s3) var(--s1);
  background: var(--permukaan);
  text-align: start;
  vertical-align: bottom;
}
.grup {
  font-size: var(--tp-mikro);
  font-weight: 700;
  letter-spacing: var(--lacak-mikro);
  text-transform: uppercase;
  color: var(--teks-samar);
}
.tabel thead .grup-baris th + th { box-shadow: inset 1px 0 0 var(--garis-halus); }

.tabel thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--permukaan);
  padding: var(--s2) var(--s3);
  font-size: var(--tp-xs);
  font-weight: 600;
  color: var(--teks-redup);
  text-align: start;
  vertical-align: bottom;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--garis);
}
.tabel thead .grup-baris th { inset-block-start: 0; }
.tabel thead .kolom-baris th { inset-block-start: var(--grup-tinggi); }
@media (max-width: 899px) {
  .tabel thead th { position: static; }
}

.tabel thead th.num { text-align: right; }

/* Kepala kolom dua baris: nama di atas, satuan di bawah. Memberi satuan
   tanpa memakan lebar. .kepala-satuan adalah SAUDARA tombol .urut, bukan
   anaknya - kalau ditaruh di dalam tombol, satuannya ikut terbalik pada
   kolom angka. */
.kepala-satuan {
  display: block;
  font-weight: 400;
  color: var(--teks-samar);
  font-size: var(--tp-mikro);
  line-height: 1.3;
}

/* — pengurutan —
   Tombol di dalam <th>, aria-sort ada di <th>-nya. */
.urut {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.urut:hover { color: var(--teks); }
.urut-tanda {
  font-size: 9px;
  color: var(--teks-samar);
  opacity: 0;
  line-height: 1;
  flex: none;
}
.urut:hover .urut-tanda,
.urut:focus-visible .urut-tanda { opacity: .7; }
.tabel th[aria-sort] .urut-tanda { opacity: 1; color: var(--aksi); }
.tabel th[aria-sort] .urut { color: var(--teks); }

/* — badan tabel —
   Pemisah pakai garis rambut, bukan zebra: baris panel "asal angka"
   menyisip di antara baris data, jadi nth-child akan salah warna.
   Untuk tabel tanpa panel (mis. Setelan) pakai .tabel-zebra. */
.tabel tbody td {
  padding: var(--s3);
  border-block-start: 1px solid var(--garis-halus);
  vertical-align: middle;
  background: var(--baris-bg);
}
.baris {
  --baris-bg: var(--permukaan);
}
.baris:hover { --baris-bg: var(--permukaan-2); }
.baris.terpilih { --baris-bg: var(--aksi-lembut); }

.tabel-zebra tbody tr:nth-child(even) { --baris-bg: var(--permukaan-2); }

/* — baris beranomali —
   Kuningan hanya muncul di sini. Rusuk kiri + sel truk + sel Etd. */
.baris.anomali { --baris-bg: var(--tanda-lembut); }
.baris.anomali > td:first-child { box-shadow: inset 3px 0 0 var(--tanda); }
.baris.anomali .sel-truk,
.baris.anomali .sel-etd { color: var(--tanda); }

/* — baris dibatalkan —
   Yang dicoret HANYA nomor SD dan angkanya. Mencoret lencana dan chip
   membuat baris terlihat berantakan, bukan terbaca sebagai dibatalkan. */
.baris.batal { --baris-bg: var(--permukaan); }
.baris.batal .sd-id,
.baris.batal .num {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--teks-samar);
}
.baris.batal .sel-supplier,
.baris.batal .sel-tanggal { color: var(--teks-samar); }
.baris.batal .pita-m { background: var(--teks-samar); }
.baris.batal .pita-k { background: var(--garis); }

/* — sel-sel bernama — */
/* Spesifisitas sengaja dinaikkan setara ".tabel tbody td" supaya padding
   shorthand di sana tidak menelan aturan ini. */
.tabel td.sel-pilih,
.tabel th.sel-pilih { padding-inline-end: 0; }
.sel-supplier { overflow-wrap: anywhere; }
.sel-tanggal {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--tp-sm);
  white-space: nowrap;
  /* Tanggal rata KIRI: tanggal itu identitas, bukan kuantitas. */
  text-align: start;
}
/* Pembalikan hierarki yang jadi inti arah ini: label tenang, ANGKA keras.
   Etd adalah keluaran aplikasi - dia yang paling terbaca di halaman. */
.tabel tbody .sel-etd {
  font-size: var(--tp-lg);
  font-weight: 600;
  color: var(--teks);
}

/* Sel jumlah truk pada baris INS: rumus INS memang tidak memakai jumlah
   truk. Ditulis sebagai em dash bermakna, bukan sel kosong. */
.tak-dipakai {
  color: var(--teks-samar);
  cursor: help;
  border-block-end: 1px dotted var(--garis);
}

/* — nomor SD tiga bobot (cangkokan dari arah "Tembusan Karbon") —
   Awalan tercetak dilemahkan, inti yang membedakan dikuatkan, bulan Romawi
   diberi warna karena staf mencari lewat bulan. Mata langsung lompat ke
   bagian yang berbeda, bukan mengeja ulang 12 karakter boilerplate. */
.sd-id {
  font-family: var(--mono);
  font-size: var(--tp-sm);
  white-space: nowrap;
}
.sd-awal { color: var(--teks-samar); font-weight: 400; }
.sd-inti { color: var(--teks); font-weight: 700; }
.sd-bulan { color: var(--aksi); font-weight: 700; }
/* Chevron pembuka duduk di kolomnya sendiri supaya nomor SD dan lencananya
   boleh membungkus tanpa pernah mendorong chevron ke baris sendirian. */
.sd-baris {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}
.sd-teks {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  min-inline-size: 0;
}

/* — checkbox pilih baris — */
.pilih {
  inline-size: 16px;
  block-size: 16px;
  accent-color: var(--aksi);
  cursor: pointer;
  margin: 0;
}

/* — kolom lekat (cangkokan dari arah "Perjalanan") —
   Identitas di kiri dan jawaban di kanan tetap terlihat; yang menggulir di
   antaranya justru perjalanannya. Dimatikan di bawah 900px karena di sana
   ia memakan ruang yang mau diselamatkan. */
@media (min-width: 900px) {
  .lekat-kiri,
  .lekat-kanan {
    position: sticky;
    z-index: 1;
    background: var(--baris-bg);
  }
  /* Offset diturunkan dari lebar kolom, bukan ditulis tangan di template. */
  .lekat-kiri { inset-inline-start: 0; }
  .lekat-kiri.sel-sd { inset-inline-start: var(--kol-pilih); }
  .lekat-kanan { inset-inline-end: 0; }
  .lekat-kanan.sel-etd-wet { inset-inline-end: var(--kol-etd); }
  .lekat-kanan.sel-etd-dry { inset-inline-end: 0; }

  .tabel thead .lekat-kiri,
  .tabel thead .lekat-kanan { background: var(--permukaan); z-index: 3; }
  .tabel tfoot .lekat-kiri,
  .tabel tfoot .lekat-kanan { background: var(--permukaan-2); z-index: 3; }
  .lekat-kiri.sel-sd { box-shadow: var(--bayang-lekat); }
  .lekat-kanan.sel-etd-wet { box-shadow: var(--bayang-lekat-kanan); }
}

/* — baris ringkasan sebagai <tfoot> (cangkokan dari arah "Perjalanan") —
   Total duduk TEPAT di bawah kolomnya sendiri, jadi auditor memeriksanya
   dengan satu gerakan mata vertikal. Kartu KPI di atas tabel memutus jalur
   itu - karena itu tidak ada kartu KPI di berkas ini. */
.tabel tfoot td,
.tabel tfoot th {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  padding: var(--s3);
  background: var(--permukaan-2);
  border-block-start: 2px solid var(--garis);
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 899px) {
  .tabel tfoot td, .tabel tfoot th { position: static; }
}
.ringkas-label {
  text-align: start;
  font-weight: 400;
  color: var(--teks-redup);
  font-size: var(--tp-sm);
}
.ringkas-label b { color: var(--teks); font-weight: 700; }

.tabel-catatan {
  padding: var(--s3) var(--s4);
  border-block-start: 1px solid var(--garis-halus);
  font-size: var(--tp-sm);
  color: var(--teks-redup);
  background: var(--permukaan);
}

/* ─────────────────────────────────────────────────────────────────────────
   10. ELEMEN SIGNATURE — PITA MUAT–KOSONG
   Satu batang dua nada di kolom Solar.
     PANJANG   = total liter solar, relatif terhadap baris paling boros
                 (--w, diisi server sebagai persen).
     PEMBAGIAN = selalu 66,216% pekat / 33,784% pudar, karena itu rasio
                 0,49 : 0,25 dari rumusnya sendiri.
   Bagian pudar itu harfiah solar yang terbakar untuk mengangkut udara -
   truk pulang KOSONG - dan tetap dibebankan ke Etd. Hanya di pengangkutan
   POME setengah perjalanan dihitung dalam keadaan kosong; itu sebabnya
   elemen ini tidak bisa dipindah ke produk lain.
   Pembagian tetap itu DISENGAJA: jarak muat selalu sama dengan jarak
   kosong di domain ini, jadi rasio per baris memang konstan. Yang berubah
   per baris adalah panjangnya.
   ───────────────────────────────────────────────────────────────────────── */
.sel-solar {
  text-align: right;
  white-space: nowrap;
}
.solar-tumpuk {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s1);
}
.pita-jalur {
  inline-size: 88px;
  display: flex;
  justify-content: flex-start;
}
.pita {
  display: flex;
  inline-size: var(--w, 100%);
  min-inline-size: 3px;
  block-size: 7px;
  border-radius: 2px;
  overflow: hidden;
}
.pita-m { flex: 0 0 66.216%; background: var(--pita-muat); }
.pita-k { flex: 1 1 auto; background: var(--pita-kosong); }
.baris.anomali .pita-m { background: var(--tanda); }
.baris.anomali .pita-k { background: var(--tanda-tepi); }

/* Versi besar di dalam panel asal angka. */
.pita-besar {
  display: flex;
  block-size: 12px;
  border-radius: 3px;
  overflow: hidden;
  max-inline-size: 520px;
  inline-size: var(--w, 100%);
}
.pita-besar .pita-m { flex: 0 0 66.216%; background: var(--pita-muat); }
.pita-besar .pita-k { flex: 1 1 auto; background: var(--pita-kosong); }

.pita-ket {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: var(--tp-sm);
  color: var(--teks-redup);
  max-inline-size: 520px;
}
.pita-ket span { display: flex; align-items: center; gap: var(--s2); }
.tik {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 2px;
  flex: none;
}
.tik-m { background: var(--pita-muat); }
.tik-k { background: var(--pita-kosong); }

/* ─────────────────────────────────────────────────────────────────────────
   11. PANEL "ASAL ANGKA"
   Pertanyaan yang paling sering dilempar auditor adalah "angka ini dari
   mana?". Panel ini menjawabnya di tempat: empat langkah rumus berurutan,
   konstanta diberi warna murbei supaya yang DITETAPKAN terpisah dari yang
   DIUKUR, lalu riwayat perubahan barisnya.
   Pemicunya menempel pada sel nomor SD (.buka-asal) - BUKAN kolom tombol
   tersendiri. Kolom tombol berarti 25 tombol identik memakan ~130px dari
   sumber daya paling langka di layar ini.
   ───────────────────────────────────────────────────────────────────────── */
.buka-asal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--r1);
  color: var(--teks-samar);
  cursor: pointer;
  flex: none;
}
.buka-asal:hover { background: var(--permukaan-3); color: var(--teks); }
.buka-asal::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .12s ease;
}
.buka-asal[aria-expanded="true"] {
  color: var(--aksi);
  background: var(--aksi-lembut);
}
.buka-asal[aria-expanded="true"]::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Spesifisitas disamakan dengan ".tabel tbody td" - jangan diturunkan,
   nanti padding sel biasa menang dan panelnya jadi berbingkai ganda. */
.tabel tbody .baris-asal > td {
  padding: 0;
  background: var(--permukaan-2);
  border-block-start: 1px solid var(--garis);
}
.asal {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.asal-kepala {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: var(--tp-mikro);
  font-weight: 700;
  letter-spacing: var(--lacak-mikro);
  text-transform: uppercase;
  color: var(--teks-samar);
}
.asal-langkah { display: flex; flex-direction: column; gap: var(--s2); }
.asal-nomor {
  font-size: var(--tp-mikro);
  font-weight: 700;
  letter-spacing: var(--lacak-mikro);
  text-transform: uppercase;
  color: var(--teks-samar);
}
.asal-rumus {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--tp-md);
  line-height: 1.9;
  color: var(--teks);
  overflow-x: auto;
  white-space: nowrap;
  padding-block-end: var(--s1);
}
.asal-hasil { font-weight: 700; }

/* Konstanta: satu-satunya tempat murbei muncul. Selalu bawa title berisi
   sumber dan masa berlakunya. */
.konst {
  display: inline-block;
  padding: 1px var(--s2);
  border-radius: var(--r1);
  background: var(--konst-lembut);
  color: var(--konst);
  font-weight: 700;
  cursor: help;
}

/* Callout di dalam panel. */
.catat {
  padding: var(--s3) var(--s4);
  border-inline-start: 3px solid var(--garis);
  border-radius: var(--r1);
  background: var(--permukaan);
  font-size: var(--tp-md);
  color: var(--teks-redup);
  max-inline-size: 66ch;
}
.catat b { color: var(--teks); }
.catat-tanda {
  border-inline-start-color: var(--tanda);
  background: var(--tanda-lembut);
  color: var(--teks);
}
.catat-aksi {
  border-inline-start-color: var(--aksi);
  background: var(--aksi-lembut);
  color: var(--teks);
}

.riwayat {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--tp-sm);
  color: var(--teks-redup);
  border-block-start: 1px solid var(--garis-halus);
  padding-block-start: var(--s3);
}
.riwayat-baris {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}
.riwayat-waktu {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--teks-samar);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. BAR AKSI MASSAL
   Menempel di KAKI layar, di atas permukaan biasa dengan garis atas -
   bukan slab warna penuh. Slab petrol pekat terbaca sebagai blok aksen
   menyala di tema gelap, dan itu justru kalibrasi yang dilarang.
   Muncul lewat body:has(.pilih:checked) - tanpa JavaScript.
   ───────────────────────────────────────────────────────────────────────── */
.massal {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: none;
  background: var(--permukaan);
  border-block-start: 1px solid var(--garis);
  box-shadow: var(--bayang-2);
}
.massal-dalam {
  max-inline-size: var(--laman-lebar);
  margin-inline: auto;
  padding: var(--s3) clamp(var(--s3), 3vw, var(--s5));
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.massal-hitung {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-penuh);
  background: var(--aksi-lembut);
  box-shadow: inset 0 0 0 1px var(--aksi-tepi);
  font-size: var(--tp-md);
  font-weight: 700;
  white-space: nowrap;
}
.massal-hitung .num { font-size: var(--tp-md); }
.massal-aksi {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  align-items: center;
}
.massal-akhir { margin-inline-start: auto; }

body:has(.pilih:checked) .massal { display: block; }
/* Ruang supaya bar tidak pernah menutup <tfoot> ringkasan atau paginasi. */
body:has(.pilih:checked) { padding-block-end: 84px; }

@media (max-width: 560px) {
  .massal-dalam { gap: var(--s2); }
  .massal-aksi {
    inline-size: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: var(--s1);
  }
  .massal-akhir { margin-inline-start: 0; }
  body:has(.pilih:checked) { padding-block-end: 132px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   13. PAGINASI
   ───────────────────────────────────────────────────────────────────────── */
.paginasi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.paginasi-info { font-size: var(--tp-sm); color: var(--teks-redup); }
.paginasi-info b { color: var(--teks); font-weight: 700; }
.paginasi-nav { display: flex; gap: var(--s1); flex-wrap: wrap; }
.hal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 32px;
  min-block-size: 32px;
  padding-inline: var(--s2);
  border: 1px solid var(--garis);
  border-radius: var(--r2);
  background: var(--permukaan);
  color: var(--teks-redup);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--tp-sm);
  text-decoration: none;
}
.hal:hover { background: var(--permukaan-2); color: var(--teks); }
.hal.kini,
.hal[aria-current="page"] {
  background: var(--aksi);
  border-color: var(--aksi);
  color: var(--aksi-teks);
  font-weight: 700;
}
.hal.mati,
.hal[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}
.hal-teks { font-family: var(--sans); padding-inline: var(--s2); }

/* ─────────────────────────────────────────────────────────────────────────
   14. FORMULIR
   ───────────────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--s5); }

.kelompok {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--permukaan);
  border: 1px solid var(--garis-halus);
  border-radius: var(--r3);
  box-shadow: var(--bayang-1);
}
.kelompok-judul {
  display: block;
  font-size: var(--tp-mikro);
  font-weight: 700;
  letter-spacing: var(--lacak-mikro);
  text-transform: uppercase;
  color: var(--teks-samar);
  padding-block-end: var(--s2);
  border-block-end: 1px solid var(--garis-halus);
  inline-size: 100%;
}
.kelompok-catatan {
  font-size: var(--tp-sm);
  color: var(--teks-redup);
  max-inline-size: 66ch;
}

.baris-medan {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.baris-medan-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.baris-medan-3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.medan { display: flex; flex-direction: column; gap: var(--s1); min-inline-size: 0; }
.label {
  font-size: var(--tp-sm);
  font-weight: 600;
  color: var(--teks-redup);
}
.label-wajib::after {
  content: " *";
  color: var(--bahaya);
  font-weight: 700;
}

/* Satuan di dalam field. */
.isian-bungkus { position: relative; display: block; }
.isian-bungkus .isian { padding-inline-end: 56px; }
.satuan {
  position: absolute;
  inset-inline-end: var(--s3);
  inset-block: 0;
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--tp-sm);
  color: var(--teks-samar);
  pointer-events: none;
}

/* Bantuan di bawah field. Selalu kalimat aktif yang menyebut cara
   membetulkannya, bukan sekadar menyatakan aturannya. */
.bantuan {
  font-size: var(--tp-sm);
  color: var(--teks-samar);
  max-inline-size: 60ch;
}
.galat-medan {
  font-size: var(--tp-sm);
  font-weight: 600;
  color: var(--bahaya);
  max-inline-size: 60ch;
}
.medan.salah .isian,
.medan.salah .pilihan {
  border-color: var(--bahaya);
  background: var(--bahaya-lembut);
}

/* Peringatan jumlah truk: rasio tonase/truk di luar kewajaran.
   Ini kuning, dan kuning di aplikasi ini selalu berarti satu hal. */
.peringatan-truk {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--tanda-tepi);
  border-inline-start-width: 3px;
  border-radius: var(--r2);
  background: var(--tanda-lembut);
  color: var(--teks);
  font-size: var(--tp-md);
  max-inline-size: 72ch;
}
.peringatan-truk b { font-weight: 700; }
.peringatan-truk .num { font-size: var(--tp-md); }

/* Panel hasil hitung (pratinjau langsung sambil mengetik). */
.hasil-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--permukaan-2);
  border: 1px solid var(--garis);
  border-radius: var(--r3);
}
.hasil-judul {
  font-size: var(--tp-mikro);
  font-weight: 700;
  letter-spacing: var(--lacak-mikro);
  text-transform: uppercase;
  color: var(--teks-samar);
}
.hasil-daftar { display: flex; flex-direction: column; gap: var(--s2); }
/* Tiga kolom, bukan flex space-between: angka harus rata kanan pada tepi
   yang SAMA dan satuan rata kiri pada tepi yang sama. Kalau satuan ikut
   dirata-kanankan bersama angkanya, angkanya jadi bergerigi dan panel ini
   berhenti bisa dibaca sebagai kolom. */
.hasil-baris {
  display: grid;
  grid-template-columns: 1fr auto minmax(96px, auto);
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding-block: var(--s1);
  border-block-end: 1px dotted var(--garis);
}
.hasil-baris:last-child { border-block-end: 0; }
.hasil-label { font-size: var(--tp-sm); color: var(--teks-redup); }
.hasil-angka {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--tp-base);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.hasil-satuan {
  font-size: var(--tp-xs);
  font-weight: 400;
  color: var(--teks-samar);
  text-align: start;
  white-space: nowrap;
}
/* Dua angka yang jadi alasan aplikasi ini ada. */
.hasil-utama .hasil-angka { font-size: 19px; font-weight: 700; }
.hasil-utama .hasil-label { color: var(--teks); font-weight: 600; }

.form-aksi {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: center;
}
.form-aksi-akhir { margin-inline-start: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   15. NOTIFIKASI
   sukses -> petrol, galat -> koreksi, peringatan -> kuningan.
   Tidak ada warna keempat.
   ───────────────────────────────────────────────────────────────────────── */
.pesan-tumpuk { display: flex; flex-direction: column; gap: var(--s2); }
.pesan {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--garis);
  border-inline-start-width: 3px;
  border-radius: var(--r2);
  background: var(--permukaan);
  font-size: var(--tp-md);
  color: var(--teks);
  max-inline-size: 90ch;
}
.pesan b { font-weight: 700; }
.pesan-sukses {
  border-color: var(--aksi-tepi);
  border-inline-start-color: var(--aksi);
  background: var(--aksi-lembut);
}
.pesan-galat {
  border-color: var(--bahaya-tepi);
  border-inline-start-color: var(--bahaya);
  background: var(--bahaya-lembut);
}
.pesan-peringatan {
  border-color: var(--tanda-tepi);
  border-inline-start-color: var(--tanda);
  background: var(--tanda-lembut);
}
.pesan-tutup {
  margin-inline-start: auto;
  align-self: flex-start;
  padding: 0 var(--s1);
  color: var(--teks-samar);
  cursor: pointer;
  font-size: var(--tp-base);
  line-height: 1.2;
}
.pesan-tutup:hover { color: var(--teks); }

/* ─────────────────────────────────────────────────────────────────────────
   16. KEADAAN KOSONG
   ───────────────────────────────────────────────────────────────────────── */
.kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  padding: var(--s7) var(--s5);
  text-align: center;
}
.kosong-judul {
  font-size: var(--tp-base);
  font-weight: 700;
}
.kosong-teks {
  font-size: var(--tp-md);
  color: var(--teks-redup);
  max-inline-size: 48ch;
}
.kosong-aksi { display: flex; gap: var(--s2); flex-wrap: wrap; }
/* Pita kosong sebagai penanda visual keadaan kosong - memakai elemen
   signature yang sama, dalam keadaan tanpa muatan. */
.kosong-pita {
  inline-size: 88px;
  block-size: 7px;
  border-radius: 2px;
  background: var(--pita-kosong);
  opacity: .5;
}

/* ─────────────────────────────────────────────────────────────────────────
   17. HALAMAN MASUK
   ───────────────────────────────────────────────────────────────────────── */
.masuk-laman {
  min-block-size: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
  background: var(--dasar);
}
.masuk-kartu {
  inline-size: 100%;
  max-inline-size: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s6) var(--s5);
  background: var(--permukaan);
  border: 1px solid var(--garis-halus);
  border-radius: var(--r3);
  box-shadow: var(--bayang-1);
}
.masuk-merek {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.masuk-merek .merek-nama { font-size: var(--tp-judul-besar); }
.masuk-judul {
  font-size: var(--tp-base);
  font-weight: 600;
  color: var(--teks-redup);
}
/* Pita muat–kosong sebagai satu-satunya tanda tangan di halaman masuk.
   Tidak ada logo, tidak ada ilustrasi. */
.masuk-pita {
  display: flex;
  block-size: 5px;
  inline-size: 120px;
  border-radius: 2px;
  overflow: hidden;
}
.masuk-pita .pita-m { flex: 0 0 66.216%; background: var(--pita-muat); }
.masuk-pita .pita-k { flex: 1 1 auto; background: var(--pita-kosong); }
.masuk-kaki {
  font-size: var(--tp-sm);
  color: var(--teks-samar);
}

/* ─────────────────────────────────────────────────────────────────────────
   18. HALAMAN SETELAN
   ───────────────────────────────────────────────────────────────────────── */
.setelan-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.konst-medan { display: flex; flex-direction: column; gap: var(--s1); }
.konst-nilai {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Nilai berlaku sekarang, ditampilkan di sebelah isian supaya perubahan
   selalu bisa dibandingkan dengan yang sedang dipakai. */
.konst-kini {
  font-size: var(--tp-sm);
  color: var(--teks-samar);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.setelan-catatan {
  font-size: var(--tp-md);
  color: var(--teks-redup);
  max-inline-size: 72ch;
}

/* ─────────────────────────────────────────────────────────────────────────
   19. RESPONSIF
   Badan halaman TIDAK PERNAH menggulir mendatar. Hanya .gulung yang boleh.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .rel-dalam { padding-block: var(--s2); }
  .nav { order: 3; inline-size: 100%; }
  .rel-kanan { margin-inline-start: auto; }

  /* Panel "asal angka" hidup di dalam <td> pada tabel selebar 1204px, jadi
     di layar sempit rumusnya harus digeser dulu untuk dibaca. Selnya
     dilekatkan ke tepi kiri wadah gulir dan panelnya dipatok selebar
     viewport, sehingga rumus terbaca utuh tanpa menggeser tabel. */
  .tabel tbody .baris-asal > td {
    position: sticky;
    inset-inline-start: 0;
  }
  /* 100vw ikut menghitung lebar bilah gulir, jadi panel meleset belasan
     piksel dan tetap terpotong. Lebar wadah gulir yang sebenarnya hanya
     bisa dibaca lewat container query. Baris vw dibiarkan sebagai cadangan
     untuk mesin lama. */
  .asal {
    inline-size: calc(100vw - 2 * var(--s3) - 2px);
    max-inline-size: 100vw;
  }
  @supports (container-type: inline-size) {
    .gulung { container-type: inline-size; }
    .asal { inline-size: 100cqi; max-inline-size: 100cqi; }
  }
  .saring { flex-direction: column; align-items: stretch; }
  .saring-medan-lebar { flex: 1 1 auto; }
  .saring-aksi { margin-inline-start: 0; }
  .segmen { align-self: flex-start; }
  .kartu-isi { padding: var(--s4); }
  .kelompok { padding: var(--s4); }
  .asal { padding: var(--s4); }
}

@media (max-width: 560px) {
  /* Rel atas menempel terus, jadi tingginya adalah pajak yang dibayar
     sepanjang halaman. Sub-merek dan teks tombol tema dilepas supaya rel
     tetap dua baris, bukan tiga. */
  .merek-sub { display: none; }
  .tombol-tema-teks {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Waktu di atas keterangannya, bukan di sampingnya: dibungkus mendatar,
     riwayat audit terbaca seperti kolom yang saling silang. */
  .riwayat-baris { flex-direction: column; gap: 0; }
  .laman { padding-block-start: var(--s4); gap: var(--s3); }
  .judul-blok { align-items: flex-start; flex-direction: column; }
  .judul-aksi { inline-size: 100%; }
  .judul-aksi .tombol { flex: 1 1 auto; }
  .segmen-opsi span { min-inline-size: 46px; }
  .paginasi { flex-direction: column; align-items: flex-start; }
  .form-aksi .tombol { flex: 1 1 auto; }
  .form-aksi-akhir { margin-inline-start: 0; inline-size: 100%; }
}

/* 360px: tabel 1100px menggulir di dalam kotaknya sendiri; halaman tetap
   selebar viewport. */
@media (max-width: 400px) {
  :root { --tp-base: 13.5px; }
  .laman { padding-inline: var(--s3); }
  .kartu-isi, .kelompok, .saring { padding: var(--s3); }
  .masuk-kartu { padding: var(--s5) var(--s4); }
}

/* ─────────────────────────────────────────────────────────────────────────
   20. CETAK
   Auditor mencetak lampiran. Pita hilang di cetak monokrom, jadi angkanya
   harus tetap lengkap dan tabelnya tidak boleh terpotong.
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  .rel, .massal, .paginasi, .saring, .tombol, .buka-asal, .lewati { display: none !important; }
  .gulung { overflow: visible !important; max-block-size: none !important; }
  .tabel { min-inline-size: 0; font-size: 10pt; }
  .tabel thead th, .tabel tfoot td, .tabel tfoot th { position: static !important; }
  .lekat-kiri, .lekat-kanan { position: static !important; box-shadow: none !important; }
  .lembar, .kartu, .kelompok { box-shadow: none; border-color: var(--garis); }
  .baris { break-inside: avoid; }
  .pita, .pita-besar { border: 1px solid var(--teks); }
}

/* ─────────────────────────────────────────────────────────────────────────
   21. TAMBAHAN DARI AGEN TEMPLATE
   Enam hal kecil yang belum punya padanan di berkas ini, semuanya lahir dari
   cacat yang benar-benar terlihat di browser saat template dipasang - bukan
   dari selera. Semuanya memakai token yang sudah ada; nol hex baru, nol warna
   baru, nol peran warna baru.
   ───────────────────────────────────────────────────────────────────────── */

/* (a) Nomor SD adalah jalan masuk ke formulir ubah, dan chevron .buka-asal
       ternyata harus jadi <a> - panel "asal angka" dirender server lewat
       ?asal=<id> supaya tetap bisa dibuka, ditautkan, dan dicetak tanpa
       JavaScript. Garis bawah bawaan <a> dilepas supaya nomor SD tiga bobot
       tidak berubah bentuk, lalu dikembalikan saat hover/fokus di bagian yang
       memang membedakan barisnya. */
.sd-tautan,
.buka-asal { text-decoration: none; }
.sd-tautan:hover .sd-inti,
.sd-tautan:focus-visible .sd-inti {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* (a2) Nomor SD yang TIDAK berpola SD-…-<Romawi>-<tahun> boleh membungkus.
        Terukur: "SD-INS-POME-LSS-V-039 (YBS K07)" butuh 260px di kolom 256px,
        dan karena sel nomor SD lekat di kiri, kelebihannya menimpa kolom
        Supplier. Melebarkan kolomnya bukan pilihan - itu merusak syarat
        "seluruh tabel muat di 1280px tanpa geser". Nomor semacam ini memang
        nomor tangan dari Excel dan sudah ditandai perlu ditinjau. */
.sd-bebas { white-space: normal; overflow-wrap: anywhere; }

/* (b) Bar aksi massal memuat dua isian teks karena rute /shipments/bulk memang
       meminta 'value' dan 'reason', dan formulir harus tetap jalan tanpa
       JavaScript. Isiannya dipendekkan supaya barnya tidak melebar terus. */
.massal-medan { inline-size: 168px; flex: 0 1 168px; min-inline-size: 120px; }

/* (c) Lima aksi + dua isian membuat bar membungkus jadi dua baris di lebar
       kerja biasa, dan tiga baris di ponsel. Terukur: 111px di 1280 dan 160px
       di 390. Ruang bawah halaman dinaikkan supaya bar tidak pernah menutup
       <tfoot> ringkasan atau paginasi. */
body:has(.pilih:checked) { padding-block-end: 152px; }
@media (max-width: 560px) {
  body:has(.pilih:checked) { padding-block-end: 184px; }
}

/* (c2) .kartu-isi adalah blok biasa dan reset melepas margin semua <p>, jadi
        catatan panjang di halaman Setelan menempel persis di bawah petak
        konstanta terakhir. Satu jarak vertikal, memakai skala yang sama. */
.setelan-catatan { margin-block-start: var(--s5); }

/* (d) .medan dan .peringatan-truk memakai display:flex, dan aturan penulis itu
       mengalahkan [hidden] bawaan peramban. Tanpa baris ini, field jumlah truk
       tetap terlihat saat metode INS dipilih. */
[hidden] { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   CATATAN TENTANG SATU HIASAN YANG DIBUANG
   Kolom tombol "Asal angka" per baris sudah DIHAPUS. Dua puluh lima tombol
   identik yang memakan ~130px dari sumber daya paling langka di layar ini
   (lebar mendatar untuk 12 kolom audit) adalah hiasan lewat pengulangan.
   Penggantinya .buka-asal: satu chevron 22px di dalam sel nomor SD, tempat
   mata sudah berada saat mencari barisnya. Jangan menambahkannya kembali.
   ───────────────────────────────────────────────────────────────────────── */