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

/* ── 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: 20px;
    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;
}
@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: #f6f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    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;
}

/* ── 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;
}

.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;
}
.pw-body-text {
    flex: 2;
    min-width: 0;
}
.pw-body-files {
    flex: 3;
    min-width: 0;
}

/* ── 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;
}

.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 ──── */
.pw-file-grid {
    display: flex;
    gap: 6px;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    flex: 1;
    min-width: 0;
}
.pw-file-grid::-webkit-scrollbar {
    display: none;
}
.pw-file-grid-wrap {
    display: flex;
    align-items: stretch;
    margin: 8px 0 4px;
    position: relative;
    min-width: 0;
    overflow: hidden;
    gap: 6px;
}
.pw-file-grid-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    background: #e0e0e0;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #50575e;
    transition: background 0.15s;
    z-index: 2;
    padding: 0;
    line-height: 1;
    border-radius: 6px;
}
.pw-file-grid-arrow:hover {
    background: #c3c4c7;
}
.pw-file-thumb {
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid #3d3660;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #2a2540;
    flex-shrink: 0;
    width: 130px;
}
.pw-file-thumb:hover {
    border-color: #5a4fa0;
}
.pw-file-thumb--active {
    border-color: #7c6fd0;
    box-shadow: 0 0 0 1px rgba(124,111,208,0.3);
}
.pw-file-thumb-canvas {
    width: 100%;
    height: 80px;
    background: #F0EDE8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pw-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pw-file-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.pw-ftp-ext {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.pw-ftp-3d {
    background: rgba(110,200,160,0.25);
    color: #1d7a52;
}
.pw-ftp-img {
    background: rgba(120,180,230,0.25);
    color: #1a5a8a;
}
.pw-file-thumb-label {
    display: flex;
    align-items: center;
    padding: 3px 6px;
    gap: 4px;
    text-decoration: none;
    cursor: pointer;
}
.pw-file-thumb-label:hover {
    background: rgba(255,255,255,0.08);
}
.pw-file-thumb-label:hover .pw-ftl-name {
    color: #fff;
}
.pw-file-thumb-label:hover .pw-ftl-download {
    opacity: 1;
}
.pw-ftl-name {
    flex: 1;
    min-width: 0;
    font-size: 10px;
    color: #e0dce8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.pw-ftl-download {
    flex-shrink: 0;
    font-size: 12px;
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.15s;
    line-height: 1;
}
.pw-ftl-download:hover {
    opacity: 1;
}

/* ── Large Viewer (shared, below grid) ───────────── */
.pw-file-viewer-large {
    max-width: 500px;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: #F0EDE8;
    margin: 6px 0 8px;
    position: relative;
}
.pw-body-files .pw-file-viewer-large {
    max-width: 100%;
}
.pw-file-viewer-large canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.pw-fv-image {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.pw-fv-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    font-size: 13px;
}

/* ── Progress Bar ────────────────────────────────── */
.pw-fv-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    padding: 20px;
}
.pw-fv-progress-label {
    font-size: 12px;
    color: #666;
}
.pw-fv-progress-track {
    width: 60%;
    max-width: 200px;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    overflow: hidden;
}
.pw-fv-progress-bar {
    width: 0;
    height: 100%;
    background: #6ec8a0;
    border-radius: 3px;
    transition: width 0.2s;
}

/* ── 3D Preview Modal ─────────────────────────────── */
.pw-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 3vw;
}
.pw-preview-dialog {
    background: #fff;
    border-radius: 8px;
    width: 90vw;
    max-width: 1200px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pw-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.pw-preview-title {
    font-weight: 600;
    font-size: 15px;
    color: #1d2327;
}
.pw-preview-counter {
    font-size: 13px;
    color: #888;
    margin-left: auto;
}
.pw-preview-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    margin-left: 8px;
}
.pw-preview-close:hover { color: #333; }
.pw-preview-body {
    display: flex;
    flex: 1;
    min-height: 0;
}
.pw-preview-sidebar {
    width: 12vw;
    min-width: 90px;
    max-width: 130px;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.pw-preview-arrow {
    width: 100%;
    height: 36px;
    border: none;
    background: #f5f5f5;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.pw-preview-arrow:hover { background: #e8e8e8; }
.pw-preview-arrow--up { border-bottom: 1px solid #e0e0e0; }
.pw-preview-arrow--down { border-top: 1px solid #e0e0e0; }
.pw-preview-thumbstrip {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
}
.pw-preview-thumbstrip::-webkit-scrollbar { width: 0; }
.pw-preview-thumb {
    border: 2px solid transparent;
    border-radius: 6px;
    background: #f5f0eb;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px 4px;
    flex-shrink: 0;
    aspect-ratio: 1;
}
.pw-preview-thumb:hover { border-color: #c3c4c7; }
.pw-preview-thumb--active { border-color: #2271b1; }
.pw-preview-thumb-img {
    width: 100%;
    height: auto;
    max-height: 70%;
    object-fit: contain;
    border-radius: 3px;
}
.pw-preview-thumb-ext {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    flex: 1;
    display: flex;
    align-items: center;
}
.pw-preview-thumb-name {
    font-size: 9px;
    color: #666;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    margin-top: auto;
}
.pw-preview-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}
.pw-preview-viewer-inner {
    flex: 1;
    background: #F0EDE8;
    min-height: 0;
    position: relative;
}
.pw-preview-viewer-inner canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.pw-preview-viewer-inner .pw-fv-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pw-preview-viewer-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    flex-shrink: 0;
}
.pw-preview-filename {
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pw-preview-download {
    color: #2271b1;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}
.pw-preview-download:hover { text-decoration: underline; }

/* ── 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;
}

.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;
}

/* ── 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;
}

/* ── 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%;
    }
    .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;
}
.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;
}
.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-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; }
.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;
}
.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-items {
    border-top: 1px solid #f0f0f1;
    padding-top: 8px;
    margin-top: 8px;
}
.pw-dispatched-item {
    padding: 6px 0;
    border-bottom: 1px solid #f6f7f7;
}
.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;
}

/* ── 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;
}
.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;
}

/* ── 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;
}
.pw-invoice-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
}
.pw-invoice-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.pw-invoice-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.pw-invoice-order {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.pw-invoice-customer {
    font-weight: 500;
    min-width: 100px;
    color: #1d2327;
}
.pw-invoice-amount {
    font-weight: 600;
    color: #2c3338;
    white-space: nowrap;
}
.pw-invoice-amount-group {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.pw-invoice-amount-detail {
    font-size: 11px;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
}
.pw-invoice-ref {
    font-size: 12px;
    color: #2271b1;
    font-weight: 600;
    background: #f0f6fc;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.pw-invoice-meta {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}
.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;
    }
}

/* ── 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 {
    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: 50px;
}
.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-worker { background: #e5e7eb; color: #374151; }
.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;
}
.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;
    align-items: center;
    gap: 6px;
    padding: 3px 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;
}
.pw-customer-diff-arrow {
    color: #9ca3af;
    flex-shrink: 0;
}
.pw-customer-diff-new {
    color: #166534;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════
   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: none;
}
.pw-pricing-product-tabs::-webkit-scrollbar { display: none; }
.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;
}
.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;
}
.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%;
}

/* 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;
    max-height: 280px;
    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 ── */
/* Override existing flex-row layout (line 517-539) with an aligned
 * two-column grid: max-content for labels, 1fr for values. */
.pw-job-card-options {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 0;
    padding: 0;
    background: transparent;
    border: 1px solid #f0f0f1;
    border-radius: 4px;
    overflow: hidden;
}
.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;
    white-space: nowrap;
}
.pw-job-card-option-value {
    color: #1d2327;
    font-weight: 500;
}

/* ── 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;
}