/* ============================================================
   QUEEN LAUNDRY · benda-benda kertas
   Lembar, nota, tabel bergaris, stempel, plat, tanda status.
   Tidak ada tekstur kertas, tidak ada sobekan, tidak ada bayangan
   yang pura-pura jadi tumpukan.
   ============================================================ */

/* ---------- Lembar. Warnanya memberi tahu barangnya ada di mana. ---------- */

.sheet {
  --paper: var(--bond);
  --paper-sunk: var(--bond-sunk);
  --paper-ink: var(--ink);
  background: var(--paper);
  color: var(--paper-ink);
  border: var(--hair) solid var(--rule-strong);
}

.sheet--duplicate {
  --paper: var(--duplicate);
  --paper-sunk: var(--duplicate-sunk);
  --paper-ink: var(--ink-on-duplicate);
}

.sheet--triplicate {
  --paper: var(--triplicate);
  --paper-sunk: var(--triplicate-sunk);
  --paper-ink: var(--ink-on-triplicate);
}

/* ---------- Nota ---------- */

.slip {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Garis tepi merah, persis buku tulis dan formulir cetak. */
.slip::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--u8);
  width: var(--hair);
  background: var(--margin-rule);
  pointer-events: none;
}

.slip__inner {
  padding: var(--u5) var(--u5) var(--u5) var(--u12);
  display: flex;
  flex-direction: column;
  gap: var(--u4);
  min-height: 0;
  flex: 1;
}

/* Bagian tengah nota yang menggulir sendiri, supaya kaki nota
   (janji selesai, total, tombol) tidak pernah terdorong keluar layar. */
.slip__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--u4);
  padding-right: var(--u2);
  margin-right: calc(var(--u2) * -1);
}

.slip__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--u3);
  padding-top: var(--u3);
}

.slip__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--u4);
  padding-bottom: var(--u3);
  border-bottom: 2px solid var(--ink);
}

.slip__brand {
  font-family: var(--face-print);
  font-size: var(--t-large);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}

.slip__tagline {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--u);
}

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

/* Nomor mesin penomor. Satu-satunya tempat merah ini boleh muncul. */
.slip__seq {
  text-align: right;
  line-height: 1;
}

.slip__seq-label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--u);
}

.slip__seq-num {
  display: block;
  font-family: var(--face-fill);
  font-weight: 700;
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  color: var(--sequence);
  letter-spacing: 0.02em;
}

.slip__foot-note {
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: var(--u3);
  border-top: var(--hair) solid var(--rule);
}

/* ---------- Isian: label tercetak di atas, isian di bawah ---------- */

.field { display: block; }

.field__label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--u);
}

.field__input,
.field__select {
  display: block;
  width: 100%;
  padding: var(--u2) var(--u3);
  font-family: var(--face-fill);
  font-size: var(--t-base);
  background: var(--paper-sunk, var(--bond-sunk));
  color: var(--ink);
  border: 0;
  border-bottom: var(--hair) solid var(--rule-strong);
  border-radius: 0;
  min-height: 44px;
}

.field__input::placeholder { color: var(--ink-mute); opacity: 1; }
.field__input:hover, .field__select:hover { border-bottom-color: var(--ink-soft); }
.field__input:focus-visible, .field__select:focus-visible { outline-offset: 0; }
.field__input:disabled, .field__select:disabled {
  color: var(--ink-mute);
  background: transparent;
  border-bottom-style: dashed;
  cursor: not-allowed;
}

.field__input--lg {
  font-size: var(--t-xl);
  font-weight: 700;
  padding: var(--u2) var(--u3);
  min-height: 56px;
  text-align: right;
}

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

.field__error {
  font-size: var(--t-small);
  color: var(--stamp-warn);
  font-weight: 600;
  margin-top: var(--u);
}

/* ---------- Tabel bergaris ---------- */

.ledger { font-size: var(--t-base); }

.ledger thead th {
  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(--u2) var(--u3);
  background: var(--paper-sunk, var(--bond-sunk));
  border-bottom: var(--hair) solid var(--rule-strong);
  white-space: nowrap;
}

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

.ledger tbody tr:hover td { background: var(--paper-sunk, var(--bond-sunk)); }
.ledger tbody tr.is-blank td { height: 40px; color: transparent; }
.ledger tbody tr.is-blank:hover td { background: transparent; }

.ledger .num, .ledger th.num { text-align: right; }

.ledger__total td {
  border-bottom: 0;
  border-top: var(--hair) solid var(--ink);
  box-shadow: 0 3px 0 -2px var(--ink);
  padding-top: var(--u3);
  font-weight: 700;
}

.ledger__total .plate { color: var(--ink); }

.ledger__grand {
  font-family: var(--face-fill);
  font-weight: 700;
  font-size: var(--t-large);
  font-variant-numeric: tabular-nums;
}

/* ---------- Stempel karet ---------- */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--u2);
  padding: var(--u) var(--u3);
  border: 2px solid currentColor;
  color: var(--stamp);
  font-family: var(--face-print);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  transform: rotate(-2.5deg);
  opacity: 0.9;
  white-space: nowrap;
}

.stamp--warn { color: var(--stamp-warn); }
.stamp--ok { color: var(--stamp-ok); }
.stamp--flat { transform: none; }

.stamp--big {
  font-size: var(--t-mid);
  letter-spacing: 0.18em;
  padding: var(--u2) var(--u5);
  border-width: 3px;
}

/* ---------- Tanda status di sel kolom yang tidak pernah pindah ---------- */

.mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  vertical-align: -2px;
}

.mark circle, .mark rect, .mark path, .mark line { vector-effect: non-scaling-stroke; }

.cell-mark {
  width: 34px;
  text-align: center;
  padding-inline: 0 !important;
}

/* ---------- Tombol. Selalu berkata-kata, tidak pernah cuma ikon. ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u2);
  min-height: 44px;
  padding: var(--u2) var(--u5);
  font-family: var(--face-print);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bond);
  border: var(--hair) solid var(--rule-strong);
  transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.btn:hover { background: var(--bond-sunk); border-color: var(--ink); }
.btn:active { background: var(--rule-soft); }

.btn--primary {
  color: var(--bond);
  background: var(--ink);
  border-color: var(--ink);
  min-height: 52px;
  padding-inline: var(--u8);
}
.btn--primary:hover { background: var(--solid-hover); border-color: var(--solid-hover); }
.btn--primary:active { background: var(--solid-active); }

.btn--danger { color: var(--stamp-warn); border-color: var(--stamp-warn); }
.btn--danger:hover { background: var(--stamp-warn); color: var(--bond); }

.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn--quiet:hover { border-color: var(--rule-strong); color: var(--ink); background: transparent; }

.btn--sm { min-height: 36px; padding: var(--u) var(--u3); }
.btn--wide { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  color: var(--ink-mute);
  background: transparent;
  border-color: var(--rule);
  border-style: dashed;
  cursor: not-allowed;
}
.btn:disabled:hover, .btn[aria-disabled="true"]:hover {
  background: transparent;
  border-color: var(--rule);
}

.btn.is-busy { position: relative; color: transparent; pointer-events: none; }
.btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--bond);
  animation: spin 620ms linear infinite;
}
.btn--primary.is-busy::after { color: var(--bond); }
.btn:not(.btn--primary).is-busy::after { color: var(--ink); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pilihan berkotak (paket, metode bayar) ---------- */

.choices { display: grid; gap: var(--u2); }
.choices--row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.choices--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Kolom, bukan baris: plat penanda di samping judul membuat
   "Express 24 Jam" pecah jadi dua baris. */
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--u2) var(--u3);
  text-align: left;
  border: var(--hair) solid var(--rule-strong);
  background: var(--bond);
  transition: background 120ms ease-out, border-color 120ms ease-out;
}

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

.choice[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bond);
}
.choice[aria-pressed="true"] .choice__sub { color: var(--on-solid-soft); }
.choice[aria-pressed="true"] .choice__sub--warn { color: var(--warn-on-ink); }
.choice[aria-pressed="true"] .guess { color: var(--warn-on-ink); border-color: var(--warn-on-ink); }

.choice__sub--warn { color: var(--stamp-warn); font-weight: 700; }

.choice .guess { margin-top: var(--u); align-self: flex-start; }

.choice[aria-disabled="true"] {
  color: var(--ink-mute);
  border-style: dashed;
  background: transparent;
  cursor: not-allowed;
}
.choice[aria-disabled="true"]:hover { background: transparent; border-color: var(--rule); }

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

.choice__sub {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
  margin-top: 2px;
}

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

/* ---------- Tab indeks, seperti tab jempol di buku besar ---------- */

.tabs {
  display: flex;
  background: var(--bond-sunk);
  border-right: var(--hair) solid var(--rule-strong);
  flex-direction: column;
  width: var(--rail);
  flex: 0 0 var(--rail);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tab {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--u4) var(--u3) var(--u4) var(--u4);
  text-align: left;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: var(--hair) solid var(--rule);
  transition: background 120ms ease-out, color 120ms ease-out;
}

.tab:hover { background: var(--bond); color: var(--ink); }

.tab[aria-current="page"] {
  background: var(--bond);
  color: var(--ink);
  font-weight: 800;
}

/* Tab aktif menyambung ke halaman: garis kanannya dihapus. */
.tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(var(--hair) * -1);
  width: var(--hair);
  background: var(--bond);
}

.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--ink);
}

.tab__count {
  display: inline-block;
  font-family: var(--face-fill);
  font-size: var(--t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-left: var(--u);
}

.tab__count--late { color: var(--stamp-warn); }

.tabs__spacer { flex: 1; min-height: var(--u4); }

.tabs__who {
  padding: var(--u3) var(--u4);
  border-top: var(--hair) solid var(--rule-strong);
  font-size: var(--t-micro);
  color: var(--ink-soft);
}

.tabs__who strong {
  display: block;
  font-family: var(--face-fill);
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}