/**
 * WC Production Workflow — Board Styles
 * Version: 6.7.43
 */

/* ── Login ────────────────────────────────────────── */
.pw-login-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.pw-login-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 32px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.pw-login-box h2 {
    margin: 0 0 24px;
    font-size: 22px;
    text-align: center;
    color: #1d2327;
}

.pw-login-box label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 13px;
}

.pw-login-box input[type="text"],
.pw-login-box input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.pw-login-box input[type="submit"] {
    width: 100%;
    padding: 12px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.pw-login-box input[type="submit"]:hover {
    background: #135e96;
}

/* ── Board layout — fixed viewport height ─────────── */
.pw-board {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--pw-admin-bar-height, 32px));
    box-sizing: border-box;
    padding: 16px 24px 0;
    overflow: hidden;
}

/* Admin bar offset: WP adds 32px bar for logged-in users (46px on mobile) */
body.admin-bar .pw-board {
    height: calc(100vh - 32px);
}

#pw-board-header {
    flex-shrink: 0;
}

#pw-board-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;    /* critical for flex children to shrink below content size */
    padding-bottom: 80px;
    transition: opacity 0.12s ease;
}

.pw-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 12px;
}

.pw-board-header h2 {
    margin: 0;
    font-size: 22px;
    color: #1d2327;
}

.pw-board-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pw-board-logout {
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 999;
    text-decoration: none;
    font-size: 13px;
    color: #787c82;
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.pw-board-logout:hover {
    opacity: 1;
    color: #d63638;
    border-color: #d63638;
}

.pw-urgency {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
}
.pw-urgency--overdue {
    background: #d63638;
    color: #fff;
    animation: pw-urgency-pulse 2s ease-in-out infinite;
}
.pw-urgency--at-risk {
    background: #dba617;
    color: #fff;
}
.pw-urgency--requests {
    background: #2271b1;
    color: #fff;
}
/* 9.8.3: admin-only "service down" pill — red + pulse, like overdue. */
.pw-urgency--down {
    background: #d63638;
    color: #fff;
    animation: pw-urgency-pulse 2s ease-in-out infinite;
}
@keyframes pw-urgency-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pw-board-tabs {
    display: flex;
    gap: 4px;
    background: #f0f0f1;
    padding: 3px;
    border-radius: 6px;
    flex-wrap: wrap;
}

.pw-board-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: #50575e;
    transition: all 0.15s;
    white-space: nowrap;
}

.pw-board-tab:hover {
    background: #e0e0e0;
}

.pw-board-tab--active {
    background: #fff;
    color: #1d2327;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pw-board-tab .pw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ddd;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

.pw-board-tab--active .pw-badge {
    background: #2271b1;
    color: #fff;
}

/* ── Station panel ────────────────────────────────── */
.pw-station-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 16px;
    min-height: 200px;
}

.pw-station-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pw-color, #3498db);
}

.pw-station-panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: #1d2327;
}

.pw-station-panel-header .pw-count {
    background: var(--pw-color, #3498db);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.pw-station-panel-header .pw-count-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 9.3.0: packing count badges relocated onto the sub-tab row */
.pw-packing-tab-counts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    row-gap: 6px;
    margin-left: auto;
}
.pw-packing-tab-counts .pw-count {
    background: #f0f0f1;
    color: #646970;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.pw-packing-tab-counts .pw-count--today { background: #dba617; color: #1d2327; }
.pw-packing-tab-counts .pw-count--muted { background: #f0f0f1; color: #646970; }
.pw-packing-tab-counts .pw-count--done  { background: #27ae60; color: #fff; margin-left: 8px; }
.pw-station-panel-header .pw-count--today {
    background: #dba617;
    color: #1d2327;
}
/* 8.3.5: head breakdown counters. On hold = muted grey (blocked), Requests =
   purple (matches request/decision accent). Both sit beside All + Today. */
.pw-station-panel-header .pw-count--held {
    background: #8c8f94;
    color: #fff;
}
.pw-station-panel-header .pw-count--requests {
    background: #9b59b6;
    color: #fff;
}
.pw-station-panel-header .pw-count--muted {
    background: #f0f0f1;
    color: #646970;
}
/* 8.8.7: "Done today" merged-throughput counter — green (success), set apart
   from the six board-state pills with extra left gap. */
.pw-station-panel-header .pw-count--done {
    background: #27ae60;
    color: #fff;
    margin-left: 16px;
}

/* Regular station head (inside the 3-zone head) drops the coloured underline
   to match the In Production title format — name + Total/Today pills, no line.
   Scoped to .pw-head-centre so the Packing head (.pw-packing-main) keeps its line. */
.pw-head-centre .pw-station-panel-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    justify-content: flex-start;
    gap: 8px;
}
.pw-head-centre .pw-station-panel-header h3 {
    line-height: 1;
}

/* ── Job cards ────────────────────────────────────── */
.pw-job-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--pw-color, #3498db);
    border-radius: 6px;
    padding: 0;
    margin-bottom: 10px;
    transition: box-shadow 0.15s;
    display: grid;
    grid-template-columns: 1fr auto auto;
}

.pw-job-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Left column: info + expandable body ─────────── */
.pw-card-content {
    grid-row: 1 / -1;
    min-width: 0;
    padding: 10px 14px;
}
.pw-card-row1 {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px;
}
.pw-card-col-order {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.pw-card-col-product {
    min-width: 0;
    overflow: hidden;
}
.pw-card-col-customer {
    min-width: 0;
    overflow: hidden;
}
.pw-card-col-date {
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 10px 8px 6px;
    line-height: 1.3;
}
.pw-card-row2 {
    min-height: 4px;
}
.pw-card-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
}

/* ── Right column: action button(s) spanning full height ─ */
.pw-card-action-col {
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 6px 6px 0;
    align-self: start;
}
.pw-card-action-btns {
    display: flex;
    flex-direction: row;
    gap: 4px;
    min-height: 54px;
}
.pw-card-action-btns .pw-advance-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 14px;
    min-height: 54px;
    white-space: nowrap;
}
.pw-card-action-btns .pw-decision-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    min-height: 54px;
    white-space: nowrap;
}
.pw-card-action-btns .pw-qc-fail-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 14px;
    min-height: 54px;
    white-space: nowrap;
}
.pw-card-action-btns .pw-qc-pass-btn {
    flex: 1;
    white-space: nowrap;
}
.pw-card-action-col .pw-flagged-awaiting {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    font-size: 11px;
    min-height: 54px;
}
/* Menu actions — hidden until expanded */
.pw-card-action-col .pw-card-menu-bar {
    display: none;
    flex-direction: column;
    gap: 4px;
}
.pw-job-card--expanded .pw-card-action-col .pw-card-menu-bar {
    display: flex;
}
/* 9.9.0 → 9.9.5: On Hold cards show their actions without expanding (it's a triage
   queue). 9.9.5: the action set moved OUT of the narrow right column into a
   full-width footer at the bottom of the content column — the held reason now gets
   the full card width, and the footer (margin-top:auto) pins to the card bottom so
   button-heavy and reason-only cards in the same row stay even-height. */
.pw-manager-job-card[data-onhold="1"] .pw-card-content {
    display: flex;
    flex-direction: column;
}
.pw-manager-job-card[data-onhold="1"] .pw-onhold-why {
    margin-bottom: 8px;
}
.pw-manager-job-card[data-onhold="1"] .pw-card-menu-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f0f0f1;
}
/* 9.9.0: "why is this held" line on the On Hold card face. */
.pw-onhold-why {
    font-size: 12.5px;
    line-height: 1.45;
    margin: 3px 0 0;
}
.pw-onhold-why-meta {
    color: #6b7280;
}
.pw-onhold-why-reason {
    color: #374151;
}
/* 9.9.2: On Hold list is a responsive grid — 1-up on tablets, 2-up (or more) on wide monitors. */
.pw-manager-panel--onhold {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
    gap: 12px;
    align-items: stretch; /* 9.9.5: cards in a row match the tallest → even row, no ragged heights. */
}
.pw-manager-panel--onhold .pw-panel-head,
.pw-manager-panel--onhold .pw-board-empty {
    grid-column: 1 / -1;
}
/* 9.9.2 → 9.9.7: On-Hold job-detail modal (replaces inline expand on the On Hold tab).
   9.9.6 LAYERING (kept): the overlay sits one layer BELOW the shared 3D/file viewer
   (.pw-preview-overlay, z-index 99999 in pw-threejs-engine) so the viewer opens ON
   TOP; backdrop clicks + Esc peel top-down. Above the toast layer (99990); every
   other board modal keeps the default 100000 — except the intake check box, which
   joined this layer in 10.12.19 for the same reason: it exists to show the
   customer's files. The host owns its stacking — engine untouched.
   9.9.7 LAYOUT: rebuilt as clean full-bleed sections (header / status / customer /
   specification / files / notes) with soft dividers — replacing the cramped reuse
   of the inline-card body. Specification uses label-above-value fields so long EPO
   questions read cleanly and long values span full width. Scoped to
   .pw-job-detail-modal + .pw-jdm-* — inline card bodies (buildJobDetail) untouched.
   9.9.9 FIX: the width MUST be set via .pw-modal.pw-job-detail-modal (two classes).
   The base .pw-modal rule (width:90%/max-width:560px/padding:24px) sits LATER in
   this file at equal specificity, so a single-class .pw-job-detail-modal selector
   loses to it — which is why 9.9.6–9.9.8's widening never took (modal stayed 560px).
   Two classes raises specificity so it wins regardless of source order. */
.pw-modal-overlay.pw-modal-overlay--under-viewer {
    z-index: 99998;
}
.pw-modal.pw-job-detail-modal {
    width: 960px;
    max-width: 94vw;
    padding: 0;
}
.pw-jdm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f0f0f1;
}
.pw-jdm-order { font-size: 18px; font-weight: 700; color: #1d2327; }
.pw-jdm-product { font-size: 14px; color: #50575e; margin-top: 2px; }
.pw-jdm-chain { font-size: 11px; color: #8a8f94; margin-top: 4px; }
.pw-jdm-close {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid #dcdcde;
    background: #fff;
    color: #50575e;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.pw-jdm-close:hover { background: #f0f0f1; }
.pw-jdm-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 22px;
    border-bottom: 1px solid #f0f0f1;
}
.pw-jdm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pw-jdm-dispatch { font-size: 12px; }
.pw-jdm-customer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid #f0f0f1;
}
.pw-jdm-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #2271b1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.pw-jdm-custname { font-size: 15px; font-weight: 600; color: #1d2327; }
.pw-jdm-customer .pw-contact-detail { margin-top: 2px; }
.pw-jdm-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    padding: 18px 22px;
}
.pw-jdm-seclabel {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #787c82;
    margin: 0 0 12px;
}
.pw-jdm-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px 20px;
}
.pw-jdm-field--wide { grid-column: 1 / -1; }
.pw-jdm-fld-lbl { font-size: 12px; color: #787c82; line-height: 1.4; margin-bottom: 2px; }
.pw-jdm-fld-val { font-size: 14px; font-weight: 600; color: #1d2327; line-height: 1.4; }
.pw-jdm-empty { font-size: 13px; color: #8a8f94; }
.pw-jdm-files .pw-job-card-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    border: 1px solid #f0f0f1;
    border-radius: 6px;
    font-size: 13px;
    color: #2271b1;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}
.pw-jdm-files .pw-job-card-file:hover { background: #f6f7f7; }
.pw-jdm-ftype {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #50575e;
    background: #f0f0f1;
    border-radius: 3px;
    padding: 2px 6px;
    min-width: 34px;
    text-align: center;
}
.pw-jdm-notes {
    padding: 16px 22px;
    border-top: 1px solid #f0f0f1;
}
.pw-jdm-notes .pw-job-notes-thread {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.pw-job-detail-modal .pw-modal-footer {
    margin: 0;
    padding: 14px 22px;
    border-top: 1px solid #f0f0f1;
}

.pw-job-card-order {
    font-weight: 700;
    color: #2271b1;
    font-size: 14px;
    white-space: nowrap;
}

.pw-job-card-product-inline {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.pw-job-card-qty-inline {
    display: inline-block;
    background: #f0f0f1;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: #666;
}

.pw-job-card-company-inline {
    font-size: 13px;
    color: #787c82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.pw-job-card-dispatch {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}

.pw-job-card-dispatch-orig {
    font-size: 10px;
    color: #999;
    display: block;
    padding-right: 8px;
}

.pw-dispatch-today {
    background: #fef3e0;
    color: #996800;
}

.pw-dispatch-overdue {
    background: #fcf0f1;
    color: #d63638;
}

.pw-dispatch-future {
    background: #e8f4fd;
    color: #2271b1;
}

/* ── Expandable body (hidden by default) ─────────── */
.pw-job-card-body {
    display: none;
    padding: 10px 0 0 0;
    border-top: 1px solid #f0f0f1;
    margin-top: 8px;
}

.pw-job-card--expanded .pw-job-card-body {
    display: block;
}

/* ── Two-column body layout (text left, files right) ── */
.pw-body-columns {
    display: flex;
    gap: 16px;
}
/* 10.11.74 (card #703): a ceiling on the answers block, so the two halves of an
 * expanded card can no longer starve each other.
 *
 * There was no ceiling at all before — the left side took whatever its content
 * needed and the thumbnails got the remainder down to 150px, so the split was
 * decided entirely by how wordy a product's QUESTION text happened to be. Half
 * the card is Piotr's number (2026-08-16): on 1920 it leaves the answer ~600px
 * (about 85 characters, comfortable prose) and on a 1024 tablet still ~300px
 * (about 43 — tight but readable), while guaranteeing the thumbnails 50% they
 * never had. It is a CEILING, not a target: `flex: 0 1 auto` still sizes the
 * block to its content, so a card of Yes/No answers stays exactly as small as
 * it looks today and only real text grows toward the cap. */
.pw-body-text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%;
}
.pw-body-files {
    flex: 1 1 auto;
    min-width: 150px;
}

/* ── Inline menu bar (in action column, shown on expand) ── */
.pw-card-menu-action {
    padding: 8px 12px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    color: #50575e;
    transition: background 0.15s;
    text-align: center;
}
.pw-card-menu-action:hover {
    background: #f0f0f1;
}
.pw-card-menu-action--danger {
    color: #d63638;
    border-color: #f5c6c6;
}
.pw-card-menu-action--danger:hover {
    background: #fef0f0;
}

/* Upload designed file(s) — pinned to the TOP of the menu bar and sized like the
   main Advance button (taller/bolder than the menu actions) so it reads as a
   primary action. Accent blue, distinct from the green Advance button. Lives
   inside .pw-card-menu-bar, so it is hidden until the card is expanded. */
.pw-card-menu-upload {
    padding: 8px 16px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.pw-card-menu-upload:hover {
    background: #135e96;
}

.pw-card-row1 .pw-badge-qcfail {
    font-size: 10px;
    padding: 1px 6px;
}

.pw-job-card-customer {
    font-size: 12px;
    color: #787c82;
    margin-bottom: 8px;
    margin-top: 8px;
}

.pw-job-card-qty {
    display: inline-block;
    background: #f0f0f1;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ── EPO options on card ──────────────────────────── */
.pw-job-card-options {
    margin: 8px 0;
    padding: 8px;
    background: #fafafa;
    border-radius: 4px;
    font-size: 12px;
}

.pw-job-card-option {
    display: flex;
    gap: 6px;
    padding: 2px 0;
}

.pw-job-card-option-label {
    color: #787c82;
    min-width: 80px;
}

.pw-job-card-option-value {
    color: #1d2327;
    font-weight: 500;
}

/* ── File links on card ───────────────────────────── */
.pw-job-card-files {
    margin: 8px 0;
}

.pw-job-card-file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #e8f4fd;
    border-radius: 3px;
    font-size: 12px;
    color: #2271b1;
    text-decoration: none;
    margin: 2px;
}

.pw-job-card-file:hover {
    background: #d5e8f0;
}

/* ── 3D / Image File Preview — Thumbnail Grid, Viewer & Preview Modal ──
   The ENTIRE viewer presentation (grid, thumbnails, file-viewer, preview modal,
   scroll + arrow behaviour) is owned by the engine (pw-threejs-engine:
   assets/pw-3d-viewer.css). The board enqueues that stylesheet (handle
   "pw-3d-viewer") so it renders byte-identically to the customer pages. The
   ~370 lines of duplicate viewer CSS that used to live here were removed so
   there is a SINGLE source — change the viewer in the engine and the board,
   cart, checkout, order-received and portal all update together. */

/* ── Advance button ───────────────────────────────── */
/* ── Action buttons (now in right column) ────────── */

.pw-advance-btn {
    padding: 8px 16px;
    background: #00a32a;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.pw-advance-btn:hover {
    background: #008a20;
}

.pw-advance-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ── Two-tap Confirmation State ──────────────────── */
.pw-confirm-state {
    animation: pw-confirm-pulse 0.8s ease-in-out infinite alternate;
}
.pw-advance-btn.pw-confirm-state {
    background: #e68a00;
}
.pw-advance-btn.pw-confirm-state:hover {
    background: #cc7a00;
}
.pw-decision-btn.pw-confirm-state {
    background: #e68a00;
}
.pw-decision-btn.pw-confirm-state:hover {
    background: #cc7a00;
}
.pw-btn.pw-confirm-state {
    background: #e68a00 !important;
    border-color: #e68a00 !important;
    color: #fff !important;
}
.pw-btn.pw-confirm-state:hover {
    background: #cc7a00 !important;
    border-color: #cc7a00 !important;
}
@keyframes pw-confirm-pulse {
    from { opacity: 1; }
    to   { opacity: 0.75; }
}

/* ── Manual Decision Buttons ─────────────────────── */
.pw-decision-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}
.pw-decision-label {
    font-size: 12px;
    font-weight: 600;
    color: #9b59b6;
    white-space: nowrap;
}
.pw-decision-btn {
    padding: 6px 14px;
    background: #9b59b6;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.pw-decision-btn:hover {
    background: #8e44ad;
}
.pw-decision-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ── Packing group ────────────────────────────────── */
/* ── Packing Layout (sidebar + main) ──────────────── */
.pw-packing-layout {
    display: flex;
    gap: 16px;
    /* Fill the scrollable content area; both panels scroll independently */
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

.pw-packing-sidebar {
    width: 22%;
    min-width: 200px;
    max-width: 300px;
    flex-shrink: 0;
    background: #f9f9f9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* No sticky/fixed — height is controlled by flex parent */
}

.pw-packing-sidebar-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pw-packing-sidebar-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    cursor: pointer;
    border-radius: 6px;
    border: none;
    background: transparent;
    transition: background 0.15s, box-shadow 0.15s;
    user-select: none;
}
.pw-packing-sidebar-entry:hover {
    background: #ebebeb;
}
.pw-packing-sidebar-entry--active {
    background: #e8f4fd;
    box-shadow: none;
}

.pw-sidebar-name {
    font-size: 13px;
    font-weight: 500;
    color: #1d2327;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}

.pw-sidebar-badges {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.pw-sidebar-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
.pw-sidebar-badge--red { background: #f8d7da; color: #721c24; }
.pw-sidebar-badge--green { background: #d4edda; color: #155724; }
.pw-sidebar-badge--blue { background: #d6ecf5; color: #1a5276; }

.pw-packing-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Scrollable cards area inside packing main */
.pw-packing-groups-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.pw-packing-group {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.pw-packing-group-header {
    background: #f6f7f7;
    padding: 14px 16px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.pw-packing-group-customer {
    font-weight: 600;
    font-size: 14px;
    color: #1d2327;
}

.pw-packing-group-address {
    font-size: 12px;
    color: #787c82;
}

.pw-packing-group-date {
    font-size: 12px;
    color: #787c82;
}

/* 9.2.6: collapsible groups + header button + ready tint */
.pw-packing-group-headleft {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pw-packing-group-headright {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.pw-packing-group-chevron {
    font-size: 11px;
    color: #787c82;
    width: 12px;
    text-align: center;
}
.pw-packing-group-count {
    white-space: nowrap;
}
.pw-packing-group-btnslot {
    display: inline-flex;
}
.pw-packing-group--collapsed .pw-packing-group-body {
    display: none;
}
.pw-packing-group--collapsed .pw-packing-group-header {
    border-bottom: none;
}
.pw-packing-group--ready {
    background: #f0faf2;
    border-color: #bfe6cb;
}
.pw-packing-group--ready .pw-packing-group-header {
    background: #e7f6ec;
}
.pw-packing-group-headright .pw-merge-btn {
    padding: 6px 14px;
    font-size: 13px;
}

/* 9.2.7: centred scan-to-pack toast stack (packing view) */
.pw-scan-toast-stack {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.pw-scan-toast {
    padding: 18px 34px;
    border-radius: 12px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.pw-scan-toast--in {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.pw-scan-toast--success { background: #1e8e3e; }
.pw-scan-toast--warn    { background: #e8830c; }
.pw-scan-toast--error   { background: #c5221f; }

/* ── Packing Item Cards — Collapsible ─────────── */
.pw-packing-item {
    border-bottom: 1px solid #f0f0f1;
}

.pw-packing-item:last-child {
    border-bottom: none;
}

.pw-packing-item--packed {
    opacity: 0.5;
    background: #f9f9f9;
}
.pw-packing-item--packed .pw-packing-item-order {
    text-decoration: line-through;
}

.pw-packing-item--in-production {
    opacity: 0.55;
    background: #fafafa;
    border-left: 3px solid #f0c674;
}

.pw-packing-item-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: default;
}

.pw-packing-item-summary input[type="checkbox"] {
    width: 28px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
}

.pw-in-production-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.pw-packing-item-order {
    font-weight: 600;
    font-size: 13px;
    color: #1d2327;
    flex-shrink: 0;
}

.pw-packing-item-date {
    font-size: 11px;
    color: #787c82;
}

.pw-packing-expand-btn {
    margin-left: auto;
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 14px;
    color: #787c82;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pw-packing-expand-btn:hover {
    background: #f0f0f1;
    color: #1d2327;
}

.pw-packing-item-detail {
    display: none;
    padding: 8px 16px 14px 50px;
    border-top: 1px dashed #e8e8e8;
}

.pw-packing-detail-row {
    margin-bottom: 6px;
    font-size: 13px;
}

.pw-packing-detail-epo {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.pw-packing-epo-row {
    display: flex;
    gap: 6px;
    font-size: 12px;
    line-height: 1.6;
}

.pw-packing-epo-label {
    color: #787c82;
    white-space: nowrap;
}

.pw-packing-epo-value {
    color: #1d2327;
    font-weight: 500;
}

.pw-packing-detail-files {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pw-overdue-tag {
    display: inline-block;
    padding: 1px 6px;
    background: #f8d7da;
    color: #721c24;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.pw-courier-tag {
    display: inline-block;
    padding: 1px 6px;
    background: #e8f4fd;
    color: #2271b1;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
}

.pw-station-tag {
    display: inline-block;
    padding: 1px 6px;
    background: #fff3cd;
    color: #856404;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
}

.pw-packing-group-footer {
    padding: 12px 16px;
    background: #f6f7f7;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.pw-merge-btn {
    padding: 10px 24px;
    background: #8e44ad;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pw-merge-btn:hover {
    background: #7d3c98;
}

.pw-merge-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Merge modal form */
.pw-merge-form {
    margin: 12px 0;
}
.pw-merge-form label {
    display: block;
    font-weight: 600;
    margin: 10px 0 4px;
    font-size: 13px;
}
.pw-merge-form label:first-child {
    margin-top: 0;
}
.pw-merge-courier {
    width: 100%;
    padding: 8px;
    font-size: 13px;
}
.pw-merge-cost {
    width: 120px;
    padding: 8px;
    font-size: 13px;
}
.pw-merge-free-label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 400 !important;
    margin-top: 8px !important;
    cursor: pointer;
}
.pw-merge-free-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
.pw-merge-remake-note {
    font-size: 11px;
    color: #2271b1;
    font-style: italic;
}
/* 7.2.2: Free-delivery lock note — shown when an eligible customer's order
   meets the selected courier's threshold (shipping locked free). */
.pw-merge-free-locked-note {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #135e2b;
    background: #edfaf1;
    border: 1px solid #a7e0bd;
    border-radius: 4px;
}

/* ── 6.7.4: Prices at time of order info block ─────── */
/* Read-only display of which couriers were on the source orders
   in the merging group and what prices the customer was charged.
   Shown below the courier dropdown. */
.pw-merge-prices {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f6f7f8;
    border: 1px solid #e0e2e6;
    border-radius: 4px;
    font-size: 12px;
}
.pw-merge-prices-title {
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pw-merge-prices-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    gap: 12px;
}
.pw-merge-prices-row + .pw-merge-prices-row {
    border-top: 1px dashed #d8dadd;
}
.pw-merge-prices-courier {
    color: #333;
    font-weight: 500;
}
.pw-merge-prices-values {
    color: #666;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Dispatch overview ────────────────────────────── */
/* ── Coming to QC (6.6.3) ─────────────────────────── */
/* Replaces flat "Today's Dispatch" with three urgency buckets:
   Overdue (red), At Risk (amber), Today (neutral). */
.pw-coming-section {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed #ddd;
}

.pw-coming-section-header {
    font-size: 14px;
    font-weight: 600;
    color: #50575e;
    margin-bottom: 12px;
}

.pw-coming-bucket {
    margin-bottom: 14px;
}

.pw-coming-bucket:last-child {
    margin-bottom: 0;
}

.pw-coming-bucket-header {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pw-coming-bucket-header--overdue { color: #d63638; }
.pw-coming-bucket-header--at-risk { color: #dba617; }
.pw-coming-bucket-header--today   { color: #787c82; }

.pw-coming-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 4px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.pw-coming-row--overdue { border-left: 3px solid #d63638; }
.pw-coming-row--at-risk { border-left: 3px solid #dba617; }
.pw-coming-row--today   { border-left: 3px solid #c3c4c7; }

.pw-coming-row-left {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 6.6.4: Date pill in the middle of overdue rows. */
.pw-coming-row-due {
    font-size: 12px;
    font-weight: 600;
    color: #a3231f;
    background: #fdecea;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

/* 6.6.4: Stations stacked vertically — one chip per in-progress station. */
.pw-coming-row-stations {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    flex-shrink: 0;
}

.pw-coming-station {
    font-size: 12px;
    color: #50575e;
    background: #f6f7f7;
    border: 1px solid #e5e7eb;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.4;
}

.pw-coming-station--none {
    color: #a7aaad;
    background: transparent;
    border-color: transparent;
}

/* ── Empty state ──────────────────────────────────── */
.pw-board-empty {
    text-align: center;
    padding: 40px 20px;
    color: #787c82;
}

.pw-board-empty h3 {
    margin: 0 0 8px;
    color: #50575e;
}

.pw-board-error {
    text-align: center;
    padding: 40px 20px;
    color: #d63638;
    background: #fcf0f1;
    border-radius: 8px;
}

/* ── Loading ──────────────────────────────────────── */
.pw-loading {
    text-align: center;
    padding: 40px;
    color: #787c82;
}

.pw-loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: pw-spin 0.6s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes pw-spin {
    to { transform: rotate(360deg); }
}

/* ── Notices ──────────────────────────────────────── */
.pw-notice {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    animation: pw-notice-in 0.3s ease;
}

.pw-notice--success {
    background: #edfaef;
    color: #00a32a;
    border: 1px solid #b8e6c8;
}

.pw-notice--error {
    background: #fcf0f1;
    color: #d63638;
    border: 1px solid #f0c0c1;
}

.pw-notice--info {
    background: #e8f4fd;
    color: #2271b1;
    border: 1px solid #b0d4f1;
}

@keyframes pw-notice-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Card Exit Animation ─────────────────────────── */
.pw-job-card {
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

.pw-card-exit {
    opacity: 0.3;
    transform: translateX(40px);
}

.pw-card-exit--collapse {
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    opacity: 0;
}

/* ── Packing Group Exit Animation ────────────────── */
.pw-group-exit {
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 0;
    transform: scale(0.95);
}

/* ── Badge Flash Animation ───────────────────────── */
.pw-badge-flash {
    animation: pw-badge-pulse 0.4s ease;
}

@keyframes pw-badge-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ── Packing Item Highlights ─────────────────────── */
.pw-packing-item--highlight-green {
    background: #edfaef;
    transition: background 0.6s ease;
}

.pw-packing-item--highlight-clear {
    background: #fff;
    transition: background 0.6s ease;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .pw-board-tabs {
        width: 100%;
    }
    .pw-board-tab {
        flex: 1;
        text-align: center;
        padding: 8px 8px;
        font-size: 12px;
    }
    .pw-job-card {
        grid-template-columns: 1fr auto auto;
    }
    .pw-card-action-col {
    }
    .pw-body-columns {
        flex-direction: column;
    }
    .pw-body-files {
        max-width: 100%;
    }
    /* 10.11.74 (card #703): the 50% ceiling is a ceiling on a column that has
       something beside it. Once the two stack there is nothing beside it, so it
       takes the phone's full width like the files do. */
    .pw-body-text {
        max-width: 100%;
    }
    .pw-packing-group-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .pw-packing-layout {
        flex-direction: column;
    }
    .pw-packing-sidebar {
        width: 100%;
        max-height: 200px;
    }
    .pw-packing-item-summary {
        flex-wrap: wrap;
        gap: 6px;
    }
    .pw-packing-item-detail {
        padding-left: 16px;
    }
}

/* ═══════════════════════════════════════════════════
   Manager Board (v0.9.0)
   ═══════════════════════════════════════════════════ */

/* Manager tabs — same visual style as station tabs */
.pw-board-tabs--manager {
    background: #f0f0f1;
    padding: 3px;
    border-radius: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.pw-board-tab--mgr {
    /* Legacy class — neutralised. Styling now via pw-board-tab--station */
}
.pw-board-tabs--stations {
    border-radius: 6px;
}

/* ── Station-coloured tabs ────────────────────────── */
.pw-board-tab--station {
    border-bottom: 3px solid transparent;
    border-bottom-color: var(--station-color, #3498db);
}
.pw-board-tab--station.pw-board-tab--active {
    background: var(--station-color, #3498db) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pw-board-tab--station.pw-board-tab--active .pw-badge {
    background: rgba(255,255,255,0.3);
    color: #fff;
}
.pw-board-tab--station:hover:not(.pw-board-tab--active) {
    background: color-mix(in srgb, var(--station-color, #3498db) 12%, transparent);
}

/* ── Station dot in All Jobs ─────────────────────── */
.pw-station-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--station-color, #3498db);
    margin-right: 6px;
    vertical-align: middle;
}
.pw-col-station {
    display: flex;
    align-items: center;
}

/* ── Scrollable station tabs ─────────────────────── */
.pw-station-tabs-wrapper {
    display: flex;
    align-items: stretch;
    position: relative;
    min-width: 0;
    max-width: 100%;
}
.pw-board-tabs--scrollable {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
}
.pw-board-tabs--scrollable::-webkit-scrollbar {
    display: none;
}
.pw-tabs-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    background: #e0e0e0;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #50575e;
    transition: background 0.15s;
    z-index: 2;
}
.pw-tabs-arrow:hover {
    background: #c3c4c7;
}
.pw-tabs-arrow--left {
    border-radius: 0 0 0 6px;
}
.pw-tabs-arrow--right {
    border-radius: 0 0 6px 0;
}
/* Remove unused divider class */
.pw-tabs-divider { display: none; }

/* ── Station strip collapse (v6.0.6) ─────────────────
   Workers always see the full scrollable strip above. Managers / directors /
   sales / support see a single "Stations ▾ N ●" pill rendered in place of the
   strip; the tapping it opens an overlay that floats over the content area. */

/* Board root gets position: relative so the overlay anchors correctly. */
.pw-board {
    position: relative;
}

.pw-station-tabs-wrapper--collapsed {
    padding: 0;
    border: 0;
}

.pw-station-collapse-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #c3c4c7;
    color: #1d2327;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    font-family: inherit;
}
.pw-station-collapse-pill:hover {
    background: #f6f7f7;
    border-color: #8c8f94;
}
.pw-station-collapse-pill--open {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}
.pw-station-collapse-pill__arrow {
    font-size: 10px;
    transition: transform 0.2s;
    display: inline-block;
}
.pw-station-collapse-pill--open .pw-station-collapse-pill__arrow {
    transform: rotate(180deg);
}
.pw-station-collapse-pill__count {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
}
.pw-station-collapse-pill--open .pw-station-collapse-pill__count {
    background: rgba(255, 255, 255, 0.25);
}
.pw-station-collapse-pill__urgency {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: none;
    flex-shrink: 0;
}
.pw-station-collapse-pill__urgency--overdue {
    display: inline-block;
    background: #d63638;
}
.pw-station-collapse-pill__urgency--at-risk {
    display: inline-block;
    background: #dba617;
}

.pw-station-overlay {
    position: absolute;
    left: 24px;
    right: 24px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 12px;
    z-index: 40;
    max-height: 60vh;
    overflow-y: auto;
    /* top is set inline by renderStationOverlayBody() based on header.offsetHeight */
}
.pw-station-overlay-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Reset min-width inside the overlay so pills can shrink and wrap naturally */
.pw-station-overlay .pw-board-tab {
    flex: 0 0 auto;
}

/* ── Modal (frontend) ────────────────────────────── */
.pw-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}
.pw-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
}
.pw-modal h2 {
    margin: 0 0 20px;
    font-size: 18px;
    color: #1d2327;
}
.pw-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

/* ── Button styles (frontend) ────────────────────── */
.pw-board .pw-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    text-decoration: none;
}
.pw-board .pw-btn--primary { background: #2271b1; color: #fff; border-color: #2271b1; }
.pw-board .pw-btn--primary:hover { background: #135e96; }
.pw-board .pw-btn--secondary { background: #f0f0f1; color: #1d2327; border-color: #c3c4c7; }
.pw-board .pw-btn--secondary:hover { background: #e0e0e0; }
.pw-board .pw-btn--warning { background: #dba617; color: #fff; border-color: #dba617; }
.pw-board .pw-btn--warning:hover { background: #b8860b; }
.pw-board .pw-btn--warning:disabled { background: #e0c97a; cursor: wait; }
.pw-board .pw-btn--success { background: #46b450; color: #fff; border-color: #46b450; cursor: default; }
.pw-board .pw-btn--small { padding: 4px 10px; font-size: 12px; }
/* Modal button overrides — inherits from .pw-btn if inside modal */
.pw-modal .pw-btn--primary,
.pw-modal #pw-m-save { background: #2271b1; color: #fff; border: 1px solid #2271b1; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.pw-modal .pw-btn--secondary,
.pw-modal #pw-m-cancel { background: #f0f0f1; color: #1d2327; border: 1px solid #c3c4c7; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; }

/* Station checkboxes in modal */
.pw-station-checkboxes label {
    display: block;
    margin: 8px 0;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 4px;
}
.pw-station-checkboxes label:hover {
    background: #f6f7f7;
}
.pw-station-checkboxes input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2);
}

/* Search bar */
.pw-search-bar {
    margin: 12px 0;
}
.pw-search-input {
    width: 100%;
    max-width: 400px;
    padding: 12px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}
.pw-search-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}
.pw-station-panel .pw-search-bar {
    margin: 8px 0 4px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.pw-station-panel .pw-station-search {
    padding: 8px 10px;
    font-size: 13px;
    flex: 1;
}
.pw-product-filter-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0 8px;
}
.pw-product-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #f0f0f1;
    color: #50575e;
    cursor: pointer;
    min-height: 38px;
    white-space: nowrap;
}
.pw-product-btn:active {
    transform: scale(0.97);
}
.pw-product-btn--active {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}
.pw-urgency-btn--overdue.pw-product-btn--active {
    background: #d63638;
    border-color: #d63638;
}
.pw-urgency-btn--at-risk.pw-product-btn--active {
    background: #dba617;
    border-color: #dba617;
}
/* Requests filter bar — search + dropdown side by side */
.pw-requests-filter-bar {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pw-requests-filter-bar .pw-search-input {
    flex: 1;
}
.pw-filter-select {
    padding: 8px 10px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    background: #fff;
    min-width: 150px;
}
.pw-filter-select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

/* Manager panel */
.pw-manager-panel {
    padding: 16px;
}

/* 7.7.2: fixed panel toolbar — the heading + search/filter row (and, on the
   In Production tab, pagination) sit in a sticky head pinned to the top of the
   scrolling #pw-board-content, so only the card list scrolls beneath it.
   #pw-board-content is the sole scroll region (the page itself never scrolls),
   so top:0 pins flush under the board header. Opaque white background matches
   the board page so cards are fully hidden as they scroll under. No overflow
   here — pill popovers (z-index:1000, anchored to .pw-tk-pill-anchor) must not
   be clipped, and the sticky head must not become their scroll/clip context. */
.pw-panel-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    padding-bottom: 10px;
    box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.12);
}

/* 7.7.3: pin the head flush to the top of the scroll area so it doesn't drift
   the panel's own top padding before sticking. Pull the head up by that padding
   and restore it inside, so the head's resting position already equals its stuck
   position (zero travel). Per panel — the two panel types pad differently. */
.pw-manager-panel > .pw-panel-head { margin-top: -16px; padding-top: 16px; }
.pw-station-panel > .pw-panel-head { margin-top: -16px; padding-top: 16px; }

/* 7.7.4: three-zone toolbar row — left search/filters, centre title, right
   pagination/actions. Left/right flex equally so the title is truly centred.
   Used as the head itself (In Production/Station/On Hold) or as an inner row
   above the sub-tabs (Completed). */
.pw-3zone {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pw-3zone .pw-head-left   { flex: 1 1 0; min-width: 0; display: flex; }
.pw-3zone .pw-head-centre { flex: 0 0 auto; }
.pw-3zone .pw-head-right  { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.pw-3zone .pw-head-left .pw-tk-row { margin: 0; width: 100%; }
.pw-3zone .pw-head-centre h3 { margin: 0; white-space: nowrap; }
.pw-3zone .pw-head-right .pw-pagination { margin: 0; padding: 0; }
.pw-manager-panel h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #1d2327;
}

/* All Jobs table */
.pw-manager-table {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
.pw-manager-row {
    display: grid;
    grid-template-columns: 70px 200px 1fr 42px 82px 82px 110px 110px 44px;
    gap: 8px;
    padding: 8px 12px;
    align-items: center;
    border-bottom: 1px solid #f0f0f1;
    font-size: 13px;
}
.pw-manager-row--clickable {
    cursor: pointer;
}
.pw-manager-row--clickable:hover {
    background: #f0f6fc;
}
.pw-expand-toggle {
    font-size: 10px;
    color: #888;
    text-align: center;
    user-select: none;
}
.pw-manager-row--header {
    font-weight: 600;
    color: #50575e;
    background: #f6f7f7;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Expandable detail row ───────────────────────── */
.pw-manager-detail {
    padding: 12px 16px 12px 52px;
    background: #f9fafb;
    border-bottom: 1px solid #e0e0e0;
}
.pw-manager-detail.pw-hidden {
    display: none;
}
.pw-detail-section {
    margin-bottom: 10px;
}
.pw-detail-section strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #50575e;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}
.pw-detail-opt {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    font-size: 13px;
}
.pw-detail-label {
    color: #50575e;
    font-weight: 500;
    min-width: 120px;
}
.pw-detail-value {
    color: #1d2327;
}
.pw-detail-file {
    display: block;
    font-size: 13px;
    color: #2271b1;
    text-decoration: none;
    padding: 2px 0;
}
.pw-detail-file:hover {
    text-decoration: underline;
}

/* Dispatch colour in table */
.pw-col-dispatch.pw-dispatch-overdue { color: #d63638; font-weight: 600; }
.pw-col-dispatch.pw-dispatch-today { color: #dba617; font-weight: 600; }
.pw-col-dispatch.pw-dispatch-future { color: #2271b1; }

/* Badges */
.pw-badge-qcfail {
    display: inline-block;
    background: #d63638;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.pw-badge-remake {
    display: inline-block;
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Pagination */
.pw-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 8px 0;
    justify-content: center;
    color: #50575e;
    font-size: 13px;
}

/* Team cards */

/* ── 2-column card grid ──────────────────────────── */
.pw-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}
.pw-team-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
.pw-team-card--expanded {
    border-color: #94a3b8;
    grid-column: 1 / -1;
}
.pw-team-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.pw-team-card-header:active {
    background: #f8f9fa;
}
.pw-team-card-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pw-team-card-header-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.pw-team-card-identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pw-team-card-header strong {
    font-size: 14px;
}
.pw-team-email {
    font-size: 11px;
    color: #6b7280;
}
.pw-team-arrow {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
}
.pw-team-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pw-team-role {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* 6.7.43: stated, not inherited. Without it the pill's height comes from the
       theme's body line-height, so the same badge is 16px on one site and 19px on
       another — and the customer card's label row is a fixed 18px. */
    line-height: 14px;
}
.pw-role-worker { background: #e8f0fe; color: #1a56db; }
.pw-role-director { background: #fef3c7; color: #92400e; }
.pw-role-admin { background: #fee2e2; color: #991b1b; }
.pw-role-manager { background: #dcfce7; color: #166534; }
.pw-role-temp { background: #fef9c3; color: #854d0e; }
.pw-role-sales { background: #dbeafe; color: #1e40af; }
.pw-role-sales-mgr { background: #c7d2fe; color: #3730a3; }
.pw-role-support { background: #ede9fe; color: #6d28d9; }
.pw-role-support-mgr { background: #f3e8ff; color: #7c3aed; }
.pw-role-temp-support { background: #fae8ff; color: #86198f; }
.pw-role-pin { background: #cffafe; color: #155e75; }
.pw-role-finance { background: #e0e7ff; color: #3730a3; }
.pw-role-qms { background: #fce7f3; color: #9d174d; }
.pw-btn--support { background: #8b5cf6; color: #fff; border: none; }
.pw-btn--support:hover { background: #7c3aed; }
.pw-btn--support-mgr { background: #7c3aed; color: #fff; border: none; }
.pw-btn--support-mgr:hover { background: #6d28d9; }

/* 10.3.5 — Packing group badges (teal family, distinct from Support's purple) */
.pw-role-packing { background: #ccfbf1; color: #0f766e; }
.pw-role-packing-mgr { background: #99f6e4; color: #115e59; }
.pw-role-temp-packing { background: #cffafe; color: #155e75; }

/* 10.3.5 — QC send-allowance banner (counter + lock reason) */
.pw-qc-allowance {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 0; padding: 8px 12px;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
    color: #065f46; font-size: 13px; font-weight: 600;
}
.pw-qc-allowance--locked { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pw-qc-allowance-icon { font-size: 15px; line-height: 1; }
.pw-qc-allowance-text { line-height: 1.3; }
.pw-qc-pass-btn.pw-qc-pass-locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }

/* 10.4.1 — QC "Passed QC — waiting for scan" list: the jobs currently holding
   the send-allowance down (passed QC, not yet scanned in at Packing). */
.pw-qc-pending {
    margin: 0 0 8px; padding: 8px 12px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
}
.pw-qc-pending-header {
    font-size: 12px; font-weight: 700; color: #92400e;
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
}
.pw-qc-pending-row {
    display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
    font-size: 13px; color: #78350f; border-top: 1px solid #fef3c7;
}
.pw-qc-pending-row:first-of-type { border-top: none; }
.pw-qc-pending-order { font-weight: 700; flex-shrink: 0; }
.pw-qc-pending-product { color: #92400e; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 10.3.10 — Packing receipt QR: a square pinned in the board ROOT's top-right
   CORNER, spanning BOTH header rows (the nav row #pw-board-header + the packing
   Active/Merged+counts row). Those are separate sibling elements, so the QR must be
   absolutely positioned on the root — a single element inside either row can never
   span the other. The two header rows reserve space via padding-right so their
   right-aligned content (Stations pill / counts / Done-today) doesn't slide under it. */
.pw-board { position: relative; }
.pw-receipt-panel {
    position: absolute; top: 4px; right: 8px; z-index: 30;
    width: 88px; height: 88px; box-sizing: border-box; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #99f6e4; border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.pw-receipt-qr { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pw-receipt-qr-img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.pw-receipt-qr-text { font-family: monospace; font-size: 11px; letter-spacing: 1px; color: #0f766e; }
.pw-board.pw-receipt-corner #pw-board-header { padding-right: 108px; }
.pw-board.pw-receipt-corner .pw-invoice-tab-bar { padding-right: 108px; }
.pw-btn--sales { background: #3b82f6; color: #fff; border: none; }
.pw-btn--sales:hover { background: #2563eb; }
.pw-req-remake { border-left: 4px solid #3b82f6; }
.pw-req-refund { border-left: 4px solid #f59e0b; }
.pw-req-date-change { border-left: 4px solid #8b5cf6; }

/* ── Station chips (collapsed worker cards) ──────── */
.pw-team-station-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pw-team-station-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px 2px 5px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #374151;
    white-space: nowrap;
}
.pw-team-station-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Team card expanded body ─────────────────────── */
.pw-team-card-body {
    padding: 0 16px 14px;
    border-top: 1px solid #f0f0f0;
}
.pw-team-stations-row {
    font-size: 12px;
    color: #6b7280;
    padding: 10px 0 12px;
}
.pw-team-toggle-groups {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pw-team-toggle-section {
    flex: 1;
    min-width: 160px;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 10px 14px;
}
.pw-team-toggle-group-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.pw-team-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.pw-team-toggle-label {
    flex: 1;
    font-size: 13px;
    color: #6b7280;
}
.pw-team-toggle-label--active {
    color: #1f2937;
    font-weight: 500;
}
.pw-team-toggle {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #d1d5db;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.pw-team-toggle--on {
    background: #16a34a;
}
.pw-team-toggle-knob {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.pw-team-toggle--on .pw-team-toggle-knob {
    left: 18px;
}
.pw-btn--stations-edit {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}
.pw-btn--stations-edit:hover { background: #2563eb; }
.pw-team-stations {
    font-size: 13px;
    color: #50575e;
    margin-bottom: 8px;
}
.pw-team-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.pw-team-note {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

/* ── Manager In Production cards ──────────────────── */
.pw-manager-job-card .pw-card-col-date { text-align: right; }
/* 6.4.4: wrapper holds one or more station pills (parallel branches) */
.pw-card-station-pill-wrap {
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: start;
    padding: 10px 14px 6px 10px;
}
.pw-card-station-pill-wrap .pw-card-station-pill {
    grid-row: auto;
    padding: 0;
}
.pw-card-station-pill {
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 6px 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    align-self: start;
}
.pw-station-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Notes badge */
.pw-badge-notes { background: #e8f0fe; color: #1a56db; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 500; }

/* Requests sub-tab bar */
.pw-requests-subtab-bar { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid #e5e7eb; }
.pw-requests-subtab {
    padding: 10px 20px; border: none; background: transparent; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #6b7280; border-bottom: 3px solid transparent;
    margin-bottom: -2px; transition: color 0.15s, border-color 0.15s;
}
.pw-requests-subtab:hover { color: #374151; }
.pw-requests-subtab--active { color: #1d4ed8; border-bottom-color: #1d4ed8; }

.pw-btn--danger {
    background: #d63638 !important;
    color: #fff !important;
    border-color: #d63638 !important;
}
.pw-btn--danger:hover {
    background: #b32d2e !important;
}
.pw-btn--manager-grant {
    background: #166534 !important;
    color: #fff !important;
    border-color: #166534 !important;
}
.pw-btn--manager-grant:hover {
    background: #14532d !important;
}

/* Dispatched cards */
.pw-dispatched-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: #fff;
}
.pw-dispatched-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.pw-dispatched-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.pw-dispatched-header-left strong {
    font-size: 14px;
}
.pw-dispatched-meta-date {
    font-size: 12px;
    color: #787c82;
}
.pw-dispatched-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pw-tracking {
    background: #f0f6fc;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #2271b1;
}
/* Clickable variant — same chip, now a link to the courier's tracking page. */
.pw-tracking--link {
    text-decoration: none;
    cursor: pointer;
}
.pw-tracking--link:hover {
    background: #dce9f7;
    text-decoration: underline;
}
/* Reinstate panel on Cancelled cards (manager initiates → director approves). */
.pw-reinstate-panel {
    margin: 8px 0 4px;
    padding: 8px 10px;
    background: #f6f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
.pw-reinstate-tag { font-weight: 600; color: #2271b1; }
.pw-reinstate-by { color: #50575e; font-size: 12px; }
.pw-reinstate-reason { font-style: italic; color: #50575e; font-size: 12px; margin-top: 4px; }
.pw-reinstate-actions { margin-top: 8px; }
.pw-reinstate-await { margin-top: 6px; font-size: 12px; color: #996800; }
.pw-reinstate-deadline { margin-left: 10px; font-size: 11px; color: #787c82; }
.pw-reinstate-closed { font-size: 12px; color: #787c82; }
.pw-req-reinstate { border-left: 4px solid #2271b1; }
.pw-dispatched-meta {
    font-size: 13px;
    color: #50575e;
    margin-bottom: 8px;
}
.pw-price-struck {
    text-decoration: line-through;
    color: #999;
    margin-right: 4px;
}
.pw-badge-cn-pending {
    display: inline-block;
    background: #dba617;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.pw-dispatched-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 4px 0;
    border-top: 1px solid #f0f0f1;
    margin-top: 4px;
}
.pw-dispatched-refund-order-row {
    padding: 8px 0 4px 0;
    border-top: 1px solid #f0f0f1;
    margin-top: 8px;
}
.pw-dispatched-card--expanded {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}
.pw-dispatched-items {
    border-top: 1px solid #f0f0f1;
    padding-top: 8px;
    margin-top: 8px;
}
.pw-dispatched-item {
    padding: 8px 10px;
    border-bottom: 1px solid #f6f7f7;
}
.pw-dispatched-item--alt {
    background: #f6f7f8;
    border-radius: 4px;
}
.pw-dispatched-merge-from {
    font-size: 12px;
    color: #787c82;
    margin-top: 2px;
}
.pw-dispatched-item-source {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #50575e;
    background: #eef0f2;
    border-radius: 4px;
    padding: 1px 7px;
    margin-right: 8px;
}
.pw-dispatched-item:last-child {
    border-bottom: none;
}
.pw-dispatched-item-actions {
    margin-top: 4px;
}

@media (max-width: 768px) {
    .pw-manager-row {
        grid-template-columns: 20px 1fr 1fr;
        gap: 4px;
    }
    .pw-manager-row--header {
        display: none;
    }
    .pw-board-tab--mgr {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .pw-manager-detail {
        padding-left: 16px;
    }
}

/* ── QC Pass/Fail Buttons ──────────────────────────── */
.pw-qc-pass-btn {
    background: #2e7d32 !important;
    border-color: #2e7d32 !important;
}
.pw-qc-pass-btn:hover {
    background: #1b5e20 !important;
}
.pw-qc-fail-btn {
    background: #d63638 !important;
    color: #fff !important;
    border-color: #d63638 !important;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}
.pw-qc-fail-btn:hover {
    background: #b71c1c !important;
    border-color: #b71c1c !important;
}
.pw-card-action-btns .pw-qc-pass-btn,
.pw-card-action-btns .pw-qc-fail-btn {
    flex: 1;
    border: none;
}

/* 10.10.6 — QC independence: a solo pass waiting for its second check.
   Lightness-based (no red/green meaning — colour-vision safe, §house rule). */
.pw-qc-second-check-note {
    margin: 0 0 6px;
    padding: 4px 8px;
    background: #fff8e1;
    border: 1px solid #e0c36a;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
}
.pw-qc-pass-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── QC Fail Notes below header ───────────────────── */
.pw-card-fail-section {
    margin: -4px 0 6px;
    padding: 4px 8px;
    background: #fef0f0;
    border: 1px solid #f5c6c6;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #555;
}
.pw-fail-notes-label {
    font-weight: 600;
    color: #d63638;
}
.pw-fail-notes-text {
    font-style: italic;
}

/* ── QC Fail Modal ─────────────────────────────────── */
.pw-qc-fail-modal .pw-modal-subtitle {
    color: #666;
    font-size: 14px;
    margin: -12px 0 16px;
}
.pw-form-group {
    margin-bottom: 16px;
}
.pw-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
    color: #1d2327;
}
.pw-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}
.pw-select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}
.pw-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.pw-textarea:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}
.pw-char-count {
    display: block;
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
.pw-qc-fail-info {
    background: #fff8e1;
    border: 1px solid #f9e79f;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    color: #856404;
}
.pw-qc-confirm-fail-btn {
    background: #d63638 !important;
    color: #fff !important;
    border-color: #d63638 !important;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.pw-qc-confirm-fail-btn:hover {
    background: #b71c1c !important;
    border-color: #b71c1c !important;
}

/* ── Pending Requests Bar ─────────────────────────── */
.pw-pending-bar-wrap {
    margin: 0 0 12px;
}
.pw-pending-toggle {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: #fff8e1;
    border: 1px solid #f9e79f;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #856404;
    cursor: pointer;
    text-align: left;
}
.pw-pending-toggle:hover {
    background: #fef3cd;
}
.pw-pending-cards {
    margin-top: 6px;
}
.pw-pending-card {
    padding: 8px 12px;
    background: #fffbf0;
    border: 1px solid #f0e0b0;
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 12px;
    opacity: 0.85;
}
.pw-pending-card-header {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pw-pending-badge {
    font-weight: 700;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
}
.pw-pending-badge--qc_fail { background: #d63638; }
.pw-pending-badge--hold { background: #dba617; color: #333; }
.pw-pending-badge--cancel { background: #787c82; }
.pw-pending-ago {
    margin-left: auto;
    color: #999;
    font-size: 11px;
}
.pw-pending-card-detail {
    margin-top: 4px;
    color: #666;
    font-style: italic;
}

/* ── Request Menu (⋯ button) ─────────────────────── */
.pw-request-menu-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #666;
    margin-left: 8px;
}
.pw-request-menu-btn:hover {
    background: #f0f0f0;
    color: #333;
}
.pw-request-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    min-width: 180px;
}
.pw-request-menu-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
}
.pw-request-menu-item:hover {
    background: #f0f0f0;
}
.pw-request-menu-item--danger:hover {
    background: #fef0f0;
    color: #d63638;
}
.pw-job-card {
    position: relative;
}

/* ── Manager Requests Tab ─────────────────────────── */
.pw-request-card {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 6px;
    border-left: 4px solid #ccc;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pw-req-qcfail { border-left-color: #d63638; }
.pw-req-hold { border-left-color: #dba617; }
.pw-req-cancel { border-left-color: #787c82; }
.pw-req-invoice-undo { border-left-color: #2271b1; }
.pw-badge-pending-undo {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #996800;
    background: #fcf0c3;
    padding: 3px 10px;
    border-radius: 3px;
    white-space: nowrap;
}
.pw-request-type {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}
.pw-request-info {
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.5;
}
.pw-request-detail {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}
.pw-request-reason {
    font-style: italic;
    color: #666;
    font-size: 13px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #f9f9f9;
    border-radius: 4px;
}
.pw-request-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Phase 6.6: Station Fail / Flag Problem (v1.8.0) ── */

.pw-badge-flagged {
    background: #ff9800;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.pw-flag-btn {
    background: #ff9800 !important;
    color: #fff !important;
    border: none;
    font-size: 13px;
}
.pw-flag-btn:hover {
    background: #f57c00 !important;
}
.pw-flagged-awaiting {
    display: inline-block;
    padding: 6px 12px;
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}
.pw-job-card.pw-job-card--flagged {
    border-left: 4px solid #ff9800;
}

/* 6.5.2 — In Production card outlines for pending requests.
   Distinct from overdue red so the two signals don't collide visually. */
.pw-manager-job-card--pending-hold {
    border: 2px solid #e0a800;
    box-shadow: 0 0 0 1px #e0a800 inset;
}
.pw-manager-job-card--pending-cancel {
    border: 2px dashed #d9534f;
    box-shadow: 0 0 0 1px #d9534f inset;
}
.pw-manager-job-card--pending-fail {
    border: 2px solid #ff9800;
    box-shadow: 0 0 0 1px #ff9800 inset;
}
.pw-packing-item--flagged {
    border-left: 4px solid #ff9800;
    opacity: 0.7;
}
.pw-packing-item--flagged .pw-packing-item-summary input[type="checkbox"] {
    opacity: 0.4;
    pointer-events: none;
}
.pw-packing-item-blocked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 14px;
    flex-shrink: 0;
}
/* 10.4.1 — 4th packing state: reached the bench, but the load hasn't been
   scanned in yet, so it can't be packed. Distinct from the plain not-packed
   square (a lock in place of the tick + an amber rail + a SCAN LOAD tag). */
.pw-packing-item--awaiting-scan {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}
.pw-packing-item-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 14px;
    flex-shrink: 0;
}
.pw-awaiting-scan-tag {
    display: inline-block;
    font-size: 10px; font-weight: 700; letter-spacing: .4px;
    color: #92400e; background: #fde68a;
    border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.pw-packing-flag-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}
.pw-flag-modal h2 {
    color: #e65100;
}
.pw-flag-confirm-btn {
    background: #ff9800 !important;
    color: #fff !important;
}
.pw-flag-confirm-btn:hover {
    background: #f57c00 !important;
}
.pw-req-stationfail {
    border-left: 4px solid #ff9800;
}
.pw-req-stationfail .pw-request-type {
    color: #e65100;
}
.pw-btn--hold {
    background: #7b1fa2 !important;
    color: #fff !important;
}
.pw-btn--hold:hover {
    background: #6a1b9a !important;
}
.pw-request-menu-item--flag {
    color: #e65100;
}
.pw-request-menu-item--flag:hover {
    background: #fff3e0;
}

/* ── Cancel Confirmation Modal (v1.8.3) ── */
.pw-cancel-confirm-modal h2 {
    color: #c62828;
}
.pw-cancel-confirm-instruction {
    font-weight: 600;
    margin-top: 12px;
}
.pw-cancel-confirm-modal .pw-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-top: 4px;
    box-sizing: border-box;
}
.pw-cancel-confirm-modal .pw-input:focus {
    border-color: #c62828;
    outline: none;
}

/* ── REWORK Badge (v1.9.0) ── */
.pw-badge-rework {
    display: inline-block;
    background: #e65100;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ── History Link in Card Header (v1.9.0) ── */
.pw-history-link {
    background: none;
    border: 1px solid #ddd;
    color: #2271b1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    margin-top: 10px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-block;
}
.pw-history-link:hover {
    background: #e8f4fd;
    border-color: #2271b1;
    color: #135e96;
}

/* ── Note Menu Item (v1.9.0) ── */
.pw-request-menu-item--note {
    color: #2271b1;
}

/* ── History Modal & Timeline (v1.9.0) ── */
.pw-history-modal {
    max-width: 560px;
    width: 95vw;
}
.pw-history-modal h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.pw-timeline {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}
.pw-timeline-loading {
    min-height: 100px;
}

.pw-timeline-origin {
    font-size: 12px;
    color: #787c82;
    padding: 6px 8px;
    background: #f6f7f7;
    border-radius: 4px;
    margin-bottom: 8px;
}

.pw-timeline-entry {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f1;
    align-items: flex-start;
}
.pw-timeline-entry:last-child {
    border-bottom: none;
}

.pw-timeline-icon {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    font-size: 14px;
    padding-top: 1px;
}

.pw-timeline-body {
    flex: 1;
    min-width: 0;
}

.pw-timeline-desc {
    font-size: 13px;
    color: #1d2327;
    word-wrap: break-word;
}

.pw-timeline-time {
    font-size: 11px;
    color: #a7aaad;
    margin-top: 2px;
}

/* Note/reason bubble — visually distinct from description */
.pw-timeline-bubble {
    background: #f0f6fc;
    border-left: 3px solid #72aee6;
    padding: 6px 10px;
    margin: 4px 0 2px;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: #1d2327;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Compact advance group */
.pw-timeline-entry--compact {
    background: #f9f9f9;
    border-radius: 4px;
    padding: 6px 8px;
}
.pw-timeline-entry--compact .pw-timeline-desc {
    color: #50575e;
}

/* Notes / History filter tab bar */
.pw-notes-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    border-bottom: 2px solid #f0f0f1;
    padding-bottom: 0;
}
.pw-notes-tab {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: #787c82;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
}
.pw-notes-tab:hover {
    color: #1d2327;
}
.pw-notes-tab--active {
    color: #1d2327;
    font-weight: 600;
    border-bottom-color: #2271b1;
}

/* Dispatched history — grouped timeline */
.pw-timeline-group-header {
    padding: 6px 10px;
    background: #f0f0f1;
    border-left: 3px solid #2271b1;
    font-size: 13px;
    margin-bottom: 4px;
    margin-top: 12px;
    border-radius: 2px;
}
.pw-timeline-group-header:first-child {
    margin-top: 0;
}
.pw-timeline-group-header--shipment {
    border-left-color: #d63638;
}
.pw-timeline-origin-tag {
    color: #787c82;
    font-size: 11px;
}
.pw-timeline-group {
    padding-left: 12px;
    margin-bottom: 8px;
}

/* ── 10.2.2: merged-order history — per-line foldable groups + forward jump ── */
.pw-merged-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 2px 10px;
}
.pw-merged-count {
    font-size: 12px;
    color: #646970;
}
.pw-merged-toggle-all {
    background: #f0f2f5;
    border: 1px solid #d5d9df;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #2c3338;
    cursor: pointer;
}
.pw-merged-toggle-all:hover { background: #e5e8ec; }
.pw-merged-line {
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    margin: 0 0 8px;
    overflow: hidden;
    background: #fff;
}
.pw-merged-line-header {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f6f7f9;
}
.pw-merged-line-toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 12px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}
.pw-merged-line-toggle:hover { background: #eef0f3; }
.pw-merged-line-arrow {
    flex: 0 0 auto;
    width: 12px;
    color: #787c82;
    font-size: 11px;
}
.pw-merged-line-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-merged-flag {
    flex: 0 0 auto;
    color: #d63638;
    font-size: 10px;
    line-height: 1;
}
.pw-merged-open {
    flex: 0 0 auto;
    margin-right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #2271b1;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.pw-merged-open:hover { background: #e5f0f8; text-decoration: underline; }
.pw-merged-line-body {
    padding: 4px 12px 8px;
}
.pw-merged-line--collapsed .pw-merged-line-body { display: none; }
.pw-merged-line--focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
}
.pw-timeline-merged-jump {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 8px 12px;
    background: #eef5fb;
    border: 1px solid #cfe2f2;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #135e96;
    text-align: left;
}
.pw-timeline-merged-jump:hover { background: #e1eef9; }

/* ── Note Modal (v1.9.0) ── */
.pw-note-modal {
    max-width: 480px;
    width: 95vw;
}
.pw-note-modal h2 {
    margin: 0 0 12px;
    font-size: 18px;
}
.pw-note-modal textarea.pw-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 2px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    box-sizing: border-box;
}
.pw-note-modal textarea.pw-input:focus {
    border-color: #2271b1;
    outline: none;
}
.pw-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.pw-modal-close {
    margin-top: 12px;
    width: 100%;
}
.pw-char-count {
    font-size: 11px;
    color: #a7aaad;
    display: block;
    text-align: right;
    margin-top: 2px;
}
.pw-char-ok {
    color: #00a32a;
}

/* ── Dispatched Section Headers (v1.9.2) ── */
.pw-section-header {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    margin: 16px 0 8px;
}
.pw-section-header:first-of-type {
    margin-top: 8px;
}
.pw-section-header--awaiting {
    background: #fef3cd;
    color: #856404;
    border-left: 3px solid #e0a800;
}
.pw-section-header--dispatched {
    background: #d1ecf1;
    color: #0c5460;
    border-left: 3px solid #17a2b8;
}
.pw-badge-awaiting {
    display: inline-block;
    background: #e0a800;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.pw-dispatched-card--awaiting {
    border-left: 3px solid #e0a800;
}
.pw-badge-cancelled {
    display: inline-block;
    background: #9e9e9e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.pw-dispatched-card--cancelled {
    border-left: 3px solid #9e9e9e;
    opacity: 0.92;
}
.pw-modal-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 8px 0 12px 0;
    font-size: 13px;
}

/* 6.5.10 — Ack card */
.pw-ack-card {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.pw-ack-card--cancel {
    border: 2px solid #d9534f;
}
.pw-ack-card--hold {
    border: 2px solid #e0a800;
}
.pw-ack-banner {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: #fff;
}
.pw-ack-card--cancel .pw-ack-banner { background: #d9534f; }
.pw-ack-card--hold   .pw-ack-banner { background: #e0a800; }
.pw-ack-info {
    padding: 10px 14px;
    font-size: 13px;
    color: #1d2327;
}
.pw-ack-row strong { font-weight: 700; }
.pw-ack-qty { color: #50575e; }
.pw-ack-product { color: #1d2327; }
.pw-ack-customer { color: #50575e; }
.pw-ack-btn {
    margin: 0 14px 14px 14px;
    background: #2271b1;
    color: #fff;
    align-self: flex-start;
}

/* 6.5.3 — Lane picker for multi-role workers */
.pw-lane-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.pw-lane-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
.pw-lane-option:hover {
    background: #f0f0f1;
}
.pw-lane-option input[type="radio"] {
    margin: 0;
}

/* ── Order Chain ──────────────────────────────── */
.pw-order-chain {
    display: inline;
    white-space: nowrap;
}
.pw-order-chain-prev {
    font-size: 11px;
    color: #888;
    font-weight: 400;
}

/* Order chain in expanded detail (packing + invoice) */
.pw-detail-chain {
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #e0e0e0;
}

/* ── Remake & Refund Badges ───────────────────── */
.pw-badge-remake {
    display: inline-block;
    background: #2271b1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
}
.pw-badge-remade {
    display: inline-block;
    background: #2271b1;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 6px;
}
.pw-badge-refunded {
    display: inline-block;
    background: #d63638;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 6px;
}
.pw-remake-modal {
    max-width: 480px;
}
.pw-remake-form label {
    display: block;
    font-weight: 600;
    margin: 10px 0 4px;
    font-size: 13px;
}
.pw-remake-form label:first-child {
    margin-top: 0;
}

/* ── Invoice Station ──────────────────────────── */
.pw-invoice-layout {
    display: flex;
    gap: 16px;
    height: 100%;
    min-height: 0;
    align-items: stretch;
}
.pw-invoice-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* 6.2.8: no overflow:hidden — would clip filter-pill popovers when the
       list is short. The .pw-invoice-list child below has its own
       overflow-y:auto for the orders list. */
}
/* Scrollable orders list inside invoice main — tab bar + search stay pinned above */
.pw-invoice-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.pw-invoice-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
}
.pw-invoice-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #787c82;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    padding-bottom: 8px;
    transition: color 0.15s, border-color 0.15s;
}
.pw-invoice-tab--active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}
.pw-invoice-tab:hover {
    color: #135e96;
}
.pw-invoice-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: box-shadow 0.15s, opacity 0.3s, max-height 0.4s ease-out, margin-bottom 0.4s ease-out;
}
.pw-invoice-card:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.pw-invoice-card--refund {
    border-left: 3px solid #d63638;
}
.pw-invoice-card--credit-note {
    border-left: 3px solid #d63638 !important;
    background: #fef7f7;
}
.pw-badge-credit-note {
    display: inline-block;
    background: #d63638;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.pw-cn-amount {
    color: #d63638 !important;
    font-weight: 700;
}
/* 8.8.3: the collapsed invoice row and the column-header row share one fixed-column
   grid, so money, invoice #, etc. line up across every card. Two templates (pending
   vs invoiced) via the modifier class, applied to both the summary and the header. */
.pw-invoice-summary {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}
.pw-invoice-head-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 8px 15px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}
.pw-invoice-summary--pending,
.pw-invoice-head-row.pw-invoice-summary--pending {
    grid-template-columns: 60px minmax(140px, 1fr) 170px 300px 34px;
}
.pw-invoice-summary--invoiced,
.pw-invoice-head-row.pw-invoice-summary--invoiced {
    grid-template-columns: 60px minmax(120px, 1fr) 170px 90px 160px 150px 34px;
}
.pw-invoice-head-cell {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8f94;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-invoice-head-cell--amount {
    text-align: right;
}
.pw-iv-cell {
    min-width: 0; /* allow ellipsis instead of overflowing the grid track */
}
.pw-invoice-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pw-invoice-order {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.pw-invoice-customer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    color: #1d2327;
}
.pw-invoice-customer-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.pw-invoice-customer-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-invoice-customer-sub {
    font-size: 11px;
    font-weight: 400;
    color: #787c82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-iv-cell--amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.pw-invoice-amount {
    font-weight: 600;
    color: #2c3338;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* 8.8.5: refunded row — net + original on line 1, deducted amount bold on line 2. */
.pw-invoice-amount-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
}
.pw-invoice-amount-was {
    font-size: 11px;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pw-invoice-amount-refund {
    font-weight: 600;
    color: #d63638;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pw-invoice-amount-detail {
    font-size: 11px;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pw-iv-cell--who {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pw-invoice-who-name {
    font-size: 12px;
    color: #2c3338;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-invoice-who-at {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-invoice-ref {
    font-size: 12px;
    color: #2271b1;
    font-weight: 600;
    background: #f0f6fc;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}
/* 8.8.3: invoiced running total, pinned to the far right of the filter bar. */
.pw-invoice-total {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding-left: 12px;
    text-align: right;
}
.pw-invoice-total-lbl {
    font-size: 11px;
    color: #8a8f94;
    white-space: nowrap;
}
.pw-invoice-total-val {
    font-size: 22px;
    font-weight: 500;
    color: #1d2327;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
/* 8.8.4: infinite-scroll footer under the invoiced list. */
.pw-invoice-more {
    text-align: center;
    font-size: 12px;
    color: #8a8f94;
    padding: 12px 0 16px;
}
.pw-invoice-num-input {
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    padding: 4px 8px;
    width: 130px;
}
.pw-invoice-num-input:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}
.pw-invoice-detail {
    padding: 10px 14px 14px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.pw-invoice-item {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.pw-invoice-item:last-child {
    border-bottom: none;
}
.pw-badge-invoiced {
    display: inline-block;
    background: #00a32a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.pw-badge-not-invoiced {
    display: inline-block;
    background: #dba617;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Invoice item detail (expanded) */
.pw-invoice-item-refund {
    margin-left: 8px;
    font-size: 10px;
}
.pw-invoice-item-epo {
    font-size: 12px;
    color: #787c82;
    margin-top: 4px;
    line-height: 1.5;
}
.pw-invoice-item-epo-field {
    margin-right: 14px;
}
.pw-invoice-item-files {
    margin-top: 4px;
}
.pw-invoice-item-file {
    font-size: 12px;
    margin-right: 10px;
    color: #2271b1;
    text-decoration: none;
}
.pw-invoice-item-file:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════
   Phase 11a: Board UX Overhaul (v2.6.3)
   ══════════════════════════════════════════════════ */

/* ── Content area — split panel mode (packing/invoice) ─ */
/* When active, content area becomes a flex container so
   packing/invoice layouts can fill height and scroll independently */
#pw-board-content.pw-content--split {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
#pw-board-content.pw-content--split > .pw-packing-layout,
#pw-board-content.pw-content--split > .pw-invoice-layout,
#pw-board-content.pw-content--split > .pw-packing-subcontent {
    flex: 1;
    min-height: 0;
}
.pw-packing-subcontent > .pw-packing-layout {
    flex: 1;
    min-height: 0;
}

/* ── Manager tab badges ─────────────────────────────── */
.pw-badge--mgr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 5px;
    transition: opacity 0.2s;
}
.pw-badge--blue  { background: #dbeafe; color: #1e40af; }
.pw-badge--amber { background: #fef3c7; color: #92400e; }
.pw-badge--red   { background: #fee2e2; color: #991b1b; }

/* Active manager tab badge gets inverted colours */
.pw-board-tab--active .pw-badge--blue  { background: #1e40af; color: #fff; }
.pw-board-tab--active .pw-badge--amber { background: #d97706; color: #fff; }
.pw-board-tab--active .pw-badge--red   { background: #dc2626; color: #fff; }

/* Manager tab strip has slight gap below before station tabs */
.pw-board-tabs--manager {
    margin-bottom: 4px;
}

/* ── Toast system (pw-helpers.js) ───────────────────── */
/* Container is fully inline-styled in JS for portability.
   Individual toasts are also inline-styled.
   These rules handle focus/keyboard accessibility only. */
#pw-toast-container button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Packing sidebar list scrollable ───────────────── */
/* Sidebar list scroll and touch handled in main rule above. */

/* ── Board header refinement ────────────────────────── */
.pw-board-header {
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .pw-board {
        padding: 10px 12px 0;
        height: calc(100vh - 46px); /* WP mobile admin bar is 46px */
    }
    body.admin-bar .pw-board {
        height: calc(100vh - 46px);
    }
    /* On mobile: stack sidebar above main panel */
    #pw-board-content.pw-content--split {
        overflow-y: auto; /* allow page scroll on mobile */
    }
    .pw-packing-layout,
    .pw-invoice-layout {
        flex-direction: column;
        height: auto;
    }
    .pw-packing-sidebar {
        width: 100%;
        max-height: 200px;
    }
    /* On mobile: panels revert to natural height, no fixed scroll */
    .pw-packing-main,
    .pw-invoice-main {
        overflow: visible;
        height: auto;
    }
    .pw-packing-groups-scroll,
    .pw-invoice-list {
        overflow: visible;
    }
    /* 8.8.3: the fixed-column invoice grid is desktop-only; on narrow screens stack
       each row into a single column and drop the (now meaningless) column header. */
    .pw-invoice-head-row {
        display: none;
    }
    .pw-invoice-summary--pending,
    .pw-invoice-summary--invoiced {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .pw-iv-cell--amount {
        align-items: flex-start;
        text-align: left;
    }
    .pw-invoice-actions {
        width: 100%;
    }
}

/* ── Contact Detail Block ─────────────────────────── */
.pw-contact-detail {
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 1.6;
    color: #787c82;
}
.pw-contact-name {
    display: block;
}
.pw-contact-links {
    display: block;
}
.pw-contact-email,
.pw-contact-phone {
    color: #2271b1;
    text-decoration: none;
}
.pw-contact-email:hover,
.pw-contact-phone:hover {
    text-decoration: underline;
}
.pw-contact-sep {
    margin: 0 4px;
    color: #c3c4c7;
}

/* ── Dispatched sub-tabs ───────────────────────── */
.pw-dispatched-subtabs {
    display: flex;
    gap: 4px;
    margin: 12px 0 0;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0;
}
.pw-dispatched-subtab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color 0.15s;
}
.pw-dispatched-subtab:hover {
    color: #374151;
}
.pw-dispatched-subtab--active {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
    font-weight: 600;
}
.pw-dispatched-subcontent {
    padding-top: 12px;
}

/* ── Pending Request Group (collapsible, pinned top of station) ── */
.pw-pending-group {
    margin: 8px 0 12px;
    border: 1px solid #f0d080;
    border-radius: 8px;
    background: #fef9ee;
    overflow: hidden;
}
.pw-pending-group-toggle {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: #fdf0d0;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #8a6d20;
    text-align: left;
}
.pw-pending-group-toggle:hover {
    background: #f9e6b8;
}
.pw-pending-group-cards {
    padding: 4px 8px 8px;
}
.pw-pending-group--collapsed .pw-pending-group-cards {
    display: none;
}

/* ── Print Station ────────────────────────────── */
.pw-print-layout { padding: 0 16px; }
.pw-print-list { margin-top: 12px; }
.pw-print-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 8px;
}
.pw-print-select-all-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.pw-print-bulk-btn { margin-left: auto; }
.pw-print-row-check {
    display: flex;
    align-items: center;
    padding-right: 8px;
}
.pw-print-row-cb { width: 16px; height: 16px; cursor: pointer; }
.pw-print-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    gap: 12px;
}
.pw-print-row:hover { background: #f9f9f9; }
.pw-print-row-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.pw-print-order-num {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.pw-print-product {
    font-size: 13px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-print-customer {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
}
.pw-print-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pw-print-dispatch {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}
.pw-print-time {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

/* ── Packing Sub-Tab Content ──────────────────── */
.pw-packing-subcontent {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.pw-packing-subcontent .pw-content--split {
    flex: 1;
    min-height: 0;
}

/* ── Merged (24h) Tab ─────────────────────────── */
.pw-merged-list {
    padding: 8px 12px;
    overflow-y: auto;
    flex: 1;
}
.pw-merged-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}
.pw-merged-row:hover {
    background: #f8f9fa;
}
.pw-merged-order {
    font-weight: 600;
    color: #1d2327;
    min-width: 80px;
}
.pw-merged-customer {
    font-weight: 600;
    color: #1d2327;
    flex: 0 0 auto;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-merged-customer {
    flex: 1;
    color: #333;
}
.pw-merged-items {
    color: #666;
    font-size: 12px;
    min-width: 60px;
}
.pw-merged-time {
    color: #888;
    font-size: 12px;
    min-width: 84px;
    white-space: nowrap;
}
.pw-badge--ready {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
}
.pw-badge--dispatched {
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
}
.pw-badge--default {
    background: #f5f5f5;
    color: #666;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
}

/* ── Merged Tab: Order Chain ──────────────────── */
.pw-merged-chain {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-wrap: wrap;
}
.pw-merged-chain-arrow {
    color: #999;
    font-size: 11px;
    margin: 0 2px;
}
.pw-merged-chain-split {
    font-size: 12px;
    color: #555;
}
.pw-merged-chain-orig {
    font-size: 11px;
    color: #999;
}
/* Search input in merged main */
.pw-search-input {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}
.pw-search-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

/* ── Phase 9: Dispatch Date Management ────────────── */
.pw-job-card-dispatch-orig {
    font-size: 10px;
    color: #999;
    margin-left: 4px;
    font-style: italic;
}
.pw-date-reference {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    padding: 4px 0;
}
.pw-date-reference--orig {
    color: #999;
    font-style: italic;
}
.pw-dispatch-orig-inline {
    font-size: 10px;
    color: #999;
    margin-left: 4px;
    font-style: italic;
}
.pw-col-orig {
    font-size: 11px;
    color: #999;
    font-style: italic;
    text-align: right;
}

/* Barcode scan highlight animation */
@keyframes pw-scan-flash {
    0% { background: #fff3cd; }
    100% { background: transparent; }
}
.pw-scan-highlight {
    animation: pw-scan-flash 2s ease-out;
}

/* ══════════════════════════════════════════════════════
   CUSTOMERS TAB — Phase 8.3
   ══════════════════════════════════════════════════════ */
.pw-customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.pw-customer-header h3 { margin: 0; }
.pw-btn--add-customer {
    background: #16a34a !important;
    color: #fff !important;
    border: none !important;
}
.pw-btn--add-customer:hover {
    background: #15803d !important;
}
.pw-customer-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 6px;
    background: #fff;
}
.pw-customer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
}
.pw-customer-card-header:hover { background: #f9fafb; }
.pw-customer-card--blocked { border-left: 3px solid #d63638; opacity: 0.7; }
.pw-customer-card--expanded { border-color: #3b82f6; }
.pw-customer-card-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pw-customer-card-left strong { font-size: 14px; }
.pw-customer-card-name { font-size: 12px; color: #6b7280; }
.pw-customer-card-email { font-size: 11px; color: #9ca3af; }
.pw-customer-card-right {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}
.pw-customer-card-body {
    padding: 0 16px 16px;
    border-top: 1px solid #f0f0f0;
}
.pw-customer-edit-row {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
}
.pw-customer-editing-label {
    font-size: 13px;
    color: #3b82f6;
    font-style: italic;
}
.pw-team-arrow {
    font-size: 10px;
    color: #9ca3af;
    margin-left: 4px;
}
.pw-role-blocked { background: #fee2e2; color: #991b1b; }
.pw-role-pending { background: #fef3c7; color: #92400e; }
.pw-role-no-docket { background: #ede9fe; color: #5b21b6; }
.pw-role-worker { background: #e5e7eb; color: #374151; }
/* 10.11.2 (#483): main / linked accounts. Told apart by LIGHTNESS, never by
   hue — the house rule everywhere, because red, green and orange collapse
   together for a red-blind reader. */
.pw-role-main-account { background: #1f2937; color: #f9fafb; }
.pw-role-linked-account { background: #e5e7eb; color: #374151; }
.pw-team-role--link { cursor: pointer; }
.pw-team-role--link:hover { text-decoration: underline; }
.pw-customer-hint {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}
.pw-customer-request-awaiting {
    font-size: 13px;
    color: #92400e;
    font-style: italic;
    padding: 6px 0;
}

/* Detail view */
.pw-btn--back {
    margin-bottom: 12px;
}
.pw-customer-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.pw-customer-detail-header h3 { margin: 0; }
.pw-customer-section {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
}
.pw-customer-section h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pw-customer-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.pw-customer-field label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
}

/* 10.10.1 (#335) — one row per book-keeping address on a customer.
   State is carried by the words ("password set" / "no password yet"), never by
   hue: red, green and orange collapse together for a protanopic reader. */
.pw-acct-email-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.pw-acct-email-row input {
    flex: 1 1 auto;
    min-width: 0;
}
.pw-acct-email-state {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}
.pw-customer-field input[type="text"],
.pw-customer-field input[type="email"],
.pw-customer-field input[type="number"],
.pw-customer-field input[type="date"],
.pw-customer-field input[type="tel"],
.pw-customer-field textarea,
.pw-customer-field select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}
.pw-customer-field input:focus,
.pw-customer-field select:focus {
    outline: none;
    border-color: #3b82f6;
}
.pw-customer-field input:disabled {
    background: #f3f4f6;
    color: #6b7280;
}
.pw-customer-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.pw-customer-field--inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
.pw-btn--save-customer {
    background: #3b82f6 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 4px;
}
.pw-btn--save-customer:hover { background: #2563eb !important; }
.pw-btn--save-customer:disabled { opacity: 0.6; cursor: default; }

/* Shipping address cards */
.pw-customer-address-card {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #f9fafb;
    font-size: 13px;
}
.pw-customer-address-card strong { font-size: 12px; }
.pw-customer-address-line { color: #6b7280; font-size: 12px; }

/* Recent orders */
.pw-customer-order-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}
.pw-customer-order-row:last-child { border-bottom: none; }
.pw-customer-order-num { font-weight: 600; min-width: 60px; }

/* Customer activity */
.pw-activity-row { padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.pw-activity-row:last-child { border-bottom: none; }
.pw-activity-note { border-left: 3px solid #3b82f6; padding-left: 8px; }
.pw-activity-request_submitted { border-left: 3px solid #f59e0b; padding-left: 8px; }
.pw-activity-request_approved { border-left: 3px solid #16a34a; padding-left: 8px; }
.pw-activity-request_rejected { border-left: 3px solid #dc2626; padding-left: 8px; }

/* Request button variant */
.pw-btn--request { background: #f59e0b !important; }
.pw-btn--request:hover { background: #d97706 !important; }
.pw-btn--approve { background: #16a34a !important; color: #fff !important; border: none !important; }
.pw-btn--approve:hover { background: #15803d !important; }

/* Temp sales manager badge */
.pw-role-temp-sales { background: #e0e7ff; color: #3730a3; }

/* Customer request cards */
.pw-customer-request-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #fff;
}
.pw-req-add { border-left: 3px solid #16a34a; }
.pw-req-edit { border-left: 3px solid #3b82f6; }
.pw-customer-request-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.pw-customer-request-header strong { font-size: 14px; }
.pw-customer-request-meta {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}
.pw-customer-request-reason {
    font-size: 13px;
    color: #374151;
    margin-bottom: 6px;
    font-style: italic;
}
.pw-customer-request-summary {
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.pw-customer-request-actions {
    display: flex;
    gap: 8px;
}

/* Customer request diff display */
.pw-customer-request-diff {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
}
.pw-customer-diff-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 4px 0;
}
.pw-customer-diff-label {
    font-weight: 500;
    color: #374151;
    min-width: 80px;
    flex-shrink: 0;
}
.pw-customer-diff-old {
    color: #991b1b;
    text-decoration: line-through;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.pw-customer-diff-arrow {
    display: none;
}
.pw-customer-diff-new {
    color: #166534;
    font-weight: 500;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════
   TABLET RESPONSIVE — Phase 7.10
   Target: mounted landscape tablet 1024–1280px
   ══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {

    /* ── Touch targets: 44px minimum ──────────────── */
    .pw-board .pw-btn {
        padding: 12px 18px;
        font-size: 14px;
    }
    .pw-board .pw-btn--small {
        padding: 10px 14px;
        font-size: 13px;
    }
    .pw-advance-btn {
        padding: 14px 18px;
        font-size: 15px;
    }
    .pw-decision-btn {
        padding: 12px 16px;
        font-size: 14px;
    }
    .pw-card-action-col {
        min-width: 110px;
    }
    .pw-card-menu-action {
        padding: 10px 14px;
        font-size: 13px;
    }
    .pw-request-menu-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }
    .pw-request-menu-item {
        padding: 12px 14px;
        font-size: 14px;
    }
    .pw-tabs-arrow {
        width: 44px;
        min-width: 44px;
    }
    .pw-modal .pw-btn,
    .pw-modal .pw-btn--primary,
    .pw-modal .pw-btn--secondary,
    .pw-modal #pw-m-save,
    .pw-modal #pw-m-cancel {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* ── Font size bumps for arm's length ─────────── */
    .pw-board-tab {
        padding: 10px 16px;
        font-size: 14px;
    }
    .pw-badge {
        font-size: 12px;
    }
    .pw-job-card {
        font-size: 14px;
    }
    .pw-card-row1 .pw-job-card-order {
        font-size: 15px;
    }
    .pw-card-row1 .pw-job-card-product-inline {
        font-size: 14px;
    }
    .pw-packing-item-order {
        font-size: 14px;
    }
    .pw-manager-row {
        font-size: 14px;
    }
    .pw-decision-label {
        font-size: 13px;
    }

    /* ── Search inputs: 16px prevents iOS zoom ────── */
    .pw-tk-input,
    .pw-search-input,
    .pw-station-search,
    .pw-filter-select {
        font-size: 16px;
        padding: 12px 14px;
    }

    /* ── Manager table: tighten columns for 1024px ── */
    .pw-manager-row {
        grid-template-columns: 60px 160px 1fr 42px 80px 80px 95px 95px 44px;
        gap: 6px;
        padding: 10px 12px;
    }

    /* ── Packing: breathing room ──────────────────── */
    .pw-packing-item-summary {
        padding: 12px 16px;
    }
    .pw-packing-item-summary input[type="checkbox"] {
        width: 32px;
        height: 32px;
    }

    /* ── Print station: bigger checkboxes ─────────── */
    .pw-print-row-cb {
        width: 24px;
        height: 24px;
    }
    .pw-print-row {
        padding: 10px 12px;
    }
    .pw-print-select-all-label input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    /* ── Manager tabs: prevent wrapping at 1024px ─── */
    .pw-board-tabs--manager {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .pw-board-tabs--manager::-webkit-scrollbar {
        display: none;
    }

    /* ── Station tabs: touch devices don't need arrows ── */
    .pw-tabs-arrow {
        display: none;
    }
    .pw-board-tabs--scrollable {
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Pricing Rules (Phase 8.4) ── */
.pw-pricing-container { margin-top: 8px; }
.pw-pricing-rule-card {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 10px 12px; margin: 8px 0;
}
.pw-pricing-rule-card--disabled { opacity: 0.5; }
.pw-pricing-rule-card--expired { opacity: 0.45; }
.pw-pricing-rule-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pw-pricing-rule-left { flex: 1; min-width: 0; }
.pw-pricing-rule-left strong { font-size: 13px; display: block; margin-bottom: 2px; }
.pw-pricing-rule-meta { font-size: 11px; color: #6b7280; }
.pw-pricing-rule-discount { color: #059669; font-weight: 600; }
.pw-pricing-rule-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pw-time-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; line-height: 1.4; margin-top: 2px; }
.pw-time-badge--active { background: #e8f5e9; color: #2e7d32; }
.pw-time-badge--expiring { background: #fff3e0; color: #e65100; }
.pw-time-badge--scheduled { background: #e3f2fd; color: #1565c0; }
.pw-time-badge--expired { background: #f5f5f5; color: #999; }
.pw-btn--tiny {
    padding: 3px 8px; font-size: 11px; border-radius: 4px;
    border: 1px solid #d1d5db; background: #fff; cursor: pointer; color: #374151;
}
.pw-btn--tiny:hover { background: #f3f4f6; }
.pw-btn--danger { color: #dc2626; border-color: #fca5a5; }
.pw-btn--danger:hover { background: #fef2f2; }
.pw-pricing-filter-search { margin-top: 4px; }
.pw-pricing-search-results {
    max-height: 150px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 4px;
    margin-top: 4px; background: #fff;
}
.pw-pricing-search-item {
    padding: 6px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f3f4f6;
}
.pw-pricing-search-item:hover { background: #eff6ff; }
.pw-pricing-search-item:last-child { border-bottom: none; }
.pw-pricing-selected-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pw-pricing-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    background: #dbeafe; color: #1e40af; border-radius: 12px; font-size: 11px;
}
.pw-pricing-pill-x { cursor: pointer; font-weight: 700; color: #3b82f6; margin-left: 2px; }
.pw-pricing-pill-x:hover { color: #dc2626; }

/* Pricing editor — product tabs + EPO elements */
.pw-pricing-product-tabs {
    display: flex; gap: 0; margin-bottom: 10px; position: relative;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
/* 8.7.7: slim, visible scrollbar so the product-tab strip is discoverably scrollable. */
.pw-pricing-product-tabs::-webkit-scrollbar { height: 8px; }
.pw-pricing-product-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.pw-pricing-product-tabs::-webkit-scrollbar-track { background: transparent; }
.pw-pricing-product-tab {
    padding: 8px 14px; font-size: 12px; border: 1px solid #e5e7eb; background: #f9fafb; cursor: pointer;
    white-space: nowrap; color: #6b7280; border-radius: 6px 6px 0 0; margin-right: -1px;
    font-weight: 500;
}
.pw-pricing-product-tab:hover { background: #fff; color: #374151; }
.pw-pricing-product-tab--active {
    background: #fff; color: #1d4ed8; border-bottom-color: #fff;
    font-weight: 600; box-shadow: 0 -2px 0 #1d4ed8 inset;
}
.pw-pricing-product-panels { border: 1px solid #e5e7eb; border-radius: 0 0 6px 6px; padding: 8px; margin-top: -1px; }
.pw-pricing-element { border: 1px solid #e5e7eb; border-radius: 6px; margin: 8px 0; overflow: hidden; }
.pw-pricing-element-header {
    padding: 8px 10px; background: #f9fafb; cursor: pointer; font-size: 13px;
    display: flex; align-items: center; user-select: none;
}
.pw-pricing-element-header:hover { background: #f3f4f6; }
.pw-pricing-element-body { padding: 8px 10px; }
.pw-pricing-option-row {
    display: flex; align-items: center; gap: 8px; padding: 4px 0;
    border-bottom: 1px solid #f3f4f6; flex-wrap: wrap;
}
.pw-pricing-option-row:last-child { border-bottom: none; }
.pw-pricing-option-label { flex: 1; min-width: 100px; font-size: 12px; }
.pw-pricing-disc-value { font-size: 12px; padding: 3px 6px; border: 1px solid #d1d5db; border-radius: 4px; flex: 0 0 5em; min-width: 0; }
.pw-pricing-disc-value:disabled { opacity: 0.4; background: #f3f4f6; }
.pw-pricing-disc-type { font-size: 12px; padding: 3px 6px; border: 1px solid #d1d5db; border-radius: 4px; flex: 1 1 auto; min-width: 0; }
.pw-pricing-element-all { padding: 4px 0; }
.pw-pricing-discount-area { min-height: 60px; }

/* Fix number input spinners in modals */
.pw-modal input[type="number"] {
    -moz-appearance: textfield; appearance: textfield;
}
.pw-modal input[type="number"]::-webkit-inner-spin-button,
.pw-modal input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
/* Ensure all modal buttons have consistent border-radius */
.pw-modal-actions .pw-btn { border-radius: 6px; }

/* ─── Customer password management (F.2.7) ─── */
.pw-customer-password-section .pw-customer-password-note {
    margin: 0 0 10px;
    font-size: 12px;
    color: #6b7280;
}
.pw-customer-password-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.pw-customer-setpw-wrap {
    display: flex;
    flex-direction: column;
}
.pw-customer-setpw-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    margin-top: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    min-width: 260px;
}
.pw-customer-setpw-panel input[type="password"],
.pw-customer-setpw-panel input[type="text"] {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
.pw-customer-setpw-show {
    font-size: 12px;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pw-customer-setpw-actions {
    display: flex;
    gap: 4px;
}
.pw-customer-addpw-row {
    margin-top: 6px;
}
.pw-customer-addpw-note {
    font-size: 12px;
    color: #6b7280;
    margin-left: 6px;
}
.pw-customer-addpw-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.pw-customer-addpw-panel input[type="password"],
.pw-customer-addpw-panel input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

/* ===========================================================
 * 6.2.5: UI TOOLKIT
 * ===========================================================
 * Single source of truth for search inputs, filter chips,
 * date pickers, customer sidebars, and the row layout that
 * holds them.
 *
 * Every tab consumes these classes. Adding a new tab = pick
 * what you need from this toolkit, no new CSS required.
 *
 * Class naming convention: pw-tk-* (toolkit). Old classes
 * (pw-search-input, pw-staff-search, pw-customer-search,
 *  pw-product-btn, pw-staff-filter-chip, pw-invoice-date-chip,
 *  pw-date-input, etc.) are NOT touched by this phase —
 * existing tabs keep working unchanged. Migration happens
 * in subsequent phases, one tab at a time.
 * =========================================================== */

/* ── Layout row: holds search + chips + dates inline ─────── */
.pw-tk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}
.pw-tk-row--tight { margin: 8px 0 4px; }
.pw-tk-row--block { margin: 0 0 12px; }

/* Group spacer — visually separates groups within a row */
.pw-tk-row .pw-tk-sep {
    color: #d1d5db;
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

/* ── Search input ─────────────────────────────────────────── */
.pw-tk-input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.pw-tk-input::placeholder {
    color: #9ca3af;
}
.pw-tk-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}
.pw-tk-input--search {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}
/* 8.2.7: explicit ✕ clear (native one isn't rendered on the front-end). */
.pw-tk-input--search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.pw-tk-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}
.pw-tk-search-wrap .pw-tk-input--search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    padding-right: 32px;
}
.pw-tk-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.pw-tk-search-clear:hover {
    background: #e5e7eb;
    color: #111827;
}
.pw-tk-search-wrap.pw-has-text .pw-tk-search-clear {
    display: inline-flex;
}
.pw-tk-input--date {
    /* 6.3.3: native date inputs hidden behind PW.tk.dateFilter buttons —
       this rule retained as no-op for any direct callers; the date filter
       itself uses .pw-tk-date-hidden + .pw-tk-date-btn instead. */
}

/* ── Filter chip ──────────────────────────────────────────── */
.pw-tk-chip {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 18px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    box-sizing: border-box;
    line-height: 1;
}
.pw-tk-chip:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}
.pw-tk-chip--active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}
.pw-tk-chip--active:hover {
    background: #1d5f96;
    border-color: #1d5f96;
}
/* Semantic variants — colour-coded urgency etc. */
.pw-tk-chip--overdue.pw-tk-chip--active {
    background: #d63638;
    border-color: #d63638;
}
.pw-tk-chip--overdue.pw-tk-chip--active:hover {
    background: #b32d2f;
    border-color: #b32d2f;
}
.pw-tk-chip--at-risk.pw-tk-chip--active {
    background: #dba617;
    border-color: #dba617;
}
.pw-tk-chip--at-risk.pw-tk-chip--active:hover {
    background: #b88a13;
    border-color: #b88a13;
}

/* Chip group (inline label + chips, e.g. "From [date] To [date]") */
.pw-tk-chip-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pw-tk-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* ── Customer sidebar ─────────────────────────────────────── */
.pw-tk-sidebar {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pw-tk-sidebar-search {
    /* re-uses .pw-tk-input shape but flush in the sidebar */
    width: calc(100% - 16px);
    margin: 8px;
    /* 6.3.9: prevent vertical flex expansion when used inside a
       flex-column sidebar (e.g. .pw-packing-sidebar) — input must
       stay at its 36px height instead of stretching to fill space. */
    flex: 0 0 36px;
    height: 36px;
    box-sizing: border-box;
}
/* 8.3.3: TK.searchInput wraps its <input> in span.pw-tk-search-wrap once it is in
   the DOM (to inject the ✕ clear button). That wrap is flex:1 — correct for the
   horizontal filter rows it was built for, but inside the vertical
   .pw-packing-sidebar (a flex column) flex:1 made the wrap grow DOWN the column.
   With the list also flex:1 the two split the height, so the search sat mid-sidebar
   with a big gap above it and the list started past the halfway point. The 6.3.9
   lock above is on the input, which stops being the sidebar's direct flex child once
   wrapped — so it no longer governs the column. Lock the wrap itself to its content
   height and carry the 8px sidebar margin on it; the input fills it. */
.pw-packing-sidebar > .pw-tk-search-wrap {
    flex: 0 0 auto;
    width: calc(100% - 16px);
    min-width: 0;
    max-width: none;
    margin: 8px;
}
.pw-packing-sidebar > .pw-tk-search-wrap > .pw-tk-sidebar-search {
    margin: 0;
    width: 100%;
}
.pw-tk-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
}
.pw-tk-sidebar-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
}
.pw-tk-sidebar-entry:hover {
    background: #eef2f7;
}
.pw-tk-sidebar-entry--active {
    background: #e0e9f5;
    color: #1d4ed8;
    font-weight: 600;
}
.pw-tk-sidebar-name {
    font-size: 13px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}
.pw-tk-sidebar-entry--active .pw-tk-sidebar-name { color: inherit; }
.pw-tk-sidebar-badge {
    background: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}
.pw-tk-sidebar-entry--active .pw-tk-sidebar-badge {
    background: #2271b1;
    color: #fff;
}

/* ── 6.2.7: Filter pill (button + popover) ──────────── */
.pw-tk-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
    box-sizing: border-box;
    line-height: 1;
}
.pw-tk-pill:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}
.pw-tk-pill--open {
    background: #f3f4f6;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}
.pw-tk-pill--has-value {
    color: #1d4ed8;
    border-color: #93c5fd;
    background: #eff6ff;
}
.pw-tk-pill--has-value:hover {
    background: #dbeafe;
    border-color: #2271b1;
}
.pw-tk-pill-icon {
    font-size: 14px;
    line-height: 1;
}
.pw-tk-pill-chevron {
    font-size: 10px;
    color: #6b7280;
    margin-left: 2px;
}
.pw-tk-pill--has-value .pw-tk-pill-chevron {
    color: #1d4ed8;
}
.pw-tk-pill-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 8px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}
.pw-tk-pill-clear:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1f2937;
}

/* Popover anchor — wraps pill so popover positions absolutely below it */
.pw-tk-pill-anchor {
    position: relative;
    display: inline-block;
}
.pw-tk-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    /* 6.3.3: 360px universal — fits two 44px date buttons side by side */
    width: 360px;
    padding: 12px;
    box-sizing: border-box;
}
.pw-tk-popover--right {
    left: auto;
    right: 0;
}

/* Popover internal layout helpers */
.pw-tk-popover-section {
    margin-bottom: 10px;
}
.pw-tk-popover-section:last-child {
    margin-bottom: 0;
}
.pw-tk-popover-divider {
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
    margin-top: 10px;
}
.pw-tk-popover-label {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 6px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Customer list inside popover (compact variant of pw-tk-sidebar) */
.pw-tk-popover-list {
    max-height: 320px;
    overflow-y: auto;
    margin: 0 -4px;
}
.pw-tk-popover-list .pw-tk-sidebar-entry {
    padding: 6px 10px;
    font-size: 13px;
}

/* Date chip group inside popover wraps to multiple rows */
.pw-tk-popover .pw-tk-chip-group {
    flex-wrap: wrap;
}

/* 6.3.1: Custom date inputs occupy their own row beneath the chip presets,
   so the popover layout stays stable when Custom is selected. */
.pw-tk-popover .pw-tk-chip-group .pw-tk-chip-group {
    flex-basis: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    align-items: center;
    gap: 8px;
}

/* 6.3.3: chips inside popover at 36px so they sit at the same visual weight as the 44px date buttons below */
.pw-tk-popover .pw-tk-chip {
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    font-size: 13px;
}

/* Date inputs inside popover sit on a single line */
.pw-tk-popover-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pw-tk-popover-date-row .pw-tk-input {
    flex: 1;
    height: 32px;
    font-size: 13px;
    padding: 0 8px;
}

/* 6.2.7: Single-panel Invoice layout (no sidebar — customer is a pill) */
.pw-invoice-layout--single {
    display: block;
}
.pw-invoice-layout--single .pw-invoice-main {
    flex: none;
    width: 100%;
}
/* 8.3.4: the --single layout is display:block, so when 8.3.2 added pw-content--split
   (#pw-board-content becomes overflow:hidden) the inner .pw-invoice-list never got a
   bounded height to scroll within — the panel overflowed and was clipped, i.e. the
   Invoicing tab stopped scrolling entirely. In split mode make the single wrapper a
   flex column and let .pw-invoice-main bound, so .pw-invoice-list (flex:1; overflow-y:
   auto) scrolls beneath the pinned tab bar + filter row. Desktop/landscape only —
   below 768px the existing mobile rules page-scroll instead, left untouched. */
@media (min-width: 769px) {
    #pw-board-content.pw-content--split > .pw-invoice-layout--single {
        display: flex;
        flex-direction: column;
    }
    #pw-board-content.pw-content--split > .pw-invoice-layout--single > .pw-invoice-main {
        flex: 1;
        min-height: 0;
    }
}

/* 6.2.7: Sidebar inside popover loses its own column chrome */
.pw-tk-sidebar.pw-tk-sidebar--in-popover {
    width: 280px;
    border-right: none;
    background: transparent;
}
.pw-tk-sidebar--in-popover .pw-tk-sidebar-search {
    width: 100%;
    margin: 0 0 8px 0;
}
.pw-tk-sidebar--in-popover .pw-tk-sidebar-list {
    padding: 0;
    max-height: 300px;
}

/* ── 6.3.3: Date button (replaces visible <input type="date">) ─
 * Hidden native date input still drives the picker — buttons trigger
 * showPicker() to bring up the OS date selector. Same big-tap-target
 * styling on every device (no media-query split — uniform UX).
 * --------------------------------------------------------- */
.pw-tk-date-hidden {
    /* native input is functional but invisible */
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.pw-tk-date-btn {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    box-sizing: border-box;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-tk-date-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}
.pw-tk-date-btn--filled {
    color: #1f2937;
    background: #eff6ff;
    border-color: #93c5fd;
}
.pw-tk-date-btn--filled:hover {
    background: #dbeafe;
    border-color: #2271b1;
    color: #1d4ed8;
}

/* ═══════════════════════════════════════════════════════════════════
 * 6.6.6: Notes thread under thumbnails + structured-table EPO options.
 * Two minimal additions to the expanded production job card — no
 * markup restructure, no layout change beyond CSS.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Notes thread inside right column, below thumbnails ── */
.pw-job-notes-thread {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f1;
    /* 8.5.7: grow with the thread up to half the viewport, then scroll inside.
       A short thread stays compact; a long one gets the room before scrolling. */
    max-height: 50vh;
    overflow-y: auto;
}
.pw-jnt-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #787c82;
    margin-bottom: 6px;
}
.pw-jnt-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pw-jnt-loading,
.pw-jnt-error {
    font-size: 12px;
    color: #787c82;
    font-style: italic;
    padding: 4px 0;
}
.pw-jnt-error {
    color: #a32d2d;
    font-style: normal;
}
/* Compact timeline entries inside the in-card thread (looser styling
 * lives in the Notes modal). */
.pw-job-notes-thread .pw-timeline-entry {
    padding: 6px 0;
    border-bottom: 1px solid #f4f4f5;
    margin: 0;
}
.pw-job-notes-thread .pw-timeline-entry:last-child {
    border-bottom: none;
}
.pw-job-notes-thread .pw-timeline-icon {
    font-size: 13px;
}
.pw-job-notes-thread .pw-timeline-desc {
    font-size: 12px;
}
.pw-job-notes-thread .pw-timeline-time {
    font-size: 10px;
}
.pw-job-notes-thread .pw-timeline-bubble {
    font-size: 12px;
}
.pw-job-notes-thread::-webkit-scrollbar {
    width: 6px;
}
.pw-job-notes-thread::-webkit-scrollbar-thumb {
    background: #d3d1c7;
    border-radius: 3px;
}

/* ── Structured-table EPO options — two layouts, chosen per card ── */
/* 10.12.23 (card #703, third pass). 10.11.75 capped the question column at 30%
 * of the table on EVERY card. A percentage track cannot take part in the box's
 * own shrink-to-fit: the browser sizes the fit-content box as if nothing
 * wrapped, THEN applies the cap. On a card of one-word answers the box stayed
 * at its unwrapped width, the cap folded every question onto 2–5 lines, and
 * the width it took back sat as dead space inside the border (observed live,
 * order #18365, 2026-08-19: questions needed 243px, got 131px). No single
 * always-on formula serves both that card and a 600-character design
 * instruction, so pwMarkLongAnswers() in pw-board.js adds `.pw-long-answer`
 * when any answer on the card is long enough to wrap, and the card picks:
 *
 *   default (all answers short) — the box shrink-wraps, every question on one
 *     line at its natural width, no cap, no dead space;
 *   .pw-long-answer — the table takes the block's full width (the block is
 *     still ceilinged at 50% of the card by .pw-body-text), the answer gets
 *     every pixel the question does not need, and the question is capped at
 *     30% — fit-content(30%), so under the cap it still takes only what its
 *     text needs. This is 10.11.75's layout, now only on the cards it was
 *     written for.
 *
 * Both layouts are content sizes and percentages — no fixed pixel anywhere.
 *
 * HOW TO REVERT to the always-capped 10.11.75 behaviour:
 *   1. below, set: grid-template-columns: minmax(min-content, 30%) minmax(0, max-content);
 *   2. delete the `.pw-job-card-options.pw-long-answer` rule;
 *   3. in pw-board.js delete pwMarkLongAnswers() and its three calls
 *      (search "pwMarkLongAnswers").
 * The markup is identical either way; nothing else has to move. */
.pw-job-card-options {
    display: grid;
    grid-template-columns: minmax(min-content, max-content) minmax(0, max-content);
    justify-content: start;
    width: fit-content;
    max-width: 100%;
    column-gap: 14px;
    row-gap: 0;
    padding: 0;
    background: transparent;
    border: 1px solid #f0f0f1;
    border-radius: 4px;
    overflow: hidden;
}
.pw-job-card-options.pw-long-answer {
    width: 100%;
    grid-template-columns: fit-content(30%) minmax(0, 1fr);
}
.pw-job-card-option {
    display: contents;
}
.pw-job-card-option > .pw-job-card-option-label,
.pw-job-card-option > .pw-job-card-option-value {
    padding: 5px 10px;
    border-bottom: 1px solid #f4f4f5;
    min-width: 0;
}
.pw-job-card-option:last-child > .pw-job-card-option-label,
.pw-job-card-option:last-child > .pw-job-card-option-value {
    border-bottom: none;
}
.pw-job-card-option-label {
    background: #fafafa;
    color: #50575e;
    font-weight: 500;
}
.pw-job-card-option-value {
    color: #1d2327;
    font-weight: 500;
    /* 10.11.74: the deleted JS pass used to set this on every answer cell. A
     * reference code or a filename with no spaces in it must still break rather
     * than push the table wider than its 50% ceiling. */
    overflow-wrap: anywhere;
}

/* ── 6.7.6: Competency Matrix ────────────────────────────── */
.pw-cmp-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
.pw-cmp-matrix {
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
}
.pw-cmp-matrix th, .pw-cmp-matrix td {
    border: 1px solid #e8e8e8;
    padding: 4px 8px;
    text-align: center;
    min-width: 70px;
}
.pw-cmp-th-skill,
.pw-cmp-th-skill-name {
    text-align: left;
    background: #fafafa;
    font-weight: 500;
    min-width: 220px;
    max-width: 320px;
    position: sticky;
    left: 0;
    z-index: 2;
}
.pw-cmp-th-user {
    background: #f5f5f5;
    font-weight: 600;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 140px;
    vertical-align: bottom;
    white-space: nowrap;
}
.pw-cmp-th-avg, .pw-cmp-skill-avg {
    background: #f0f0f0;
    font-weight: 600;
    color: #555;
}
.pw-cmp-stat-row {
    background: #fbfbfb;
}
.pw-cmp-stat-row .pw-cmp-th-stat {
    text-align: left;
    background: #f5f5f5;
    font-weight: 600;
    font-size: 12px;
    color: #333;
    position: sticky;
    left: 0;
    z-index: 2;
}
.pw-cmp-stat {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #555;
}
.pw-cmp-group-row .pw-cmp-group-header {
    background: #2271b1;
    color: #fff;
    text-align: left;
    font-weight: 600;
    padding: 6px 10px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.pw-cmp-score {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: transform 0.08s;
}
.pw-cmp-score:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #2271b1 inset;
}
.pw-cmp-skill-row:hover .pw-cmp-th-skill-name {
    background: #f0f6fc;
}
.pw-cmp-picker {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.pw-cmp-picker-btn,
.pw-cmp-picker-clear {
    border: 0;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
}
.pw-cmp-picker-clear {
    background: #f0f0f0;
    color: #555;
    margin-top: 4px;
    border-top: 1px solid #e0e0e0;
}
.pw-cmp-picker-btn--active {
    box-shadow: 0 0 0 2px #2271b1 inset;
}

/* 6.8.1: Sub-category header row inside the competency matrix — lighter shade
   than the top-level header so the hierarchy reads naturally. */
.pw-cmp-subgroup-row .pw-cmp-subgroup-header {
    background: #6b8cad;
    color: #fff;
    text-align: left;
    font-weight: 500;
    padding: 4px 10px 4px 24px;
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* ── manager send-back: section redo-set checklist ── */
.pw-sb-loading { color: #787a82; font-size: 13px; padding: 6px 0; }
.pw-sb-hint { font-size: 12px; color: #787a82; margin: 8px 0 0; }
.pw-sb-redo-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pw-sb-redo {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px; border: 1px solid #e2e2ea; border-radius: 8px; cursor: pointer;
    font-size: 14px; background: #fff;
}
.pw-sb-redo:hover { border-color: #c7c7d2; background: #faf9ff; }
.pw-sb-redo input { margin: 0; }

/* ── Redo-set picker columns (presentational layout from the workflow) ──── */
.pw-modal.pw-modal--wide { width: fit-content; max-width: min(96vw, 1080px); }
.pw-redo-cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.pw-redo-col { flex: 0 1 auto; min-width: 150px; max-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.pw-redo-col-title { font-weight: 700; font-size: 13px; color: #2c2c2a; margin-bottom: 4px; padding-bottom: 5px; border-bottom: 1px solid rgba(128,128,128,.28); }

/* Multi next-station button labels: one "→ Name" per line.
   Specificity must match .pw-card-action-btns .pw-advance-btn (which sets nowrap). */
.pw-card-action-btns .pw-advance-btn,
.pw-card-action-btns .pw-qc-pass-btn { white-space: pre-line; text-align: center; line-height: 1.35; }

/* Greyed (non-manual) redo checkboxes + Reset view (7.5.8) */
.pw-sb-redo--grey { opacity: .55; }
.pw-sb-reset { margin-top: 8px; }

/* === Story view (human history lens) — 8.5.9 ============================= */
.pw-story-ribbon {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 8px 10px; margin-bottom: 12px;
    background: #f6f7f7; border-radius: 6px;
}
.pw-story-pill {
    font-size: 12px; padding: 2px 9px; border-radius: 10px;
    background: #fff; color: #50575e; border: 1px solid #e0e0e0;
}
.pw-story-pill--more { color: #787c82; border-style: dashed; }
.pw-story-chev { color: #a7aaad; font-size: 13px; }
.pw-story-redo {
    font-size: 12px; padding: 2px 9px; border-radius: 10px;
    background: #fcf3e3; color: #8a6116; margin-left: auto;
}
.pw-story { position: relative; }
.pw-story-spine {
    position: absolute; left: 14px; top: 6px; bottom: 6px;
    width: 1px; background: #e6e6e6; z-index: 0;
}
.pw-story-origin {
    font-size: 12px; color: #787c82; padding: 6px 8px;
    background: #f6f7f7; border-radius: 4px; margin-bottom: 10px;
}
.pw-story-chapter { display: flex; align-items: center; gap: 8px; margin: 16px 0 12px; }
.pw-story-chapter:first-child { margin-top: 2px; }
.pw-story-chapter-label { font-size: 12px; font-weight: 600; color: #787c82; white-space: nowrap; }
.pw-story-chapter-rule { flex: 1; height: 0; border-top: 1px solid #f0f0f1; }
.pw-story-row { display: flex; gap: 12px; margin-bottom: 14px; position: relative; }
.pw-story-row:last-child { margin-bottom: 0; }
.pw-story-disc {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 14px; background: #f0f0f1;
    position: relative; z-index: 1;
}
.pw-story-disc--decision { background: #f0f6fc; }
.pw-story-disc--done { background: #edfaef; }
.pw-story-disc--flag { background: #fcf3e3; }
.pw-story-disc--note { background: #f0f6fc; }
.pw-story-disc--sendback { background: #fcf3e3; }
.pw-story-content { flex: 1; min-width: 0; padding-top: 2px; }
.pw-story-headline { font-size: 13px; color: #1d2327; line-height: 1.45; word-wrap: break-word; }
.pw-story-who { font-weight: 600; }
.pw-story-act { color: #1d2327; }
.pw-story-time { font-size: 11px; color: #a7aaad; margin-top: 3px; }
.pw-story-bubble {
    margin-top: 6px; background: #f6f7f7; border-radius: 6px;
    padding: 7px 10px; font-size: 13px; color: #50575e;
    line-height: 1.4; word-wrap: break-word;
}
.pw-story-qa { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 13px; }
.pw-story-qa-q { color: #787c82; }
.pw-story-qa-arrow { color: #a7aaad; }
.pw-story-qa-a { padding: 2px 9px; border-radius: 6px; background: #f0f6fc; color: #0a4b78; font-weight: 600; }
.pw-story-sendback {
    background: #fcf3e3; border: 1px solid #f0e0bd; border-radius: 6px;
    padding: 8px 11px; font-size: 13px; color: #8a6116;
}


/* ── 8.7.0: approval state — approval station only (rail + chip) ── */
.pw-job-card--ap-notsent  { border-left-color: #8a8a8a; }
.pw-job-card--ap-awaiting { border-left-color: #dba617; }
.pw-job-card--ap-approved { border-left-color: #46992b; }
.pw-job-card--ap-changes  { border-left-color: #d63638; }
.pw-badge-approval { padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 500; }
.pw-badge-approval--notsent  { background: #eceff1; color: #546e7a; }
.pw-badge-approval--awaiting { background: #fff4d6; color: #8a6100; }
.pw-badge-approval--approved { background: #e6f4ea; color: #1e7e34; }
.pw-badge-approval--changes  { background: #fde8e8; color: #b42318; }


/* ── 8.7.6 / 6.7.22: Customers grid + detail modal ───────────────────── */
/* 6.7.43: 330 not 280. A wider card is half of "every name on one line" — at 280
   most lab names needed two, and the card grew to hold them. Costs about one card
   per row on a wide screen; the other half is the shrink-to-fit in pw-board.js. */
.pw-customer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 10px;
    align-items: start;
}
.pw-customer-card--grid {
    margin-bottom: 0;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pw-customer-card--grid:hover { border-color: #c7cdd4; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.pw-customer-card--grid:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
/* 6.7.42: labels stack ABOVE the company name so the name always gets the full
   card width. They used to sit beside it (space-between), and every label took
   width off the name — long names then broke a word per line.
   6.7.43: EVERY ROW IS EXACTLY ONE LINE TALL, and every row is always present
   even when it has nothing in it. That is what makes every card in the grid the
   same height — not a height set on the card, which would have to be guessed and
   would be wrong the moment a row was added. A name too long even at the smallest
   size ends in three dots; hovering shows it in full. */
.pw-customer-card-top { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pw-customer-card-badges {
    display: flex; gap: 4px; flex-wrap: nowrap; align-items: center;
    align-self: stretch; min-width: 0; height: 18px; overflow: hidden;
}
/* A card carrying four labels wants more width than it has. They must NOT simply
   fall off the end — a label the reader cannot see is worse than a shortened one,
   because nothing tells them it is there. The last one truncates visibly instead,
   and hovering the card opens the detail that spells all of it out. */
.pw-customer-card-badges .pw-team-role { flex: 0 0 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pw-customer-card-badges .pw-team-role:last-child { flex: 0 1 auto; }
.pw-customer-card-company {
    display: block; align-self: stretch; font-size: 14px;
    line-height: 20px; height: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-customer-card--grid .pw-customer-card-name { margin-top: 4px; }
.pw-customer-card--grid .pw-customer-card-name,
.pw-customer-card--grid .pw-customer-card-email {
    display: block; line-height: 18px; height: 18px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 6.7.42: the "Login as" buttons sit INSIDE the card with a real gap. They were
   inline-block with a margin on the second, so a long second label wrapped six
   pixels adrift of the button above it and pressed against it.
   6.7.43: the look moved out of pw-board.js and into here, so the staff button
   and the customer buttons cannot drift apart — and the row no longer wraps,
   because with the short "Accountant (2)" label both fit one line at 330px. */
.pw-lau-row { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
/* Holds its height even with no buttons in it, so the one card pw-debug refuses
   a link for does not sit shorter than every card around it. */
.pw-lau-row--card { margin-top: 8px; min-height: 26px; }
/* These are anchors on a front-end page, so the THEME's link rules cascade in —
   which is why .pw-btn--add-customer, a button on this same screen, already has
   to force its own colours. Scoped to .pw-board and forced for the same reason:
   an unstyled link where a button should be is exactly what 10.10.1 shipped. */
.pw-board .pw-lau-btn {
    display: inline-block; padding: 4px 10px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    border-radius: 6px; text-decoration: none !important; cursor: pointer;
    line-height: 16px;
}
.pw-board .pw-lau-btn--self { color: #92400e !important; background: #fef3c7 !important; border: 1px solid #fcd34d !important; }
.pw-board .pw-lau-btn--acct { color: #1e3a5f !important; background: #dbeafe !important; border: 1px solid #93c5fd !important; }
.pw-board .pw-lau-btn:hover { filter: brightness(0.96); }

/* Detail modal: wider than the default modal, sticky header */
.pw-customer-modal { max-width: 1150px; width: 94vw; }
.pw-customer-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    position: sticky;
    top: -24px;
    background: #fff;
    margin: -4px 0 14px;
    padding: 4px 0 10px;
    border-bottom: 1px solid #f0f0f0;
    z-index: 2;
}
.pw-customer-modal-head h2 { margin: 0; }
.pw-customer-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 4px;
}
.pw-customer-modal-close:hover { color: #374151; }
.pw-customer-modal-body { padding: 0; border-top: none; }

/* Multi-column billing / role inside the modal (other sections stay block) */
.pw-customer-modal .pw-customer-section--fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    align-items: start;
}
.pw-customer-modal .pw-customer-section--fields h4 { grid-column: 1 / -1; margin-bottom: 2px; }
.pw-customer-modal .pw-customer-section--fields .pw-customer-field { margin-bottom: 0; }
.pw-customer-modal .pw-customer-section--fields .pw-customer-field--full { grid-column: 1 / -1; }
@media (max-width: 560px) {
    .pw-customer-modal .pw-customer-section--fields { grid-template-columns: 1fr; }
}


/* ── 8.7.8 / 6.7.24: Staff grid card + detail modal ─────────── */
.pw-team-card--grid { cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.pw-team-card--grid:hover { border-color: #c7cdd4; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.pw-team-card--grid:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.pw-team-modal { max-width: 640px; width: 92vw; }
.pw-team-modal-headbtns { display: flex; align-items: center; gap: 8px; }
.pw-team-modal-idrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.pw-team-modal-email { font-size: 12.5px; color: #6b7280; }

.pw-team-roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.pw-team-roles-cat { font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.pw-team-roles-val { font-size: 13.5px; color: #374151; }
.pw-team-roles-val--none { color: #9ca3af; }

.pw-team-modal .pw-team-toggle-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw-team-modal .pw-team-toggle-section { min-width: 0; }
@media (max-width: 520px) {
    .pw-team-roles-grid { grid-template-columns: 1fr; }
    .pw-team-modal .pw-team-toggle-groups { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────
   9.0.3 — Itemised credit-note block (pending tab)
   Each outstanding refund is its own line (date · reason · amount · button)
   under the summary row, replacing the old stack of loose buttons.
   ───────────────────────────────────────────────────────────────── */
.pw-cn-block {
    margin: 0 14px 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #f3d4d4;
    border-radius: 6px;
}
.pw-cn-block-head {
    font-size: 11px;
    font-weight: 700;
    color: #b32d2e;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 6px;
}
.pw-cn-line {
    display: flex;
    /* 10.11.96: start, not centre — a wrapped refund note makes this row tall,
       and the CN # box and its button belong beside the FIRST line of the note
       rather than floating halfway down it. */
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid #f7e7e7;
}
.pw-cn-line:first-of-type { border-top: none; }
.pw-cn-line-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    /* 10.11.96: basis 0, NOT auto. The row wraps (the 10.7.6 block below), and
       a wrapping flex container moves an over-wide item to a new line before it
       will let anything shrink — so with an auto basis a long refund note
       pushed the CN # box and the button clean off the row, and the lines in
       one block stopped lining up with each other. A zero basis means this
       block never votes on where the row breaks: it takes what is left after
       the box and the button, and wraps its own text inside that.
       min-width 0 and NO floor: a floor is what makes one line break differently
       from the next, because the button is as wide as the amount printed on it,
       so a −£180.00 line runs out of room a few pixels before a −£5.30 one and
       the two stop lining up — the very thing this is fixing. With no floor the
       three parts stay on one row at every width and only the note reflows. */
    flex: 1 1 0;
    flex-wrap: wrap;
    min-width: 0;
}
.pw-cn-line-amt {
    color: #d63638;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.pw-cn-line-date {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
}
.pw-cn-line-reason {
    font-size: 12px;
    color: #555;
    /* 10.11.96: the note is the reason the money is going back, so all of it
       stays on screen. It used to be cut off with an ellipsis, which never
       actually fired (the row broke apart first) and would have hidden the one
       thing on the line a person cannot look up anywhere else on this screen.
       10.11.97: and it is NEVER beside the amount — 100% basis puts it on its
       own line under the amount and date on every line, not only the ones long
       enough to be pushed there. A note that is inline on one line and
       underneath on the next is the same card disagreeing with itself, which is
       what made this hard to read in the first place. */
    flex: 1 0 100%;
    white-space: normal;
    min-width: 0;
}
.pw-cn-line-num {
    flex: 0 0 130px;
    max-width: 130px;
    font-size: 12px;
    padding: 4px 6px;
}
.pw-cn-line-btn { flex: 0 0 auto; white-space: nowrap; }

/* Invoiced-tab face-value flag (no per-row net any more). */
.pw-invoice-cn-flag {
    display: block;
    font-size: 11px;
    color: #b32d2e;
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   9.0.3 — Accounting tab
   Invoices + credit notes as separate dated entries, with totals.
   ───────────────────────────────────────────────────────────────── */
.pw-acct-totals {
    padding: 10px 15px;
    border-bottom: 1px solid #e8e8e8;
    background: #faf9fc;
}
.pw-acct-scope {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}
.pw-acct-totals-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.pw-acct-total-cell {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 6px;
}
.pw-acct-total-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pw-acct-total-val {
    font-size: 20px;
    font-weight: 700;
    margin-top: 4px;
}
.pw-acct-total--pos .pw-acct-total-val { color: #1f7a3d; }
.pw-acct-total--neg .pw-acct-total-val { color: #d63638; }
.pw-acct-total--net  { border-color: #4a3f6b; }
.pw-acct-total--net  .pw-acct-total-val { color: #4a3f6b; }

.pw-acct-list { padding-bottom: 24px; }
.pw-acct-row {
    display: grid;
    grid-template-columns: 120px 100px minmax(120px, 1fr) minmax(120px, 1fr) 80px 110px;
    align-items: center;
    gap: 12px;
    padding: 9px 15px;
    border-bottom: 1px solid #f0f0f0;
}
.pw-acct-row--head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}
.pw-acct-head-cell {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pw-acct-row--invoice              { border-left: 3px solid #1f7a3d; }
.pw-acct-row--credit_note          { border-left: 3px solid #d63638; background: #fffafa; }
.pw-acct-row--credit_note_reversal { border-left: 3px solid #f58434; background: #fffaf4; }
.pw-acct-cell {
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-acct-cell--ref  { font-variant-numeric: tabular-nums; }
.pw-acct-cell--order { color: #888; font-size: 12px; }
.pw-acct-cell--amt {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pw-acct-amt--pos { color: #1f7a3d; }
.pw-acct-amt--neg { color: #d63638; }
.pw-acct-type-badge { font-size: 12px; font-weight: 600; }

@media (max-width: 760px) {
    .pw-acct-totals-grid { grid-template-columns: 1fr; }
    .pw-acct-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
    .pw-acct-row .pw-acct-cell--date,
    .pw-acct-row .pw-acct-cell--ref,
    .pw-acct-row .pw-acct-cell--cust,
    .pw-acct-row .pw-acct-cell--order { grid-column: 1; font-size: 12px; }
    .pw-acct-cell--amt { grid-row: 1; grid-column: 2; }
    .pw-acct-row--head { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   9.0.4 — Invoiced tab as an event list
   Invoices and credit notes as separate dated rows (same source as
   Accounting). Shares the invoice card chrome; its own column grid.
   ───────────────────────────────────────────────────────────────── */
.pw-invoice-summary--events,
.pw-invoice-head-row.pw-invoice-summary--events {
    grid-template-columns: 120px 64px minmax(140px, 1fr) 100px 120px 130px 100px 120px 34px;
}
.pw-invoice-event--invoice              { border-left: 3px solid #1f7a3d !important; }
.pw-invoice-event--credit_note          { border-left: 3px solid #d63638 !important; background: #fffafa; }
.pw-invoice-event--credit_note_reversal { border-left: 3px solid #f58434 !important; background: #fffaf4; }
.pw-event-type-badge {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.pw-event-date {
    font-size: 12px;
    color: #555;
    font-variant-numeric: tabular-nums;
}
.pw-event-ref {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-event-who {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-invoice-event .pw-iv-cell--amount { text-align: right; }

@media (max-width: 900px) {
    .pw-invoice-summary--events,
    .pw-invoice-head-row.pw-invoice-summary--events {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .pw-invoice-head-row.pw-invoice-summary--events { display: none; }
}

/* 9.0.4: accounting manual rebuild control */
.pw-acct-rebuild-row { padding: 8px 15px 0; text-align: right; }
.pw-acct-rebuild { opacity: .85; }

/* 9.0.6: invoice-undone (invoice reversal) rows — negative, amber like CN reversal */
.pw-invoice-event--invoice_reversal { border-left: 3px solid #f58434 !important; background: #fffaf4; }
.pw-acct-row--invoice_reversal       { border-left: 3px solid #f58434; background: #fffaf4; }

/* 9.5.4 — Duplicate-shipment guard modal (add to existing same-day shipment). */
.pw-dup-shipment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 16px;
}
.pw-dup-shipment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fbfbfc;
}
.pw-dup-shipment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pw-dup-shipment-order {
    font-weight: 600;
    color: #1d2327;
}
/* 9.6.1: per-root dispatch status label in the duplicate-shipment modal */
.pw-dup-shipment-status {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
    align-self: flex-start;
}
.pw-dup-shipment-status--dispatched {
    background: #e6f4ea;
    color: #137333;
}
.pw-dup-shipment-status--ready {
    background: #fef7e0;
    color: #9a6700;
}
.pw-dup-shipment-tracking {
    font-size: 12px;
    color: #646970;
}

/* 9.7.5: Completed-tab search "jump to matched child" — when a number search
   matches an order INSIDE a merged order, the card header shows this chip, the
   matched sub-item is highlighted, and (single result) it auto-expands + scrolls
   + flashes. Amber accent matches the dispatched/not-invoiced badge family. */
.pw-dispatched-match {
    display: inline-block;
    margin-left: 8px;
    background: #fff3cd;
    border: 1px solid #dba617;
    color: #6d5200;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.pw-dispatched-item--matched {
    background: #fff8e1;
    box-shadow: inset 3px 0 0 #dba617;
    border-radius: 4px;
}
@keyframes pwDispatchedItemFlash {
    0%   { background: #ffe39a; }
    100% { background: #fff8e1; }
}
.pw-dispatched-item--matched.pw-dispatched-item--flash {
    animation: pwDispatchedItemFlash 1.4s ease-out 1;
}

/* ─────────────────────────────────────────────────────────────────
   10.7.5 — Month-end invoice-date question (pending tab)
   Shown only when a job was dispatched in one month and is being
   invoiced in the next. Same full-width shape as the credit-note
   block, amber rather than red: this is a decision, not a problem.
   ───────────────────────────────────────────────────────────────── */
.pw-inv-month-block {
    margin: 0 14px 10px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #f5d98a;
    border-radius: 6px;
}
.pw-inv-month-head {
    font-size: 13px;
    font-weight: 700;
    color: #8a5a00;
    line-height: 1.4;
}
.pw-inv-month-sub {
    font-size: 12px;
    color: #6b5320;
    margin-top: 2px;
    line-height: 1.4;
}
.pw-inv-month-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.pw-inv-month-btn { white-space: nowrap; }
.pw-inv-month-flag {
    font-size: 11px;
    font-weight: 700;
    color: #8a5a00;
    background: #fffbeb;
    border: 1px solid #f5d98a;
    border-radius: 4px;
    padding: 3px 6px;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────
   10.7.6 — Month-end date question on a CREDIT-NOTE line.
   The line is a flex row (amount · date · reason · CN# · button); the
   question needs the full width under it, so the row wraps and this
   block claims a line of its own. Amber like the invoice one, and it
   replaces that line's single button rather than sitting beside it.
   ───────────────────────────────────────────────────────────────── */
.pw-cn-line { flex-wrap: wrap; }
.pw-cn-line-dates {
    flex: 1 0 100%;
    margin-top: 6px;
    padding: 8px 10px;
    background: #fffbeb;
    border: 1px solid #f5d98a;
    border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────────
   10.7.7 — Month-end review list (Accounting tab).
   Everything dated INTO the period on screen that was recorded later.
   Sits above the ledger; absent entirely in a period with none.
   ───────────────────────────────────────────────────────────────── */
.pw-acct-backdated:empty { display: none; }
.pw-acct-backdated {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #f5d98a;
    border-radius: 8px;
    overflow-x: auto;
}
.pw-acct-backdated-head {
    font-size: 13px;
    font-weight: 700;
    color: #8a5a00;
}
.pw-acct-backdated-sub {
    font-size: 12px;
    color: #6b5320;
    margin: 2px 0 8px;
    line-height: 1.45;
}
.pw-acct-bd-row {
    display: grid;
    grid-template-columns: 110px 92px 92px 92px 1fr 90px 1.4fr 1fr 92px;
    gap: 8px;
    align-items: center;
    padding: 5px 0;
    border-top: 1px solid #f0e0b4;
    font-size: 12px;
    min-width: 900px;
}
.pw-acct-bd-row--head {
    border-top: none;
    font-weight: 700;
    color: #8a5a00;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
}
.pw-acct-bd-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-acct-bd-cell--muted { color: #7a6a45; }
.pw-acct-bd-row .pw-acct-amt--pos { font-weight: 700; text-align: right; }
.pw-acct-bd-row .pw-acct-amt--neg { font-weight: 700; text-align: right; color: #d63638; }
.pw-acct-backdated-truncated {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #f0e0b4;
    font-size: 12px;
    font-weight: 700;
    color: #8a5a00;
    line-height: 1.45;
}

/* ─────────────────────────────────────────────────────────────────
   10.8.3 — COLLAPSING (card #18), shared by both panels above the
   ledger. The month-end list ran to nine columns and took over half
   the screen, so the ledger started below the fold. Both now open
   collapsed; the choice is remembered per person.
   ───────────────────────────────────────────────────────────────── */
.pw-acct-collapse-head {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 7px;
}
.pw-acct-collapse-chevron {
    font-size: 11px;
    opacity: .75;
    flex: 0 0 auto;
}
.pw-acct-collapse-label { min-width: 0; }

/* ─────────────────────────────────────────────────────────────────
   10.8.3 — FINISHED AND NEVER INVOICED.
   Work that finished production, has no invoice, and is NOT in the To
   Invoice queue — so nothing is chasing it. Absent entirely at zero
   (:empty), never an empty box.

   COLOUR: near-black band with light text, NOT a red panel. Piotr has
   protanopia — red, green and orange collapse together for him — so the
   signal is carried by LIGHTNESS, which survives any colour vision, and
   this is the same black = urgent convention the task board uses. The
   red accent is an addition for anyone who does see red, never the
   thing that carries the meaning.
   ───────────────────────────────────────────────────────────────── */
.pw-acct-unbilled:empty { display: none; }
.pw-acct-unbilled {
    margin: 0 0 14px;
    padding: 11px 13px;
    background: #17171c;
    border: 1px solid #3a3a44;
    border-left: 5px solid #d63638;
    border-radius: 8px;
    overflow-x: auto;
}
.pw-acct-unbilled-head {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: .01em;
    line-height: 1.4;
}
.pw-acct-unbilled-sub {
    font-size: 12px;
    color: #c9c9d4;
    margin: 4px 0 9px;
    line-height: 1.45;
}
.pw-acct-unbilled .pw-acct-bd-row {
    grid-template-columns: 100px 1.6fr 110px 90px 130px 100px;
    border-top: 1px solid #33333d;
    color: #e4e4ec;
    min-width: 720px;
}
.pw-acct-unbilled .pw-acct-bd-row--head {
    border-top: none;
    color: #a9a9bb;
}
.pw-acct-unbilled .pw-acct-bd-cell--muted { color: #9a9aae; }
.pw-acct-unbilled .pw-acct-bd-row .pw-acct-amt--pos { color: #ffffff; }
.pw-acct-unbilled .pw-acct-backdated-truncated {
    border-top: 1px solid #33333d;
    color: #ffd98a;
}

/* ─────────────────────────────────────────────────────────────────
   10.9.9 — Customer panel: two columns, and the right one grouped
   by PERSON rather than by field type.

   Piotr, 2026-08-05: "layout is a big mess... Modal could be bigger
   to accommodate much easier edits." It was ~620px on a 1920px screen,
   one stack of full-width boxes, with a person's address in one block
   and the button that sends them a password in another far below.
   ───────────────────────────────────────────────────────────────── */
.pw-cust-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.pw-cust-col { min-width: 0; }
.pw-cust-col .pw-customer-section { margin-bottom: 12px; }
.pw-cust-col .pw-customer-section:last-child { margin-bottom: 0; }

/* A row whose label and control sit on one line — role, and the two
   behaviour ticks. Replaces the old grid that let items drift apart. */
.pw-customer-field--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pw-customer-field--row label { margin: 0; flex: 0 0 auto; }
.pw-customer-field--row select { width: auto; min-width: 160px; }
.pw-customer-field--row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }

/* One card per person who can sign in. */
.pw-person-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fcfcfd;
}
.pw-person-card:last-child { margin-bottom: 0; }
.pw-person-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pw-person-icon { font-size: 15px; line-height: 1; }
.pw-person-name { font-size: 13px; font-weight: 600; color: #374151; }
.pw-person-badge {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}
/* Lightness, never hue — red/green/orange collapse together for a
   protanope, so these are separated by how dark they are. */
.pw-person-badge--ok   { background: #eef2f7; color: #374151; }
.pw-person-badge--wait { background: #fde68a; color: #4a3708; }
.pw-person-badge--none { background: #f3f4f6; color: #9ca3af; }

.pw-person-email { font-size: 12.5px; color: #4b5563; margin-bottom: 8px; word-break: break-all; }
.pw-person-note  { font-size: 11.5px; color: #6b7280; margin: 4px 0 8px; }

/* The tick, its label and its own explanation — in one place, always. */
.pw-person-tick {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
    cursor: pointer;
}
.pw-person-tick--off { cursor: default; }
.pw-person-tick input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; }
.pw-person-tick-label { display: block; font-size: 12.5px; color: #374151; }
.pw-person-tick-note  { display: block; font-size: 11px; color: #9ca3af; margin-top: 1px; }
.pw-person-tick--off .pw-person-tick-label { color: #9ca3af; }

.pw-person-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pw-person-actions .pw-customer-password-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* Save and Cancel stop scrolling away. */
.pw-cust-foot {
    position: sticky;
    bottom: -24px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px -4px -4px;
    padding: 10px 4px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    z-index: 2;
}
.pw-cust-foot .pw-btn--save-customer { margin-top: 0; }

@media (max-width: 900px) {
    .pw-cust-cols { grid-template-columns: 1fr; }
}

/* ── First-station check: what the customer sent (10.12.1) ──
 * Every state here is carried by the WORDS in the box, never by a colour: the two ways out are
 * labelled "Checked — it is correct" and "Not correct", and the error line says what is wrong in
 * a sentence. Colour is decoration on top of a box that reads correctly in greyscale. */
/* 10.12.6 — THE BOX SCROLLED WHEN THERE WAS NOTHING TO SCROLL, AND ATE ITS OWN BUTTONS.
 *
 * It was two scrollers stacked: the whole dialog scrolled inside 80vh, and the customer's answers
 * scrolled again inside 46vh of that. On a short order — one Zirconia unit, six answers — the
 * person got a scrollbar they did not need and the three buttons were sliced off by the bottom
 * edge, so the way out of the box sat below the fold on the very screen that asks them to sign.
 *
 * The dialog is now A COLUMN THAT DOES NOT SCROLL. Title, warning, PIN and buttons are fixed at
 * their own height, and the one thing that scrolls is the answers, only once there are more of
 * them than there is room. Short order → no scrollbar anywhere and the buttons in plain sight;
 * long order → the answers scroll and the buttons still are. `overflow: auto` on the dialog rather
 * than `hidden` is the safety net for a very short screen: it degrades to the old scroll instead
 * of hiding a button.
 *
 * And it is wide enough to read: 620px was sixty pixels over the base modal, so a question like
 * "Would you like us to design the restoration?" wrapped onto two lines and made the box tall
 * enough to need the scrolling in the first place. Both classes on the width rule deliberately —
 * see the 9.9.9 note at the top of this file. */
.pw-modal.pw-intake-modal {
    max-width: min(94vw, 880px);
    max-height: 92vh;         /* the base 80vh threw away a fifth of a short shop-floor screen */
    box-sizing: border-box;   /* the base modal is content-box, so 620px was really 668px on screen */
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.pw-modal.pw-intake-modal > * { flex: 0 0 auto; }
/* The answers give up height to keep the buttons on screen, but never below a readable strip:
 * measured at 1280×560 they collapsed to a 22px sliver, which reads as "the customer sent
 * nothing" — the one conclusion this box must never lead somebody to by accident. Past that the
 * dialog scrolls instead, and the buttons are reached the ordinary way. */
.pw-modal.pw-intake-modal > .pw-intake-sent { flex: 1 1 auto; min-height: 96px; }
.pw-intake-sent {
    border: 1px solid #dcdcde;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 16px 0;
    overflow-y: auto;
    background: #fbfbfc;
}
.pw-intake-opt {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    padding: 2px 0;
}
/* A real width, not a share of one: at 42% the labels grew with the box and the answers never
 * caught up. 300px fits every question the EPO asks on one line, and shrinks (0 1) rather than
 * squeezing the answer to nothing on a narrow screen. */
.pw-intake-opt-label {
    flex: 0 1 300px;
    font-weight: 600;
    color: #50575e;
}
.pw-intake-opt-value {
    flex: 1 1 auto;
    min-width: 0;
    color: #1d2327;
    word-break: break-word;
}
.pw-intake-child {
    margin-top: 8px;
    padding: 6px 8px;
    border-left: 3px solid #c3c4c7;
    background: #fff;
    border-radius: 3px;
}
.pw-intake-child-title {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 2px;
    color: #50575e;
}
.pw-intake-files {
    margin-top: 10px;
}
.pw-intake-none {
    font-size: 13px;
    line-height: 1.5;
    color: #856404;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 8px 10px;
}
.pw-intake-modal .pw-intake-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 18px;
    letter-spacing: 2px;
    border: 2px solid #c3c4c7;
    border-radius: 6px;
    box-sizing: border-box;
}
.pw-intake-modal .pw-intake-input:focus {
    border-color: #2271b1;
    outline: none;
}
/* The PIN boxes (10.12.10). They stopped being type=password so that this screen carries
 * no login form for a browser or a password manager to fill - see pw-board.js - so the
 * masking is done here instead. A PIN is still never readable over somebody's shoulder.
 * pw-board.js checks this property is supported before it drops the password type, so a
 * browser that lacks it keeps the old field rather than showing the digits. */
.pw-pin-box {
    -webkit-text-security: disc;
            text-security: disc;
}
.pw-intake-error {
    font-size: 13px;
    font-weight: 600;
    color: #b32d2e;
    min-height: 18px;
    margin-bottom: 4px;
}
.pw-intake-foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Overview tab (10.12.28) ─────────────────────────
   Words and shapes carry every state (§2 — protanopia): LATE is hatched,
   AT RISK is amber with dark text, TIGHT is outlined, ON TRACK is muted.
   Station colours are decoration only. */
.pw-ov { display: flex; flex-direction: column; gap: 14px; }
.pw-ov-head { display: flex; align-items: center; margin: -6px 0 -8px; }
.pw-ov-tabs .pw-board-tab { padding: 5px 12px; font-size: 12px; }
/* 10.12.44 — the icon-only Today/Progress switch, far right beside the Stations
   pill; visible only while the Overview tab is open. */
.pw-station-tabs-wrapper--collapsed { display: flex; align-items: center; }
.pw-ov-switch { display: none; margin-left: auto; }
.pw-board.pw-on-overview .pw-ov-switch { display: flex; }
.pw-ov-switch__btn { line-height: 0; padding: 7px 10px; }
.pw-ov-updated { font-size: 12px; color: #787c82; }
/* One row always — a vertical screen shrinks the tiles, never wraps them (Piotr, 2026-08-20). */
.pw-ov-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pw-ov-tile {
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    padding: 6px 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pw-ov-tile__row   { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pw-ov-tile__num   { font-size: 24px; font-weight: 700; line-height: 1.05; color: #1d2327; }
.pw-ov-tile__label { font-size: 12px; font-weight: 600; color: #50575e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-ov-tile__sub   { font-size: 11px; color: #787c82; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Prominence order Overdue > Risk > Today — the ground carries it; the words
   still carry the meaning (§2). */
.pw-ov-tile--late  { background: repeating-linear-gradient(45deg, #d63638 0 6px, #b02a2c 6px 12px); border-color: #b02a2c; }
.pw-ov-tile--late .pw-ov-tile__num, .pw-ov-tile--late .pw-ov-tile__label { color: #fff; }
.pw-ov-tile--late .pw-ov-tile__sub { color: #ffe0e0; }
.pw-ov-tile--risk  { background: #dba617; border-color: #c99a10; }
.pw-ov-tile--risk .pw-ov-tile__num, .pw-ov-tile--risk .pw-ov-tile__label { color: #1d2327; }
.pw-ov-tile--risk .pw-ov-tile__sub { color: #4a3a05; }
.pw-ov-tile--today { background: #fbf0d3; border-color: #e7d193; }
.pw-ov-tile--today .pw-ov-tile__sub { color: #6b5a1e; }
.pw-ov-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
@media (max-width: 980px) { .pw-ov-grid { grid-template-columns: 1fr; } }
.pw-ov-box {
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pw-ov-box h3 { margin: 0; font-size: 16px; color: #1d2327; }
.pw-ov-boxhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.pw-ov-strow {
    display: grid; grid-template-columns: 150px 220px minmax(0, 1fr) 120px;
    gap: 10px; align-items: center; padding: 7px 0;
}
@media (max-width: 1200px) { .pw-ov-strow { grid-template-columns: 130px 200px minmax(0, 1fr); } .pw-ov-strow__wait { display: none; } }
.pw-ov-strow__name { font-size: 14px; font-weight: 600; padding-left: 8px; }
.pw-ov-strow__pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pw-ov-strow__wait { font-size: 12px; color: #787c82; text-align: right; white-space: nowrap; }
/* The station pills. Today is the one a manager reads first, so it is the big
   one; All is the smaller companion in the station's own colour; both are real
   pills at every value, never bare text. */
.pw-ov-pill {
    display: inline-flex; align-items: center; white-space: nowrap;
    border-radius: 14px; font-weight: 600; line-height: 1;
}
.pw-ov-pill--today {
    background: #dba617; color: #1d2327;
    font-size: 14px; font-weight: 700; padding: 6px 14px;
}
.pw-ov-pill--today.pw-ov-pill--quiet {
    background: #fff; color: #787c82; border: 1px solid #c3c4c7; font-weight: 600;
}
.pw-ov-pill--all  { color: #fff; font-size: 12px; padding: 4px 11px; }
.pw-ov-pill--held { background: #8c8f94; color: #fff; font-size: 12px; padding: 4px 11px; }
/* 10.12.37 — number-only station pills, red · amber · green in a fixed order;
   the red keeps the house hatch so it reads by shape as well. */
.pw-ov-pill--num   { font-size: 13px; font-weight: 700; padding: 5px 0; min-width: 40px; justify-content: center; }
.pw-ov-pill--red   { background: repeating-linear-gradient(45deg, #d63638 0 6px, #b02a2c 6px 12px); color: #fff; }
.pw-ov-pill--amber { background: #dba617; color: #1d2327; }
.pw-ov-pill--green { background: #27ae60; color: #fff; }
.pw-ov-wait-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid #c3c4c7; border-radius: 14px; padding: 4px 10px;
    font-size: 12px; color: #50575e; white-space: nowrap; background: #fff;
    min-width: 84px; box-sizing: border-box;
}
.pw-ov-wait-pill__icon { display: inline-flex; }
.pw-ov-wait-pill--amber { background: #dba617; border-color: #c99a10; color: #1d2327; }
.pw-ov-wait-pill--red   { background: repeating-linear-gradient(45deg, #d63638 0 6px, #b02a2c 6px 12px); border-color: #b02a2c; color: #fff; }
/* Equal-width verdict pills on the Today shortlist. */
.pw-ov-item .pw-ov-chip { min-width: 140px; display: inline-flex; justify-content: center; text-align: center; }
/* 10.12.40 — click-throughs and the shortlist's dot pills + mini progress bar. */
.pw-ov-item--click { cursor: pointer; }
.pw-ov-item--click:hover { box-shadow: 0 1px 5px rgba(0,0,0,0.14); }
/* 10.12.47 — a decisions item that is not this viewer's to resolve. */
.pw-ov-item--foreign { opacity: 0.72; background: #fafafa; }
.pw-ov-chip--owner { min-width: 0; flex-shrink: 0; }
.pw-ov-strow--click { cursor: pointer; border-radius: 6px; }
.pw-ov-strow--click:hover { background: #f6f7f7; }
.pw-ov-item__ord { font-size: 13px; font-weight: 700; flex-shrink: 0; }
.pw-ov-item__stations { display: inline-flex; gap: 4px; flex-wrap: wrap; flex-grow: 1; min-width: 0; }
.pw-ov-item .pw-card-station-pill { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.pw-ov-mini {
    width: 90px; height: 8px; flex-shrink: 0; border-radius: 2px;
    background: #f0f0f1; border: 1px solid #c3c4c7; overflow: hidden; display: inline-block;
}
.pw-ov-mini__fill { display: block; height: 100%; background: #2271b1; }
.pw-ov-mini--none { background: #fff; }
.pw-ov-bar { display: flex; height: 22px; border-radius: 4px; overflow: hidden; border: 1px solid #c3c4c7; }
.pw-ov-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden;
}
.pw-ov-seg--late  { background: repeating-linear-gradient(45deg, #d63638 0 6px, #b02a2c 6px 12px); color: #fff; }
.pw-ov-seg--today { background: #dba617; color: #1d2327; }
.pw-ov-seg--later { background: #e8e8ea; color: #50575e; font-weight: 600; }
.pw-ov-seg--held  { background: #8c8f94; color: #fff; }
.pw-ov-seg--empty { background: #fff; color: #a7aaad; font-weight: 600; }
.pw-ov-item {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid #e0e0e0; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px;
    font-size: 13px;
}
.pw-ov-item__text { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-ov-item__age { font-size: 12px; color: #787c82; flex-shrink: 0; }
.pw-ov-tag {
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0;
    background: #9b59b6; color: #fff; padding: 2px 8px; border-radius: 10px;
}
.pw-ov-empty { font-size: 13px; color: #787c82; margin: 4px 0; }
.pw-ov-chip {
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap;
    padding: 3px 10px; border-radius: 12px; flex-shrink: 0;
}
.pw-ov-chip--late    { background: repeating-linear-gradient(45deg, #d63638 0 6px, #b02a2c 6px 12px); color: #fff; }
.pw-ov-chip--atrisk  { background: #dba617; color: #1d2327; }
.pw-ov-chip--tight   { background: #fff; color: #1d2327; border: 2px solid #1d2327; padding: 1px 8px; }
.pw-ov-chip--ontrack { background: #f0f0f1; color: #646970; font-weight: 600; }
.pw-ov-move {
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    padding: 10px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 13px;
}
.pw-ov-move h3 { margin: 0; font-size: 14px; color: #50575e; }
.pw-ov-move strong { font-size: 16px; }
.pw-ov-legend {
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    padding: 8px 16px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    font-size: 12px; color: #50575e;
}
.pw-ov-legend__rule { font-weight: 600; color: #1d2327; }
.pw-ov-swatch { display: inline-block; width: 24px; height: 11px; border-radius: 2px; vertical-align: middle; }
.pw-ov-swatch--done { background: #2271b1; }
.pw-ov-swatch--time { background: #8c8f94; height: 7px; }
.pw-ov-jrow {
    display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr) 170px;
    gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid #f0f0f1;
}
.pw-ov-jrow:first-child { border-top: none; }
.pw-ov-jrow--click { cursor: pointer; }
.pw-ov-jrow--click:hover { background: #f6f7f7; }
/* 10.12.43 — the "More ▾" fold for Overview-audience accounts. */
.pw-mgr-more { position: relative; display: inline-flex; }
.pw-mgr-more__menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 1000;
    background: #fff; border: 1px solid #c3c4c7; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15); padding: 6px; margin-top: 4px;
    flex-direction: column; align-items: stretch; gap: 2px; min-width: 190px;
}
.pw-mgr-more--open .pw-mgr-more__menu { display: flex; }
.pw-mgr-more__menu .pw-board-tab { text-align: left; }
/* 10.12.48 — narrow-screen tiers for the folded row: icons-only first, then one
   current-tab ▾ pill opening the full menu. */
.pw-mgr-single { display: none; }
/* 10.12.53 — for Overview-audience accounts the controls share ONE row at every
   width (Piotr: "all not in one row"): title row, then tabs · Stations ▾ · view
   switch on a single wrapping line. Tabs never stretch. */
/* ONE ROW, ZERO EXCEPTIONS — THE ROW IS ONE PIECE (Piotr, 2026-08-20). One
   shrink priority for the whole bar: the TITLE is the only crushable thing
   (ellipsis down to nothing); every control — chips, dot, tabs, More, Stations,
   the view switch — is pinned at content size and may neither stretch nor
   shrink nor vanish. Past that, words shed (≤900px), then the one-pill tier
   (≤640px). Nothing wraps, ever. */
.pw-board-header--fold { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px; min-width: 0; overflow: hidden; }
.pw-board-header--fold .pw-board-title-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex: 0 1 auto; margin: 0; min-width: 0; }
.pw-board-header--fold .pw-board-title-group h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.pw-board-header--fold .pw-board-title-group > *:not(h2) { flex: 0 0 auto; }
.pw-board-header--fold .pw-urgency { white-space: nowrap; flex: 0 0 auto; }
.pw-board-header--fold .pw-board-tabs--manager { flex: 0 0 auto; margin: 0; flex-wrap: nowrap; }
.pw-board-header--fold .pw-board-tabs--manager .pw-board-tab { flex: 0 0 auto; white-space: nowrap; }
/* Stations + switch ride the right edge and are NEVER shrinkable — 10.12.56 let
   them crush to zero width and they vanished on narrow screens. */
.pw-board-header--fold .pw-station-tabs-wrapper--collapsed { display: flex; flex-wrap: nowrap; flex: 0 0 auto; margin: 0 0 0 auto; }
.pw-ov-switch { flex: 0 0 auto; }
.pw-ov-switch .pw-board-tab { flex: 0 0 auto; }
/* 10.12.59 — the width tiers below are the GUESS, and a measured header
   (.pw-board-header--fit, admins for now) opts out of every one of them: its
   own fit pass decides what folds and what sheds, by measuring the real bar. */
@media (max-width: 900px) {
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-board-tab--direct .pw-tab-text { display: none; }
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-board-tab--direct { padding: 8px 12px; }
    /* 10.12.54 — every word the row can spare goes when space is short: Stations
       keeps its count and arrow, More keeps its arrow, the request chip and the
       overdue / at-risk banners keep their numbers (titles on hover; the hatch
       and amber grounds still tell them apart). Overview-audience accounts only. */
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-station-collapse-pill__label { display: none; }
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-more-word { display: none; }
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-urgency__word { display: none; }
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-urgency { padding: 6px 10px; }
}
@media (max-width: 640px) {
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-board-tab--direct,
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-mgr-more:not(.pw-mgr-single) { display: none; }
    .pw-board-header--fold:not(.pw-board-header--fit) .pw-mgr-single { display: inline-flex; }
}

/* ── The measured bar (10.12.59) ─────────────────────
   One row, one giving-up order, all of it decided by the fit pass in
   pw-board.js. The tab group is centred between the two clusters; the title is
   the only crushable thing; no control may stretch, shrink or vanish. */
/* 10.12.63 — ONE CONTAINER, ONE FLAT LIST. Every item is a direct child and
   none of them may shrink; the name alone gives way, and only on its rungs.
   Nothing is nested inside a shrinking box any more, so nothing can spill or
   overlap — which no rung could have fixed while the structure was nested. */
/* While the stress test is driving the bar, say so on the bar itself — the thing
   being tested is the thing you should be looking at (10.12.73). */
.pw-board-header--fit.pw-header-stress { outline: 2px dashed #2271b1; outline-offset: -2px; }
.pw-board-header--fit > * { flex: 0 0 auto; }
.pw-board-header--fit > .pw-fit-gap { flex: 1 1 0; min-width: 0; }
/* 10.12.64 — the name is EITHER THERE OR NOT THERE, never "B…". It is never
   shrinkable and never truncated; rung 3 removes it outright (Piotr: "name
   should be either there or not there, not partial"). */
.pw-board-header--fit > h2 { margin: 0; white-space: nowrap; }
.pw-board-header--fit.pw-fit-3 > h2 { display: none; }
/* Flattened tabs keep the grouped look they had inside the old strip. */
.pw-board-header--fit > .pw-board-tab { background: #f0f0f1; }
.pw-board-header--fit > .pw-board-tab.pw-board-tab--active { background: #2271b1; color: #fff; }
/* 10.12.64 — THE HEADER IS HELD TO THE SCREEN, NOT GROWN TO ITS CONTENT. This is
   why the same screen gave two different pictures: with nothing capping its
   width the bar simply widened to fit everything, so scrollWidth equalled
   clientWidth, the fit pass saw no overflow, folded nothing — and the surplus
   (the view switch) spilled off the right edge. Capped here, overflow becomes
   real and the ladder does its work. */
.pw-board-header--fit { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px; min-width: 0; overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; }
/* NO min-width:0 here — that let the cluster shrink under its own chip and
   banners, so they spilled and the tabs drew over them (10.12.60). Only the
   h2 inside may crush; the cluster itself never goes below its controls. */
.pw-board-header--fit .pw-board-title-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex: 0 1 auto; margin: 0; }
/* 10.12.62 — the board name is an ITEM ON THE LADDER, not a silent casualty.
   It is content-sized by default, so flex can never crush it away behind the
   fit pass's back (which is how it disappeared while there was still room for
   it). Rung 3 lets it ellipsise, rung 4 removes it — both measured. */
.pw-board-header--fit .pw-board-title-group h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.pw-board-header--fit.pw-fit-3 .pw-board-title-group h2 { flex: 0 1 auto; min-width: 0; max-width: 150px; }
.pw-board-header--fit.pw-fit-4 .pw-board-title-group h2 { display: none; }
.pw-board-header--fit .pw-board-title-group > *:not(h2) { flex: 0 0 auto; }
.pw-board-header--fit .pw-urgency { white-space: nowrap; flex: 0 0 auto; }
/* 10.12.60 — the tab group is CONTENT-SIZED and never shrinks; two elastic gaps
   either side centre it between the clusters. That is what makes overflow real:
   when the gaps are spent the header genuinely overflows, the fit pass sees it
   and folds a tab. With the strip shrinkable (10.12.59) the tabs spilled over
   the title instead and the header never reported overflow, so nothing folded. */
.pw-board-header--fit .pw-board-tabs--manager { flex: 0 0 auto; margin: 0; flex-wrap: nowrap; }
.pw-board-header--fit .pw-fit-gap { flex: 1 1 0; min-width: 0; }
.pw-board-header--fit .pw-board-tabs--manager .pw-board-tab { flex: 0 0 auto; white-space: nowrap; }
.pw-board-header--fit .pw-mgr-more { flex: 0 0 auto; }
.pw-board-header--fit .pw-mgr-single { display: none; }   /* the More button becomes the single pill instead */
.pw-board-header--fit .pw-station-tabs-wrapper--collapsed { display: flex; flex-wrap: nowrap; flex: 0 0 auto; margin: 0; }
/* The four shed tiers, applied in order by the fit pass and only when measuring
   says folding tabs was not enough. */
.pw-board-header--fit.pw-fit-1 .pw-urgency__word { display: none; }
.pw-board-header--fit.pw-fit-1 .pw-urgency { padding: 6px 10px; }
.pw-board-header--fit.pw-fit-2 .pw-station-collapse-pill__label { display: none; }
/* 10.12.67 — per-tab, set by the fit pass one tab at a time; a folded tab in the
   More menu is not a direct child, so it always keeps its words. */
.pw-board-header--fit > .pw-board-tab.pw-tab-narrow .pw-tab-text { display: none; }
.pw-board-header--fit .pw-mgr-more > .pw-board-tab { background: #f0f0f1; }
@media (max-width: 900px) { .pw-ov-jrow { grid-template-columns: 1fr; gap: 6px; } }
.pw-ov-jrow__order { font-size: 14px; font-weight: 700; }
.pw-ov-jrow__meta { font-size: 12px; color: #787c82; }
.pw-ov-jrow__bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pw-ov-jrow__chip { display: flex; justify-content: flex-end; }
.pw-ov-workbar { height: 14px; border-radius: 2px; background: #f0f0f1; border: 1px solid #c3c4c7; overflow: hidden; }
.pw-ov-workbar__fill { height: 100%; background: #2271b1; }
.pw-ov-timebar { height: 7px; border-radius: 2px; background: #f0f0f1; border: 1px solid #c3c4c7; overflow: hidden; }
.pw-ov-timebar__fill { height: 100%; background: #8c8f94; }
.pw-ov-timebar--late .pw-ov-timebar__fill { background: repeating-linear-gradient(45deg, #d63638 0 6px, #b02a2c 6px 12px); }

/* ── 10.12.70: the station's Bench / By date switch, and the three date boxes ──
   The switch is the Overview's control in the station head's right zone, which has
   been empty since the three-zone head was built. The boxes are deliberately
   identical to look at — the heading word is what tells them apart, never a colour
   (CLAUDE.md section 2, protanopia). */
/* 10.12.71 — the switch is the Overview's control in the Overview's own place: the right
   end of the header row. Shown only while a REGULAR station is open (Piotr: not QC, not any
   specialised station), exactly as .pw-ov-switch shows only on the Overview. */
.pw-st-switch { display: none; margin-left: auto; }
body.pw-st-has-switch .pw-st-switch { display: flex; }
.pw-st-switch__btn { line-height: 0; padding: 7px 10px; }

/* By date: the switch and nothing else — "no menu, search o anything else on there, no
   training or logout either" (Piotr, 2026-08-21). Everything is HIDDEN, never removed: one
   press brings the whole board back, and the Bench is untouched. The classes sit on <body>
   because the logout button and pw-training's owed banner are appended there, outside the
   board root. */
body.pw-bydate-only .pw-board-header > *:not(.pw-st-switch-host):not(.pw-st-switch) { display: none !important; }
body.pw-bydate-only .pw-st-switch-host > *:not(.pw-st-switch) { display: none !important; }
body.pw-bydate-only .pw-st-switch-host { justify-content: flex-end; }
body.pw-bydate-only .pw-panel-head { display: none !important; }
body.pw-bydate-only #pw-board-logout { display: none !important; }
body.pw-bydate-only #pw-training-banner { display: none !important; }
body.pw-bydate-only .pw-training-btn { display: none !important; }
body.pw-bydate-only.pwt-has-banner { padding-top: 0 !important; }

/* 10.12.73 — By date is meant to run full-screen or as an app, so the way back must cost
   NO space at all. Piotr, 2026-08-21: "button to go back taking any space in header is
   silly". The header keeps zero height and the switch floats over the top-right corner it
   already sits in; the boxes start at the very top of the screen, and the only room made
   for the switch is inside the last box's own heading, so no band crosses the page. The
   WordPress admin bar and the 32px strip it reserves go with it. Hidden, never removed —
   one press of the switch brings the whole board back. */
html.pw-bydate-only { margin-top: 0 !important; }
body.pw-bydate-only #wpadminbar { display: none !important; }
body.pw-bydate-only #pw-board-header { height: 0; min-height: 0; padding: 0; margin: 0; border: 0; overflow: visible; }
/* 10.12.76 — the way back sits exactly where Log out and Training sit on every other
   screen: the bottom-right corner, fixed, quiet until you go near it (Piotr, 2026-08-21).
   Both of those are hidden in this view, so the corner is its own. It costs nothing at the
   top, so the boxes now run edge to edge with no clearance carved out of any heading. */
body.pw-bydate-only .pw-board-header {
    position: fixed; bottom: 12px; right: 12px; top: auto; left: auto; z-index: 999;
    width: auto; min-height: 0; padding: 0; margin: 0; border: 0; gap: 0;
    background: transparent; box-shadow: none;
}
body.pw-bydate-only .pw-st-switch-host { padding: 0; margin: 0; border: 0; min-height: 0; background: transparent; }
body.pw-bydate-only .pw-st-switch {
    background: #f0f0f1; border: 1px solid #c3c4c7; border-radius: 4px;
    padding: 2px; opacity: 0.6; transition: opacity 0.15s;
}
body.pw-bydate-only .pw-st-switch:hover { opacity: 1; }
body.pw-bydate-only #pw-board-content { padding-top: 0; margin-top: 0; }
body.pw-bydate-only .pw-station-panel { padding-top: 0; }
body.pw-bydate-only .pw-st-bydate { margin-top: 0; }

.pw-st-bydate {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    margin-top: 4px;
}
/* 10.12.80 — the tile is its own pill, a header standing above its list rather than
   welded to the top of it (Piotr, 2026-08-21). The column itself carries no ground: it is
   two cards with air between them. */
.pw-stbd-box {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* The heading IS the Overview's headline tile — .pw-ov-tile carries the ground, the border
   and the corners. 10.12.81: the type is scaled up here and only here, because this screen
   is read by a manager standing about two metres away, not leaned over. The three pills
   are one height by construction: every tile carries a number line and a second line, so
   an empty box is exactly as tall as a full one. */
.pw-stbd-box__head { padding: 12px 16px 14px; }
.pw-stbd-box__head .pw-ov-tile__row   { gap: 12px; }
.pw-stbd-box__head .pw-ov-tile__num   { font-size: 48px; line-height: 1; }
.pw-stbd-box__head .pw-ov-tile__label { font-size: 20px; }
.pw-stbd-box__head .pw-ov-tile__sub   { font-size: 14px; margin-top: 4px; }
/* 10.12.86 — a job is a small pill carrying its number and nothing else (Piotr). What the
   pill no longer prints is on its hover, so the number can still explain itself. */
.pw-stbd-list {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-content: flex-start;
}
/* 10.12.91 — the band headings are gone (Piotr: the colours are enough), so the pills sit
   straight in the card. Four to a row on one grid, every pill the same width (10.12.90):
   flex-wrap sized each to its own number and the rows came out ragged. */
.pw-stbd-pill {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    color: #1d2327;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 6px 10px;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The two ranked bands. Colours are the Overview tiles' own, so nothing new is invented. */
.pw-stbd-pill--amber { background: #dba617; border-color: #c99a10; color: #1d2327; }
.pw-stbd-pill--red   { background: #d63638; border-color: #b02a2c; color: #fff; }

/* 10.12.86 — the row rules went with the rows: .pw-stbd-row / -order / -num / -meta /
   -child / -states / -state described a stacked row that is no longer drawn. */
.pw-stbd-none { font-size: 12px; color: #787c82; padding: 2px 0; grid-column: 1 / -1; }
.pw-stbd-none--gone { display: none; }

/* A narrow or portrait screen stacks the three rather than crushing them. */
@media (max-width: 900px) {
    .pw-st-bydate { grid-template-columns: 1fr; }
}