/* ============================================================================
   Barmaso — Finance › Retail Sale Summary
   ----------------------------------------------------------------------------
   A finance ledger, read on a desk and checked on a phone. Built on Rebate's
   pieces (rb-*: header, figures, notes, tables) and Shop To Shop's cards
   (s2s-*); what is its own is here: the month bar, the wide shop table with
   its shop column held in place, the day ledger with remarks typed in it.
   Colour carries meaning only — red for a balance below nothing, amber for
   an Opening not yet set, blue for money sent.
   ============================================================================ */

.ss-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.ss-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.ss-head-do { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ss-btn, .ss-refresh { display: inline-flex; align-items: center; gap: 6px; }
.ss-h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--pt-ink); }
.ss-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ss-grow { flex: 1 1 auto; }
body.is-busy, body.is-busy * { cursor: progress !important; }

/* --- the month bar ------------------------------------------------------------ */

.ss-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px; border: 1px solid var(--pt-line); border-radius: 12px; background: #fff; }
.ss-month { display: inline-flex; align-items: center; gap: 4px; }
.ss-month-input { width: 170px; min-height: 38px; font-variant-numeric: tabular-nums; }
.ss-month .ucx-icon-btn:disabled { opacity: 0.35; cursor: default; }
.ss-bar-note { font-size: 12.5px; color: var(--pt-muted); overflow-wrap: anywhere; }

/* --- figures ------------------------------------------------------------------- */

.ss-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: #fff; }
.rb-figure.is-bad .rb-figure-value { color: #b42318; }
.ss-opening { position: relative; }
.ss-opening-edit { justify-self: start; margin-top: 2px; padding: 6px 0; }

.ss-note-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ss-note-row .btn { background: #fff; }

/* Where the month's money went. */
.ss-accounts { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--pt-line); border-radius: 12px; background: #fff; }
.ss-acc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ss-acc { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) minmax(110px, auto) 54px; align-items: center; gap: 12px; font-size: 13px; }
.ss-acc-name { font-weight: 600; color: var(--pt-ink); overflow-wrap: anywhere; }
.ss-acc-bar > span { background: #3b82f6; }
.ss-acc-amount { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--pt-ink); }
.ss-acc-share { text-align: right; font-size: 12px; color: var(--pt-muted); font-variant-numeric: tabular-nums; }

/* --- the shop table ------------------------------------------------------------- */

.ss-wrap { overflow: auto; }
.ss-table, .ss-days { font-size: 13px; }
.ss-table th, .ss-days th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; white-space: normal; min-width: 80px; line-height: 1.3; vertical-align: bottom; }
.ss-table td, .ss-days td { padding: 10px 12px; }
.ss-table .ss-c-no { width: 40px; min-width: 40px; text-align: center; }
/* The shop stays in sight while the accounts scroll across. */
.ss-table .ss-c-shop { position: sticky; left: 0; z-index: 1; min-width: 170px; background: #fff; box-shadow: 1px 0 0 var(--pt-line-soft); }
.ss-table thead .ss-c-shop { z-index: 3; background: #f8fafc; }
.ss-table .rb-row:hover .ss-c-shop { background: #f8fafc; }
.ss-row { cursor: pointer; }
.ss-table.is-editing .ss-row { cursor: default; }
.ss-table td.is-zero, .ss-days td.is-zero { color: #cbd5e1; }
.ss-c-total { background: #fbfcfd; }
.ss-c-left.is-bad, .ss-days td.is-bad { color: #b42318; }
/* What is left stays in sight on the right, as the shop does on the left. */
.ss-table .ss-c-left { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -1px 0 0 var(--pt-line-soft); }
.ss-table thead th:last-child { position: sticky; right: 0; z-index: 3; box-shadow: -1px 0 0 var(--pt-line-soft); }
.ss-table .rb-row:hover .ss-c-left { background: #f8fafc; }
.ss-table tfoot td:last-child { right: 0; z-index: 2; }
.ss-c-opening.is-missing { color: #b45309; font-style: italic; font-weight: 500; }
.ss-opening-input { width: 130px; min-height: 34px; padding: 4px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.ss-total-row td { position: sticky; bottom: 0; z-index: 1; border-top: 1px solid var(--pt-line); background: #f1f5f9 !important; font-weight: 700; white-space: nowrap; }
.ss-table .ss-total-row .ss-c-shop { z-index: 2; }

/* --- one shop -------------------------------------------------------------------- */

.ss-shop-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ss-shop-select { flex: 0 1 380px; min-width: 0; min-height: 40px; }
.ss-back { margin-left: auto; }
.ss-shop-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--pt-ink); }
.ss-shop-title small { font-family: var(--font-body, inherit); font-size: 13px; font-weight: 500; color: var(--pt-muted); }
.ss-acc-table { font-size: 13px; }
.ss-acc-table td { padding: 10px 14px; }
.ss-cash-row td { background: #f8fafc; }

.ss-days .ss-c-date { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-day.is-quiet td { color: var(--pt-muted); }
.ss-day.is-quiet .ss-c-date { font-weight: 500; }
.ss-day.is-today td:first-child { box-shadow: inset 3px 0 0 #2563eb; }
.ss-day.is-opening td { background: #fbfcfd; font-style: italic; }
.ss-day.is-outside .ss-c-date { color: #b45309; }
.ss-c-sent { min-width: 112px; }
.ss-c-sent .ss-chip + .ss-chip { margin-top: 4px; }
/* Money sent: the account above, the amount below — narrow enough to leave the balance in view. */
.ss-chip { display: grid; width: max-content; gap: 0; padding: 3px 9px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-size: 12px; line-height: 1.35; white-space: nowrap; }
.ss-chip b { font-size: 12.5px; }
.ss-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-c-remark { min-width: 200px; }
/* The remark is what is typed here: it stays in sight on the right while the accounts scroll. */
.ss-days .ss-c-remark { position: sticky; right: 0; z-index: 1; width: 200px; min-width: 180px; background: #fff; box-shadow: -1px 0 0 var(--pt-line-soft); }
.ss-days thead .ss-c-remark { z-index: 3; background: #f8fafc; }
.ss-days tfoot .ss-c-remark { z-index: 2; }
.ss-day.is-opening .ss-c-remark { background: #fbfcfd; }
.ss-days th, .ss-days td { padding-left: 10px; padding-right: 10px; }
.ss-remark { width: 100%; min-height: 32px; padding: 4px 8px; font-size: 13px; border-color: transparent; background: transparent; }
.ss-remark:hover:not(:disabled) { border-color: var(--pt-line); background: #fff; }
.ss-remark:focus { border-color: var(--pt-ink); background: #fff; }
.ss-remark:disabled { color: var(--pt-slate); -webkit-text-fill-color: var(--pt-slate); opacity: 1; }
.ss-save-state { font-size: 12.5px; font-weight: 600; color: var(--pt-muted); }
.ss-save-state.is-ok { color: var(--pt-green-700); }
.ss-save-state.is-bad { color: #b42318; }

/* --- Setting -------------------------------------------------------------------------- */

.ss-cols { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--pt-line); border-radius: 12px; overflow: hidden; }
.ss-col { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--pt-line-soft); }
.ss-col:last-child { border-bottom: 0; }
.ss-col-no { font-size: 12px; color: var(--pt-muted); font-variant-numeric: tabular-nums; }
.ss-col-name { font-size: 13.5px; font-weight: 600; color: var(--pt-ink); overflow-wrap: anywhere; }
.ss-col-do { display: inline-flex; gap: 2px; }
.ss-col-do .ucx-icon-btn { width: 32px; height: 32px; font-size: 15px; }
.ss-col-do .ucx-icon-btn:disabled { opacity: 0.3; }
.ss-col-add { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-col-add .field-input { flex: 1 1 260px; }
.ss-col-add .btn { display: inline-flex; align-items: center; gap: 6px; }

.ss-files .s2s-file > .btn { grid-area: do; justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.ss-templates { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-preview:empty { display: none; }
.ss-preview-box { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--pt-line); border-radius: 12px; background: #f8fafc; }
.ss-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; font-size: 13px; color: var(--pt-slate); }
.ss-preview-head b { font-size: 14px; color: var(--pt-ink); overflow-wrap: anywhere; }
.ss-preview-table { max-height: 360px; overflow: auto; }
.ss-imp-month { max-width: 220px; }

.ss-lark-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-span-2 { grid-column: span 2; }
.ss-ticks { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-tick { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px 6px 10px; border: 1px solid var(--pt-line); border-radius: 999px; background: #fff; font-size: 13px; color: var(--pt-ink); cursor: pointer; }
.ss-tick:has(input:checked) { border-color: var(--pt-ink); background: #f8fafc; }
.ss-how { font-size: 13px; color: var(--pt-slate); }
.ss-how summary { cursor: pointer; font-weight: 600; color: var(--pt-ink); }
.ss-how ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.55; }

.ss-send { display: grid; gap: 16px; }
.ss-caption { min-height: 68px; resize: vertical; }

/* --- narrower --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .ss-files { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .ss-page { gap: 16px; }
  .ss-head-do { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-head-do .btn { justify-content: center; min-height: 44px; }
  .ss-head-do > :only-child { grid-column: 1 / -1; }
  .ss-bar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ss-month { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .ss-month-input { width: 100%; }
  .ss-month .ucx-icon-btn { width: 44px; height: 44px; }
  .ss-bar .rb-seg { display: flex; }
  .ss-bar .rb-seg-btn { flex: 1 1 0; justify-content: center; }
  .ss-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-kpis .rb-figure:first-child { grid-column: 1 / -1; }
  .ss-kpis .rb-figure + .rb-figure { border-left: 0; border-top: 1px solid var(--pt-line-soft); }
  .ss-kpis .rb-figure:nth-child(odd):not(:first-child) { border-left: 1px solid var(--pt-line-soft); }
  .ss-acc { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .ss-acc-bar { grid-column: 1 / -1; grid-row: 2; }
  .ss-acc-share { display: none; }

  /* The tables become cards: only the figures a shop or a day actually has. */
  .ss-wrap { max-height: none; overflow: visible; }
  .ss-table td.is-zero, .ss-days td.is-zero { display: none; }
  .ss-table .ss-c-no { display: none; }
  .ss-table .ss-c-shop { position: static; grid-column: 1 / -1; box-shadow: none; background: none; }
  .ss-table .ss-c-shop .rb-name { font-size: 15px; }
  .ss-table td, .ss-days td { padding: 0; }
  .ss-table tr, .ss-days tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
  .ss-table td[data-label]::before, .ss-days td[data-label]::before { font-size: 12px; overflow-wrap: anywhere; }
  /* A shop's card leads with what the month came to and what is left. */
  .ss-table .ss-c-shop { order: -3; }
  .ss-table .ss-c-total { order: -2; background: none; }
  .ss-table .ss-c-left { order: -1; position: static; box-shadow: none; background: none; }
  .ss-table .ss-c-opening { order: -1; }
  .ss-total-row td { position: static; background: none !important; }
  .ss-table tfoot, .ss-days tfoot { display: block; }
  .ss-total-row { border-color: var(--pt-ink) !important; background: #f8fafc !important; }
  .ss-opening-input { width: 100%; min-height: 42px; }
  .ss-days .ss-c-date { grid-column: 1 / -1; font-size: 14px; }
  .ss-days .ss-c-sent, .ss-days .ss-c-remark { grid-column: 1 / -1; min-width: 0; }
  .ss-days .ss-c-remark { position: static; width: auto; box-shadow: none; background: none; }
  .ss-remark { min-height: 40px; border-color: var(--pt-line); background: #fff; }
  .ss-day.is-quiet { padding: 10px 14px; }
  .ss-day.is-quiet .ss-c-remark::before { display: none; }
  .ss-day.is-today { border-left: 3px solid #2563eb; }
  .ss-day.is-today td:first-child { box-shadow: none; }
  /* The accounts stay one compact list rather than a card each. */
  .ss-acc-wrap { border: 1px solid var(--pt-line); border-radius: 12px; background: #fff; overflow: hidden; }
  .ss-acc-table td { padding: 0; }
  .ss-acc-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; margin: 0; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--pt-line-soft); border-radius: 0; }
  .ss-acc-table tr:last-child { border-bottom: 0; }
  .ss-acc-table .ss-c-acc { grid-column: 1 / -1; }
  .ss-cash-row { background: #f8fafc !important; }
  .ss-shop-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .ss-shop-pick .ucx-icon-btn { width: 44px; height: 44px; }
  .ss-shop-select { min-height: 44px; }
  .ss-back { grid-column: 1 / -1; margin: 0; justify-self: start; }
  .ss-col-add .btn, .ss-templates .btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .ss-lark-fields { grid-template-columns: minmax(0, 1fr); }
  .ss-span-2 { grid-column: auto; }
  .ss-tick { flex: 1 1 100%; border-radius: 12px; }
}

/* An Opening carried from last month's Remaining, not typed (2026-11-02) */
.ss-c-opening.is-carried { color: var(--accent-deep, #047857); font-style: italic; }