/* Upload and Setup tabs (sk-books, 14 Nov 2026). Phone first (360-430 px), then tablet and desktop; no horizontal page scroll.
   Built on the shared classes of books.css (.card .card-head .field .chips .chip .table .stats .stat .note .warn .bad .btn ...);
   this file adds only what these two tabs need:
     .up-*   Upload: account + file picker, the read file's head, balance check (with its Swap offer), date order choice (both
             readings), column selects, type chips, the lines list (stacked cards on a phone, a scrolling table with a sticky
             header from 720 px), the save actions
     .su-*   Setup: forms, people / account lists and their action buttons, the intro line */

.up-view, .su-view { display: grid; gap: 12px; min-width: 0; }
.up-part:empty, .su-part:empty { display: none; }
/* Fields side by side keep their label and box at the top when a neighbour has a longer hint under it. */
.up-pick .field, .up-column-grid .field, .su-form .field { align-content: start; }

/* ---------- Upload: choose ---------- */
.up-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.up-pick input[type="file"] { padding: 7px; background: var(--soft); cursor: pointer; }
.up-pick input[type="file"]:disabled { cursor: default; opacity: .6; }
.up-empty { display: grid; gap: 10px; justify-items: start; }
.up-empty .empty { padding: 4px 0; text-align: left; }

/* ---------- Upload: check ---------- */
.up-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.up-head-main { min-width: 0; }
.up-head h2 { font-size: 16px; overflow-wrap: anywhere; }
.up-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.up-sheet { flex: 1 1 220px; max-width: 340px; }

.up-check { justify-self: start; max-width: 100%; padding: 7px 11px; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; font-weight: 750; }
.up-check.ok { color: var(--green); background: var(--green-soft); border-color: #bfe3cf; }
.up-check.bad { color: var(--red); background: var(--red-soft); border-color: #efc2c2; }
/* The red check with its Swap offer (money in / money out look swapped). */
.up-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-self: stretch; }
.up-swap span { flex: 1 1 240px; min-width: 0; }
.up-swap .btn { flex: none; }
.up-order-note { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.up-order { display: grid; gap: 8px; }
/* Day first / month first: two big choices, each with the first and last date it reads the file as (and the dates after today). */
.up-order-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.up-order-pick { display: grid; gap: 2px; min-width: 0; padding: 9px 12px; color: #34476a; text-align: left; background: #fff; border: 1px solid #c9d6ea; border-radius: 10px; font-size: 13px; font-weight: 750; }
.up-order-pick small { color: var(--muted); font-size: 12px; font-weight: 650; }
.up-order-pick small.up-later { color: var(--red); font-weight: 750; }
.up-order-pick.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.up-order-pick.active small { color: #dfe7f4; }
.up-order-pick.active small.up-later { color: #ffd6d6; }

.up-columns { min-width: 0; padding: 10px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.up-columns summary { cursor: pointer; color: #34476a; font-size: 12.5px; line-height: 1.5; }
.up-columns summary b { margin-right: 4px; color: var(--ink); }
.up-columns summary em { color: var(--amber); font-style: normal; font-weight: 750; }
.up-column-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px 10px; margin-top: 10px; }
.up-flip { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: #34476a; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.up-flip input { flex: none; width: 18px; height: 18px; margin: 0; }

.up-kinds { display: grid; gap: 8px; min-width: 0; }
.up-kinds .chip[data-kind="UNKNOWN"]:not(.active) { color: var(--amber); background: var(--amber-soft); border-color: #f1d39b; }
.up-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.up-offer span { min-width: 0; }

/* ---------- Upload: the lines ---------- */
.up-lines-wrap { min-width: 0; }
.table.up-lines td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.table.up-lines td small.up-reason { font-style: italic; font-weight: 500; }
.table.up-lines .up-amount { display: block; }
.table.up-lines .up-amount + .up-amount { margin-top: 4px; }
.table.up-lines .up-amount small { margin-top: 0; }
.table.up-lines select { width: 100%; min-width: 0; padding: 7px 8px; color: var(--ink); background: #fff; border: 1px solid #c9d6ea; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.table.up-lines tr[data-kind="UNKNOWN"] select { color: var(--amber); border-color: #e9c47e; }
.table.up-lines tr[data-kind="IGNORE"] td.up-narration, .table.up-lines tr[data-kind="IGNORE"] td.up-date { color: var(--muted); }
.table.up-lines td.empty { text-align: center; }
.up-more { display: flex; justify-content: center; }

.up-counts { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.up-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.up-actions .up-save { flex: 1 1 220px; white-space: normal; text-align: center; }

/* Phone: each line is a small card: date and amount on top, then the description, then the type. */
@media (max-width: 719px) {
  .table.up-lines tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .table.up-lines td { display: block; width: auto; padding: 0; text-align: left; }
  .table.up-lines td::before { content: none; }
  .table.up-lines td.up-date { grid-column: 1; grid-row: 1; font-weight: 750; }
  .table.up-lines td.up-date small { display: inline; margin-left: 6px; }
  .table.up-lines td.up-amounts { grid-column: 2; grid-row: 1; text-align: right; font-weight: 750; }
  .table.up-lines td.up-narration { grid-column: 1 / -1; grid-row: 2; }
  .table.up-lines td.up-type { grid-column: 1 / -1; grid-row: 3; padding-top: 2px; }
  .table.up-lines td.empty { grid-column: 1 / -1; }
  .table.up-lines tr[data-kind="UNKNOWN"] { background: var(--amber-soft); border-color: #f1d39b; }
  .up-actions .btn { flex: 1 1 auto; }
}

/* ---------- Setup ---------- */
.su-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.su-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.su-small { font-size: 12px; font-weight: 600; }
.su-aliases { color: #34476a; font-size: 12.5px; }
.su-list td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.su-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.table.su-list tr.su-editing td { background: var(--blue-soft); }
@media (max-width: 719px) {
  .table.su-list td.su-actions-cell { padding-top: 6px; }
  .table.su-list td.su-actions-cell .su-actions { justify-content: flex-start; }
  .table.su-list tr.su-editing { background: var(--blue-soft); border-color: #c6d4ea; }
  .table.su-list tr.su-editing td { background: transparent; }
}

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  .up-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .up-lines-wrap { max-height: 64vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
  .table.up-lines th { position: sticky; top: 0; z-index: 1; background: var(--soft); }
  .table.up-lines td.up-date { width: 1%; white-space: nowrap; }
  .table.up-lines td.up-amounts { width: 1%; }
  .table.up-lines td.up-type { width: 200px; }
  .table.up-lines tr[data-kind="UNKNOWN"] td { background: var(--amber-soft); }
  .table.su-list td.su-actions-cell { width: 1%; white-space: nowrap; }
  .table.su-list td.su-actions-cell .su-actions { flex-wrap: nowrap; }
  .su-form .su-wide { grid-column: span 2; }
}