/* ----- the shop's own pages ---------------------------------------------------------------
   Built on settings.css rather than beside it: this is a settings screen in every respect
   that matters — panels, hints, an error line — and the two would drift apart within a month
   if they did not share the same rules. Only what the catalogue needs of its own is here. */

.sp-card { padding: 15px 17px; margin-bottom: 13px; }
.sp-head { margin-bottom: 12px; }
.sp-head h2 { font-size: 16px; }
.sp-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 13px; }

/* ----- formats: where a price and the cost of a blank actually live ----- */
.sp-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sp-format {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface-soft, #fbfcfe);
}
.sp-format h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.sp-format small { display: block; color: var(--muted); font-size: 11.5px; }
.sp-format-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.sp-field { min-width: 0; }
.sp-field label { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.sp-field input { width: 100%; height: 32px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

/* ----- albums: a colour each, because a parcel is checked by eye ----- */
.sp-albums { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-album {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius);
  padding: 5px 11px;
  font-size: 13.5px;
  font-weight: 600;
}
.sp-album[data-off="1"] { opacity: .45; }
.sp-album button { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; font-size: 11px; opacity: .65; }
.sp-album button:hover { opacity: 1; }

.sp-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sp-add input { flex: 1 1 130px; min-width: 0; height: 34px; font-size: 13px; }
/* .secondary-btn is width:100% by design — it is a full-width button everywhere else in
   the app. Inside a row of fields it has to be the width of its own label. */
.sp-add button { flex: 0 0 auto; width: auto; padding: 0 16px; }
.sp-add input[type="number"] { flex: 0 1 110px; text-align: right; }
.sp-add-wrap input[type="text"]:first-child { flex: 0 1 130px; }

/* ----- the whole code list, laid out album by format -----
   Scrolls inside its own box: four formats plus a label column is wider than a phone, and a
   table that pushes the page sideways is the fault the sales page was just cleared of. */
.sp-grid-wrap { overflow-x: auto; }
.sp-grid { display: grid; gap: 5px; min-width: 480px; }
.sp-grid-head { color: var(--muted); font-size: 11.5px; text-align: center; }
.sp-grid-label { font-size: 13px; font-weight: 600; align-self: center; }
.sp-code {
  border: 0;
  border-radius: 6px;
  padding: 6px 4px;
  font: inherit;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-code[data-own="1"] { box-shadow: inset 0 0 0 1.5px currentColor; }
.sp-code[data-off="1"] { opacity: .4; }
.sp-code small { display: block; font-size: 10.5px; opacity: .8; }

.sp-bundles { margin: 0; padding: 0; list-style: none; }
.sp-bundles li {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 0;
  font-size: 13px;
}
.sp-bundles li:last-child { border-bottom: 0; }
.sp-bundles strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.sp-bundles small { color: var(--muted); font-size: 11.5px; }
.sp-empty { color: var(--muted); font-size: 13px; }

@media (max-width: 680px) {
  .sp-add input[type="number"] { max-width: none; flex: 1; }
}

/* ----- the order book ----------------------------------------------------------------------
   The daily driver. Everything here is arranged around one idea: the table is where the work
   happens, so it is also where the typing happens. A separate form would be a second place
   describing the same parcel, and a slower one. */

.so-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 13px; }
.so-day { display: flex; align-items: center; gap: 6px; }
.so-day input[type="date"], .so-day input[type="month"] { width: 152px; height: 32px; font-size: 13px; }
.so-view { width: auto; height: 32px; padding: 0 12px; }
.so-view.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* The date column of the spreadsheet, which shows on the first row of a day and nowhere else. */
.so-daybreak td {
  background: var(--blue-soft);
  border-bottom: 1px solid var(--line);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}
.so-daybreak span { margin-left: 10px; font-weight: 500; color: var(--muted); }
.so-today { width: auto; height: 32px; padding: 0 12px; }
.so-find { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; }
.so-find svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--muted); }
.so-find input { height: 32px; padding-left: 31px; font-size: 13px; }
.so-link { width: auto; height: 32px; padding: 0 12px; display: grid; place-items: center; }

/* Totals of the day. Cards rather than a sentence: these are read at a glance a dozen times
   between the first order and the last parcel. */
.so-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; margin-bottom: 13px; }
.so-total { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 10px 12px; box-shadow: var(--shadow); }
.so-total span { display: block; color: var(--muted); font-size: 11.5px; }
.so-total strong { display: block; margin-top: 2px; font-size: 19px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.so-total[data-tone="warn"] strong { color: var(--orange); }
.so-total[data-tone="good"] strong { color: var(--green); }
.so-total[data-tone="bad"] strong { color: var(--red); }

.so-card { padding: 14px 16px; margin-bottom: 13px; }
.so-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.so-head h2 { font-size: 16px; }
.so-actions { display: flex; gap: 8px; margin-left: auto; }
.so-actions button { width: auto; height: 32px; padding: 0 13px; display: inline-flex; align-items: center; gap: 6px; }
.so-actions svg { width: 15px; height: 15px; }

/* Scrolls inside its own box: twelve columns is wider than a laptop and much wider than a
   phone, and a table that pushes the page sideways was the fault cleared off sales.html. */
.so-table-wrap { overflow-x: auto; margin-top: 10px; }
.so-table {
  width: 100%;
  min-width: 940px;
  table-layout: fixed;      /* the widths below are the layout, not a suggestion */
  border-collapse: collapse;
  font-size: 12px;
}

/* Each column as wide as what it holds. Left to itself the table gave a four-character
   payment box the same room as a name and then clipped "COD" to "C(", which is the one value
   in the row that has to be read at a glance while money is being handed over.

   The ten fixed columns come to 706px, which with a floor of 117px for each of the two names
   is the 940px this table has always asked for. That number is not decoration: the shop reads
   this on a laptop at 140% zoom, where the page has about 1040px to give, and a table wider
   than that pushes the last column — the status — off the right-hand edge. Widening these by
   a few pixels each is what did exactly that. Only the names are elastic; whatever the window
   has spare goes to them, because they are the only content with no ceiling. */
.so-table th:nth-child(1) { width: 26px; }
.so-table th:nth-child(4) { width: 134px; }
.so-table th:nth-child(5) { width: 40px; }
.so-table th:nth-child(6), .so-table th:nth-child(7) { width: 62px; }
.so-table th:nth-child(8) { width: 46px; }
.so-table th:nth-child(9) { width: 84px; }
.so-table th:nth-child(10) { width: 112px; }
.so-table th:nth-child(11) { width: 56px; }
.so-table th:nth-child(12) { width: 90px; }
.so-table th:nth-child(13) { width: 46px; }

/* Everything from the products across to the status is a short value in a narrow column:
   centred head and body together, so a heading sits over its own column and a figure sits
   under its own heading. Only the two names stay left, where a list of names is read from. */
.so-table th:nth-child(n + 4),
.so-table td:nth-child(n + 4),
.so-table td:nth-child(n + 4) input,
.so-table td:nth-child(n + 4) select { text-align: center; text-align-last: center; }
.so-table td:nth-child(2) input, .so-table td:nth-child(3) input { text-overflow: ellipsis; }
.so-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 7px 6px;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.so-table td { border-bottom: 1px solid var(--line-soft); padding: 0 2px; vertical-align: middle; }
.so-seq { color: var(--muted); text-align: right; }

/* A cell looks like text until it is touched. Every value in the row is editable in place —
   that is what "like the spreadsheet" means — and a grid of visible boxes would read as a form
   rather than as the day's list. */
.so-table input, .so-table select {
  width: 100%;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 5px;
  background-color: transparent;
  padding: 0 5px;
  font: inherit;
  font-size: 12px;
  color: inherit;
}
.so-table input:hover, .so-table select:hover { border-color: var(--line); }
.so-table input:focus, .so-table select:focus { border-color: var(--blue); background-color: #fff; outline: none; }
.so-table input[disabled], .so-table select[disabled] { color: var(--ink); opacity: 1; }

/* Chrome reserves the right of a select for its own arrow and then centres the text in what
   is left, so a centred status sits left of its own heading while the arrow is squeezed off
   the edge — both of the faults reported. Drawing the arrow means the padding is symmetric,
   the text is centred on the column, and the arrow has room that nothing else is using. */
.so-table select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 13px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75' fill='none' stroke='%23677085' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 10px 10px;
}
.so-table .so-track { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; }
.so-money { font-variant-numeric: tabular-nums; }

/* The four states, in the colours the spreadsheet fills them with. A row is glanced at,
   not read: the whole point of a status is to be answered without focusing on it. */
.so-table .so-state { font-weight: 600; }
.so-row[data-status="packed"] .so-state { color: var(--blue); }
.so-row[data-status="shipped"] .so-state { color: var(--green); }
.so-row[data-status="returned"] .so-state { color: var(--red); }
.so-row[data-status="claim"] .so-state { color: #b0710a; }
.so-row[data-status="open"] .so-state { color: var(--muted); }

/* One value, shown once. The chips are what the cell says; the box is how it is changed, and
   printing both at the same time put every code on screen twice — which reads as a fault in
   the data rather than as two views of one thing. The box is transparent and lying on top, so
   it still takes a click and still takes Tab, and only appears when it is being used. */
.so-code { position: relative; }
.so-code input {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  opacity: 0;
}
.so-code:hover { outline: 1px solid var(--line); outline-offset: -2px; border-radius: 5px; }
.so-code:focus-within .so-chips { visibility: hidden; }
.so-code:focus-within input { opacity: 1; background-color: #fff; }

.so-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 4px 2px; }
.so-chip { border-radius: 5px; padding: 1px 6px; font-size: 11px; white-space: nowrap; }
.so-chip small { color: #fff; font-size: 9.5px; padding: 0 3px; border-radius: 3px; margin-left: 3px; }

/* The three fills the shop has always used on a row, and the order they beat each other in.
   Green first: money already in the bank, which is what the spreadsheet marks on a transfer.
   Then the two that say something went wrong with the parcel — a return or a claim outranks
   how it was paid for, because it is the thing that needs doing something about. The scan
   highlight is last and beats all of them: during a run it is the only row being looked at. */
.so-row[data-payment="transfer"] { background: #eefaf2; }
.so-row[data-payment="transfer"] [data-field="payment"] { color: var(--green); font-weight: 600; }
.so-row[data-status="returned"] { background: #fff5f5; }
.so-row[data-status="claim"] { background: #fffaec; }
.so-row-new { background: #f2f7ff; }
.so-row.so-row-scan { background: #eaf1ff; }
.so-profit-bad { color: var(--red); }
.so-profit-good { color: var(--green); }

/* Not width:auto — a box that shrinks to its own label leaves the arrow nowhere to go
   and makes the column ragged, since "ยังไม่ยิง" is wider than "ส่งแล้ว". */
.so-state { height: 26px !important; font-size: 11px !important; }
.so-repeat { display: inline-block; border-radius: 4px; background: #eaf0ff; color: #2b5fd9; padding: 0 5px; font-size: 10px; margin-left: 4px; }

/* The round sits between the hint and the table because that is the order it is used in:
   read the hint once, watch this while scanning, look at the table the whole time. */
.so-round {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.so-round-label { color: var(--muted); font-size: 12px; }
.so-round-n {
  min-width: 24px;
  font-size: 19px;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.so-round-note { color: var(--muted); font-size: 11.5px; }
.so-round-btn { width: auto; height: 29px; padding: 0 13px; font-size: 12.5px; }
.so-round-btn:disabled { opacity: .45; cursor: default; }
.so-round-btn + .so-round-btn { margin-left: 0; }
#soRoundNotify { margin-left: auto; }
.so-round-done:not(:disabled) { border-color: var(--green); color: var(--green); font-weight: 600; }
.so-notify-all { width: auto; height: 28px; padding: 0 11px; font-size: 12px; margin-left: auto; }

/* Faint until the row is under the cursor. They are always there — a row that hides its
   own delete button until hovered is a row nobody finds it on — but a column of live-looking
   controls beside every parcel would pull the eye off the figures, which is what the table
   is for. */
.so-tools { display: inline-flex; gap: 2px; }
.so-tool {
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .45;
}
.so-row:hover .so-tool, .so-tool:focus-visible { opacity: 1; }
.so-tool:hover { border-color: var(--line); background: #fff; color: var(--ink); }
.so-tool-del:hover { border-color: var(--red); color: var(--red); }
.so-row-insert td { box-shadow: inset 0 2px 0 var(--blue); }
.so-insert-back { border: 0; background: none; padding: 0 0 0 8px; color: var(--blue); cursor: pointer; font: inherit; font-size: 11.5px; }

.so-notify-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.so-notify-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 11px; font-size: 13px; }
.so-notify-list code { font-size: 11px; color: var(--muted); }
.so-notify-list button { width: auto; height: 28px; padding: 0 11px; font-size: 12px; margin-left: auto; }
.so-empty { color: var(--muted); font-size: 13px; padding: 12px 4px; }

@media (max-width: 680px) {
  .so-actions { margin-left: 0; width: 100%; }
  .so-actions button { flex: 1; }
}

/* ----- the month, in the shape the spreadsheet header keeps it ----- */
.so-month-pick { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.so-month-pick input { width: 150px; height: 32px; font-size: 13px; }
.so-month-pick .icon-btn { width: 34px; height: 32px; }
.so-month { display: grid; gap: 10px; margin-top: 10px; }
.so-month-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 9px; }
.so-month-cell { border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; }
.so-month-cell span { display: block; color: var(--muted); font-size: 11.5px; }
.so-month-cell strong { display: block; margin-top: 2px; font-size: 17px; font-variant-numeric: tabular-nums; }
.so-chain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; border-top: 1px solid var(--line-soft); padding-top: 11px; font-size: 13px; }
.so-chain-term { display: flex; flex-direction: column; gap: 1px; }
.so-chain-term small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.so-chain-term strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.so-chain-op { color: var(--muted); font-size: 14px; align-self: center; padding-top: 12px; }
.so-chain-share { margin-left: auto; border-left: 1px solid var(--line-soft); padding-left: 15px; }
.so-chain-share strong { color: var(--green); font-size: 20px; }
@media (max-width: 900px) { .so-chain-share { margin-left: 0; border-left: 0; padding-left: 0; } }