/* =============================================================================
   Dapur Vania — sistem belanja & stok SPPG
   Program Makan Bergizi Gratis

   Prinsip:
   - Alat kerja, bukan halaman pemasaran. Kepadatan data didahulukan.
   - Warna hanya membawa makna. Tidak ada dekorasi berwarna.
   - Batas garis, bukan bayangan. Bayangan hanya untuk lapisan yang mengambang.
   - Angka uang selalu rata kanan dengan angka lebar tetap, supaya bisa dibandingkan
     sekilas dari atas ke bawah.
   - Tanpa langkah build. Satu berkas, di-cache, tanpa npm.
   ========================================================================== */

:root{
  /* Palet resmi Makan Bergizi Gratis */
  --mbg-800:#0f4c81;
  --mbg-600:#0071e4;
  --mbg-200:#b5e0ea;

  --biru-tua:var(--mbg-800);
  --biru:var(--mbg-600);
  --biru-terang:#3d90ec;
  --biru-muda:var(--mbg-200);
  --biru-kabut:#eef5fb;
  --biru-tepi:#cfe2f3;

  /* Netral — condong biru dingin agar menyatu dengan identitas */
  --n-0:#ffffff;
  --n-25:#fbfcfe;
  --n-50:#f5f7fa;
  --n-100:#eceff4;
  --n-200:#dde3ec;
  --n-300:#c3ccda;
  --n-400:#93a1b5;
  --n-500:#66748c;
  --n-600:#4a5670;
  --n-700:#333d54;
  --n-900:#141c2e;

  /* Semantik */
  --sukses:#0f6b45; --sukses-bg:#e7f4ee; --sukses-tepi:#b6ddc9;
  --awas:#8a5a00;   --awas-bg:#fdf4e3;   --awas-tepi:#eccf95;
  --bahaya:#a52019; --bahaya-bg:#fdecea; --bahaya-tepi:#f0bdb8;
  --info:var(--biru-tua); --info-bg:var(--biru-kabut); --info-tepi:var(--biru-tepi);

  /* Ruang — kelipatan 4 */
  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:24px; --r6:32px; --r7:48px;

  --radius-s:6px; --radius:10px; --radius-l:14px;

  --bayang-1:0 1px 2px rgba(20,28,46,.06);
  --bayang-2:0 4px 16px rgba(20,28,46,.10);

  --tulis:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --angka:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --lebar:1180px;
}

/* --------------------------------------------------------------- dasar --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--n-50);color:var(--n-900);
  font:400 15px/1.55 var(--tulis);
  font-feature-settings:"cv05","ss01";
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding-left:1.25em}
a{color:var(--biru);text-decoration:none}
a:hover{text-decoration:underline}
svg{display:block}

:focus-visible{outline:2px solid var(--biru);outline-offset:2px;border-radius:var(--radius-s)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.lewati{position:absolute;left:-9999px;top:0;background:var(--n-0);color:var(--biru-tua);
  padding:var(--r3) var(--r4);border-radius:0 0 var(--radius) 0;z-index:100;font-weight:600}
.lewati:focus{left:0}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------ kerangka --- */
.bungkus{max-width:var(--lebar);margin:0 auto;padding:0 var(--r5)}
@media (max-width:640px){ .bungkus{padding:0 var(--r4)} }

.kepala{background:var(--biru-tua);color:#fff}
.kepala .baris{display:flex;align-items:center;gap:var(--r4);min-height:60px}
.merek{display:flex;align-items:center;gap:var(--r3);color:#fff;text-decoration:none}
.merek:hover{text-decoration:none}
.merek .lambang{width:36px;height:36px;border-radius:9px;flex:none;background:var(--biru-muda);
  color:var(--biru-tua);display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:-.4px}
.merek .teks{display:flex;flex-direction:column;line-height:1.2}
.merek .teks b{font-size:15.5px;font-weight:650;letter-spacing:.1px}
.merek .teks span{font-size:11px;opacity:.78;text-transform:uppercase;letter-spacing:.09em;font-weight:500}

.akun{margin-left:auto;display:flex;align-items:center;gap:var(--r3)}
.akun .siapa{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.akun .siapa b{font-size:13.5px;font-weight:600}
.akun .siapa span{font-size:11px;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:560px){ .akun .siapa{display:none} }

/* Navigasi bagian — hanya berisi yang benar-benar ada */
.nav{background:var(--n-0);border-bottom:1px solid var(--n-200);position:sticky;top:0;z-index:20}
.nav .baris{display:flex;gap:var(--r1);overflow-x:auto;scrollbar-width:none}
.nav .baris::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;gap:7px;padding:13px var(--r3);color:var(--n-600);
  font-size:14px;font-weight:550;white-space:nowrap;border-bottom:2.5px solid transparent;
  margin-bottom:-1px;text-decoration:none}
.nav a:hover{color:var(--biru-tua);background:var(--n-25);text-decoration:none}
.nav a[aria-current="page"]{color:var(--biru-tua);border-bottom-color:var(--biru)}
.nav a svg{width:17px;height:17px;flex:none}

main{padding:var(--r5) 0 var(--r7)}

/* Remah roti */
.remah{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--n-500);margin-bottom:var(--r3)}
.remah a{color:var(--n-500)}
.remah a:hover{color:var(--biru)}
.remah svg{width:13px;height:13px;opacity:.55}
.remah [aria-current]{color:var(--n-700);font-weight:550}

.judul-halaman{display:flex;align-items:flex-start;gap:var(--r4);flex-wrap:wrap;margin-bottom:var(--r5)}
.judul-halaman .isi{min-width:min(100%,320px);flex:1}
h1{font-size:24px;font-weight:680;letter-spacing:-.35px;color:var(--n-900);line-height:1.25}
.judul-halaman p{color:var(--n-500);font-size:14.5px;margin-top:5px;max-width:68ch}

h2{font-size:16px;font-weight:650;letter-spacing:-.1px;color:var(--n-900);
  margin:var(--r6) 0 var(--r3);display:flex;align-items:center;gap:var(--r2)}
h2 .jumlah{font-size:12.5px;font-weight:600;color:var(--n-500);background:var(--n-100);
  padding:1px 8px;border-radius:20px;font-variant-numeric:tabular-nums}
h3{font-size:14px;font-weight:650;color:var(--n-700);margin:0 0 var(--r2)}

/* --------------------------------------------------------------- kartu --- */
.kartu{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--radius-l);
  box-shadow:var(--bayang-1)}
.kartu > .isi{padding:var(--r5)}
.kartu > .kepala-kartu{padding:var(--r4) var(--r5);border-bottom:1px solid var(--n-200);
  display:flex;align-items:center;gap:var(--r3);flex-wrap:wrap}
.kartu > .kepala-kartu h3{margin:0}
.kartu > .kaki{padding:var(--r3) var(--r5);border-top:1px solid var(--n-200);
  background:var(--n-25);border-radius:0 0 var(--radius-l) var(--radius-l);
  font-size:13px;color:var(--n-500)}
.kartu + .kartu{margin-top:var(--r4)}

.petak{display:grid;gap:var(--r4)}
@media (min-width:720px){ .petak.dua{grid-template-columns:1fr 1fr} }

/* --------------------------------------------------------------- tabel --- */
.tabel-bungkus{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--radius-l);border:1px solid var(--n-200);background:var(--n-0);
  box-shadow:var(--bayang-1)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
thead th{
  position:sticky;top:0;z-index:1;
  background:var(--n-50);color:var(--n-600);
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.055em;
  text-align:left;padding:10px var(--r4);border-bottom:1px solid var(--n-200);white-space:nowrap;
}
tbody td{padding:11px var(--r4);border-bottom:1px solid var(--n-100);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--n-25)}
th.angka,td.angka{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.angka{font-family:var(--angka);font-size:13.5px;letter-spacing:-.2px}
td.utama{font-weight:600;color:var(--n-900)}
td .sub{display:block;color:var(--n-500);font-size:12.5px;font-weight:400;margin-top:2px}
tfoot td,tfoot th{padding:11px var(--r4);border-top:2px solid var(--n-200);font-weight:650;
  background:var(--n-25);font-variant-numeric:tabular-nums}
tfoot th{text-align:left}
.tabel-rapat tbody td{padding:8px var(--r4)}
td.negatif{color:var(--bahaya);font-weight:650}

/* --------------------------------------------------------------- label --- */
.label{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:20px;
  font-size:12px;font-weight:650;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent}
.label svg{width:12px;height:12px}
.label.netral{background:var(--n-100);color:var(--n-600);border-color:var(--n-200)}
.label.biru,.label.baru{background:var(--biru-kabut);color:var(--biru-tua);border-color:var(--biru-tepi)}
.label.sukses,.label.dikomit{background:var(--sukses-bg);color:var(--sukses);border-color:var(--sukses-tepi)}
.label.awas,.label.ubah,.label.ditinjau{background:var(--awas-bg);color:var(--awas);border-color:var(--awas-tepi)}
.label.diunggah,.label.diproses{background:var(--biru-kabut);color:var(--biru-tua);border-color:var(--biru-tepi)}
.label.bahaya,.label.galat,.label.asing,.label.dibatalkan,.label.gagal{background:var(--bahaya-bg);color:var(--bahaya);border-color:var(--bahaya-tepi)}
.label.sama{background:var(--n-50);color:var(--n-500);border-color:var(--n-200)}
.label.hak{background:var(--n-50);color:var(--n-600);border-color:var(--n-200);
  font-family:var(--angka);font-size:11.5px;font-weight:500}
.label.hak.kunci{background:var(--awas-bg);color:var(--awas);border-color:var(--awas-tepi);font-weight:650}

/* ------------------------------------------------------------- tombol ---- */
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 var(--r4);border:1px solid transparent;border-radius:var(--radius);
  font:600 14.5px/1 var(--tulis);cursor:pointer;text-decoration:none;
  transition:background .12s ease,border-color .12s ease}
.tbl svg{width:17px;height:17px}
.tbl:hover{text-decoration:none}
.tbl:disabled{opacity:.5;cursor:not-allowed}
.tbl.utama{background:var(--biru);color:#fff}
.tbl.utama:hover:not(:disabled){background:#005fc4}
.tbl.kedua{background:var(--n-0);color:var(--n-700);border-color:var(--n-300)}
.tbl.kedua:hover:not(:disabled){background:var(--n-50);border-color:var(--n-400)}
.tbl.bahaya{background:var(--n-0);color:var(--bahaya);border-color:var(--bahaya-tepi)}
.tbl.bahaya:hover:not(:disabled){background:var(--bahaya-bg)}
.tbl.penuh{width:100%}
.tbl.kecil{min-height:34px;padding:0 var(--r3);font-size:13.5px}
.tbl.kecil svg{width:15px;height:15px}
.tbl.hantu{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.tbl.hantu:hover:not(:disabled){background:rgba(255,255,255,.12)}

.deret{display:flex;gap:var(--r3);flex-wrap:wrap;align-items:center}

/* ------------------------------------------------------------- formulir -- */
.bidang{margin-bottom:var(--r4)}

/*
 * Petak formulir.
 *
 * Sebelumnya tiap formulir memakai grid inline dengan `gap:0 var(--r4)` — jarak
 * antarbaris nol, dan yang memisahkan baris hanyalah margin bawah tiap bidang.
 * Begitu satu kolom punya teks bantuan dan kolom sebelahnya tidak, kedua kolom
 * berakhir di ketinggian berbeda dan baris berikutnya jadi tidak sejajar.
 *
 * Di sini `gap` yang mengurus kedua sumbu, dan bidang tidak lagi membawa margin
 * sendiri. `align-items:start` menjaga tiap bidang menempel ke atas barisnya,
 * bukan meregang mengikuti bidang tertinggi.
 */
.petak-form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--kolom,220px),1fr));
  gap:var(--r4) var(--r5);
  align-items:start;
}
.petak-form > .bidang{margin-bottom:0}

/* Bidang terakhir tidak boleh menambah margin di atas padding kartu — itu yang
   membuat ruang kosong menganga di dasar kartu. */
.kartu > .isi > :last-child,
.kartu > .isi > :last-child > .bidang:last-child{margin-bottom:0}

/*
 * Baris tindakan formulir.
 *
 * Tombol simpan sebelumnya menempel langsung di bawah kartu terakhir, tanpa
 * pemisah dan tanpa ruang — terbaca seperti tercecer di latar halaman, bukan
 * sebagai penutup formulir. Di layar sempit tombolnya ditumpuk penuh supaya
 * jempol tidak perlu membidik.
 */
.aksi-form{
  display:flex;gap:var(--r3);flex-wrap:wrap;align-items:center;
  margin-top:var(--r5);padding-top:var(--r5);
  border-top:1px solid var(--n-200);
}
.aksi-form .tbl{min-width:148px;justify-content:center}
@media (max-width:560px){
  .aksi-form{flex-direction:column-reverse;align-items:stretch;gap:var(--r2)}
  .aksi-form .tbl{width:100%}
}
.bidang > label{display:block;font-size:13px;font-weight:650;color:var(--n-700);margin-bottom:6px}
.bidang .bantuan{font-size:12.5px;color:var(--n-500);margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=date],select,textarea{
  width:100%;min-height:44px;padding:0 var(--r3);border:1px solid var(--n-300);
  border-radius:var(--radius);font:15px/1.4 var(--tulis);background:var(--n-0);color:var(--n-900)}
textarea{padding:10px var(--r3);min-height:88px;resize:vertical}
select{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2366748c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--biru);
  box-shadow:0 0 0 3px rgba(0,113,228,.16)}
input[aria-invalid="true"]{border-color:var(--bahaya)}
.centang{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--n-600)}
.centang input{width:19px;height:19px;min-height:0;margin:1px 0 0;accent-color:var(--biru);flex:none}
.centang label{line-height:1.5}
.centang .bantuan{margin-top:3px;line-height:1.5}

/* Area unggah */
.jatuhkan{display:block;border:1.5px dashed var(--n-300);border-radius:var(--radius-l);
  padding:var(--r6) var(--r5);text-align:center;cursor:pointer;background:var(--n-25);
  transition:border-color .12s ease,background .12s ease}
.jatuhkan:hover,.jatuhkan.aktif{border-color:var(--biru);background:var(--biru-kabut)}
.jatuhkan .ikon{width:44px;height:44px;margin:0 auto var(--r3);border-radius:12px;
  background:var(--biru-kabut);color:var(--biru);display:grid;place-items:center}
.jatuhkan .ikon svg{width:22px;height:22px}
.jatuhkan.aktif .ikon{background:var(--n-0)}
.jatuhkan b{display:block;font-size:15.5px;font-weight:650;color:var(--n-900)}
.jatuhkan span{display:block;font-size:13px;color:var(--n-500);margin-top:4px}
input[type=file].sembunyi{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ------------------------------------------------------------- pesan ----- */
.pesan{display:flex;gap:var(--r3);padding:var(--r3) var(--r4);border-radius:var(--radius);
  border:1px solid;font-size:14.5px;margin-bottom:var(--r4);line-height:1.5}
.pesan svg{width:19px;height:19px;flex:none;margin-top:1px}
.pesan .badan{min-width:0}
.pesan.info{background:var(--info-bg);border-color:var(--info-tepi);color:var(--info)}
.pesan.sukses{background:var(--sukses-bg);border-color:var(--sukses-tepi);color:var(--sukses)}
.pesan.awas{background:var(--awas-bg);border-color:var(--awas-tepi);color:var(--awas)}
.pesan.bahaya{background:var(--bahaya-bg);border-color:var(--bahaya-tepi);color:var(--bahaya)}
.pesan ul{margin:6px 0 0}
.pesan li + li{margin-top:3px}

/* Kalimat pengantar di dalam kartu — dipakai berulang, jadi bukan gaya inline. */
.intro{color:var(--n-500);font-size:14px;margin-bottom:var(--r4);max-width:70ch}

/* Tautan "buka" di ujung kanan baris tabel. */
.buka{color:var(--n-400);display:block;padding:4px;line-height:0}
.buka:hover{color:var(--biru)}
.buka svg{width:16px;height:16px}

/* Baris navigasi halaman di bawah tabel. */
.halaman{display:flex;gap:var(--r3);align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:var(--r4);color:var(--n-500);font-size:13.5px}
.halaman .deret{margin-left:auto}

/* Tautan kembali di dasar halaman. */
.kembali{display:inline-flex;margin-top:var(--r6)}

/* Baris penyaring di atas tabel. */
.saring{display:flex;gap:var(--r3);flex-wrap:wrap;align-items:flex-end}
.saring .bidang{margin-bottom:0}
.saring .tumbuh{flex:1;min-width:200px}

/* --------------------------------------------------------------- angka --- */
.angka-besar{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--n-200);border:1px solid var(--n-200);border-radius:var(--radius-l);overflow:hidden}
.angka-besar .sel{background:var(--n-0);padding:var(--r4) var(--r5)}
.angka-besar .ket{font-size:11.5px;font-weight:650;color:var(--n-500);
  text-transform:uppercase;letter-spacing:.055em}
.angka-besar .kaki{font-size:12px;color:var(--n-500);margin-top:5px;line-height:1.45}
.angka-besar .nilai.rugi{color:var(--bahaya)}
.angka-besar .nilai{font:650 21px/1.25 var(--tulis);font-variant-numeric:tabular-nums;
  color:var(--n-900);margin-top:5px;letter-spacing:-.4px}
.angka-besar .nilai.kurang{color:var(--bahaya)}
.angka-besar .nilai.lebih{color:var(--sukses)}
.angka-besar .catatan{font-size:12px;color:var(--n-500);margin-top:3px}

/* ---------------------------------------------------------- kosong ------- */
.kosong{text-align:center;padding:var(--r7) var(--r5)}
.kosong .ikon{width:46px;height:46px;margin:0 auto var(--r4);border-radius:13px;
  background:var(--n-100);color:var(--n-400);display:grid;place-items:center}
.kosong .ikon svg{width:23px;height:23px}
.kosong b{display:block;font-size:15.5px;font-weight:650;color:var(--n-700)}
.kosong p{font-size:14px;color:var(--n-500);margin-top:6px;max-width:44ch;margin-inline:auto}

/* --------------------------------------------------------- daftar rinci -- */
.rinci{margin:0}
.rinci > div{display:flex;gap:var(--r4);padding:9px 0;border-bottom:1px solid var(--n-100);font-size:14px}
.rinci > div:last-child{border-bottom:0}
.rinci dt{flex:0 0 190px;color:var(--n-500);font-weight:500}
.rinci dd{margin:0;color:var(--n-900);font-weight:550;min-width:0}
@media (max-width:560px){ .rinci > div{flex-direction:column;gap:2px} .rinci dt{flex:none} }

/* --------------------------------------------------------------- cetak --- */
@media print{
  .kepala,.nav,.tbl,.jatuhkan,.remah,form{display:none!important}
  body{background:#fff;font-size:11pt}
  main{padding:0}
  .kartu,.tabel-bungkus{border:1px solid #999;box-shadow:none;break-inside:avoid}
  thead th{background:#eee!important;position:static}
  a{color:#000;text-decoration:none}
  .label{border:1px solid #999}
}

/* ------------------------------------------------------------ foto nota --- */
.foto-petak{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--r4)}
.foto{border:1px solid var(--n-200);border-radius:var(--radius);overflow:hidden;background:var(--n-0)}
.foto a{display:block;background:var(--n-100);aspect-ratio:4/3;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto .pdf{width:100%;height:100%;display:grid;place-items:center;color:var(--n-500);
  font:600 13px/1 var(--tulis);gap:8px;grid-auto-flow:row}
.foto .pdf svg{width:26px;height:26px}
.foto .kaki-foto{padding:9px 11px;border-top:1px solid var(--n-200);display:flex;
  align-items:center;gap:8px;font-size:12px;color:var(--n-500)}
.foto .kaki-foto span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foto .kaki-foto form{margin-left:auto}
.foto .kaki-foto button{margin:0;min-height:26px;padding:0 8px;font-size:12px;
  background:transparent;color:var(--bahaya);border:1px solid var(--bahaya-tepi)}

/* -------------------------------------------------------- daftar harga --- */
.tabel-harga td{padding:7px 10px}
.tabel-harga input[type=number]{min-height:38px;padding:0 10px;font-size:14.5px;
  font-variant-numeric:tabular-nums;text-align:right;max-width:140px}
.tabel-harga tr.berubah{background:var(--awas-bg)}
.tabel-harga tr.berubah input{border-color:#d79a2b;background:#fff}
.tabel-harga .margin{font-family:var(--angka);font-size:13.5px;white-space:nowrap}
.rugi,.tabel-harga .margin.rugi{color:var(--bahaya);font-weight:650}
/* Arah pergerakan harga, dari sudut pandang pembeli: naik itu buruk. */
.naik{color:var(--bahaya);font-weight:650}
.turun{color:var(--sukses);font-weight:650}
.nonaktif{color:var(--bahaya)}

/* Batang tindakan yang menempel di dasar layar selama ada yang belum disimpan. */
.batang-simpan{position:sticky;bottom:0;z-index:10;margin-top:var(--r4);
  background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--radius-l);
  box-shadow:0 -4px 16px rgba(20,28,46,.08);padding:var(--r3) var(--r4);
  display:flex;gap:var(--r3);align-items:center;flex-wrap:wrap}
.batang-simpan .hitung{font-size:14px;color:var(--n-600)}
.batang-simpan .hitung b{color:var(--biru-tua)}
.batang-simpan form{display:flex;gap:var(--r3);align-items:center;margin-left:auto;flex-wrap:wrap}
.batang-simpan input[type=text]{min-height:40px;min-width:220px}
@media (max-width:560px){
  .batang-simpan{flex-direction:column;align-items:stretch}
  .batang-simpan form{margin-left:0;flex-direction:column;align-items:stretch}
  .batang-simpan .tbl{width:100%}
}

/* ---------------------------------------------------------------- grafik -- */
.grafik{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--radius-l);
  padding:var(--r5);box-shadow:var(--bayang-1)}
.grafik svg{display:block;width:100%;height:auto;overflow:visible}
.grafik .kisi{stroke:var(--n-200);stroke-width:1}
.grafik .sumbu-teks{fill:var(--n-500);font:400 11px/1 var(--tulis)}
.grafik .garis{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.grafik .titik{stroke:var(--n-0);stroke-width:2}
.grafik .pita{opacity:.10}
.grafik .label-akhir{font:650 11.5px/1 var(--tulis)}
.grafik .crosshair{stroke:var(--n-400);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.legenda-grafik{display:flex;gap:var(--r4);flex-wrap:wrap;margin-bottom:var(--r4)}
.legenda-grafik span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--n-600)}
.legenda-grafik i{width:14px;height:3px;border-radius:2px;flex:none}
.tooltip-grafik{position:absolute;pointer-events:none;opacity:0;transition:opacity .1s;
  background:var(--n-900);color:#fff;padding:8px 11px;border-radius:8px;font-size:12.5px;
  line-height:1.45;white-space:nowrap;box-shadow:var(--bayang-2);z-index:5}
.tooltip-grafik b{font-variant-numeric:tabular-nums}
.grafik-bungkus{position:relative}

/* ------------------------------------------------- lembar SPJ tercetak --- */
/* Halaman ini dibaca di kertas, bukan di layar. Yang di layar adalah pratinjau
   dari yang akan tercetak — karena itu ukurannya dikunci selebar A4, bukan
   selebar jendela: kalau lebarnya ikut layar, tabel yang muat di iPad bisa
   terpotong begitu keluar dari printer. */
.lembar{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--radius-l);
  box-shadow:var(--bayang-1);max-width:820px;margin:0 auto;padding:var(--r6) var(--r6) var(--r5)}
.lembar .kop{display:flex;justify-content:space-between;gap:var(--r5);flex-wrap:wrap;
  padding-bottom:var(--r4);border-bottom:2px solid var(--n-900);margin-bottom:var(--r5)}
.lembar .kop b{display:block;font-size:15.5px;font-weight:700;color:var(--n-900)}
.lembar .kop span{display:block;font-size:12.5px;color:var(--n-500);margin-top:3px}
.lembar .kop .kanan{text-align:right}
.lembar .bagian{margin-bottom:var(--r6);break-inside:avoid}
.lembar .bagian h2{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--n-600);margin:0 0 var(--r3)}
.lembar table{width:100%;border-collapse:collapse}
.lembar .sunyi{color:var(--n-500);font-size:13.5px;margin:0}
.lembar .sunyi b{color:var(--n-900)}

.ringkas-akhir dl{margin:0;border:1px solid var(--n-200);border-radius:var(--radius)}
.ringkas-akhir dl > div{display:flex;justify-content:space-between;gap:var(--r4);
  padding:10px var(--r4);border-bottom:1px solid var(--n-100)}
.ringkas-akhir dl > div:last-child{border-bottom:0}
.ringkas-akhir dt{color:var(--n-600);font-size:13.5px}
.ringkas-akhir dd{margin:0;font-family:var(--angka);font-variant-numeric:tabular-nums;font-weight:600}
.ringkas-akhir .akhir{background:var(--n-25);border-top:2px solid var(--n-200)}
.ringkas-akhir .akhir dt{font-weight:650;color:var(--n-900)}
.ringkas-akhir .akhir dd{font-size:16px;font-weight:700}
.ringkas-akhir .sunyi{margin-top:var(--r3)}

/* Tiga kotak tanda tangan. Garisnya nyata, bukan border-bottom pada teks —
   supaya panjangnya sama walau namanya berbeda-beda. */
.ttd{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r5);
  margin-top:var(--r7);break-inside:avoid}
.ttd div{text-align:center}
.ttd span{display:block;font-size:12.5px;color:var(--n-500)}
.ttd i{display:block;height:56px;border-bottom:1px solid var(--n-400);margin:0 var(--r3)}
.ttd b{display:block;font-size:13px;font-weight:600;color:var(--n-900);margin-top:7px}
.jejak{margin:var(--r5) 0 0;padding-top:var(--r3);border-top:1px solid var(--n-100);
  font-size:11.5px;color:var(--n-400);text-align:center}

@media (max-width:600px){
  .lembar{padding:var(--r5) var(--r4)}
  .ttd{grid-template-columns:1fr;gap:var(--r6)}
}

@media print{
  .jangan-cetak{display:none!important}
  .lembar{border:0;box-shadow:none;border-radius:0;max-width:none;padding:0;margin:0}
  .lembar .bagian{margin-bottom:18pt}
  .lembar .kop{border-bottom:1.5pt solid #000}
  .lembar table,.lembar .tabel-bungkus{border:0}
  .lembar th,.lembar td{border-bottom:.5pt solid #999}
  .ttd i{border-bottom:.5pt solid #000}
  .jejak{color:#555}
  /* Aturan cetak umum menyembunyikan seluruh <form>; di sini tidak ada form,
     tapi .label dipakai untuk status dan harus tetap terbaca hitam-putih. */
  .label{background:transparent!important;color:#000!important}
  @page{margin:14mm}
}

/* ------------------------------------------------ lencana perlu tindakan --- */
/* <details> bawaan browser: buka-tutupnya tidak butuh JS, bisa dipakai dengan
   papan ketik, dan tetap berfungsi kalau skripnya gagal dimuat. */
.lonceng{position:relative}
.lonceng > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 11px;border:1px solid var(--n-200);border-radius:var(--radius);
  background:var(--n-0);color:var(--n-600);font:600 13px/1 var(--tulis);user-select:none}
.lonceng > summary::-webkit-details-marker{display:none}
.lonceng > summary:hover{border-color:var(--n-300);color:var(--n-900)}
.lonceng > summary:focus-visible{outline:2px solid var(--biru);outline-offset:2px}
.lonceng > summary svg{width:17px;height:17px}
.lonceng[open] > summary{border-color:var(--n-300);background:var(--n-50)}
.lonceng .hitung{min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--n-200);color:var(--n-700);font:650 11.5px/19px var(--angka);
  text-align:center;font-variant-numeric:tabular-nums}
.lonceng .hitung.mendesak{background:var(--bahaya);color:#fff}
/* Nol bukan kabar buruk: lonceng tetap ada, angkanya yang mengecil jadi titik. */
.lonceng[data-kosong] .hitung{display:none}
.lonceng[data-kosong] > summary{color:var(--n-400)}

.lonceng .panel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(92vw,384px);
  background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--radius-l);
  box-shadow:var(--bayang-2);overflow:hidden}
.lonceng .panel-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:var(--r3);
  padding:11px var(--r4);border-bottom:1px solid var(--n-100);background:var(--n-25)}
.lonceng .panel-kepala b{font-size:13px;font-weight:650;color:var(--n-900)}
.lonceng .panel-kepala span{font-size:11.5px;color:var(--n-400)}
.lonceng .panel ul{margin:0;padding:0;list-style:none;max-height:min(66vh,430px);overflow-y:auto}
.lonceng .panel li + li{border-top:1px solid var(--n-100)}
.lonceng .panel a{display:flex;gap:var(--r3);padding:11px var(--r4);text-decoration:none;
  align-items:flex-start;color:inherit}
.lonceng .panel a:hover{background:var(--n-25)}
.lonceng .panel .n{flex:none;min-width:26px;height:22px;padding:0 6px;border-radius:6px;
  background:var(--n-100);color:var(--n-700);font:650 12.5px/22px var(--angka);text-align:center;
  font-variant-numeric:tabular-nums}
.lonceng .panel li.mendesak .n{background:var(--bahaya-bg);color:var(--bahaya);
  border:1px solid var(--bahaya-tepi);line-height:20px}
.lonceng .panel .t{min-width:0;font-size:12.5px;color:var(--n-500);line-height:1.45}
.lonceng .panel .t b{display:block;font-size:13.5px;font-weight:600;color:var(--n-900);margin-bottom:2px}
.lonceng .panel .sunyi{margin:0;padding:var(--r5) var(--r4);text-align:center;
  font-size:13px;color:var(--n-500)}

@media (max-width:560px){
  /* Di layar sempit panel melayang gampang terpotong tepi jendela; ditambatkan
     ke kedua sisi supaya lebarnya ikut layar, bukan ikut tombolnya. */
  .lonceng .panel{position:fixed;left:var(--r3);right:var(--r3);top:auto;width:auto}
}
@media print{ .lonceng{display:none!important} }

/* ------------------------------------------------------- pita dapur peraga --- */
/* Sengaja tidak bisa ditutup, dan sengaja ikut tercetak: angka contoh yang
   lepas dari penandanya akan dibaca orang lain sebagai angka sungguhan. */
.pita-demo{background:var(--awas-bg);border-bottom:1px solid var(--awas-tepi);
  color:var(--awas);font-size:12.5px;line-height:1.45}
.pita-demo .bungkus{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;
  padding:7px var(--r4)}
.pita-demo b{font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:11px;
  border:1px solid var(--awas-tepi);padding:1px 7px;border-radius:3px;flex:none}
.pita-demo span{min-width:0}
@media print{
  .pita-demo{display:block!important;background:transparent!important;
    border-bottom:1pt solid #000;color:#000!important}
}