/* ============================================================================
   Barmaso — Retail › Stamped Voucher, and Stamped Voucher Paid
   ----------------------------------------------------------------------------
   A form a shop fills in front of a customer: the customer, the lines, the
   money, one big "ငွေ ရပြီ". The picker is the POS's own box: search, tick,
   Fill. A paid voucher is shown as the page that prints.
   ============================================================================ */

.sv { gap: 16px; }

.sv-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--pt-line);
  border-radius: 14px;
  background: var(--surface, #fff);
  min-width: 0;
}

/* --- the customer and the number ------------------------------------------- */
.sv-who { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.sv-who .sv-field { display: grid; gap: 6px; margin: 0; min-width: 0; }
.sv-who .sv-field:nth-child(3) { grid-column: 1 / -1; }
.sv-optional { font-weight: 400; color: var(--pt-muted); }
.sv-want-pair { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-want-btn {
  flex: 1 1 140px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--pt-line); border-radius: 10px;
  background: var(--surface, #fff); color: var(--pt-slate); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sv-want-btn:hover { border-color: #CBD3DE; color: var(--pt-ink); }
.sv-want-btn.is-yes.is-on { background: var(--accent-deep, #047857); border-color: var(--accent-deep, #047857); color: #fff; }
.sv-want-btn.is-no.is-on { background: var(--pt-ink); border-color: var(--pt-ink); color: #fff; }
.sv-want-tag { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sv-want-tag.is-yes { background: var(--accent-soft, #E7F7F0); color: var(--accent-deep, #047857); }
.sv-want-tag.is-no { background: var(--surface-alt, #F1F4F8); color: var(--pt-slate); }
.sv-addr { resize: vertical; min-height: 56px; }
.sv-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 12px; border-top: 1px dashed var(--pt-line); }
.sv-fact { display: grid; gap: 2px; min-width: 0; }
.sv-fact-label { font-size: 12px; font-weight: 700; color: var(--pt-muted); text-transform: uppercase; letter-spacing: .03em; }
.sv-no, .sv-fact-value { font-family: var(--font-mono, monospace); font-size: 15px; font-weight: 700; color: var(--pt-ink); overflow-wrap: anywhere; }
.sv-fact-hint { font-size: 11.5px; color: var(--pt-muted); }

.sv-shop, .sv-month { display: grid; gap: 6px; margin: 0; min-width: 0; max-width: 320px; }

/* --- the lines ----------------------------------------------------------------- */
.sv-lines-wrap { margin: 0; }
.sv-lines { width: 100%; }
.sv-lines .sv-c-sr { width: 44px; color: var(--pt-muted); }
.sv-lines .sv-c-code { width: 120px; }
.sv-lines .sv-c-qty { width: 86px; }
.sv-lines .sv-c-price, .sv-lines .sv-c-amount { width: 110px; white-space: nowrap; }
.sv-lines .sv-c-remove { width: 44px; text-align: right; }
.sv-qty { width: 72px; text-align: right; }
.sv-qty.is-bad, .sv-disc-input.is-bad { border-color: #dc2626; background: #fef2f2; }
.sv-remove { color: #b91c1c; }
.sv-add-row td { background: var(--pt-line-soft); }
.sv-pick-cell {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background: #fff;
  color: var(--pt-green-700);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.sv-pick-cell:hover, .sv-pick-cell:focus-visible { border-color: var(--pt-green-600); background: var(--pt-green-50); outline: none; }

/* --- the discount and the money -------------------------------------------- */
.sv-under { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sv-disc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.sv-disc input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--pt-green-700); }
.sv-disc-input { width: 150px; }
.sv-totals { display: grid; gap: 0; min-width: 260px; border: 1px solid var(--pt-line); border-radius: 10px; overflow: hidden; }
.sv-total-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; font-size: 14px; }
.sv-total-row + .sv-total-row { border-top: 1px solid var(--pt-line); }
.sv-total-row span:last-child { font-variant-numeric: tabular-nums; }
.sv-total-row.is-strong { background: var(--pt-ink); color: #fff; font-weight: 800; font-size: 16px; }

.sv-actions { display: flex; justify-content: flex-end; gap: 10px; }
.sv-pay { min-width: 180px; min-height: 48px; font-size: 16px; }

/* --- the picker (the POS's box) -------------------------------------------- */
@media (min-width: 641px) {
  dialog.ucx-sheet.is-wide.sv-pick-box { width: min(900px, calc(100vw - 32px)); max-height: 90vh; }
}
.sv-pick-box .ucx-sheet-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 10px; }
.sv-pick { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.sv-pick-search { flex: none; }
.sv-pick-note { margin: 0; flex: none; }
.sv-pick-note.is-ok { color: var(--pt-green-700); font-weight: 700; }
.sv-pick-head, .sv-pick-row {
  display: grid;
  grid-template-columns: 28px 120px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}
.sv-pick-head { flex: none; font-size: 12px; font-weight: 700; color: var(--pt-muted); border-bottom: 2px solid var(--pt-line); }
.sv-pick-head span:last-child, .sv-pick-price { text-align: right; }
.sv-pick-list { flex: 1 1 auto; min-height: 120px; overflow: auto; overscroll-behavior: contain; }
.sv-pick-row { border-bottom: 1px solid var(--pt-line-soft); cursor: pointer; user-select: none; }
.sv-pick-row:hover { background: var(--pt-line-soft); }
.sv-pick-row.is-ticked { background: #dbeafe; }
.sv-pick-row input { width: 18px; height: 18px; accent-color: #2563eb; }
.sv-pick-code { font-family: var(--font-mono, monospace); font-size: 12.5px; }
.sv-pick-desc { font-size: 13.5px; overflow-wrap: anywhere; }
.sv-pick-price { font-variant-numeric: tabular-nums; font-weight: 700; }
.sv-pick-none { padding: 14px 10px; margin: 0; color: var(--pt-muted); }
.sv-pick-count { margin-right: auto; align-self: center; font-size: 13px; font-weight: 700; color: #1d4ed8; }

/* --- a paid voucher, as the page that prints --------------------------------- */
@media (min-width: 641px) {
  dialog.ucx-sheet.is-wide.sv-view-box { width: min(860px, calc(100vw - 32px)); max-height: 94vh; }
}
.sv-view { display: grid; gap: 10px; }
.sv-readonly { margin: 0; }
.sv-preview { display: grid; gap: 14px; justify-items: center; padding: 10px; border-radius: 10px; background: #e2e8f0; }
.sv-page { display: block; width: 100%; max-width: 720px; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .18); }

/* --- the lists of paid vouchers --------------------------------------------- */
.sv-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sv-refresh { min-height: 42px; }
.sv-paid-row { cursor: pointer; }
.sv-paid-row:hover td { background: var(--pt-line-soft); }
.sv-paid-no { font-size: 12.5px; white-space: nowrap; }
.sv-paid-shop { display: block; color: var(--pt-muted); font-size: 12.5px; }
.sv-paid-total td { font-weight: 800; border-top: 2px solid var(--pt-line); }
.sv-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sv-delete-btn { color: #b91c1c; border-color: #fca5a5; }

/* --- a phone ------------------------------------------------------------------- */
@media (max-width: 720px) {
  .sv-who { grid-template-columns: minmax(0, 1fr); }
  .sv-under { flex-direction: column; align-items: stretch; }
  .sv-totals { min-width: 0; }
  .sv-actions { flex-direction: column-reverse; }
  .sv-actions .btn { width: 100%; }
  .sv-shop, .sv-month { max-width: none; flex: 1 1 100%; }

  /* A line is a card: what it is on top, how many and what it comes to under it. */
  .sv-lines thead { display: none; }
  .sv-lines, .sv-lines tbody { display: block; }
  .sv-lines tr {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas: "sr desc remove" ". code code" ". qty amount";
    gap: 4px 8px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--pt-line);
  }
  .sv-lines td { display: block; padding: 0; border: 0; width: auto !important; }
  .sv-lines td::before { content: none !important; }
  .sv-lines .sv-c-sr { grid-area: sr; font-weight: 700; }
  .sv-lines .sv-c-desc { grid-area: desc; font-weight: 700; }
  .sv-lines .sv-c-code { grid-area: code; font-size: 12px; color: var(--pt-muted); }
  .sv-lines .sv-c-price { display: none; }
  .sv-lines .sv-c-qty { grid-area: qty; text-align: left; }
  .sv-lines .sv-c-amount { grid-area: amount; align-self: center; font-weight: 800; }
  .sv-lines .sv-c-remove { grid-area: remove; }
  .sv-lines .sv-add-row { grid-template-areas: "sr desc desc"; background: var(--pt-line-soft); border-radius: 10px; }
  .sv-lines .sv-add-row .sv-c-code { display: none; }
  .sv-lines .sv-add-row td { background: none; }

  .sv-pick-head { display: none; }
  .sv-pick-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "tick desc price" "tick code price"; gap: 2px 10px; }
  .sv-pick-row input { grid-area: tick; }
  .sv-pick-row .sv-pick-desc { grid-area: desc; }
  .sv-pick-row .sv-pick-code { grid-area: code; color: var(--pt-muted); }
  .sv-pick-row .sv-pick-price { grid-area: price; }
  .sv-pick-count { flex: 1 1 100%; text-align: center; }

  .sv-preview { padding: 4px; }
}

/* --- Finance and Data told: a voucher paid -------------------------------------
   The count rides on a variable the notice module sets on <body>, so it is
   there however often the menu or the page is drawn again. */
body.has-sv-new a.sidebar-link[data-nav="dept:finance"],
body.has-sv-new a.sidebar-link[data-nav="dept:data"],
body.has-sv-new a.module-card[href$="/finance/stampvpaid"],
body.has-sv-new a.pur-nav-btn[href$="/finance/stampvpaid/all"] { position: relative; }
body.has-sv-new a.sidebar-link[data-nav="dept:finance"]::after,
body.has-sv-new a.sidebar-link[data-nav="dept:data"]::after,
body.has-sv-new a.module-card[href$="/finance/stampvpaid"]::after,
body.has-sv-new a.pur-nav-btn[href$="/finance/stampvpaid/all"]::after {
  content: var(--sv-new);
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.sv-toast { text-decoration: none; cursor: pointer; background: #065f46; }
.sv-toast:hover { background: #047857; }
.sv-toast-bell { flex: none; }