/* ERP Cetak Sablon — mobile-first. CS memakai HP masing-masing (K-18). */

:root {
  --brand: #e8845f;
  --brand-terang: #ff9a76;
  --gelap: #1a2332;

  --bg: #f6f7f9;
  --permukaan: #ffffff;
  --garis: #e1e5e9;
  --teks: #1a2332;
  --teks-lemah: #667085;
  --galat: #b42318;
  --aman: #027a48;

  --radius: 12px;
  --bayang: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151d;
    --permukaan: #1a2332;
    --garis: #2c3a4f;
    --teks: #e7ecf3;
    --teks-lemah: #93a1b5;
    --galat: #ff9c8f;
    --aman: #6ce9a6;
    --bayang: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--teks);
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.layar-tengah {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
}

.masuk {
  width: 100%;
  max-width: 380px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.merek { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.merek img { border-radius: 12px; }
.merek h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.merek p { margin: 0; color: var(--teks-lemah); font-size: 14px; }

/* ── Login 2 langkah + 2FA (K-36) ── */
.masuk form { display: flex; flex-direction: column; gap: 6px; }
.masuk .qr {
  align-self: center; width: 240px; height: 240px;
  border-radius: 10px; background: #fff; padding: 8px; margin: 6px 0;
}
.masuk .secret {
  font-family: ui-monospace, "Courier New", monospace; font-size: 16px;
  letter-spacing: 2px; word-break: break-all; color: var(--teks);
}
#enroll-kode, #kode-2fa {
  font-size: 22px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums;
}

/* Daftar pengguna + status 2FA di tab Database */
.daftar-tipis { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.user-2fa { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--garis); }
.user-2fa .u-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.user-2fa .u-info small { color: var(--teks-lemah); font-size: 12px; }
.user-2fa .tombol-tipis { flex: none; }

label { font-size: 13px; font-weight: 600; margin-top: 12px; }

input {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--bg);
  color: var(--teks);
  width: 100%;
}
input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.tombol-utama {
  margin-top: 20px;
  font: inherit;
  font-weight: 600;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}
.tombol-utama:hover { background: var(--brand-terang); }
.tombol-utama:disabled { opacity: .6; cursor: progress; }

.pesan-galat {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--galat) 12%, transparent);
  color: var(--galat);
  font-size: 14px;
}

/* ── Bar atas ──────────────────────────────────────────────────────────── */
.bar-atas {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
}

.bar-kiri { display: flex; align-items: center; gap: 10px; }
.bar-kiri img { border-radius: 8px; }
.bar-kanan { display: flex; align-items: center; gap: 10px; font-size: 14px; }
#nama-pengguna { color: var(--teks-lemah); }

.lencana {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
}

.tombol-tipis {
  font: inherit;
  font-size: 14px;
  background: none;
  border: 1px solid var(--garis);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--teks);
  cursor: pointer;
}
.tombol-tipis:hover { border-color: var(--brand); color: var(--brand); }

/* ── Ringkasan (owner saja) ────────────────────────────────────────────── */
.ringkasan { padding: 14px; }
.statistik {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.statistik .label { font-size: 13px; color: var(--teks-lemah); }
.statistik strong { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.statistik .catatan { font-size: 12px; color: var(--teks-lemah); }
.statistik .catatan.galat { color: var(--galat); font-weight: 600; }

/* ── Filter & cari ─────────────────────────────────────────────────────── */
.chip-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 14px 12px;
  scrollbar-width: none;
}
.chip-bar::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--permukaan);
  color: var(--teks);
  cursor: pointer;
  white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip small { font-weight: 400; opacity: .7; margin-left: 4px; }

.cari { padding: 0 14px 12px; }

.status { margin: 0; padding: 0 16px 10px; font-size: 13px; color: var(--teks-lemah); }

/* ── Daftar produk ─────────────────────────────────────────────────────── */
.daftar { list-style: none; margin: 0; padding: 0 14px 24px; display: grid; gap: 8px; }

.produk {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
}

.produk .judul { font-weight: 600; }
.produk .barcode {
  grid-column: 1;
  font-size: 12px;
  color: var(--teks-lemah);
  font-variant-numeric: tabular-nums;
}
.produk .angka { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
.produk .stok { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.produk .stok.habis { color: var(--teks-lemah); }
.produk .satuan { font-size: 12px; color: var(--teks-lemah); }
.produk .modal {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--garis);
  margin-top: 8px;
  padding-top: 8px;
  font-size: 12px;
  color: var(--teks-lemah);
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.produk .tercadang { color: var(--brand); font-weight: 600; }

.kaki { padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); color: var(--teks-lemah); font-size: 12px; text-align: center; }

/* ── Tab ───────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--garis);
  background: var(--permukaan);
}
.tab {
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--teks-lemah);
  cursor: pointer;
}
.tab[aria-pressed="true"] { color: var(--brand); border-bottom-color: var(--brand); }

/* Sub-navigasi di dalam panel Keuangan (Fase 4). Sengaja BUKAN .tab: .tab terikat
   ke logika ganti-panel utama; ini hanya menukar bagian di dalam satu panel. */
.sub-tab { display: flex; gap: 6px; padding: 12px 14px 0; flex-wrap: wrap; }
.sub {
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 7px 14px; border: 1px solid var(--garis); border-radius: 999px;
  background: none; color: var(--teks-lemah); cursor: pointer;
}
.sub[aria-pressed="true"] { color: #fff; background: var(--brand); border-color: var(--brand); }
.lap-tgl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--teks-lemah); }
.lap-tgl input { font: inherit; }

/* ── Form & blok umum ──────────────────────────────────────────────────── */
.baris-alat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
}
.baris-alat.rapat { padding: 0 0 8px; justify-content: space-between; }
.baris-rapat { display: flex; gap: 8px; align-items: center; }
.baris-rapat select { flex: 1; }

.blok {
  margin: 0 14px 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.blok > label:first-of-type { margin-top: 0; }

select {
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--bg);
  color: var(--teks);
}
.tombol-ringkas { margin-top: 0; padding: 10px 16px; margin-left: auto; }
.catatan { font-size: 12px; color: var(--teks-lemah); margin: 4px 0 0; }
.catatan.galat { color: var(--galat); }
.catatan.tengah { text-align: center; padding: 0 16px 20px; }

.aksi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 20px;
}
.aksi .tombol-utama, .aksi .tombol-tipis { margin-top: 0; padding: 13px; }

.total-blok { gap: 8px; }
.total-blok > div { display: flex; justify-content: space-between; align-items: baseline; }
.total-blok strong { font-size: 20px; font-variant-numeric: tabular-nums; }

/* ── Baris item pada form nota ─────────────────────────────────────────── */
.item-baris {
  display: grid;
  grid-template-columns: 1fr 62px 100px 34px;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--garis);
}
.item-baris input { padding: 10px; }
.i-info { grid-column: 1 / -1; font-size: 12px; color: var(--teks-lemah); }
.i-info.galat { color: var(--galat); }
.i-hapus {
  font: inherit; font-size: 20px; line-height: 1;
  border: 1px solid var(--garis); border-radius: 8px;
  background: none; color: var(--teks-lemah); cursor: pointer; padding: 8px 0;
}
.i-hapus:hover { color: var(--galat); border-color: var(--galat); }

/* ── Marketplace (K-35) ────────────────────────────────────────────────── */
textarea {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--bg);
  color: var(--teks);
  width: 100%;
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
#mp-barcode { flex: 1; min-width: 0; }
#mp-qty { width: 72px; flex: none; text-align: center; }
.mp-item {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--garis);
}
.mp-item .nm { flex: 1; font-size: 14px; overflow-wrap: anywhere; }
.mp-item .q { width: 72px; flex: none; padding: 10px; text-align: center; }
.mp-kartu { cursor: default; }
.mp-kartu:hover { border-color: var(--garis); }
.nota-tengah.samar { opacity: 0.7; }

/* ── Kartu nota ────────────────────────────────────────────────────────── */
.nota {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.nota:hover { border-color: var(--brand); }
.nota:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nota-atas { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nota-lencana { display: flex; gap: 5px; flex-wrap: wrap; }
.nota-tengah { font-size: 13px; color: var(--teks-lemah); }
.nota-bawah {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 13px; color: var(--teks-lemah);
}
.nota-total { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--teks); }

.lencana.l-aman   { background: color-mix(in srgb, var(--aman) 16%, transparent); color: var(--aman); }
.lencana.l-galat  { background: color-mix(in srgb, var(--galat) 14%, transparent); color: var(--galat); }
.lencana.l-netral { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.lencana.l-mati   { background: color-mix(in srgb, var(--teks-lemah) 16%, transparent); color: var(--teks-lemah); }

/* ── Detail nota ───────────────────────────────────────────────────────── */
.ringkas-baris {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 3px 0;
}
.ringkas-baris > span:first-child { color: var(--teks-lemah); }
.ringkas-baris > span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.ringkas-baris.tebal { font-weight: 700; font-size: 16px; }

.item-lihat {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--garis);
}
.item-lihat:last-child { border-bottom: 0; }
.item-lihat small { color: var(--teks-lemah); }
.item-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.item-total .i-info { display: block; font-weight: 400; }

.bayar { border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); }
.bayar summary { padding: 13px; font-weight: 600; cursor: pointer; }
.bayar-form { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 4px; }
.bayar-form label { display: flex; flex-direction: column; gap: 4px; }

/* ── Baris data: kartu stok, biaya batch, output, hasil opname ──────────── */
.baris-data {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--garis);
}
.baris-data:last-child { border-bottom: 0; }
.baris-data small { display: block; font-size: 12px; color: var(--teks-lemah); }
.baris-data small.galat { color: var(--galat); }

.baris-data .kanan {
  display: flex; align-items: center; gap: 10px;
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}
.baris-data .kanan .i-hapus { padding: 4px 10px; font-size: 16px; }

.gerak-angka { display: flex; flex-direction: column; align-items: flex-end; }
.gerak-qty { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gerak-qty.plus { color: var(--aman); }
.gerak-qty.minus { color: var(--galat); }
.gerak-angka small { font-weight: 400; color: var(--teks-lemah); }

.selisih { font-variant-numeric: tabular-nums; font-weight: 700; }
.selisih.plus { color: var(--aman); }
.selisih.minus { color: var(--galat); }
.selisih.nol { color: var(--teks-lemah); }

.cari-produk { display: flex; flex-direction: column; gap: 4px; }
.cari-produk input { padding: 11px 12px; }

@media (min-width: 720px) {
  .daftar { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .ringkasan, .chip-bar, .cari, .daftar, .status,
  .baris-alat, .blok, .aksi,
  #detail-isi, #produk-isi, #batch-isi, #opname-isi { max-width: 1100px; margin-inline: auto; }
  .tab-bar { padding-inline: max(14px, calc((100% - 1100px) / 2)); }
}

/* Work order (Fase 3): baris QC / disposisi / ambil kaos di detail nota */
.wo-baris { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wo-baris > span:first-child { flex: 1 1 8rem; min-width: 8rem; }
.wo-angka { width: 4.5rem; padding: 9px 10px; text-align: right; }
.wo-dp { border: 1px solid var(--garis); border-radius: 8px; padding: 8px 10px; }
.wo-dp legend { font-weight: 600; padding: 0 4px; }
.wo-dp label, .wo-metode { flex-direction: row !important; align-items: center; gap: 6px; }
.wo-disp { display: flex; flex-direction: column; gap: 4px; }

/* ── Fase 5: cascade kaos polos, diskon per-pcs, tab Database ── */
.status.galat { color: var(--galat); }

.cascade-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: var(--radius); padding: 8px 10px; margin-bottom: 10px;
}
.cascade-crumb .crumb-teks { font-weight: 700; font-size: 14px; margin-right: auto; }

.cascade-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.casc-chip {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  font: inherit; text-align: left; cursor: pointer; min-height: 52px;
  background: var(--bg); border: 1px solid var(--garis); border-radius: 12px;
  padding: 10px 11px; color: var(--teks);
}
.casc-chip:hover { border-color: var(--brand); }
.casc-chip:active { transform: scale(.97); }
.casc-chip b { font-size: 15px; }
.casc-chip span { font-size: 11px; color: var(--teks-lemah); }
.casc-chip.nonaktif { opacity: .45; cursor: not-allowed; }

.diskon-chips { padding: 8px 0 2px; margin: 0; }

.item-baris input[readonly] {
  background: color-mix(in srgb, var(--brand) 8%, var(--bg));
  font-weight: 600;
}

.denyut { animation: denyut .45s ease; }
@keyframes denyut {
  0% { background: transparent; }
  35% { background: color-mix(in srgb, var(--brand) 20%, transparent); }
  100% { background: transparent; }
}

.chip-hapus {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--garis); border-radius: 999px;
  padding: 6px 6px 6px 12px; font-size: 13px; font-weight: 600;
}
.chip-hapus button {
  border: 0; background: color-mix(in srgb, var(--galat) 12%, transparent);
  color: var(--galat); width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
}

.harga-daftar { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.harga-row {
  display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; font-size: 14px;
}
.harga-row input { padding: 8px 10px; text-align: right; }
#db-harga-editor { margin-top: 12px; border-top: 1px solid var(--garis); padding-top: 12px; }

.db-nama { display: block; margin: 6px 0 12px; }
.db-nama span { display: block; margin-bottom: 4px; }
.db-nama input { width: 100%; }

/* Nama SPU panjang: pastikan membungkus, tidak terpotong. */
.item-lihat > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.item-lihat > div:first-child > div { overflow-wrap: anywhere; }
.i-info { overflow-wrap: anywhere; }

/* Chip size dengan 3 angka stok: Fisik / Reserved / Ready. */
.cascade-grid.grid-stat { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.casc-size {
  align-items: stretch;      /* isi memenuhi lebar chip */
  justify-content: flex-start;
  min-height: 0;             /* tumbuh mengikuti isi, bukan dipaksa 52px */
  gap: 4px;
}
.casc-size .casc-size-nama { font-size: 15px; font-weight: 700; text-align: center; margin: 0 0 2px; }
.casc-stat { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.casc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; line-height: 1.35; }
/* Label boleh menyusut/ellipsis; angka selalu utuh di kanan. */
.casc-row .l { font-size: 11px; color: var(--teks-lemah); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casc-row b { font-size: 12px; font-weight: 600; color: var(--teks); flex: 0 0 auto; }
.casc-row.siap b { color: var(--aman); }
.casc-row.galat b { color: var(--galat); }

/* Reserved merah, + nama CS pemesan di bawahnya. */
.casc-row.res b { color: var(--galat); }
.casc-pemesan { font-size: 10px; color: var(--galat); line-height: 1.25; overflow-wrap: anywhere; margin-top: -1px; }