/* ============================================================
   ui.css — Sistem tampilan bersama: Jurnal Dapur, Outlet, Data Acuan.
   Satu berkas untuk tiga layar. Kalau ada yang perlu diubah, ubah di sini
   supaya ketiganya tetap seragam.

   Yang dilayani sistem ini adalah orang yang punya pekerjaan utama lain.
   Koki sedang masak, petugas sedang melayani pembeli. Mencatat itu selingan,
   bukan tugas. Jadi aturannya:
     - Angka besar, tombol besar, jumlah pilihan sesedikit mungkin
     - Tidak ada hiasan yang meminta perhatian
     - Yang salah harus mustahil terlewat, yang normal tidak perlu diumumkan
   ============================================================ */

/* ---------- warna: terang bawaan, gelap menyusul preferensi sistem ---------- */
:root{
  --bg:#F2F2EE;  --panel:#FFFFFF;  --panel2:#E9E9E3;  --panel3:#DEDED6;
  --line:#D6D6CD; --line2:#C2C2B6;
  --ink:#15170F;  --ink2:#43463B;  --mute:#666A5B;
  --brick:#A63A26; --brick-bg:#F5E3DE; --brick-ink:#FFFFFF;
  --teal:#1D6455;  --teal-bg:#DCEAE5;
  --amber:#7C5710; --amber-bg:#F5E9CC;
  --danger:#A82F1E; --danger-bg:#F6DFDA;

  --r-s:10px; --r-m:14px; --r-full:999px;
  --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --m:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --bayang:0 1px 2px rgb(21 23 15 / .05), 0 8px 20px -14px rgb(21 23 15 / .22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="terang"]){
    --bg:#13150E;  --panel:#1C1F17;  --panel2:#252921;  --panel3:#2F342A;
    --line:#333830; --line2:#454B41;
    --ink:#ECEDE5;  --ink2:#B4B8AC;  --mute:#888C7F;
    --brick:#E0705A; --brick-bg:#33211B; --brick-ink:#1A0F0B;
    --teal:#6BBBA9;  --teal-bg:#172C27;
    --amber:#D7A945; --amber-bg:#2E2614;
    --danger:#E46850; --danger-bg:#331C17;
    --bayang:0 1px 2px rgb(0 0 0 / .4), 0 8px 20px -14px rgb(0 0 0 / .7);
  }
}
:root[data-tema="gelap"]{
  --bg:#13150E;  --panel:#1C1F17;  --panel2:#252921;  --panel3:#2F342A;
  --line:#333830; --line2:#454B41;
  --ink:#ECEDE5;  --ink2:#B4B8AC;  --mute:#888C7F;
  --brick:#E0705A; --brick-bg:#33211B; --brick-ink:#1A0F0B;
  --teal:#6BBBA9;  --teal-bg:#172C27;
  --amber:#D7A945; --amber-bg:#2E2614;
  --danger:#E46850; --danger-bg:#331C17;
  --bayang:0 1px 2px rgb(0 0 0 / .4), 0 8px 20px -14px rgb(0 0 0 / .7);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:light dark}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--f);
  font-size:16px; line-height:1.45; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font-family:inherit;font-size:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}
.hide{display:none!important}
:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- kepala layar ---------- */
.top{
  position:sticky;top:0;z-index:30;background:var(--panel);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;padding-top:calc(11px + env(safe-area-inset-top));
}
.merek{display:flex;align-items:center;gap:9px;min-width:0}
.merek svg{width:26px;height:26px;flex:none;display:block}
.merek b{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.merek span{font-size:11px;color:var(--mute);display:block;line-height:1;margin-top:2px;
  letter-spacing:.08em;text-transform:uppercase}

.alat{margin-left:auto;display:flex;align-items:center;gap:8px}
.ikon{
  width:36px;height:36px;border-radius:var(--r-s);background:var(--panel2);
  display:grid;place-items:center;color:var(--ink2);flex:none;
}
.ikon:hover{background:var(--panel3)}
.ikon svg{width:18px;height:18px;display:block}

.versi{font-family:var(--m);font-size:11px;color:var(--mute);letter-spacing:.04em;
  padding:5px 9px;border-radius:var(--r-full);background:var(--panel2)}
.versi.baru{color:var(--brick);background:var(--brick-bg)}

.sinyal{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;
  padding:6px 11px;border-radius:var(--r-full);background:var(--panel2);color:var(--teal)}
.sinyal i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sinyal.aman{opacity:.45;padding:7px;gap:0}
.sinyal.off{color:var(--amber);background:var(--amber-bg);opacity:1}
.sinyal.antre{color:var(--brick);background:var(--brick-bg);opacity:1}

.who{text-align:right;background:var(--panel2);border-radius:var(--r-s);
  padding:6px 11px;line-height:1.2;font-size:12px;color:var(--mute)}
.who b{display:block;color:var(--ink);font-size:13px;font-weight:650}
button.who::after{content:"ganti";display:block;font-size:9px;color:var(--brick);
  letter-spacing:.1em;text-transform:uppercase;margin-top:1px}

/* ---------- tab ---------- */
.tabs{display:flex;gap:6px;padding:9px 16px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:59px;z-index:29;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:10px 17px;border-radius:var(--r-full);background:var(--panel2);
  color:var(--ink2);font-weight:650;font-size:14px;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--brick);color:var(--brick-ink)}

main{padding:16px;max-width:940px;margin:0 auto}
main.lebar{max-width:1180px}

/* ---------- kartu ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px;margin-bottom:13px;box-shadow:var(--bayang)}
.card h2{margin:0 0 3px;font-size:18px;letter-spacing:-.01em}
.card p.sub{margin:0 0 13px;color:var(--mute);font-size:13.5px}
label{display:block;font-size:12px;color:var(--ink2);margin:0 0 6px;font-weight:650;
  text-transform:uppercase;letter-spacing:.06em}
.field{margin-bottom:14px}
.row2{display:grid;gap:11px;grid-template-columns:1fr 1fr}
.hint{font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.45}
.hint.warn{color:var(--amber)}
.empty{color:var(--mute);text-align:center;padding:24px 0;font-size:14px}

/* ---------- pilihan besar ---------- */
.grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.pick{background:var(--panel2);border:2px solid transparent;border-radius:var(--r-s);
  padding:13px 12px;text-align:left;min-height:62px;
  display:flex;flex-direction:column;justify-content:center}
.pick:hover{background:var(--panel3)}
.pick b{font-size:15px;font-weight:650;display:block}
.pick span{font-size:11.5px;color:var(--mute);margin-top:2px}
.pick[aria-pressed="true"]{border-color:var(--brick);background:var(--brick-bg)}

/* ---------- angka ---------- */
.num{width:100%;background:var(--panel2);border:2px solid var(--line);
  border-radius:var(--r-s);padding:15px;color:var(--ink);font-size:29px;font-weight:700;
  text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.num:focus{outline:0;border-color:var(--brick);background:var(--panel)}
.num.req{border-color:var(--amber)}

/* ---------- isian ukuran meja ---------- */
/* `.num` di atas 29px — sengaja, itu untuk jari di tablet dapur sambil berdiri.
   Kantor dipakai duduk dengan papan ketik, mengisi belasan baris nota sekali
   jalan; ukuran tablet di sana malah bikin satu nota tidak muat selayar. */
.isi{width:100%;background:var(--panel2);border:2px solid var(--line);
  border-radius:var(--r-s);padding:10px 12px;color:var(--ink);font-size:15px}
.isi:focus{outline:0;border-color:var(--brick);background:var(--panel)}
.isi.angka{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
select.isi{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),
                   linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 16px) center,calc(100% - 11px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}

/* ---------- tombol ---------- */
.btn{display:block;width:100%;padding:18px;border-radius:var(--r-s);
  background:var(--brick);color:var(--brick-ink);font-size:18px;font-weight:750;
  letter-spacing:-.01em;margin-top:6px;transition:transform .08s}
.btn:active{transform:translateY(1px)}
/* .btn dulu cuma dipakai <button>. Sebagai <a> perlu dua koreksi ini, kalau
   tidak tulisannya bergaris bawah dan rata kiri — terbaca sebagai tautan rusak. */
a.btn{text-decoration:none;text-align:center}
.btn:disabled{opacity:.45}
.btn.ghost{background:var(--panel2);color:var(--ink2);font-size:15px;font-weight:650;padding:14px}
.btn.ghost:hover{background:var(--panel3)}
.btn.kecil{padding:11px 16px;font-size:14px;margin-top:0;width:auto}

/* ---------- hasil ---------- */
.out{border-radius:var(--r-s);padding:14px 16px;margin-top:13px;font-size:14.5px;line-height:1.5}
.out.ok{background:var(--teal-bg);border:1px solid var(--teal);color:var(--ink)}
.out.warn{background:var(--amber-bg);border:1px solid var(--amber);color:var(--ink)}
.out.err{background:var(--danger-bg);border:1px solid var(--danger);color:var(--ink)}
.out b{display:block;margin-bottom:3px;font-size:15.5px}
.out dl{margin:9px 0 0;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-size:13.5px}
.out dt{opacity:.7}
.out dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:650}

/* ---------- daftar ---------- */
.item{display:flex;gap:11px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .nm{font-weight:650;flex:1;min-width:0}
.item .vl{font-variant-numeric:tabular-nums;color:var(--ink2)}
.tag{font-size:11px;padding:3px 8px;border-radius:var(--r-full);
  background:var(--amber-bg);color:var(--amber);font-weight:650}

/* ---------- baris bahan ---------- */
.brs{display:grid;grid-template-columns:1fr 112px 42px;gap:8px;align-items:center;margin-bottom:8px}
.brs select,.brs input{background:var(--panel2);border:2px solid var(--line);
  border-radius:var(--r-s);color:var(--ink);padding:13px 10px;width:100%}
.brs select{font-size:15px;appearance:none}
.brs input{font-size:19px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.brs select:focus,.brs input:focus{outline:0;border-color:var(--brick)}
.brs .x{background:var(--panel2);border-radius:var(--r-s);height:50px;
  color:var(--danger);font-size:21px;font-weight:700}

/* ---------- panel bahan terpakai ---------- */
.ambil{display:flex;align-items:center;gap:12px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;margin-bottom:13px}
.ambil.kurang{border-color:var(--amber);background:var(--amber-bg)}
.ambil .t{flex:1;min-width:0}
.ambil .t b{display:block;font-size:15px;font-weight:650}
.ambil .t span{font-size:12.5px;color:var(--mute)}
.ambil .sisa{text-align:right;font-family:var(--m);font-variant-numeric:tabular-nums;white-space:nowrap}
.ambil .sisa b{display:block;font-size:17px;font-weight:700}
.ambil .sisa span{font-size:10.5px;color:var(--mute);letter-spacing:.07em;text-transform:uppercase}
.ambil.kurang .sisa b{color:var(--amber)}

.komp{background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:3px 15px;margin-bottom:13px}
.komp .b{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.komp .b:last-of-type{border-bottom:0}
.komp .t{flex:1;min-width:0}
.komp .t b{display:block;font-size:14px;font-weight:650}
.komp .t span{font-size:12px;color:var(--mute)}
.komp input{width:100px;background:var(--panel);border:2px solid var(--line);
  border-radius:var(--r-s);color:var(--ink);padding:10px;font-size:17px;font-weight:700;
  text-align:right;font-variant-numeric:tabular-nums;flex:none}
.komp input:focus{outline:0;border-color:var(--brick)}
.komp input.ubah{border-color:var(--amber)}
.komp .sat{font-size:12px;color:var(--mute);width:28px;flex:none}
.komp .ket{font-size:12px;color:var(--mute);padding:9px 0 11px;line-height:1.4;margin:0}

/* ---------- timbang contoh ---------- */
.contoh{border:1px dashed var(--line2);border-radius:var(--r-s);padding:14px;margin-bottom:13px}
.contoh.buka{border-style:solid;background:var(--panel2)}
.contoh .kepala{display:flex;align-items:center;gap:10px;width:100%;text-align:left}
.contoh .kepala .t{flex:1}
.contoh .kepala b{display:block;font-size:14px;font-weight:650}
.contoh .kepala span{font-size:12px;color:var(--mute)}
.contoh .kepala i{font-style:normal;font-size:19px;color:var(--mute)}
.contoh .isi{margin-top:13px}
.contoh .row3{display:grid;gap:9px;grid-template-columns:1fr 1fr 1fr}
.contoh .row3 label{font-size:10.5px}
.contoh .row3 input{width:100%;background:var(--panel);border:2px solid var(--line);
  border-radius:var(--r-s);color:var(--ink);padding:12px 10px;font-size:21px;font-weight:700;
  text-align:center;font-variant-numeric:tabular-nums}
.contoh .row3 input:focus{outline:0;border-color:var(--brick)}

/* ---------- outlet ---------- */
.baris{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.baris:last-child{border-bottom:0}
.baris .nm{flex:1;min-width:0}
.baris .nm b{display:block;font-size:15px;font-weight:650}
.baris .nm span{font-size:12px;color:var(--mute)}
.stepper{display:flex;align-items:center;gap:6px;flex:none}
.stepper button{width:38px;height:38px;border-radius:var(--r-s);background:var(--panel2);
  font-size:20px;font-weight:700}
.stepper button:hover{background:var(--panel3)}
.stepper input{width:66px;height:38px;border-radius:var(--r-s);background:var(--panel2);
  border:2px solid var(--line);color:var(--ink);text-align:center;font-size:17px;
  font-weight:700;font-variant-numeric:tabular-nums}
.stepper input:focus{outline:0;border-color:var(--brick)}
.rusak{background:var(--panel2);border-radius:var(--r-s);padding:11px;margin-top:9px}
.rusak label{font-size:10.5px;margin-bottom:5px}
.rusak select,.rusak textarea,.rusak input[type=number]{width:100%;background:var(--panel);
  border:2px solid var(--line);border-radius:var(--r-s);color:var(--ink);padding:10px;margin-bottom:9px}
.rusak select:focus,.rusak textarea:focus,.rusak input:focus{outline:0;border-color:var(--brick)}
.rusak textarea{min-height:54px;resize:vertical}
.foto{display:flex;align-items:center;gap:10px}
.foto img{width:52px;height:52px;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line)}

/* ---------- tabel (data acuan) ---------- */
.wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}
/* Kepala kolom angka ikut rata kanan — kalau tidak, judulnya menggantung di kiri
   sementara angkanya di kanan, dan kolomnya jadi susah ditelusuri ke bawah. */
th.ka,td.ka{text-align:right}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--panel2);font-family:var(--m);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink2);font-weight:500;position:sticky;top:0;z-index:1}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel2)}
td.nm{font-weight:650;white-space:nowrap}
td.nm span{display:block;font-family:var(--m);font-size:10.5px;font-weight:400;color:var(--mute)}
input.sel{width:100%;min-width:72px;background:transparent;border:1px solid transparent;
  border-radius:var(--r-s);color:var(--ink);padding:7px 8px;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:650}
input.sel:hover{border-color:var(--line)}
input.sel:focus{outline:0;border-color:var(--brick);background:var(--panel2)}
input.sel.kosong{border-color:var(--amber);background:var(--amber-bg)}
input.teks{text-align:left;font-weight:500}
.simpan{opacity:0;transition:opacity .15s;font-size:10.5px;color:var(--teal);font-family:var(--m)}
.simpan.on{opacity:1}
.tugas{border-left:3px solid var(--amber);background:var(--amber-bg);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:13px 16px;margin-bottom:13px}
.tugas b{display:block;font-size:14px;color:var(--amber);margin-bottom:7px}
.tugas ul{margin:0;padding-left:17px;font-size:13px;color:var(--ink2)}
.tugas li{margin-bottom:3px}
.tugas .beres{color:var(--teal)}
.log{font-size:13px}
.log .baris{gap:11px}
.log .w{font-family:var(--m);font-size:10.5px;color:var(--mute);white-space:nowrap}
.log .isi{flex:1}
.log .nilai{font-family:var(--m);font-size:12px}
.log .lama{color:var(--mute);text-decoration:line-through}
.log .baru{color:var(--teal)}

/* ---------- masuk ---------- */
#login{position:fixed;inset:0;background:var(--bg);z-index:60;display:flex;
  align-items:center;justify-content:center;padding:22px}
#login .box{width:100%;max-width:420px}
#login .merek{justify-content:center;margin-bottom:4px}
#login .merek svg{width:38px;height:38px}
#login .merek b{font-size:23px}
#login .judul{text-align:center;color:var(--mute);margin:0 0 22px;font-size:14px}
/* Layar masuk outlet menaruh .pick langsung tanpa kisi, jadi lebarnya harus
   dipaksa — kalau tidak, tombol mengecil mengikuti panjang nama dan berundak. */
#login .pick{width:100%;margin-bottom:8px}
#login label{text-align:center}
.pinrow{display:flex;gap:11px;justify-content:center;margin:20px 0}
.dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2)}
.dot.on{background:var(--brick);border-color:var(--brick)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:320px;margin:0 auto}
.pad button{background:var(--panel2);border-radius:var(--r-s);padding:20px 0;
  font-size:25px;font-weight:700;transition:transform .06s}
.pad button:hover{background:var(--panel3)}
.pad button:active{background:var(--brick);color:var(--brick-ink);transform:scale(.97)}

/* ---------- pesan mengambang ---------- */
#pesan{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;
  padding:12px 20px;border-radius:var(--r-s);font-size:14px;font-weight:650;opacity:0;
  transition:opacity .2s;pointer-events:none;max-width:90vw}
#pesan.on{opacity:1}
#pesan.ok{background:var(--teal-bg);border:1px solid var(--teal);color:var(--ink)}
#pesan.err{background:var(--danger-bg);border:1px solid var(--danger);color:var(--ink)}

@media (max-width:560px){
  .top{gap:8px;padding:10px 13px}
  .merek span{display:none}
  main{padding:13px}
  .row2{grid-template-columns:1fr}
}

/* ---------- lembar (menu akun, ganti PIN) ---------- */
#lembar{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
.lembar-latar{position:absolute;inset:0;background:rgb(0 0 0 / .45)}
.lembar-kotak{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);padding:20px;width:100%;max-width:360px;box-shadow:var(--bayang)}
.lembar-kotak h3{margin:0 0 3px;font-size:18px}
.lembar-ket{margin:0 0 16px;color:var(--mute);font-size:13px}
.lembar-kotak label{margin-top:12px}
.lembar-kotak .btn{margin-top:9px}
.pin-isi{width:100%;background:var(--panel2);border:2px solid var(--line);border-radius:var(--r-s);
  color:var(--ink);padding:13px;font-size:24px;font-weight:700;text-align:center;
  letter-spacing:.5em;text-indent:.5em;font-variant-numeric:tabular-nums}
.pin-isi:focus{outline:0;border-color:var(--brick)}