:root {
  --bg: #faf7f2;
  --panel: #ffffff;
  --ink: #2c241d;
  --muted: #8a7c6d;
  --line: #e8e0d5;
  --brand: #c9762c;
  --brand-dark: #a55d1c;
  --ok: #1f7a4d;
  --err: #b3261e;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
}

a { color: var(--brand-dark); }

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 17px; }
.brand span { color: var(--brand); }
.topbar nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.topbar nav a {
  padding: 7px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
}
.topbar nav a:hover { background: #f3ede4; color: var(--ink); }
.topbar nav a.on { background: var(--brand); color: #fff; }
.user-box { display: flex; align-items: center; gap: 10px; }
.user-box span { font-size: 13px; color: var(--muted); }
.user-box em { font-style: normal; background: #f0e8dc; padding: 2px 7px; border-radius: 20px; }

/* ---------- layout ---------- */
main { padding: 24px; max-width: 1400px; margin: 0 auto; }
main.centered { display: grid; place-items: center; min-height: 100vh; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.sub { color: var(--muted); margin: 0 0 18px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Ditaruh sebelum @media di bawah: aturan setelahnya akan menang karena kekhususannya
   sama, jadi versi HP-nya tidak akan terpakai kalau ditulis di bawah sana. */
.aksi-halaman { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-aksi { display: flex; gap: 10px; }
/* Panel filter memakai <details> supaya bisa dilipat di HP.
   Ringkasannya sengaja tetap tampil di layar lebar: kalau disembunyikan, panel yang
   terlanjur tertutup (mis. setelah layar diperkecil lalu diperbesar lagi) jadi tidak
   bisa dibuka lagi sama sekali. */
.filters-panel > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

/* ---------- forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.field { margin-bottom: 14px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

.btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--brand-dark); }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: #f3ede4; }
.btn.danger { background: #fff; color: var(--err); border-color: #eccbc9; }
.btn.danger:hover { background: #fdeceb; }
.btn.sm { padding: 5px 10px; font-size: 13px; }

.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; font-weight: 600; }
.flash.success { background: #e6f4ec; color: var(--ok); }
.flash.error { background: #fdeceb; color: var(--err); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
thead th { background: #f6f1e9; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
/* judul kolom yang bisa diklik untuk mengurutkan */
thead th a.urut {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
thead th a.urut:hover { color: var(--brand-dark); text-decoration: underline; }
thead th .panah { font-size: 13px; line-height: 1; }
/* Kolom Nama yang menempel punya aturan latar sendiri di bawah dengan kekhususan
   yang sama, dan letaknya lebih akhir — jadi penandanya perlu ditulis lebih khusus
   supaya kolom itu juga ikut tersorot saat sedang jadi dasar pengurutan. */
thead th.urut-aktif,
thead th.kolom-nama.urut-aktif { background: #efe4d3; color: var(--brand-dark); }
thead th.urut-aktif a.urut { font-weight: 700; }
tbody tr:hover { background: #fdfaf6; }
td.num, th.num { text-align: center; }
td.money, th.money { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; background: #f6f1e9; }
.zero { color: #d8d0c5; }
td.ringkas { white-space: normal; min-width: 170px; max-width: 260px; font-weight: 600; }

.pembeli-lama { color: var(--ok) !important; }

.cek-locked {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 400;
  font-size: 14px;
  padding: 9px 0;
  white-space: nowrap;
  cursor: pointer;
}
.cek-locked input { width: auto; }

/* Kolom Nama menempel di tepi kiri saat tabel digulir mendatar, supaya tetap jelas
   baris ini milik siapa. Latar wajib solid karena sel melayang di atas sel lain. */
th.kolom-nama,
td.kolom-nama {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: 2px 0 0 var(--line);
}
thead th.kolom-nama { z-index: 3; background: #f6f1e9; }
tfoot td.kolom-nama { background: #f6f1e9; }
tbody tr:hover td.kolom-nama { background: #fdfaf6; }

/* Menu Varian: kotak isian nama perlu lebar tetap — bawaannya width:100%, dan di sel
   yang dibekukan itu membuat kolomnya menciut. Di HP dipersempit supaya masih tersisa
   ruang untuk menggulir sampai kolom Aktif dan Stok Habis. */
.tabel-varian td.kolom-nama input { width: 220px; }
@media (max-width: 700px) {
  .tabel-varian td.kolom-nama input { width: 140px; }
}

/* Daftar Pembeli: kolom No ikut dibekukan bersama Nama, karena kolom beku selalu
   mulai dari tepi kiri — kalau hanya Nama yang beku, ia melayang menutupi No.
   Lebar No dikunci supaya titik mulai kolom Nama bisa dipatok tepat di sebelahnya. */
.tabel-pembeli { --lebar-no: 46px; }
.tabel-pembeli th.kolom-no,
.tabel-pembeli td.kolom-no {
  position: sticky;
  left: 0;
  z-index: 2;
  /* Lebarnya dipatok mati, bukan sekadar width: tabel ini lebih lebar dari layar,
     jadi tiap kolom menciut ke selebar isinya dan width saja kalah. Kalau menciut,
     ada celah beberapa piksel antara kolom No dan Nama yang dilewati isi tabel.
     46px cukup untuk empat angka. */
  box-sizing: border-box;
  width: var(--lebar-no);
  min-width: var(--lebar-no);
  max-width: var(--lebar-no);
  padding-left: 8px;
  padding-right: 8px;
  background: var(--panel);
}
.tabel-pembeli thead th.kolom-no { z-index: 3; background: #f6f1e9; }
.tabel-pembeli tbody tr:hover td.kolom-no { background: #fdfaf6; }
.tabel-pembeli th.kolom-nama,
.tabel-pembeli td.kolom-nama { left: var(--lebar-no); }

/* Nama bisa panjang dan disusul lencana "x kali beli". Di HP dibatasi lebarnya dan
   boleh turun baris, supaya kedua kolom beku ini tidak memakan hampir seluruh layar
   dan masih ada ruang menggulir ke angka-angkanya. */
@media (max-width: 700px) {
  .tabel-pembeli td.kolom-nama {
    max-width: 135px;
    white-space: normal;
  }
}

/* penanda pesanan yang punya catatan */
.tanda-catatan {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 6px;
  border-radius: 50%;
  background: #fdf1dd;
  color: #96631a;
  border: 1px solid #f0d9ae;
  font-size: 13px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.tanda-catatan:hover,
.tanda-catatan:focus-visible { background: #96631a; color: #fff; border-color: #96631a; }
/* di layar sentuh dibuat lebih besar agar mudah diketuk */
@media (max-width: 700px) {
  .tanda-catatan { width: 28px; height: 28px; font-size: 15px; margin-left: 8px; }
}
.modal-catatan { border-top-color: var(--brand); }
.modal-catatan p { color: var(--ink); white-space: pre-wrap; }
td.aksi-sel { white-space: nowrap; }
td.aksi-sel .btn { margin: 1px 0; }
.btn.tagih { color: #96631a; border-color: #f0d9ae; background: #fdf9f1; }
.btn.tagih:hover { background: #fdf1dd; }
.btn.wa { color: #1f7a4d; border-color: #bfe3cd; }
.btn.wa:hover { background: #e3f5e9; }
.btn.mati { opacity: 0.45; cursor: not-allowed; background: #f4f1ec; }
/* notifikasi "pesanan siap" — sengaja paling menonjol di antara tombol aksi */
.btn.notif { color: #fff; background: var(--ok); border-color: #1a6942; font-weight: 700; }
.btn.notif:hover { background: #1a6942; }
/* tombol berisi ikon saja — dibuat persegi supaya sejajar dengan tombol teks di sebelahnya */
.btn.ikon { padding-left: 10px; padding-right: 10px; font-size: 15px; line-height: 1; }
/* status + tombol notifikasi berdampingan dalam satu sel */
td.sel-status { white-space: nowrap; }
td.sel-status .btn.ikon { margin-left: 6px; vertical-align: middle; }

.pill { padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #f0e8dc; }
.pill.whatsapp { background: #e3f5e9; color: #1f7a4d; }
.pill.instagram { background: #fbe9f3; color: #a02a72; }
.pill.pay-cod { background: #fdf1dd; color: #96631a; }
.pill.pay-qris { background: #e9e6fb; color: #4a35a8; }
.pill.pay-transfer { background: #e6eefb; color: #23509e; }
.pill.pending { background: #fdf1dd; color: #96631a; }
.pill.via-pickup { background: #e9f0e6; color: #46701f; }
.pill.via-maxim { background: #fdf0e3; color: #a3560f; }
.pill.ps-unpaid { background: #fdf1dd; color: #96631a; }
.pill.ps-paid { background: #e3f5e9; color: #1f7a4d; }
.pill.st-baru { background: #f0e8dc; color: #6b5b48; }
.pill.st-diproses { background: #fdf1dd; color: #96631a; }
.pill.st-siap { background: #e9e6fb; color: #4a35a8; }
.pill.st-dikirim { background: #e6eefb; color: #23509e; }
.pill.st-selesai { background: #e3f5e9; color: #1f7a4d; }
.pill.st-batal { background: #f0eeec; color: #7a716a; }
.pill.trx-C { background: #e3f5e9; color: #1f7a4d; }
.pill.trx-U { background: #e6eefb; color: #23509e; }
.pill.trx-D { background: #fdeceb; color: #b3261e; }
.audit-json {
  background: #f6f1e9;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0 0;
  max-width: 520px;
  max-height: 300px;
  overflow: auto;
  font-size: 12px;
  white-space: pre;
}

/* ---------- misc ---------- */
.login-card { width: min(380px, 92vw); }

/* ---------- halaman Pengaturan ---------- */
.judul-kelompok { font-size: 14px; color: var(--muted); margin: 22px 0 10px; }
.judul-kelompok:first-of-type { margin-top: 6px; }
.pengaturan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
/* seluruh kartu jadi tautan, jadi sasaran ketuknya selebar kartunya */
.kartu-pengaturan {
  display: block;
  margin: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, transform .12s;
}
.kartu-pengaturan:hover { border-color: var(--brand); transform: translateY(-1px); }
.kartu-pengaturan b { display: block; margin-bottom: 4px; }
.kartu-pengaturan .hint { display: block; font-size: 13px; }

/* lonceng pesanan masuk di topbar */
.lonceng {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 17px;
  flex: none;
}
.lonceng:hover, .lonceng.on { background: #f6f1e9; }
/* angka menempel di pojok loncengnya, bukan mendorong tata letak topbar */
.lonceng-angka {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--err);
  color: #fff;
  font: 700 11px/17px system-ui, sans-serif;
  text-align: center;
}

/* ---------- Ganthea: invoice jasa ---------- */
.kop-ganthea { display: flex; align-items: center; gap: 14px; }
.logo-ganthea { height: 44px; width: auto; }
.logo-ganthea.besar { height: 90px; }
/* satu baris pekerjaan: deskripsi melar, qty & harga tetap, tombol hapus di ujung */
.baris-kerja {
  display: grid;
  grid-template-columns: 1fr 90px 150px 44px;
  gap: 8px;
  margin-bottom: 8px;
}
.baris-kerja input { width: 100%; }
@media (max-width: 700px) {
  .baris-kerja { grid-template-columns: 1fr 1fr; }
  .baris-kerja input[name="deskripsi"] { grid-column: 1 / -1; }
}
/* nama toko di halaman masuk: tetap terlihat seperti judul, bukan tautan biasa */
.tautan-merek { color: inherit; text-decoration: none; }
.tautan-merek:hover { text-decoration: underline; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat b { display: block; font-size: 24px; margin-top: 4px; }
.stat span { color: var(--muted); font-size: 13px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.hint { color: var(--muted); font-size: 13px; }

/* halaman publik untuk pembeli */
body.publik main { max-width: 720px; padding: 20px 16px 40px; }
.kop-publik { text-align: center; margin: 10px 0 22px; }
.kop-publik h1 { font-size: 30px; margin: 0; color: var(--brand-dark); }
.kop-publik p { margin: 4px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .06em; }
.info-batch { text-align: center; padding: 12px; margin-bottom: 16px; }
.qty-item.habis { opacity: 0.5; background: #f4f1ec; }

/* ---------- halaman Menu & Cara Pesan ---------- */
.kartu-po { text-align: center; border-top: 3px solid var(--line); }
.kartu-po.buka { border-top-color: var(--ok); }
.kartu-po.tutup { border-top-color: var(--muted); }
.label-po {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kartu-po.buka .label-po { color: var(--ok); }
.jadwal-po { margin: 0 0 4px; font-size: 16px; }
/* hari pengambilan tetap: dipisah garis tipis supaya terbaca sebagai keterangan
   umum, bukan bagian dari jadwal batch yang sedang berjalan */
.hari-po {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.hari-po b { color: var(--ink); }
.tautan-sunyi { color: var(--muted); }

/* tombol kontak: berjajar di layar lebar, menumpuk selebar kartu di HP */
.kontak-tombol { display: flex; flex-wrap: wrap; gap: 10px; }
.kontak-tombol .btn { flex: 1 1 220px; text-align: center; }

/* kartu lacak pesanan di halaman "Pesanan Terkirim" */
.kartu-lacak { border-top: 3px solid var(--brand); }
.kartu-po .btn { margin-top: 12px; }
.btn.besar { padding: 14px 32px; font-size: 16px; }

/* daftar menu: nama di kiri, harga di kanan, dihubungkan garis putus-putus */
.daftar-menu { list-style: none; margin: 0 0 18px; padding: 0; }
.daftar-menu li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
}
.daftar-menu .nm { flex: 1; }
/* rincian paket: baris kedua di bawah nama, lebih kecil dan redup */
.rinci-paket { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.daftar-menu .hg { font-weight: 600; color: var(--brand-dark); white-space: nowrap; }

.langkah { margin: 0; padding-left: 22px; }
.langkah li { margin-bottom: 10px; }
.langkah li:last-child { margin-bottom: 0; }
.url-link { font-family: ui-monospace, Consolas, monospace; background: #fdfaf6; }
/* QRIS di halaman tagihan pembeli — dibuat besar supaya gampang di-scan dari layar HP */
.qris-gambar {
  display: block;
  margin: 0 auto 16px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 8px;
}
.qris-aksi { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.kartu-lokasi { border-top: 3px solid var(--brand); }
.kartu-lokasi h2 { margin-top: 0; }
/* Rincian pesanan punya 4 kolom. Di layar HP sempit, padding bawaan membuatnya
   melebihi lebar kartu sehingga kolom Jumlah harus digulir dulu baru terlihat. */
@media (max-width: 480px) {
  body.publik table { font-size: 13px; }
  body.publik th,
  body.publik td { padding: 8px 6px; }
  /* nama varian panjang ("Garlic Cream Cheese") boleh turun baris */
  body.publik td:first-child { white-space: normal; }
}

/* Di layar HP, menu yang menumpuk bisa memakan setengah layar sehingga isi halaman
   terdorong jauh ke bawah. Dibuat menggulir mendatar dalam satu baris. */
@media (max-width: 700px) {
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar nav {
    /* flex-basis 100% wajib: `flex: 1` dari aturan dasar membuat menu menyusut
       dan terpotong, bukan turun ke baris sendiri */
    flex: 1 0 100%;
    order: 3;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    /* bayangan tipis di tepi kanan sebagai petunjuk bahwa menu bisa digeser */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; padding: 6px 10px; font-size: 14px; }
  main { padding: 16px 12px 28px; }

  /* --- kepala halaman daftar pesanan di HP --- */
  /* Tombol dibuat dua kolom sama lebar. Dengan flex-wrap biasa, lebarnya mengikuti
     panjang teks sehingga barisnya jadi tidak rata dan terlihat berantakan. */
  .aksi-halaman {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* semua baris setinggi baris tertinggi, supaya tombol berlabel dua baris
       tidak membuat barisnya terlihat timpang */
    grid-auto-rows: 1fr;
    gap: 8px;
    width: 100%;
  }
  .aksi-halaman .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 14px;
    line-height: 1.3;
  }

  /* Tiga tab tidak muat di layar sempit; tanpa ini teksnya patah dua baris.
     Dibuat menggulir mendatar seperti menu atas. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; padding: 9px 12px; font-size: 14px; }

  .filters-panel { padding: 14px; }
  /* dua tanggal berdampingan; sisanya selebar kartu.
     Sengaja dibatasi ke panel daftar pesanan — halaman filter lain punya susunan
     kolom sendiri dan belum tentu cocok dengan grid dua kolom. */
  .filters-panel .filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    align-items: end;
  }
  .filters-panel .field.lebar,
  .filters-panel .filter-aksi { grid-column: 1 / -1; }
  .filter-aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filter-aksi .btn { width: 100%; text-align: center; }
  .filters-panel .cek-locked { padding: 0; }
}

/* status pesanan di paling atas halaman edit — dibuat besar agar mudah dari HP */
.kartu-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 3px solid var(--brand);
}
.kartu-status label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.kartu-status select {
  flex: 1;
  min-width: 170px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
}

/* template pesan WhatsApp */
.kepala-template { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kepala-template h2 { margin: 0; }
.teks-template {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
}
.kartu-template .btn { margin-top: 4px; }
.pratinjau-template { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.pratinjau-template pre {
  margin: 8px 0 0;
  padding: 14px 16px;
  background: #e7f3ea;
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
}

.kartu-notif { border-top: 3px solid var(--ok); }
.kartu-notif h2 { margin-top: 0; }
.kartu-notif .btn { margin-right: 8px; }

/* import teks pesanan */
.impor-panel summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.impor-panel textarea { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
.hasil-impor { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.daftar-impor { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.9; }
.daftar-impor code {
  background: #f6f1e9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.daftar-impor .ok { color: var(--ok); font-weight: 700; }

/* tab tampilan */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--line);
}
.tabs a {
  padding: 9px 18px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  margin-bottom: -2px;
}
.tabs a:hover { background: #f3ede4; color: var(--ink); }
.tabs a.on {
  background: var(--panel);
  color: var(--brand-dark);
  border-color: var(--line);
  border-bottom: 2px solid var(--panel);
}
/* tombol + di ujung deretan tab, untuk menambah Filter View */
.tabs a.tab-tambah {
  font-size: 18px;
  font-weight: 700;
  padding: 6px 14px;
  color: var(--brand-dark);
}
.tabs a.tab-tambah:hover { background: #f3ede4; }

/* satu blok per kategori di Dashboard Baker */
.blok-kategori { margin-bottom: 26px; }
.kepala-kategori {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.kepala-kategori h2 { margin: 0; color: var(--brand-dark); }
.kepala-kategori b { font-size: 20px; color: var(--brand-dark); }

.panel-massal { border-left: 3px solid var(--ok); }
.panel-massal > summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.panel-massal[open] > summary { margin-bottom: 14px; }

.kartu-filter-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-left: 3px solid var(--brand);
  padding: 12px 16px;
}
.aksi-filter-view { display: flex; gap: 8px; flex-wrap: wrap; }

/* panel atur kolom */
.kolom-panel summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kolom-daftar {
  list-style: none;
  counter-reset: kol;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.kolom-daftar li {
  counter-increment: kol;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfaf6;
}
.kolom-daftar li::before {
  content: counter(kol);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  min-width: 18px;
}
.kolom-daftar .nm { flex: 1; font-size: 14px; font-weight: 600; }
.kolom-daftar .aksi { display: flex; gap: 4px; }
.kolom-daftar .aksi .btn { padding: 2px 9px; line-height: 1.4; }
.kolom-daftar li.mati { opacity: 0.45; background: #f4f1ec; }
.kolom-daftar li.mati .nm { font-weight: 400; }

/* geser-jatuhkan susunan kolom */
.kolom-daftar li[draggable='true'] { cursor: grab; }
.kolom-daftar li[draggable='true']:active { cursor: grabbing; }
.kolom-daftar .pegangan {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  letter-spacing: -2px;
  user-select: none;
}
.kolom-daftar li:hover { border-color: var(--brand); }
/* kartu yang sedang dibawa dibuat samar supaya posisi jatuhnya kelihatan */
.kolom-daftar li.ditarik {
  opacity: 0.35;
  border-style: dashed;
  border-color: var(--brand);
}
.kolom-daftar.terkunci { margin-top: 14px; opacity: 0.7; }
.kolom-daftar.terkunci li { background: #f4f1ec; }

/* dialog konfirmasi */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 29, 0.5);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--panel);
  border-radius: var(--radius);
  border-top: 4px solid var(--err);
  padding: 22px 24px;
  width: min(420px, 100%);
  box-shadow: 0 18px 40px rgba(44, 36, 29, 0.25);
}
.modal h2 { margin: 0 0 8px; font-size: 18px; }
.modal p { margin: 0 0 20px; color: var(--muted); }
.modal-aksi { display: flex; gap: 10px; justify-content: flex-end; }
.modal-aksi .btn { min-width: 90px; }
.modal-aksi .btn.danger { background: var(--err); color: #fff; border-color: var(--err); }
.modal-aksi .btn.danger:hover { background: #93200c; }

/* kebutuhan resep di dashboard baker */
.resep {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius);
  background: #fdfaf6;
}
.resep-angka { display: flex; gap: 28px; flex-wrap: wrap; }
.resep-angka > div { font-size: 13px; color: var(--muted); font-weight: 600; }
.resep-angka span {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.qty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.qty-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.qty-item .nm { font-weight: 600; font-size: 14px; }
.qty-item .pr { color: var(--muted); font-size: 12px; }
.qty-item input { width: 74px; text-align: center; }
/* Pilihan rasa paket: melebar penuh di bawah kartu variannya, supaya empat
   droplist tidak berdesakan di dalam satu kolom kartu. */
.paket-pilihan {
  grid-column: 1 / -1;
  border: 1px dashed var(--brand);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fdfaf6;
}
.paket-judul { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.paket-sub { margin: 10px 0 4px; font-size: 12px; color: var(--muted); }
.paket-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.paket-baris select { width: 100%; }
.paket-kosong { margin: 0; font-size: 13px; color: var(--err); }

/* judul kategori di dalam pemilih varian */
.judul-kategori {
  margin: 18px 0 10px;
  font-size: 15px;
  color: var(--brand-dark);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.judul-kategori:first-of-type { margin-top: 4px; }
/* varian berstok habis yang tetap muncul karena sudah ada di pesanan ini */
.qty-item.stok-habis { border-style: dashed; border-color: var(--err); background: #fdf6f5; }
.qty-item input.over { border-color: var(--err); background: #fdeceb; }
.sisa { color: var(--brand-dark); font-weight: 600; }
/* sisa kuota yang sudah menipis dibedakan warnanya supaya kelihatan mendesak */
.sisa.menipis { color: var(--err); }
.sisa-batch { margin-top: 4px; font-size: 13px; color: var(--muted); }
/* Bar total yang melayang di atas isi form. Sticky hanya berlaku di dalam
   induknya, jadi bar ini harus jadi anak langsung <form> — kalau dibungkus salah
   satu kartu, ia berhenti melayang begitu kartu itu terlewat. Diangkat 12px dari
   tepi bawah supaya terbaca sebagai lapisan terpisah, bukan bagian halaman. */
.total-bar {
  position: sticky; bottom: 12px;
  z-index: 10;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(44, 36, 29, 0.14);
  flex-wrap: wrap; gap: 12px;
}
.total-bar b { font-size: 22px; color: var(--brand-dark); }
.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filters .field { margin: 0; }
.filters-panel[open] > summary { margin-bottom: 14px; }

/* centang fitur per seller di halaman Pengguna */
.fitur-kotak {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 2px 12px;
  min-width: 320px;
}
.fitur-kotak .cek-locked { padding: 2px 0; font-size: 13px; white-space: nowrap; }

/* kolom Catatan: teksnya panjang, jadi dibiarkan turun baris dengan lebar terbatas */
td.catatan-sel { white-space: normal; min-width: 180px; max-width: 320px; }

/* ---------- pengatur jumlah: [−] [ ] [+] ---------- */
.qty-atur { display: flex; align-items: center; gap: 4px; flex: none; }
.qty-atur input.qty {
  width: 54px;
  text-align: center;
  /* panah bawaan browser dilepas: sudah ada tombol − / + sendiri */
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-atur input.qty::-webkit-outer-spin-button,
.qty-atur input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-tombol {
  width: 34px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.qty-tombol:hover:not(:disabled) { background: #f3ede4; }
.qty-tombol:active:not(:disabled) { background: #e9dfd1; }
.qty-tombol:disabled { opacity: 0.4; cursor: not-allowed; }
/* varian yang sudah diisi diberi tanda supaya gampang diperiksa ulang */
.qty-item.terisi { border-color: var(--ok); background: #f4fbf6; }
.qty-item.terisi .nm { color: #17603c; }
@media (max-width: 700px) {
  /* Di layar sentuh tinggi tombol dinaikkan agar nyaman diketuk, tapi lebarnya
     ditahan: tiga elemen berjajar merebut ruang nama varian, dan nama panjang
     seperti "Smoked Beef Cheese" jadi patah tiga baris kalau terlalu sempit. */
  .qty-tombol { width: 38px; height: 42px; }
  .qty-atur input.qty { width: 46px; height: 42px; padding-left: 4px; padding-right: 4px; }
  .qty-atur { gap: 3px; }

  /* Bar total di HP: dua angka berdampingan di baris pertama, tombol selebar bar di
     baris kedua. Tanpa ini ketiga bagiannya turun sendiri-sendiri dan barnya memakan
     hampir sepertiga layar — padahal ia melayang di atas isian yang sedang dibaca. */
  .total-bar { padding: 10px 12px; gap: 6px 10px; bottom: 8px; }
  .total-bar b { font-size: 18px; }
  .total-bar > :nth-child(1),
  .total-bar > :nth-child(2) { flex: 1 1 40%; }
  .total-bar > :nth-child(3) { flex: 1 1 100%; display: flex; gap: 8px; }
  .total-bar > :nth-child(3) > .btn { flex: 1; text-align: center; }
}

/* potongan harga ditulis merah dengan tanda minus supaya tidak terbaca sebagai tambahan */
.diskon-angka { color: var(--err); font-weight: 600; }

/* pengaturan diskon di halaman Batch PO */
.kotak-diskon {
  border: 1px dashed var(--brand);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  background: #fdfaf6;
}