/* ============================================================
   QUEEN LAUNDRY · tata letak dan layar
   Persis satu wilayah memiliki layar pada satu waktu.
   ============================================================ */

/* ---------- Rangka ---------- */

/* Di tablet dan desktop tingginya dikunci ke layar, jadi yang menggulir
   kolomnya, bukan seluruh halaman. Itu yang menjaga total dan tombol
   utama tetap kelihatan tanpa digulir. */
#app {
  display: flex;
  height: 100svh;
  overflow: hidden;
  align-items: stretch;
}

.screen {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bond);
}

.screen:focus { outline: none; }

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--u3);
  background: var(--bond);
  z-index: 50;
}

.boot__mark {
  font-size: var(--t-large);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.boot__note {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Kepala layar ---------- */

.bar {
  display: flex;
  align-items: center;
  gap: var(--u4);
  padding: var(--u4) var(--u6);
  border-bottom: var(--hair) solid var(--rule-strong);
  background: var(--bond);
  flex-wrap: wrap;
}

.bar__title { flex: 1; min-width: 0; }

.bar__title h1 {
  font-size: var(--t-mid);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bar__sub {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-top: 2px;
}

.bar__acts { display: flex; gap: var(--u2); flex-wrap: wrap; }

/* Kotak cari di kepala layar. Angka 260px ini basis LEBAR selama
   kepala layar masih berbaris menyamping. Begitu jadi kolom di HP,
   angka yang sama berubah arti jadi TINGGI, jadi harus dilepas. */
.bar__search { flex: 1 1 260px; max-width: 420px; min-width: 0; }

.body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--u6);
}

.body--flush { padding: 0; }

/* ---------- Meja terima: nota di kiri, daftar harga di kanan ---------- */

.work {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 0.9fr);
  gap: 0;
  flex: 1;
  min-height: 0;
}

.work__slip {
  min-width: 0;
  min-height: 0;
  padding: var(--u6);
  display: flex;
}

.work__pick {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: var(--hair) solid var(--rule-strong);
  background: var(--bond-sunk);
  padding: var(--u5);
  display: flex;
  flex-direction: column;
  gap: var(--u5);
}

.work__slip .sheet { flex: 1; display: flex; min-height: 0; }

/* ---------- Blok umum ---------- */

.block { display: flex; flex-direction: column; gap: var(--u3); }

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--u3);
  padding-bottom: var(--u2);
  border-bottom: var(--hair) solid var(--rule-strong);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u4); }
.row-split { display: flex; align-items: baseline; justify-content: space-between; gap: var(--u3); }
.stack { display: flex; flex-direction: column; gap: var(--u4); }
.stack--tight { gap: var(--u2); }
.stack--loose { gap: var(--u8); }
.inline { display: flex; align-items: center; gap: var(--u2); flex-wrap: wrap; }

/* ---------- Daftar harga yang bisa dipetik ---------- */

.pick-list { display: flex; flex-direction: column; }

.pick {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--u3);
  width: 100%;
  padding: var(--u3);
  text-align: left;
  background: var(--bond);
  border: var(--hair) solid var(--rule);
  border-bottom-width: 0;
  transition: background 110ms ease-out;
}

.pick:last-child { border-bottom-width: var(--hair); }
.pick:hover { background: var(--triplicate); }
.pick:active { background: var(--triplicate-sunk); }

.pick__name { font-size: var(--t-small); font-weight: 600; }

.pick__meta {
  display: block;
  font-size: var(--t-micro);
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 1px;
}

.pick__price {
  font-family: var(--face-fill);
  font-size: var(--t-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.search {
  width: 100%;
  padding: var(--u2) var(--u3);
  min-height: 44px;
  font-family: var(--face-fill);
  font-size: var(--t-base);
  background: var(--bond);
  border: var(--hair) solid var(--rule-strong);
  border-radius: 0;
}
.search::placeholder { color: var(--ink-mute); opacity: 1; }

/* ---------- Baris antrean: tanda status di sel yang tetap ---------- */

.queue { width: 100%; }

.queue thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: var(--u3) var(--u3);
  background: var(--bond-sunk);
  border-bottom: var(--hair) solid var(--rule-strong);
  white-space: nowrap;
}

.queue tbody td {
  padding: var(--u3);
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: middle;
}

.queue tbody tr { transition: background 110ms ease-out; }
.queue tbody tr:hover td { background: var(--bond-sunk); }

/* Lembar rangkap: barisnya mengambil warna lembar tempat barangnya berada. */
.queue tbody tr.on-duplicate td { background: var(--duplicate); color: var(--ink-on-duplicate); }
.queue tbody tr.on-duplicate:hover td { background: var(--duplicate-sunk); }
.queue tbody tr.on-triplicate td { background: var(--triplicate); color: var(--ink-on-triplicate); }
.queue tbody tr.on-triplicate:hover td { background: var(--triplicate-sunk); }

/* Telat mewarnai ulang seluruh baris, bukan menempel lencana di ujungnya.
   Warnanya keluarga stempel peringatan, bukan merah mesin penomor:
   merah itu punya nomor nota seorang diri. */
.queue tbody tr.is-late td {
  background: var(--stamp-warn-field);
  color: var(--stamp-warn-deep);
  border-bottom-color: var(--stamp-warn);
}
.queue tbody tr.is-late:hover td { background: var(--stamp-warn-field-hover); }

.seq {
  font-family: var(--face-fill);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sequence);
}

.queue__when {
  font-family: var(--face-fill);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  white-space: nowrap;
}

.queue__late-note {
  display: block;
  font-family: var(--face-print);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1px;
}

.queue tbody tr.is-picked td { color: var(--ink-mute); background: transparent; }
.queue tbody tr.is-picked .seq { color: var(--ink-mute); }

/* ---------- Rak ---------- */

.rack {
  display: grid;
  gap: var(--u2);
  grid-template-columns: repeat(var(--rack-cols, 8), minmax(0, 1fr));
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--u2);
  min-height: 84px;
  padding: var(--u2);
  text-align: left;
  border: var(--hair) solid var(--rule-strong);
  background: var(--bond);
  transition: background 110ms ease-out, border-color 110ms ease-out;
}

.slot:hover { border-color: var(--ink); background: var(--bond-sunk); }

.slot__id {
  font-family: var(--face-fill);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-soft);
}

.slot__who {
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.slot--full {
  background: var(--triplicate);
  border-color: var(--rule-strong);
  color: var(--ink-on-triplicate);
}
.slot--full:hover { background: var(--triplicate-sunk); }
.slot--full .slot__id { color: var(--ink-on-triplicate); }

.slot--late {
  background: var(--stamp-warn-field);
  color: var(--stamp-warn-deep);
  border-color: var(--stamp-warn);
}
.slot--late .slot__id { color: var(--stamp-warn-deep); }

.slot[aria-pressed="true"] { outline: 2px solid var(--stamp); outline-offset: -3px; }

/* ---------- Laporan ---------- */

.takings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: var(--hair) solid var(--rule-strong);
}

.takings__cell {
  padding: var(--u5);
  border-right: var(--hair) solid var(--rule);
}
.takings__cell:last-child { border-right: 0; }

.takings__cell--lead { background: var(--bond-sunk); }

.takings__label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.takings__value {
  font-family: var(--face-fill);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--t-large);
  margin-top: var(--u2);
  letter-spacing: -0.01em;
}

.takings__cell--lead .takings__value { font-size: var(--t-xl); }

.takings__sub { font-size: var(--t-small); color: var(--ink-soft); margin-top: var(--u); }

/* Grafik batang: garis-garis kolom, bukan cincin atau sparkline. */
.bars { display: flex; align-items: flex-end; gap: var(--hair); height: 132px; }

.bars__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.bars__fill { background: var(--ink); min-height: 2px; }
.bars__fill--quiet { background: var(--rule-strong); }

.bars__tick {
  font-family: var(--face-fill);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink-soft);
  padding-top: var(--u);
  border-top: var(--hair) solid var(--rule);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Keadaan kosong dan galat ---------- */

.empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--u3);
  padding: var(--u16) var(--u6);
  text-align: center;
  border: var(--hair) dashed var(--rule-strong);
  color: var(--ink-soft);
  min-height: 220px;
}

.empty__head {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink);
}

.empty__say { font-size: var(--t-small); max-width: 46ch; }

/* ---------- Kabar: baris tetap, tidak pernah menutup kolom kerja ---------- */

.alerts {
  position: fixed;
  inset-block-end: var(--u4);
  inset-inline-start: var(--u4);
  display: flex;
  flex-direction: column;
  gap: var(--u2);
  z-index: 40;
  max-width: min(420px, calc(100vw - var(--u8)));
  pointer-events: none;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--u3);
  padding: var(--u3) var(--u4);
  background: var(--ink);
  color: var(--bond);
  border: var(--hair) solid var(--ink);
  font-size: var(--t-small);
  pointer-events: auto;
  animation: alert-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alert--warn { background: var(--stamp-warn); border-color: var(--stamp-warn); }

.alert__x {
  margin-inline-start: auto;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
.alert__x:hover { opacity: 1; }

@keyframes alert-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- Lembar percakapan (dialog) ---------- */

dialog.sheet-dialog {
  border: var(--hair) solid var(--ink);
  background: var(--bond);
  color: var(--ink);
  padding: 0;
  width: min(560px, calc(100vw - var(--u8)));
  max-height: min(86svh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
}

dialog.sheet-dialog::backdrop { background: var(--backdrop); }

.dialog__head {
  padding: var(--u5) var(--u6) var(--u3);
  border-bottom: var(--hair) solid var(--rule-strong);
}

.dialog__body { padding: var(--u6); display: flex; flex-direction: column; gap: var(--u4); }

.dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--u2);
  padding: var(--u4) var(--u6) var(--u6);
  flex-wrap: wrap;
}

/* ---------- Tanda tangan: transfer karbon ---------- */

.carbon-ghost {
  position: fixed;
  z-index: 45;
  pointer-events: none;
  background: var(--duplicate);
  border: var(--hair) solid var(--rule-strong);
  transform-origin: top left;
  animation: carbon-press 620ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.carbon-ghost__ink {
  position: absolute;
  inset: 0;
  color: var(--ink-on-duplicate);
  opacity: 0.55;
  overflow: hidden;
}

@keyframes carbon-press {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  14%  { transform: translate(3px, 4px) scale(0.998); opacity: 1; }
  30%  { transform: translate(3px, 4px) scale(0.998); opacity: 1; }
  100% { transform: translate(var(--carbon-dx, 40px), var(--carbon-dy, 240px)) scale(0.18); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .carbon-ghost { display: none; }
}

/* ---------- Foto isian ---------- */

.shots { display: flex; gap: var(--u2); flex-wrap: wrap; }

.shot {
  position: relative;
  width: 76px;
  height: 76px;
  border: var(--hair) solid var(--rule-strong);
  background: var(--bond-sunk);
  overflow: hidden;
}

.shot img { width: 100%; height: 100%; object-fit: cover; }

.shot__x {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  padding: 2px var(--u);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--ink);
  color: var(--bond);
}

/* ---------- Masuk ---------- */

.gate {
  display: grid;
  place-content: center;
  justify-items: stretch;
  gap: var(--u6);
  min-height: 100svh;
  padding: var(--u6);
  width: min(400px, 100%);
  margin-inline: auto;
}

.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u2); }

.key {
  min-height: 60px;
  font-family: var(--face-fill);
  font-size: var(--t-large);
  font-weight: 700;
  border: var(--hair) solid var(--rule-strong);
  background: var(--bond);
  transition: background 100ms ease-out;
}
.key:hover { background: var(--bond-sunk); }
.key:active { background: var(--rule-soft); }
.key--word { font-family: var(--face-print); font-size: var(--t-micro); font-weight: 800; letter-spacing: var(--track-plate); }

.pips { display: flex; gap: var(--u3); justify-content: center; }

.pip {
  width: 16px; height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.pip--on { background: var(--ink); }

/* ---------- Penanda anggapan yang belum dipastikan pemilik ---------- */

.guess {
  display: inline-block;
  padding: 1px var(--u);
  border: var(--hair) dashed var(--stamp-warn);
  color: var(--stamp-warn);
  font-family: var(--face-print);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Penyesuaian layar ---------- */

@media (max-width: 1080px) {
  .work { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
  .work__slip { padding: var(--u4); }
  .work__pick { padding: var(--u4); }
}

/* Tablet berdiri dan HP: tab jadi strip mendatar di atas, bukan tab bar bawah.
   Di lebar ini halaman kembali menggulir wajar, karena tinggi layar tidak
   cukup untuk mengunci semuanya. */
@media (max-width: 860px) {
  #app {
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .slip__scroll { overflow: visible; }
  .slip__foot { position: static; }

  .tabs {
    flex-direction: row;
    width: auto;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: var(--hair) solid var(--rule-strong);
    overflow-x: auto;
    overflow-y: hidden;
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .tab {
    width: auto;
    white-space: nowrap;
    padding: var(--u3) var(--u4);
    border-bottom: 0;
    border-right: var(--hair) solid var(--rule);
  }

  .tab[aria-current="page"]::after {
    inset-block: auto 0;
    inset-inline: 0;
    width: auto;
    height: var(--hair);
  }

  .tab[aria-current="page"]::before { inset-block: 0 auto; inset-inline: 0; width: auto; height: 3px; }

  .tabs__spacer { display: none; }
  .tabs__who { border-top: 0; border-left: var(--hair) solid var(--rule-strong); white-space: nowrap; }

  .work { grid-template-columns: 1fr; }
  .work__pick { border-left: 0; border-top: var(--hair) solid var(--rule-strong); }
  .body { padding: var(--u4); }
  .bar { padding: var(--u3) var(--u4); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .takings__cell { border-right: 0; border-bottom: var(--hair) solid var(--rule); }
  .takings__cell:last-child { border-bottom: 0; }
  .alerts { inset-inline: var(--u3); max-width: none; }
}

@media (max-width: 720px) {
  /* Paket ditumpuk, karena tiga kolom di lebar HP membuat plat
     "Perlu dipastikan" meluber keluar layar. */
  .choices--three { grid-template-columns: 1fr; }
  .choice { flex-wrap: wrap; }
  .guess { white-space: normal; }

  /* ---------- Kepala layar ----------
     Judul dan kotak cari berebut lebar di layar sempit sampai judulnya
     terjepit jadi tiga baris. Di sini keduanya dapat baris sendiri. */
  .bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--u3);
    flex-wrap: nowrap;
  }

  .bar__title { flex: none; }

  /* Tanpa ini kotak cari memesan 260px TINGGI dan meninggalkan
     lubang kosong sebelum daftar. */
  .bar__search { flex: 0 0 auto; max-width: none; }

  /* Baris penyaring jadi satu baris yang digeser, bukan menumpuk tiga
     baris dan memakan setengah layar sebelum isinya kelihatan. */
  .bar__acts {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: var(--u);
    margin-inline: calc(var(--u4) * -1);
    padding-inline: var(--u4);
  }

  .bar__acts .btn { flex: 0 0 auto; }

  /* ---------- Tabel jadi catatan bertumpuk ----------
     Tabel enam kolom tidak muat di HP, dan menggesernya mendatar
     menyembunyikan kolom yang justru penting (sisa bayar, tombol).
     Di kertas sempit, tabel memang ditulis bertumpuk. Label kolom
     pindah ke depan tiap nilai lewat data-label. */
  .queue, .queue tbody, .queue tr, .queue td { display: block; width: 100%; }
  .queue thead { display: none; }

  .queue tbody tr {
    border-bottom: 2px solid var(--rule-strong);
    padding: var(--u3) 0 var(--u4);
  }

  .queue tbody tr:last-child { border-bottom: 0; }

  .queue tbody td {
    border-bottom: 0;
    padding: 2px var(--u4);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--u3);
    text-align: right;
  }

  .queue tbody td::before {
    content: attr(data-label);
    font-family: var(--face-print);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--track-plate);
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: left;
    flex: 0 0 auto;
  }

  /* Baris kepala tiap catatan: nomor nota dan nama, tanpa label. */
  .queue tbody td[data-utama] {
    justify-content: flex-start;
    text-align: left;
    padding-top: var(--u);
    padding-bottom: var(--u2);
  }

  .queue tbody td[data-utama]::before { content: none; }
  .queue tbody td[data-utama] .seq { font-size: var(--t-mid); }

  /* Sel tanda status ikut naik ke baris kepala, bukan berdiri sendiri. */
  .queue tbody td.cell-mark {
    display: none;
  }

  /* Tombol aksi turun ke bawah catatan, selebar catatannya. */
  .queue tbody td[data-aksi] {
    justify-content: flex-start;
    padding-top: var(--u3);
    width: auto !important;
  }

  .queue tbody td[data-aksi]::before { content: none; }
  .queue tbody td[data-aksi] .inline { width: 100%; }
  .queue tbody td[data-aksi] .btn { flex: 1 1 auto; }

  /* Tombol tanpa garis kelihatan mengambang waktu melebar sendirian
     di bawah catatan, jadi di HP dia dapat garisnya kembali. */
  .queue tbody td[data-aksi] .btn--quiet { border-color: var(--rule-strong); }

  /* Warna lembar tetap memegang arti posisinya, sekarang di seluruh catatan. */
  .queue tbody tr.on-duplicate td,
  .queue tbody tr.on-triplicate td,
  .queue tbody tr.is-late td { background: transparent; }

  .queue tbody tr.on-duplicate { background: var(--duplicate); color: var(--ink-on-duplicate); }
  .queue tbody tr.on-triplicate { background: var(--triplicate); color: var(--ink-on-triplicate); }
  .queue tbody tr.is-late { background: var(--stamp-warn-field); color: var(--stamp-warn-deep); }
  .queue tbody tr.is-picked { color: var(--ink-mute); }

  .queue tbody tr:hover td { background: transparent; }

  /* Tabel di Pengaturan dan Laporan ikut ditumpuk. */
  .ledger--stack, .ledger--stack tbody, .ledger--stack tr, .ledger--stack td { display: block; width: 100%; }
  .ledger--stack thead { display: none; }

  .ledger--stack tbody tr {
    border-bottom: 2px solid var(--rule-strong);
    padding: var(--u3) 0;
  }

  .ledger--stack tbody td {
    border-bottom: 0;
    width: auto !important;
    padding: var(--u) var(--u3);
  }

  .ledger--stack tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--face-print);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--track-plate);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 2px;
  }

  .ledger--stack tbody td:not([data-label])::before { content: none; }
  .ledger--stack tbody tr:hover td { background: transparent; }
}

@media (max-width: 520px) {
  .slip__inner { padding: var(--u4) var(--u4) var(--u4) var(--u10); }
  .slip::before { inset-inline-start: var(--u6); }
  .slip__head { grid-template-columns: 1fr; }
  .slip__seq { text-align: left; }
  .choices--row { grid-auto-flow: row; }
}

/* ---------- Tabel yang bisa digulir mendatar tanpa merusak halaman ---------- */

.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}