/* Shared table layout for Catalog, Inventory, Transactions, and Reports. */
/* ---------- 8. Tables ---------- */
.table-wrap { min-width: 0; max-height: none; overflow-x: auto; }
:root { --table-header-bg: #FFFFFF; }
.table thead { position: sticky; top: 0; z-index: 2; background: var(--table-header-bg); box-shadow: 0 1px 0 var(--border); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: var(--table-header-bg); padding: 10px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 8px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child > td { border-bottom: 0; }
.table tbody tr:hover > td { background: #EDF5E9; }
.table .r, .table th.r { text-align: right; }
.table .c, .table th.c { text-align: center; }
.table .name { font-weight: 600; }
.table .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.table tr.group td { background: var(--bg); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2); padding: 8px 16px; }
.table tr.is-selected td { background: var(--primary-soft); }
.table tr.is-flagged td { background: #FFFBF2; }
.table tr.is-voided td { color: var(--muted); text-decoration: line-through; }
.table tr.is-voided td .pill { text-decoration: none; }
.table th.col-in { color: var(--info); }      /* Delivery (+) */
.table th.col-out { color: var(--danger); }   /* Waste (−) */
.table th.col-key { color: var(--primary); }  /* Beginning / Ending / Consumed */
.table td.cell-edit { padding: 6px 10px; }
.table td.cell-edit .qty { width: 170px; }
.table td.cell-edit .qty input { height: 34px; font-size: 14px; }
.qty-pair { display: flex; gap: 6px; }
.table td.cell-edit .qty-pair .qty { width: 120px; }
.table .col-item { min-width: 210px; }
.input-sm { height: 32px; font-size: 13px; }
.stack { display: flex; flex-direction: column; line-height: 1.35; }
.stack .loose { font-size: 12px; color: var(--muted); }

/* ---------- 15. Pager (paginate.js for the page tables, _ServerPager for Transactions) ---------- */
.is-paged-out { display: none !important; }
.card { scroll-margin-top: 80px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
  border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.pager-controls { display: flex; align-items: center; gap: 6px; }
.pager-pages { display: flex; align-items: center; gap: 4px; }
.pager-size { display: flex; align-items: center; gap: 6px; margin: 0 10px 0 0; }
.pager-size .select { width: auto; height: 32px; padding: 0 8px; font-size: 13px; }
.pager-num { min-width: 32px; padding: 0 8px; justify-content: center; font-variant-numeric: tabular-nums; }
.pager-gap { padding: 0 4px; }
a.pager-num { text-decoration: none; }

.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; flex-wrap: wrap; }
.table-filter-selects { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.table-filter-selects .select { width: auto; min-width: 160px; max-width: 240px; }
@media (max-width: 600px) {
  .table-toolbar > .search, .table-toolbar .search .input { width: 100%; }
  .table-filter-selects { width: 100%; margin-left: 0; }
  .table-filter-selects .select { flex: 1; min-width: 0; max-width: none; }
}

.table tr.is-recount td { background: var(--warning-soft); }
.about-table td { padding: 8px 0; border-bottom: 0; }
.about-table td:first-child { width: 160px; }
.report-table td, .report-table th { vertical-align: middle; }
.table-dense th, .table-dense td { padding-left: 12px; padding-right: 12px; }
.table-dense .col-item { min-width: 170px; }
.table-dense td.cell-edit .qty { width: 150px; }
.table-dense td.cell-edit .qty-pair .qty { width: 112px; }
.table td.code { white-space: nowrap; }
.help .table th, .help .table td { padding: 8px 10px; }
.table tbody tr.is-flagged:hover td, .table tbody tr.is-recount:hover td { background: #FFF0CD; }

.pager, .pager-controls { flex-wrap: wrap; }
.pager-size select.select { padding-right: 32px; background-position: right 8px center; }
@media (max-width: 600px) {
  .pager-controls { width: 100%; }
  .pager-size { margin-right: auto; }
  .pager-pages { flex-wrap: wrap; }
}

.table td .qty-preview { font-size: 12px; font-weight: 500; min-height: 0; }
.table td .qty-preview:empty { display: none; }
.table-filter-selects .select { text-overflow: ellipsis; }


.item-cell { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 180px; }
.item-cell .item-thumbnail { flex: none; }
.item-cell-text { display: flex; flex-direction: column; min-width: 0; }
.item-cell-name { font-weight: 600; }

.item-thumbnail { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.no-image { display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--surface-2); }

/* One flat Catalog row per inventory item. */
.catalog-table { table-layout: fixed; min-width: 660px; }
.catalog-table .catalog-unit-col { width: 90px; }
.catalog-table .catalog-threshold-col { width: 130px; }
.catalog-table .catalog-actions-col { width: 230px; }
.catalog-table .catalog-item-row > td { height: 56px; }
.catalog-table .row-actions .btn { min-height: 36px; }
.catalog-table .row-actions .btn:first-child { min-width: 68px; }
.catalog-table .row-actions .inline-form .btn { min-width: 100px; }
@media (max-width: 600px) { .group-switch { min-width: 0; flex: 1; } }
@media (pointer: coarse) { .catalog-table .row-actions .btn { min-height: 44px; } }

.inventory-tabs { padding: 0 16px; }
.inventory-tabs .tab { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }
.inventory-tabs .tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; border-radius: 4px; }

.verification-card { overflow: hidden; }
.verification-meta { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 16px; }
.verification-meta .field { width: min(320px, 100%); margin: 0; }
.verification-meta .hint { margin: 0 0 8px; }
.verification-table-wrap { max-height: min(68vh, 780px); overflow: auto; border-top: 1px solid var(--border); }
.verification-table { min-width: 1080px; }
.verification-table th:nth-child(1) { width: 150px; }
.verification-table th:nth-child(2) { width: 240px; }
.verification-table th:nth-child(3) { width: 160px; }
.verification-table th:nth-child(4) { width: 250px; }
.verification-table th:nth-child(5) { width: 150px; }
.verification-table th:nth-child(6) { width: 220px; }
.verification-count-fields { display: flex; gap: 6px; }
.verification-count-field { display: block; width: 120px; }
.verification-count-field:has([data-count-input="loose"]):not(:has([data-count-input="units"])) { width: 170px; }
.verification-count-field input { width: 100%; }
.verification-discrepancy { display: inline-flex; min-height: 30px; align-items: center; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.verification-discrepancy.is-positive { color: var(--warning); }
.verification-discrepancy.is-negative { color: var(--danger); }
.verification-discrepancy.is-zero { color: var(--primary-hover); }
.verification-discrepancy.is-error { color: var(--danger); font-weight: 500; }
.verification-row-error { outline: 2px solid var(--danger); outline-offset: -2px; }
.verification-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; }
.verification-actions .hint { margin: 0; }
#verification-message { margin: 0 16px 12px; }
.verification-finish { margin-top: 16px; padding: 16px; }
.verification-finish > summary { font-weight: 600; cursor: pointer; }
.verification-finish-form { display: flex; align-items: end; gap: 12px; margin-top: 16px; }
.verification-finish-form .field { width: min(250px, 100%); margin: 0; }
@media (max-width: 700px) {
  .verification-meta, .verification-actions { align-items: stretch; flex-direction: column; }
  .verification-meta .field, .verification-finish-form .field { width: 100%; }
  .verification-finish-form { align-items: stretch; flex-direction: column; }
}

/* Reserve the remaining verification width for item names, not the checkbox column. */
.verification-workspace .verification-table { table-layout: fixed; min-width: 1050px; }
.verification-workspace .verification-table th:nth-child(1) { width: 32%; }
.verification-workspace .verification-table th:nth-child(2) { width: 14%; }
.verification-workspace .verification-table th:nth-child(3) { width: 16%; }
.verification-workspace .verification-table th:nth-child(4) { width: 8%; }
.verification-workspace .verification-table th:nth-child(5) { width: 14%; }
.verification-workspace .verification-table th:nth-child(6) { width: 16%; }
.verification-workspace .item-cell { min-width: 0; width: 100%; }
.verification-workspace .item-cell-text { flex: 1; max-width: none; }

.transaction-filters { justify-content: flex-start; }
.transaction-filters > .search { flex: 0 1 280px; min-width: 0; }
.transaction-filters > .search .input { width: 100%; }
.transaction-filters > .select { width: 220px; }
.transaction-filters .transaction-voided-filter { margin-left: auto; }
.transaction-history-table { min-width: 720px; }
.transaction-history-table .transaction-item-link { color: inherit; }
.transaction-history-table .transaction-item-link:hover { color: var(--primary); }
.transaction-history-table .transaction-actions { text-decoration: none; }
.transaction-detail-meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 12px 0 0; }
.transaction-detail-meta dt { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.transaction-detail-meta dd { margin: 0; overflow-wrap: anywhere; }
.transaction-counts-wrap { max-height: 60dvh; overflow: auto; }
@media(max-width:700px) { .transaction-detail-meta { grid-template-columns: 1fr; } .transaction-filters .transaction-voided-filter { margin-left: 0; } }

.table-empty-state { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 20px; text-align: center; }
.table-empty-state > .ico { width: 32px; height: 32px; color: var(--muted); }
.table-empty-state > strong { color: var(--text); font-size: 16px; }
.table-empty-state > span { max-width: 48ch; color: var(--muted); font-size: 14px; font-weight: 400; }
.table tbody tr:has(.table-empty-state):hover > td { background: var(--surface); }
.card > .empty { min-height: 240px; }

.card .empty { min-height: 240px; }
@media print { .table-empty-state { min-height: 0; padding: 12px; } .table-empty-state > .ico { display: none; } }

.transaction-detail-meta > div { min-width: 140px; max-width: min(100%, 60ch); }
/* Separate borders avoid collapsed-border gaps above sticky table headers. */
.table { border-collapse: separate; border-spacing: 0; }
.table thead { background: var(--table-header-bg); box-shadow: 0 -2px 0 var(--table-header-bg), 0 1px 0 var(--border); }
.table thead th { background: var(--table-header-bg); }
.transaction-counts-wrap { isolation: isolate; }

/* Keep outer columns aligned with card headings without widening inner columns. */
:root { --table-edge-padding: 20px; }
.table:not(.about-table) > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child { padding-left: var(--table-edge-padding); }
.table:not(.about-table) > :is(thead, tbody, tfoot) > tr > :is(th, td):last-child { padding-right: var(--table-edge-padding); }
.table-toolbar, .pager { padding-inline: var(--table-edge-padding); }
@media (max-width: 600px) { :root { --table-edge-padding: 16px; } }

/* Inventory row colors follow stock status, including hover. */
#sheet-table > tbody > tr[data-status="Good"] { --stock-row-bg: #f3f8f3; --stock-row-hover: var(--primary-soft); }
#sheet-table > tbody > tr[data-status="Low"] { --stock-row-bg: #fff9ed; --stock-row-hover: var(--warning-soft); }
#sheet-table > tbody > tr[data-status="Out"] { --stock-row-bg: #fff5f4; --stock-row-hover: var(--danger-soft); }
#sheet-table > tbody > tr[data-status] > td { background: var(--stock-row-bg); }
#sheet-table > tbody > tr[data-status]:hover > td { background: var(--stock-row-hover); }

.table-sort { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; min-height: 28px; }
.table-sort:hover, th[aria-sort="ascending"] .table-sort, th[aria-sort="descending"] .table-sort { color: var(--text); }
.table-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
.table-sort-arrows { display: flex; flex-direction: column; flex-shrink: 0; }
.table-sort-arrows img { width: 12px; height: 12px; opacity: .55; }
.table-sort-arrows img:first-child { transform: rotate(180deg); margin-bottom: -2px; }
th[aria-sort="ascending"] .table-sort-arrows img:first-child, th[aria-sort="descending"] .table-sort-arrows img:last-child { opacity: 1; }
.table .row-actions .btn-icon { min-width: 36px; width: 36px; padding: 8px; }

/* Shared grid treatment, following the reference table. */
@media screen {
  :root { --table-grid-border: var(--border); }
  .table:not(.about-table) { background: var(--surface); }
  .table:not(.about-table) > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    padding-inline: var(--table-edge-padding);
    border-right: 1px solid var(--table-grid-border);
    border-bottom: 1px solid var(--table-grid-border);
  }
  .table:not(.about-table) > :is(thead, tbody, tfoot) > tr > :is(th, td):last-child { border-right: 0; }
  .table:not(.about-table) > thead > tr > th {
    height: 52px; padding-block: 12px; border-top-color: var(--table-grid-border);
    font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text);
  }
  .table:not(.about-table) > tbody > tr > td { height: 70px; padding-block: 14px; line-height: 1.45; }
  .table:not(.about-table) > tbody > tr:last-child > td { border-bottom: 0; }
  .table thead { box-shadow: 0 -2px 0 var(--table-header-bg); }
  .table .row-actions { gap: 4px; }
  .table .row-actions .btn-icon { border: 0; background: transparent; }
  .table-sort-arrows { gap: 2px; color: #aeb6c0; }
  .table-sort-arrows img { display: none; }
  .table-sort-arrows::before, .table-sort-arrows::after { content: ""; width: 0; height: 0; border-inline: 4px solid transparent; }
  .table-sort-arrows::before { border-bottom: 5px solid currentColor; }
  .table-sort-arrows::after { border-top: 5px solid currentColor; }
  th[aria-sort="ascending"] .table-sort-arrows::before { border-bottom-color: var(--text); }
  th[aria-sort="descending"] .table-sort-arrows::after { border-top-color: var(--text); }
}

/* Reserve a consistent strip for row actions; content columns take the remaining width. */
:root { --table-action-width: 116px; }
.table > thead > tr > th.col-actions { width: var(--table-action-width); min-width: var(--table-action-width); max-width: var(--table-action-width); box-sizing: border-box; text-align: center; }
.table:has(> thead > tr > .col-actions) > tbody > tr > td:last-child { width: var(--table-action-width); box-sizing: border-box; text-align: center; white-space: nowrap; }
.table:has(> thead > tr > .col-actions) > tbody > tr > td:last-child .row-actions { justify-content: center; flex-wrap: nowrap; }
#categories-table th:nth-child(2) { width: 180px; }
#categories-table th:nth-child(3) { width: 100px; }
#categories-table th:first-child { width: auto; }
.transaction-history-table th:first-child { width: 140px; }
.transaction-history-table th:nth-child(2) { width: 160px; }
.transaction-history-table th:nth-child(3) { width: 160px; }
.transaction-history-table th:nth-child(4) { width: auto; }
#review-table th:nth-child(2) { width: 200px; }

/* Column geometry stays fixed when sorting, filtering, or changing pages. */
.stock-table { table-layout: fixed; width: 100%; min-width: 0; }

.stock-table .stock-name-col { width: auto; }
.stock-table .stock-number-col { width: 10%; }
.stock-table .stock-available-col { width: 16%; }
.stock-table .stock-status-col { width: 12%; }
.stock-table .item-cell { min-width: 0; }
.stock-table .item-cell-text { min-width: 0; overflow-wrap: anywhere; }

/* Minimum readable widths and bounded content keep large and small tables predictable. */


.stock-table th:first-child { min-width: 0; }
.stock-table .item-cell-text { max-width: 640px; }
.transaction-history-table { table-layout: fixed; }
.transaction-history-table td:nth-child(4) { overflow-wrap: anywhere; }
#categories-table { table-layout: fixed; min-width: 720px; }
#categories-table td:first-child { overflow-wrap: anywhere; }
.merch-direct-variants .table td:nth-child(3) .input { width: 100%; max-width: 520px; }

.stock-table th { white-space: normal; }
.stock-table .table-sort { min-width: 0; gap: 6px; }
.stock-table .table-sort > span:first-child { min-width: 0; overflow-wrap: normal; }
@media (max-width: 1200px) {
  .table.stock-table > :is(thead, tbody) > tr > :is(th, td) { padding-inline: 12px; }
}

.verification-workspace .verification-table th:nth-child(1) { width: 40%; }
.verification-workspace .verification-table th:nth-child(2) { width: 17%; }
.verification-workspace .verification-table th:nth-child(3) { width: 18%; }
.verification-workspace .verification-table th:nth-child(4) { width: 9%; }
.verification-workspace .verification-table th:nth-child(5) { width: 16%; }
#verification-name-dialog textarea.input { height: auto; min-height: 104px; padding: 12px; line-height: 1.5; resize: vertical; }
#verification-name-dialog .modal-foot { background: var(--surface); }

/* A shared left-aligned search width across page toolbars. */
:root { --search-field-width: 380px; }
.search { width: var(--search-field-width); max-width: 100%; min-width: 0; }
.search .input { width: 100%; }
.table-toolbar > .search { margin-left: 0; flex: 0 1 var(--search-field-width); }
.transaction-filters > .search { flex-basis: var(--search-field-width); }
#inventory-verification > .table-toolbar > .search { flex: 0 1 var(--search-field-width); }
#restock-draft > .restock-search-picker { width: min(var(--search-field-width), calc(100% - 32px)); }
@media (max-width: 700px) {
  .table-toolbar > .search, #inventory-verification > .table-toolbar > .search { width: 100%; flex-basis: 100%; }
}

.transaction-filters > .select { margin-left: auto; }
.transaction-filters .transaction-voided-filter { margin-left: 0; }
#inventory-verification > .table-toolbar > .table-filter-selects { margin-left: auto; }
#inventory-verification > .table-toolbar > .verification-bulk { margin-left: 0; }

.transaction-history-table th:nth-child(5) { width: 140px; }

#inventory-verification > .closing-verification-toolbar > .verification-bulk { margin-left: auto; }

.stock-table-merchandise col:nth-child(4) { width: 12%; }
.stock-table-merchandise th:nth-child(4) .table-sort > span:first-child { white-space: nowrap; }

.transaction-filters .table-filter-selects > .select { width: 180px; }