/* Responsive layer: tables (Highland 2026-10-20 "compatible with various screen sizes").
   Loaded after app-shell.css. Tiers: wide >=1600, standard 1280-1599, compact 1024-1279,
   tablet 744-1023, phone <=743 (phone layout lives in styles.css/workspace.css). */

/* Tables size to their own container (container queries), not to the window, so a wider or
   narrower sidebar never breaks them. Every wide table has its own minimum width; there is
   no global table minimum any more. Phones (<= 743px) keep their card lists untouched. */

/* ---------- Shared: compact labels and folded values ---------- */
/* Short labels, the notes icon and folded values show only in narrow tables. */
.cell-label-short,
.note-cell-compact,
.cpu-folded-duration {
  display: none;
}

.note-cell-compact {
  align-items: center;
  gap: 3px;
}

.note-cell-compact .icon-action-icon {
  width: 16px;
  height: 16px;
}

.note-cell-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #b42318;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

@media (min-width: 744px) {
  /* position: relative keeps visually hidden (absolute) cell text inside the scroller, so it
     never widens the page. */
  #tableShell { position: relative; container: cpu-table / inline-size; }
  .assembly-day-table-shell { position: relative; container: assembly-table / inline-size; }
  .special-orders-table-shell { position: relative; container: special-table / inline-size; }

  /* ---------- CPU Check-In (#ordersTable) ----------
     Columns: 1 actions, 2 pickup window, 3 order type, 4 invoice, 5 customer, 6 assembly,
     7 CPU status, 8 pieces, 9 arrival (Check In), 10 close-out (Close Now), 11 pickup duration,
     12 communications. Every row shape (orders, history, open, expired, reserved, walk-in and
     blocked windows) gives its cells the column class (.col-<key>), so columns are hidden and
     stuck by class, never by position. Customer (and Communications when wide) take the rest. */
  #ordersTable {
    --cpu-actions-w: 72px;
    --cpu-window-w: 136px;
    --cpu-type-w: 96px;
    --cpu-invoice-w: 100px;
    --cpu-customer-min: 170px;
    --cpu-assembly-w: 132px;
    --cpu-status-w: 140px;
    --cpu-pieces-w: 64px;
    --cpu-time-w: 120px;
    --cpu-duration-w: 120px;
    --cpu-comms-w: auto;
    --cpu-comms-min: 170px;
    min-width: calc(var(--cpu-actions-w) + var(--cpu-window-w) + var(--cpu-type-w) + var(--cpu-invoice-w)
      + var(--cpu-customer-min) + var(--cpu-assembly-w) + var(--cpu-status-w) + var(--cpu-pieces-w)
      + 2 * var(--cpu-time-w) + var(--cpu-duration-w) + var(--cpu-comms-min));
  }
  /* Three row icons when rows have Remove pickup window (matches th.checkin-action-col). */
  #ordersTable:has(td.row-edit-cell [data-remove-window]) { --cpu-actions-w: 90px; }
  #ordersTable th.col-edit_control { width: var(--cpu-actions-w); }
  #ordersTable th.col-eta_time { width: var(--cpu-window-w); }
  #ordersTable th.col-invoice_modifier { width: var(--cpu-type-w); }
  #ordersTable th.col-display_invoice { width: var(--cpu-invoice-w); }
  #ordersTable th.col-customer_name { width: auto; }
  #ordersTable th.col-assembly_status { width: var(--cpu-assembly-w); }
  #ordersTable th.col-cpu_status { width: var(--cpu-status-w); }
  #ordersTable th.col-piece_count { width: var(--cpu-pieces-w); }
  #ordersTable th.col-arrival_time,
  #ordersTable th.col-closeout_time { width: var(--cpu-time-w); }
  #ordersTable th.col-wait_time { width: var(--cpu-duration-w); }
  #ordersTable th.col-communications { width: var(--cpu-comms-w); }
  #ordersTable .status { max-width: 100%; }
  /* Customer names wrap to at most two lines instead of an ellipsis (full name in the cell title). */
  #ordersTable .cell-text-clamp,
  .assembly-day-table .cell-text-clamp { display: -webkit-box; overflow: hidden; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* Text buttons in rows get a 24px+ hit area without changing the row height (as Check In). */
  #ordersTable td:not(.walk-in-draft-actions) > [data-create-checkin]::after,
  #ordersTable td:not(.walk-in-draft-actions) > [data-request-checkin]::after,
  #ordersTable [data-email-order]::after { content: ""; position: absolute; inset: -8px -6px; }
  #ordersTable .new-checkin-row select[name="intended_order_id"] { min-width: 0; }

  /* ---------- Assembly Tracker (.assembly-day-table) ----------
     Columns: 1 actions, 2 date of entry, 3 invoice, 4 customer, 5 cabinets, 6 mods,
     7 assembly status, 8 order status, 9 communications. */
  .assembly-day-table {
    --asm-actions-w: 64px;
    --asm-date-w: 110px;
    --asm-invoice-w: 104px;
    --asm-customer-min: 200px;
    --asm-count-w: 80px;
    --asm-mods-w: 64px;
    /* Assembly Status fits its longest choice (127px for the retired "Waiting on Issue"; "In Progress"
       needs less); the Order Status bubble needs less still. */
    --asm-status-w: 142px;
    --asm-order-status-w: 124px;
    --asm-comms-w: auto;
    --asm-comms-min: 150px;
    min-width: calc(var(--asm-actions-w) + var(--asm-date-w) + var(--asm-invoice-w) + var(--asm-customer-min)
      + var(--asm-count-w) + var(--asm-mods-w) + var(--asm-status-w) + var(--asm-order-status-w) + var(--asm-comms-min));
  }
  .assembly-day-table.has-row-labels { --asm-actions-w: 90px; }
  .assembly-day-table th.col-edit_control { width: var(--asm-actions-w); }
  .assembly-day-table th.col-date_of_entry { width: var(--asm-date-w); }
  .assembly-day-table th.col-display_invoice { width: var(--asm-invoice-w); }
  .assembly-day-table th.col-customer_name { width: auto; }
  .assembly-day-table th.col-cabinet_count { width: var(--asm-count-w); }
  .assembly-day-table th.col-mod_count { width: var(--asm-mods-w); }
  .assembly-day-table th.col-assembly_status { width: var(--asm-status-w); }
  .assembly-day-table th.col-order_status { width: var(--asm-order-status-w); }
  .assembly-day-table th.col-communications { width: var(--asm-comms-w); }
  .assembly-day-table .status { max-width: 100%; }

  /* ---------- Back Orders / Order Corrections ----------
     The minimum width comes from the visible columns (app.js); the actions column stays put
     when the table has to scroll. */
  #specialOrdersTable th[data-special-column="actions"],
  #specialOrdersTable td[data-special-column="actions"] { position: sticky; left: 0; z-index: 1; }
  #specialOrdersTable th[data-special-column="actions"] { z-index: 3; }
  #specialOrdersTable td[data-special-column="actions"] { background-color: var(--panel); }
  #specialOrdersTable tr.print-selected td[data-special-column="actions"] { background-color: inherit; }
  /* Toolbar: one row from a 1280px window; narrower, the search takes its own first row so
     "Save Current View" is never left alone on a second row. */
  #specialOrdersPanel .special-orders-toolbar { container: special-toolbar / inline-size; }
  #specialOrdersPanel .special-filter-grid > .search { min-width: 140px; }
  #specialOrdersPanel .special-sort-control select { width: 136px; }
}

@container special-toolbar (width < 1080px) {
  #specialOrdersPanel .special-filter-grid > .search { flex: 1 1 100%; max-width: none; }
}

/* CPU: Pickup Duration folds under the close-out time. */
@container cpu-table (width < 1480px) {
  #ordersTable {
    --cpu-duration-w: 0px;
    --cpu-customer-min: 150px;
    --cpu-comms-min: 150px;
  }
  #ordersTable tr > .col-wait_time { display: none; }
  #ordersTable .cpu-folded-duration { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.2; }
  /* "This window is no longer available." becomes "Unavailable" (the full text stays for screen readers). */
  #ordersTable td.unavailable-window-message .cell-label-long { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  #ordersTable td.unavailable-window-message .cell-label-short { display: inline; }
}

/* CPU compact (standard laptops, 1280-1440 windows): tighter fixed columns, Communications
   becomes the notes icon and unread count, long labels shorten, and the key columns stick to
   the edges if the table still has to scroll: actions, pickup window and invoice on the left,
   Check In, Close Now and Communications on the right. */
@container cpu-table (width < 1300px) {
  #ordersTable {
    --cpu-actions-w: 72px;
    --cpu-window-w: 96px;
    --cpu-type-w: 72px;
    --cpu-invoice-w: 88px;
    --cpu-customer-min: 132px;
    --cpu-assembly-w: 112px;
    --cpu-status-w: 128px;
    --cpu-pieces-w: 60px;
    --cpu-time-w: 116px;
    --cpu-comms-w: 96px;
    --cpu-comms-min: 96px;
  }
  #ordersTable:has(td.row-edit-cell [data-remove-window]) { --cpu-actions-w: 90px; }
  #ordersTable thead th { white-space: normal; line-height: 1.15; text-overflow: clip; }
  #ordersTable td.pickup-slot,
  #ordersTable tr > td.col-assembly_status,
  #ordersTable tr > td.col-cpu_status { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  #ordersTable td .status { min-width: 0; white-space: normal; font-size: 12px; line-height: 1.2; text-align: center; }
  #ordersTable .inline-time { padding-inline: 3px; font-size: 13px; }
  #ordersTable .inline-time::-webkit-calendar-picker-indicator { margin-inline-start: 0; padding: 0; }
  #ordersTable .new-checkin-row select[name="intended_order_id"] { padding-inline: 3px; font-size: 12px; }
  #ordersTable td.note .note-cell-compact { display: inline-flex; }
  #ordersTable td.note .note-cell-text,
  #ordersTable .cell-label-long { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  #ordersTable .cell-label-short { display: inline; }
  #ordersTable td.unavailable-window-message { font-size: 12px; text-align: center; }
  /* Pickup requests: no 150px minimum; Approve, Deny and Cancel stack full width in the 96px column. */
  #ordersTable .pickup-request-inline { min-width: 0; white-space: normal; }
  #ordersTable .pickup-request-actions { display: grid; width: 100%; gap: 4px; }
  #ordersTable .pickup-request-actions .cell-btn { width: 100%; padding-inline: 4px; }
  #ordersTable .pickup-request-inline small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; line-height: 1.2; }

  #ordersTable tr > .col-edit_control,
  #ordersTable tr > .col-eta_time,
  #ordersTable tr > .col-display_invoice,
  #ordersTable tr > .col-arrival_time,
  #ordersTable tr > .col-closeout_time,
  #ordersTable tr > .col-communications { position: sticky; z-index: 1; }
  #ordersTable thead tr > .col-edit_control,
  #ordersTable thead tr > .col-eta_time,
  #ordersTable thead tr > .col-display_invoice,
  #ordersTable thead tr > .col-arrival_time,
  #ordersTable thead tr > .col-closeout_time,
  #ordersTable thead tr > .col-communications { z-index: 3; }
  #ordersTable tr > .col-edit_control { left: 0; }
  #ordersTable tr > .col-eta_time { left: var(--cpu-actions-w); }
  #ordersTable tr > .col-display_invoice { left: calc(var(--cpu-actions-w) + var(--cpu-window-w)); border-right: 1px solid var(--line); }
  #ordersTable tr > .col-arrival_time { right: calc(var(--cpu-time-w) + var(--cpu-comms-w)); border-left: 1px solid var(--line); }
  #ordersTable tr > .col-closeout_time { right: var(--cpu-comms-w); }
  #ordersTable tr > .col-communications { right: 0; }
  /* Sticky cells need a solid fill; tinted rows keep their own td background (higher specificity). */
  :where(#ordersTable) :where(tbody td) { background-color: var(--panel); }
}

/* CPU on tablets: only actions + pickup window stick left and Check In + Close Now stick right,
   so the middle of the row keeps room to scroll. */
@container cpu-table (width < 800px) {
  #ordersTable tr > .col-display_invoice,
  #ordersTable tr > .col-communications { left: auto; right: auto; border-right: 0; }
  #ordersTable tbody tr > .col-display_invoice,
  #ordersTable tbody tr > .col-communications { position: static; }
  #ordersTable thead tr > .col-display_invoice,
  #ordersTable thead tr > .col-communications { z-index: 2; }
  #ordersTable tr > .col-arrival_time { right: var(--cpu-time-w); }
  #ordersTable tr > .col-closeout_time { right: 0; }
}

/* Assembly compact (fits from a 1024px window): tighter fixed columns, names wrap,
   Communications becomes the notes icon and unread count. */
@container assembly-table (width < 1100px) {
  .assembly-day-table {
    --asm-date-w: 100px;
    --asm-invoice-w: 88px;
    --asm-customer-min: 120px;
    --asm-count-w: 76px;
    --asm-mods-w: 56px;
    --asm-order-status-w: 114px;
    --asm-comms-w: 72px;
    --asm-comms-min: 72px;
  }
  .assembly-day-table thead th { white-space: normal; line-height: 1.15; text-overflow: clip; }
  .assembly-day-table td .status { min-width: 0; white-space: normal; font-size: 12px; line-height: 1.2; }
  .assembly-day-table .inline-select { padding-inline: 4px; font-size: 13px; }
  .assembly-day-table .cell-label-long { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .assembly-day-table .cell-label-short { display: inline; }
  .assembly-day-table td.note { text-align: center; }
  .assembly-day-table td.note .note-cell-compact { display: inline-flex; }
  .assembly-day-table td.note .note-cell-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Assembly on tablets: actions and invoice stay in view while the row scrolls. */
@container assembly-table (width < 820px) {
  .assembly-day-table tr > :nth-child(1),
  .assembly-day-table tr > :nth-child(3) { position: sticky; z-index: 1; }
  .assembly-day-table thead tr > :nth-child(1),
  .assembly-day-table thead tr > :nth-child(3) { z-index: 3; }
  .assembly-day-table tr > :nth-child(1) { left: 0; }
  .assembly-day-table tr > :nth-child(3) { left: calc(var(--asm-actions-w) + var(--asm-date-w)); border-right: 1px solid var(--line); }
  :where(.assembly-day-table) :where(tbody td) { background-color: var(--panel); }
}

/* Phones keep the Assembly Tracker exactly as before: a 1180px table that scrolls sideways
   (these widths used to come from the global .col-* rules). */
@media (max-width: 743px) {
  .assembly-day-table { min-width: 1180px; }
  .assembly-day-table th.col-date_of_entry { width: 118px; }
  .assembly-day-table th.col-display_invoice { width: 108px; }
  .assembly-day-table th.col-customer_name { width: 260px; }
  .assembly-day-table th.col-cabinet_count,
  .assembly-day-table th.col-mod_count { width: 82px; }
  .assembly-day-table th.col-assembly_status,
  .assembly-day-table th.col-order_status { width: 136px; }
}

/* ---------- Reporting ---------- */
/* Long customer names and reasons get more lines instead of an ellipsis; the first column of the
   summary tables stays in view when a table has to scroll. */
#reportingPanel .dense-table td.truncate {
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (min-width: 744px) and (max-width: 1279px) {
  #reportingPanel .rpt-table thead th { white-space: normal; }
  #reportingPanel .rpt-table tbody th,
  #reportingPanel .rpt-table td:not(.num) { white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 744px) and (max-width: 960px) {
  #reportingPanel .rpt-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1279px) {
  #reportingPanel .rpt-table-wrap { position: relative; }
  #reportingPanel .rpt-table-wrap .rpt-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
}

/* ---------- Process Orders ---------- */
/* Review was a 17px tall link. */
.processing-submission-actions .cell-btn { display: inline-flex; align-items: center; min-height: 24px; padding-block: 2px; }

/* ---------- Dialogs ---------- */
@media (min-width: 744px) {
  /* Order details: a little wider on laptops and desktops, so the fields get ~200px each. */
  #orderDialog { width: min(1120px, calc(100vw - 32px)); }
  #orderDialog .modal-form { container: order-form / inline-size; }
  /* The order window's tab content (beside the rail on desktops). */
  #orderDialog .order-window-main { container: order-pane / inline-size; }
}

/* Form fields: four columns while each gets ~190px, then three, then two (Customer & delivery too). */
@container order-pane (width < 820px) {
  #orderDialog .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container order-pane (width < 560px) {
  #orderDialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pick List: on phones each candidate is a three-line row instead of a 620px table. */
@media (max-width: 743px) {
  .pick-list-candidates-wrap .pick-list-table { min-width: 0; }
  .pick-list-candidates-wrap .pick-list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pick-list-candidates-wrap { position: relative; }
  .pick-list-candidates-wrap .pick-list-table tbody tr { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  .pick-list-candidates-wrap .pick-list-table tbody tr:last-child { border-bottom: 0; }
  .pick-list-candidates-wrap .pick-list-table tbody tr.is-selected { background: #eff9f3; }
  body.dark-mode .pick-list-candidates-wrap .pick-list-table tbody tr.is-selected { background: #234536; }
  .pick-list-candidates-wrap .pick-list-table tbody td { display: block; padding: 0; border: 0; }
  .pick-list-candidates-wrap .pick-list-table tbody td:nth-child(1) { grid-row: 1 / span 3; }
  .pick-list-candidates-wrap .pick-list-table tbody td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .pick-list-candidates-wrap .pick-list-table tbody td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  .pick-list-candidates-wrap .pick-list-table tbody td:nth-child(4) { grid-column: 3; grid-row: 1; color: var(--muted); font-size: 13px; }
  .pick-list-candidates-wrap .pick-list-table tbody td:nth-child(5) { grid-column: 2; grid-row: 3; color: var(--muted); font-size: 13px; }
  .pick-list-candidates-wrap .pick-list-table tbody td:nth-child(6) { grid-column: 3; grid-row: 3; }
  .pick-list-candidates-wrap .pick-list-table tbody td:empty { display: none; }
}

/* ---------- Cell alignment ----------
   Highland 2026-10-21: "for the data in tables, look into centering the data in each cell."
   Headers and cells of every data table are centered across and down, and so are the controls in
   them. These two rules are the only place that sets it: table rules elsewhere set no left/right
   or top/bottom alignment of their own. Column widths, sticky columns and the container-query
   layouts above are unchanged. Exceptions, on purpose:
   - Lists inside a cell (BO/OC Items / SKUs, Pick List descriptions) are a centered block whose
     lines stay left-aligned, so they still read as a list.
   - The label dialog's "Total labels" stays right-aligned next to its total.
   Phones (<= 743px) keep their card and list layouts; the tables that stay tables on phones
   (Reporting, the Pick List preview, the initials list) are centered there too. */
#reportingPanel :is(.rpt-table, .dense-table) :is(th, td),
.pick-list-table-wrap:not(.pick-list-candidates-wrap) > .pick-list-table :is(th, td),
.sales-rep-catalog-table :is(th, td) {
  text-align: center;
  vertical-align: middle;
}
.sales-rep-catalog-table .sales-rep-label-edit { justify-content: center; }
.pick-list-table td.pick-list-description > span { display: block; width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }

@media (min-width: 744px) {
  #ordersTable :is(th, td),
  .assembly-day-table :is(th, td),
  .horizontal-orders-table :is(th, td),
  .admin-user-table :is(th, td),
  .pick-list-candidates-wrap .pick-list-table :is(th, td),
  .label-print-table :is(th, td) {
    text-align: center;
    vertical-align: middle;
  }
  /* Controls laid out as flex rows or blocks sit in the middle of their cells. (The BO/OC tables read
     left to right since 2026-11-05, board 15.) */
  tr.horizontal-order-row .card-note,
  .admin-user-table .admin-user-identity-wrap { justify-content: center; }
}