/* Tablet layout (James, Highland Cabinetry, 2026-11-03): iPads, Android tablets and touch-only screens
   744px and wider (body.tablet-layout; static/layout-mode.js and app.js layoutModes). Tablets keep the desktop
   pages and full editing; these rules add touch sizing and the phone's quick camera on CPU Check-In,
   Assembly Tracker and Dispatch rows. Loaded last, so they win over density.css at equal specificity. */

/* Row actions are 44px touch targets (WCAG 2.5.5), 6px apart, with 18px icons. */
body.tablet-layout :is(#ordersTable, .assembly-day-table, .dt-table) .row-edit-actions.icon-actions { gap: 6px; }
body.tablet-layout :is(#ordersTable, .assembly-day-table, .dt-table) td .icon-action-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 8px; }
body.tablet-layout :is(#ordersTable, .assembly-day-table, .dt-table) td .icon-action-btn :is(.icon-action-icon, .dt-ic) { width: 18px; height: 18px; }

/* The camera is the row's primary action (the approved design: brand blue, white icon). */
body.tablet-layout .tablet-camera-action { border-color: var(--brand); background: var(--brand); color: #fff; }
body.tablet-layout .tablet-camera-action:hover { border-color: var(--brand-dark, var(--brand)); background: var(--brand-dark, var(--brand)); color: #fff; }
body.tablet-layout.dark-mode .tablet-camera-action,
body.tablet-layout.dark-mode .tablet-camera-action:hover { border-color: #8ab8f8; background: #79a9e8; color: #132030; }

/* Where the photo flow reports ("3 photos saved to the order folder ..."), under the icons. */
.tablet-capture-status:empty { display: none; }
.tablet-capture-status { display: block; margin-top: 4px; color: #17643b; font-size: 12px; font-weight: 750; line-height: 1.25; white-space: normal; text-align: left; }
body.dark-mode .tablet-capture-status { color: #7ee2a8; }
/* A photo that could not be taken or saved reads as an error (chooseMobileOrderPhoto adds .is-error). */
.tablet-capture-status.is-error { color: #b42318; }
body.dark-mode .tablet-capture-status.is-error { color: #ffb4ab; }

/* The actions columns fit three 44px icons (Details, File, camera): 3 x 44 + 2 x 6 + cell padding;
   four with Remove pickup window on CPU Check-In or row labels on the Assembly Tracker. The CPU and
   Assembly widths are the variables responsive-tables.css uses for the column and the sticky offsets. */
body.tablet-layout #ordersTable { --cpu-actions-w: 156px; }
body.tablet-layout #ordersTable:has(td.row-edit-cell [data-remove-window]) { --cpu-actions-w: 206px; }
body.tablet-layout .assembly-day-table { --asm-actions-w: 156px; }
body.tablet-layout .assembly-day-table.has-row-labels { --asm-actions-w: 206px; }
body.tablet-layout .dt-table th.dt-col-order { width: 156px; }
/* The header widths: these beat styles.css / density.css fixed widths (72-122px), :has() variants included. */
body.tablet-layout #ordersTable th.col-edit_control.checkin-action-col,
body.tablet-layout #ordersTable:has(td.row-edit-cell [data-remove-window]) tr > th.col-edit_control.checkin-action-col { width: var(--cpu-actions-w); }
body.tablet-layout .assembly-day-table tr > th.col-edit_control.assembly-action-col { width: var(--asm-actions-w); }

/* No hover-only affordances on touch: the Dispatch notes pencil is always shown. */
body.tablet-layout .dt-notes-btn .dt-ic { opacity: 1; }