/* ══════════════════════════════════════════════════════════════════
   STR REPORT — Stock Transfer Records tab
   Classes prefixed str- — new namespace, no collision with bti-
   (BT Inventory) or an- (Assignments) native ports.
   ══════════════════════════════════════════════════════════════════ */

/* css/components.css defines a global, unscoped base style for every
   <table>/<th>/<td> in the app — right-aligned except the first
   column — built for the app's original numeric-heavy tables (loads
   *after* this file, but a class selector still outranks
   components.css's bare `td`/`th` on specificity regardless of load
   order). STR Report's tables are mostly text (product names,
   branches, dates, comments) with only a handful of genuinely numeric
   columns, so every cell in all three STR tables (list, detail modal,
   flattened Report) defaults to left-aligned here as the baseline;
   the genuinely numeric columns (Sr#, R. Price, STR/Dispatch/Receive
   Qty, Difference, Items) opt back into centered via an inline
   text-align:center set at render time (js/str-native.js,
   js/str-report-native.js) — inline always wins regardless of this
   class's specificity, so this stays a plain default. */
.str-table th, .str-table td,
.str-detail-table th, .str-detail-table td,
.str-rpt-table th, .str-rpt-table td {
  text-align: left;
}

/* ── Full gridlines — every cell boxed on all four sides (not just a
   bottom rule), so long numeric columns read as a straight-edged grid
   instead of a loosely-lined list. Same treatment on screen and in
   print (see js/str-native.js / js/str-report-native.js's print
   builders, which set matching inline borders since Print.render()'s
   output is a standalone document that doesn't load this stylesheet). */
.str-table, .str-detail-table, .str-rpt-table { border-collapse: collapse; }
.str-table th, .str-table td,
.str-detail-table th, .str-detail-table td,
.str-rpt-table th, .str-rpt-table td {
  border: 1px solid var(--border);
}
.str-table thead th, .str-detail-table thead th { border-bottom: 1px solid var(--border); }

.str-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.str-toolbar span { font-size: 11px; color: var(--muted); }
.str-refresh-btn { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--t2); cursor: pointer; }
.str-refresh-btn:hover { background: var(--s2); }

/* Sub-heading stat chips — also double as branch filters (tap to toggle) */
.str-chip-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.str-chip { flex: 1 1 220px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; box-shadow: var(--sh); }
.str-chip-label { font-size: 12px; font-weight: 700; color: var(--text); }
.str-chip-sub { font-size: 10.5px; color: var(--muted); display: block; margin-top: 1px; }
.str-chip-count { font-size: 18px; font-weight: 800; color: var(--pink, #db2777); }
.str-chip-active { border-color: var(--pink, #db2777); background: color-mix(in srgb, var(--pink, #db2777) 8%, var(--surface)); }

.str-search-row { margin-bottom: 10px; }
.str-search-input { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; box-sizing: border-box; }
.str-search-input:focus { outline: none; border-color: var(--accent); }

.str-filter-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.str-stage-btn { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--t2); cursor: pointer; }
.str-stage-btn-active { background: var(--pink, #db2777); color: #fff; border-color: var(--pink, #db2777); }
.str-date-input { font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.str-clear-btn { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; margin-left: auto; }
.str-clear-btn:hover { background: var(--s2); }

.str-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px; }

.str-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--sh); }
.str-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.str-table thead th { position: sticky; top: 0; background: var(--s2); color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.str-row td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; cursor: pointer; }
.str-row:hover td { background: var(--s2); }

.str-badge { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .02em; }
.str-badge-amber { background: #fffbeb; color: #b45309; }
.str-badge-blue { background: #eff6ff; color: #1d4ed8; }
.str-badge-green { background: #ecfdf5; color: #047857; }

/* ── Detail modal ── same bottom-sheet pattern as an-snapshot-overlay */
.str-detail-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: none; align-items: flex-end; justify-content: center; z-index: 500; }
.str-detail-overlay.str-open { display: flex; }
.str-detail-sheet { background: var(--surface); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 720px; max-height: 90vh; overflow: auto; }
.str-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.str-detail-head h3 { color: var(--text); font-size: 15px; font-weight: 800; margin: 0; }
.str-detail-head-actions { display: flex; align-items: center; gap: 6px; }
.str-detail-nav-btn { border: 1px solid var(--border); background: var(--surface); color: var(--t2); border-radius: 8px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.str-detail-nav-btn:hover:not(:disabled) { background: var(--s2); }
.str-detail-nav-btn:disabled { opacity: .4; cursor: default; }
.str-detail-close { border: none; background: var(--s2); color: var(--t2); border-radius: 8px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.str-detail-actions { display: flex; gap: 8px; margin-top: 12px; }
.str-detail-btn { flex: 1; font-size: 12px; font-weight: 700; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.str-detail-btn-primary { background: var(--pink, #db2777); color: #fff; border-color: var(--pink, #db2777); }

.str-detail-fields-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin-bottom: 14px; padding: 10px 12px; background: var(--s2); border-radius: 10px; }
.str-detail-field { display: flex; gap: 8px; font-size: 12px; }
.str-detail-field-label { color: var(--muted); flex: 0 0 108px; }
.str-detail-field-val { color: var(--text); font-weight: 600; text-align: left; flex: 1; }

.str-detail-table-wrap { overflow-x: auto; }
.str-detail-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 12px; }
.str-detail-table thead th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--muted); padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.str-detail-row td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.str-detail-table tbody tr.str-detail-row:nth-of-type(even) { background: color-mix(in srgb, var(--s2) 45%, transparent); }
.str-detail-supplier-row td { padding: 8px 8px 5px; font-size: 11.5px; font-weight: 800; color: var(--text); background: var(--s2); border-top: 2px solid var(--border); }
.str-detail-subtotal-row td { padding: 6px 8px; font-size: 11px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); }
.str-detail-grand-row td { padding: 9px 8px; font-size: 12.5px; font-weight: 800; color: var(--text); border-top: 2px solid var(--border); }
.str-detail-comments { margin-top: 12px; font-size: 12px; color: var(--t2); background: var(--s2); border-radius: 8px; padding: 8px 10px; border-left: 3px solid var(--pink, #db2777); }

/* ── STR Report — flattened, all-STRs sub-tab (Aug 2026) ──
   Dispatch Branch > STR # (+comments) > Supplier > line items. */
.str-rpt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.str-rpt-toolbar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.str-rpt-btn { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--t2); cursor: pointer; }
.str-rpt-btn:hover { background: var(--s2); }
.str-rpt-btn-primary { background: var(--pink, #db2777); color: #fff; border-color: var(--pink, #db2777); }
.str-rpt-btn-active { background: #b91c1c; color: #fff; border-color: #b91c1c; }

.str-rpt-cols-wrap { position: relative; }
.str-rpt-cols-panel { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; box-shadow: var(--sh); min-width: 190px; }
.str-rpt-col-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); padding: 5px 0; cursor: pointer; }

.str-rpt-branch-group { margin-bottom: 22px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--s2); box-shadow: var(--sh); }
.str-rpt-branch-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--pink, #db2777); color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; }
.str-rpt-branch-count { font-size: 11px; font-weight: 700; opacity: .9; }

.str-rpt-str-block { margin: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 14px; background: var(--surface); box-shadow: var(--sh); }
.str-rpt-str-head { cursor: pointer; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.str-rpt-str-head:hover .str-rpt-str-num { color: var(--pink, #db2777); }
.str-rpt-str-head-main { display: flex; align-items: center; gap: 8px; }
.str-rpt-str-num { font-size: 14px; font-weight: 800; color: var(--text); }
.str-rpt-str-head-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.str-rpt-str-comment { font-size: 11.5px; color: var(--t2); background: var(--s2); border-radius: 7px; padding: 6px 9px; margin-top: 8px; border-left: 3px solid var(--pink, #db2777); }
.str-rpt-table-wrap { overflow-x: auto; border-radius: 8px; }
.str-rpt-table { min-width: 480px; }

/* ── Zero Dispatch — 3rd STR sub-tab (Aug 2026): same branch>STR>supplier
   nesting/CSS as Report above, plus a per-STR print-selection checkbox. */
.str-zd-str-head-row { display: flex; align-items: flex-start; gap: 10px; }
.str-zd-checkbox-wrap { display: flex; align-items: center; padding-top: 2px; cursor: pointer; }
.str-zd-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--pink, #db2777); }
.str-zd-badge { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; background: #fef2f2; color: #b91c1c; text-transform: uppercase; letter-spacing: .02em; }
.str-zd-select-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
#str-zd-select-status { font-size: 11px; color: var(--muted); font-weight: 700; }