:root {
    --app-bg: #eef3f7;
    --app-surface: rgba(255, 255, 255, 0.96);
    --app-surface-strong: #ffffff;
    --app-surface-soft: #f7fafc;
    --app-surface-muted: #edf3f8;
    --app-surface-warning: #fff6df;
    --app-surface-info: #e9f4fb;
    --app-text: #1f2933;
    --app-muted: #52606d;
    --app-heading: #163247;
    --app-border: #d7e0e9;
    --app-border-strong: #bcc9d4;
    --app-primary: #156c8a;
    --app-primary-strong: #0e556d;
    --app-success: #1e8a5c;
    --app-warning: #b86a05;
    --app-danger: #c23a3a;
    --app-danger-strong: #a32727;
    --app-neutral: #6b7a89;
    --app-input-bg: #ffffff;
    --app-input-text: #1f2933;
    --app-code-bg: #1f3344;
    --app-code-text: #edf5fb;
    --app-info-text: #155e84;
    --app-info-border: #b8d4e8;
    --app-success-bg: #e8f7ef;
    --app-success-text: #16603f;
    --app-success-border: #b9e1cb;
    --app-error-bg: #f8d7da;
    --app-error-text: #dc3545;
    --app-error-border: #dc3545;
    --app-danger-bg: #fdeeee;
    --app-danger-text: #7d1d1d;
    --app-danger-border: #f4c1c1;
    --app-warning-text: #825307;
    --app-warning-border: #f2d190;
    --app-forklift-separator-bg: #d9f0f8;
    --app-forklift-separator-text: #15556f;
    --app-forklift-review-separator-border: #8bbfd4;
    --app-forklift-review-separator-text: #15556f;
    --app-forklift-review-separator-gradient: repeating-linear-gradient(90deg, #eef9fd 0 10px, #d9f0f8 10px 20px);
    --app-detail-truck-only-bg: #e8f7ef;
    --app-detail-truck-only-text: #16603f;
    --app-detail-truck-only-border: #b9e1cb;
    --app-detail-partial-stock-bg: #d9f0f8;
    --app-detail-partial-stock-text: #15556f;
    --app-detail-partial-stock-border: #8bbfd4;
    --app-detail-warehouse-only-bg: #f1f5f9;
    --app-detail-warehouse-only-text: #4b5563;
    --app-detail-warehouse-only-border: #d5dde5;
    --app-detail-legend-error-swatch-bg: #f4b6b6;
    --app-detail-legend-error-swatch-border: rgba(31, 41, 55, 0.18);
    --app-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
    --app-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.08);
    --app-overlay-bg: rgba(26, 41, 56, 0.42);
    --app-modal-button-secondary-bg: #e5e7eb;
    --app-modal-button-secondary-text: #111827;
    --app-radius-lg: 18px;
    --app-radius-md: 12px;
    --app-radius-sm: 8px;
    --app-shell-radius: 18px;
    --app-panel-radius: 16px;
    --app-shell-padding: 24px;
    --app-panel-padding: 18px;
    --app-space-1: 0.35rem;
    --app-space-2: 0.55rem;
    --app-space-3: 0.85rem;
    --app-space-4: 1.1rem;
    --app-space-5: 1.5rem;
    --app-space-6: 2rem;
    --app-shell-max: 1320px;
    --app-vh: 1vh;
    --app-loading-bg: #eef3f7;
    --app-btn-view-bg: #3498db;
    --app-btn-teal-bg: #16a085;
    --app-btn-purple-bg: #8e44ad;
}

html[data-app-theme="dark"] {
    /* OPSDARKUI1 — declare the page's colour scheme so the BROWSER
     * renders native UI dark: <select> dropdown popups + their option
     * lists, form-control internals, and (crucially) every native
     * scrollbar — dropdown listboxes, the task-edit modal body, and any
     * other scroll container. Previously this was set only on
     * checkbox/radio, so native dropdowns + scrollbars stayed light in
     * dark mode. Light mode is unaffected (no color-scheme set there). */
    color-scheme: dark;
    --app-bg: #0f1720;
    --app-surface: rgba(22, 31, 43, 0.95);
    --app-surface-strong: #16202c;
    --app-surface-soft: #1b2836;
    --app-surface-muted: #22303d;
    --app-surface-warning: #3a2f15;
    --app-surface-info: #162a37;
    --app-text: #d8e3ec;
    --app-muted: #a9b7c5;
    --app-heading: #e3ebf2;
    --app-border: #2f3d49;
    --app-border-strong: #415264;
    --app-primary: #3b94b5;
    --app-primary-strong: #2a7b99;
    --app-success: #2fa56f;
    --app-warning: #d4982f;
    --app-danger: #d95a5a;
    --app-danger-strong: #ba4343;
    --app-neutral: #93a4b5;
    --app-input-bg: #111a24;
    --app-input-text: #d8e3ec;
    --app-code-bg: #0f1720;
    --app-code-text: #e6f0f8;
    --app-info-text: #8dc5df;
    --app-info-border: #34556b;
    --app-success-bg: #163325;
    --app-success-text: #9cdeba;
    --app-success-border: #2d6b49;
    --app-error-bg: #3a2024;
    --app-error-text: #dc3545;
    --app-error-border: #dc3545;
    --app-danger-bg: #3a2024;
    --app-danger-text: #f2b8c0;
    --app-danger-border: #7f4048;
    --app-warning-text: #efd391;
    --app-warning-border: #7a6030;
    --app-forklift-separator-bg: #173d52;
    --app-forklift-separator-text: #d8f1fb;
    --app-forklift-review-separator-border: #4f8094;
    --app-forklift-review-separator-text: #d8f1fb;
    --app-forklift-review-separator-gradient: repeating-linear-gradient(90deg, #112a38 0 10px, #163a4d 10px 20px);
    --app-detail-truck-only-bg: #163325;
    --app-detail-truck-only-text: #9cdeba;
    --app-detail-truck-only-border: #2d6b49;
    --app-detail-partial-stock-bg: #173d52;
    --app-detail-partial-stock-text: #d8f1fb;
    --app-detail-partial-stock-border: #4f8094;
    --app-detail-warehouse-only-bg: #22303d;
    --app-detail-warehouse-only-text: #a9b7c5;
    --app-detail-warehouse-only-border: #3a4b5b;
    --app-detail-legend-error-swatch-bg: #5a2a31;
    --app-detail-legend-error-swatch-border: #8a525b;
    --app-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
    --app-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.28);
    --app-overlay-bg: rgba(3, 10, 18, 0.72);
    --app-modal-button-secondary-bg: #2a3643;
    --app-modal-button-secondary-text: #d8e3ec;
    --app-loading-bg: #0f1720;
    --app-btn-view-bg: #5ba8d9;
    --app-btn-teal-bg: #1dba9c;
    --app-btn-purple-bg: #a358c7;
}

html {
    min-height: 100%;
    background:
        radial-gradient(circle at top left, rgba(21, 108, 138, 0.13), transparent 28%),
        radial-gradient(circle at right 20%, rgba(30, 138, 92, 0.10), transparent 26%),
        linear-gradient(180deg, #f4f8fb 0%, #eaf1f6 100%);
    background-attachment: fixed;
}

@media (min-width: 961px) {
    html {
        scrollbar-gutter: stable both-edges;
    }

    html[data-app-theme="light"] {
        background:
            linear-gradient(180deg, #fbfdff 0%, #f1f5f9 100%);
        background-attachment: fixed;
    }

    html[data-app-theme="light"] body.app-page:not(.page-login) .container {
        background: var(--app-surface-strong) !important;
        border-color: var(--app-border) !important;
        box-shadow: var(--app-shadow) !important;
        backdrop-filter: blur(10px) !important;
    }

    html[data-app-theme="light"] body.app-page .controls,
    html[data-app-theme="light"] body.app-page #dispatchSummary,
    html[data-app-theme="light"] body.app-page #addLoadSection,
    html[data-app-theme="light"] body.app-page .section,
    html[data-app-theme="light"] body.app-page .complete-load-area,
    html[data-app-theme="light"] body.app-page .load-selection,
    html[data-app-theme="light"] body.app-page #loadInfo,
    html[data-app-theme="light"] body.app-page .master-data-upload,
    html[data-app-theme="light"] body.app-page .checkbox-scroll-container,
    html[data-app-theme="light"] body.app-page #historicalDefaultsPanel,
    html[data-app-theme="light"] body.app-page .app-panel,
    html[data-app-theme="light"] body.page-dashboard .tile-panel,
    html[data-app-theme="light"] body.page-detail .load-details-view,
    html[data-app-theme="light"] body.page-detail .review-column,
    html[data-app-theme="light"] body.page-detail #reviewSummary,
    html[data-app-theme="light"] body.page-detail #reviewNotesSection,
    html[data-app-theme="light"] body.page-dispatch .controls,
    html[data-app-theme="light"] body.page-dispatch .table-shell {
        background: var(--app-surface-strong);
    }
}

html[data-app-theme="dark"] {
    background:
        radial-gradient(circle at top left, rgba(59, 148, 181, 0.2), transparent 30%),
        radial-gradient(circle at right 20%, rgba(47, 165, 111, 0.12), transparent 28%),
        linear-gradient(180deg, #0d141c 0%, #111b25 100%);
    background-attachment: fixed;
}

body.app-page {
    min-height: 100vh;
    min-height: calc(var(--app-vh, 1vh) * 100);
    min-height: 100dvh;
    margin: 0;
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    color: var(--app-text);
    background: transparent;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    line-height: 1.45;
    box-sizing: border-box;
}

body.app-page *,
body.app-page *::before,
body.app-page *::after {
    box-sizing: border-box;
}

body.app-page .text-center {
    text-align: center;
}

body.app-page .text-muted {
    color: var(--app-muted);
}

body.app-page .text-danger {
    color: var(--app-error-text);
}

body.app-page .text-success-strong {
    color: var(--app-success);
    font-weight: 700;
}

body.app-page .text-warning-strong {
    color: var(--app-warning);
    font-weight: 700;
}

body.app-page .cursor-default {
    cursor: default;
}

body.app-page .button-neutral {
    background: var(--app-neutral);
    color: #fff;
}

body.app-page .app-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    transform: scale(1.2);
    transform-origin: center;
    margin: 0;
}

body.app-page .button-view {
    background: var(--app-btn-view-bg);
    color: #fff;
}

body.app-page .button-teal {
    background: var(--app-btn-teal-bg);
    color: #fff;
}

body.app-page .app-custom-dropdown {
    position: relative;
    display: block;
    width: 100%;
}

body.app-page .app-custom-dropdown-native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.app-page .app-custom-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--app-surface-strong) 0%, var(--app-surface-soft) 100%);
    color: var(--app-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    text-align: left;
}

body.app-page .app-custom-dropdown-trigger:hover {
    filter: brightness(1.01);
}

body.app-page .app-custom-dropdown-trigger:focus-visible {
    outline: 3px solid rgba(21, 108, 138, 0.28);
    outline-offset: 2px;
}

body.app-page .app-custom-dropdown-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

body.app-page .app-custom-dropdown-caret {
    flex: 0 0 auto;
    font-size: 0.85rem;
    opacity: 0.72;
}

body.app-page .app-custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--app-border-strong);
    border-radius: 12px;
    background: var(--app-surface-strong);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

body.app-page .app-custom-dropdown-option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--app-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

body.app-page .app-custom-dropdown-option:hover,
body.app-page .app-custom-dropdown-option:focus-visible {
    background: var(--app-surface-soft);
    outline: none;
}

body.app-page .app-custom-dropdown-option[aria-selected="true"] {
    background: rgba(21, 108, 138, 0.14);
    font-weight: 700;
}

body.app-page .app-custom-dropdown-empty {
    padding: 10px 12px;
    color: var(--app-muted);
    font-style: italic;
}

body.app-page .button-purple {
    background: var(--app-btn-purple-bg);
    color: #fff;
}

body.app-page .status-unassigned {
    color: var(--app-neutral);
}

body.app-page .metric-adjusted {
    color: #1f6fb2;
    font-weight: 700;
}

html[data-app-theme="dark"] body.app-page .metric-adjusted {
    color: #7fb7ff;
}

body.app-page .table-feedback-cell {
    text-align: center;
}

body.app-page .app-print-pack {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    margin: 24px auto;
    padding: 0 12px;
    max-width: 1100px;
    width: 100%;
    color: #1f2933;
    background: #fff;
}

body.app-page .app-print-pack *,
body.app-page .app-print-pack *::before,
body.app-page .app-print-pack *::after {
    box-sizing: border-box;
}

body.app-page .app-print-pack h1,
body.app-page .app-print-pack h2 {
    margin-bottom: 10px;
}

body.app-page .app-print-pack-section {
    margin-bottom: 28px;
    page-break-inside: avoid;
}

body.app-page .app-print-pack-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

body.app-page .app-print-pack-table th,
body.app-page .app-print-pack-table td {
    border: 1px solid #b9c6d0;
    padding: 8px;
    text-align: left;
}

body.app-page .app-print-pack-table th {
    background: #eaf1f6;
}

@page {
    margin: 14mm;
}

body.app-page a {
    color: var(--app-primary);
}

body.app-page .container,
body.app-page .login-container {
    position: relative;
    max-width: var(--app-shell-max);
    margin: 0 auto;
    padding: var(--app-shell-padding);
    background: var(--app-surface);
    border: 1px solid rgba(215, 224, 233, 0.9);
    border-radius: var(--app-shell-radius);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(10px);
}

html[data-app-theme="dark"] body.app-page .container,
html[data-app-theme="dark"] body.app-page .login-container {
    border-color: var(--app-border);
}

body.app-page:not(.page-login) .container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

body.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

body.page-login .login-container {
    max-width: 430px;
    width: 100%;
}

body.app-page h1,
body.app-page h2,
body.app-page h3,
body.app-page h4 {
    color: var(--app-heading);
    line-height: 1.2;
}

body.app-page h2 {
    margin: 0 0 1.25rem;
    font-size: clamp(1.5rem, 2vw, 2rem);
}

body.app-page h3 {
    margin: 0 0 1rem;
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
}

body.app-page p {
    margin-top: 0;
}

body.app-page input,
body.app-page select,
body.app-page textarea,
body.app-page button,
body.app-page .button,
body.app-page .tab-btn {
    font: inherit;
}

body.app-page input,
body.app-page select,
body.app-page textarea {
    min-height: 42px;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--app-border-strong);
    border-radius: 10px;
    color: var(--app-input-text);
    background: var(--app-input-bg);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-app-theme="dark"] body.app-page input,
html[data-app-theme="dark"] body.app-page select,
html[data-app-theme="dark"] body.app-page textarea {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

body.app-page input[type="checkbox"],
body.app-page input[type="radio"] {
    min-height: unset;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    width: auto;
}

html[data-app-theme="dark"] body.app-page input[type="checkbox"],
html[data-app-theme="dark"] body.app-page input[type="radio"] {
    color-scheme: dark;
    accent-color: #5f97ff;
}

body.app-page textarea {
    min-height: 96px;
}

body.app-page input:focus,
body.app-page select:focus,
body.app-page textarea:focus {
    outline: 2px solid rgba(21, 108, 138, 0.18);
    border-color: var(--app-primary);
}

body.app-page button,
body.app-page .button,
body.app-page .action-button,
body.app-page .tab-btn,
body.app-page .form-reload-button,
body.app-page .form-reload-button:hover,
body.app-page .upload-button,
body.app-page .admin-button,
body.app-page .btn-edit,
body.app-page .btn-delete,
body.app-page .app-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0.72rem 1rem;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, #1e83a5 0%, var(--app-primary) 100%);
    box-shadow: 0 10px 20px rgba(21, 108, 138, 0.18);
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

body.app-page button:hover:not(:disabled),
body.app-page .button:hover,
body.app-page .action-button:hover,
body.app-page .tab-btn:hover,
body.app-page .app-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 12px 22px rgba(21, 108, 138, 0.22);
}

body.app-page button:disabled,
body.app-page .button:disabled,
body.app-page .action-button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.1);
    box-shadow: none;
    opacity: 0.72;
}

body.app-page .button-danger,
body.app-page .delete-btn,
body.app-page .btn-delete,
body.app-page .action-button.delete-btn,
body.app-page #completeLoadBtn {
    background: linear-gradient(180deg, #d45454 0%, var(--app-danger) 100%);
}

body.app-page .button-secondary,
body.app-page .button-warning,
body.app-page .upload-button,
body.app-page #loadFromSheetBtn,
body.app-page .btn-edit {
    background: linear-gradient(180deg, #d88a24 0%, var(--app-warning) 100%);
}

body.app-page .button-info,
body.app-page .status-btn,
body.app-page .view-items-btn,
body.app-page .photo-choice-camera,
body.app-page .form-reload-button {
    background: linear-gradient(180deg, #297ea9 0%, #175e84 100%);
}

body.app-page .button-camera-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* ---- Shared photo capture modal (forklift-preview-modals.js) ----
   These rules apply on every app page (purchases, detail, forklift, etc.)
   so the same modal HTML always renders correctly. Page-scoped rules
   below for .page-forklift / .page-detail still override these where
   present, preserving the existing look on those two pages. */
body.app-page #photoChoiceModal .modal-content {
    max-width: 420px;
    text-align: center;
}
body.app-page #photoChoiceModal .photo-choice-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
body.app-page #photoChoiceModal .photo-choice-buttons button {
    flex: 1;
    padding: 12px 10px;
    font-size: 1em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    min-height: 44px;
}
body.app-page #photoChoiceModal .photo-choice-camera {
    background: #007bff !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.app-page #photoChoiceModal .photo-choice-file {
    background: #fd7e14 !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.app-page #photoChoiceModal .photo-choice-cancel {
    margin-top: 10px;
    background: #6c757d !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    min-height: 44px;
}
body.app-page #cameraModal .modal-content {
    width: min(100%, 760px);
    text-align: center;
}
body.app-page #cameraModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 0.6rem 0.75rem;
    overflow: hidden;
    min-height: 0;
}
body.app-page #cameraModal .camera-preview-frame {
    position: relative;
    margin: 0 auto;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    width: min(100%, 480px);
    aspect-ratio: 210 / 297;
}
body.app-page #cameraModal .camera-preview-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
body.app-page #cameraModal #cameraCanvas { display: none; }
body.app-page #cameraModal .camera-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 0;
    width: min(100%, 480px);
    margin: 4px auto 0;
}
body.app-page #cameraModal .camera-zoom-row[hidden] { display: none; }
body.app-page #cameraModal .camera-zoom-label,
body.app-page #cameraModal .camera-zoom-value {
    font-size: 12px;
    color: var(--app-muted, #64748b);
    flex: 0 0 auto;
    min-width: 28px;
}
body.app-page #cameraModal .camera-zoom-value { text-align: right; }
body.app-page #cameraModal .camera-zoom-row input[type=range] {
    flex: 1 1 auto;
    accent-color: var(--app-primary, #156c8a);
    height: 24px;
}
body.app-page #cameraModal .camera-instruction {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--app-muted, #64748b);
}
body.app-page #cameraModal .modal-footer {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
body.app-page #cameraModal #cameraTorchBtn {
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%) !important;
}
body.app-page #cameraModal #cameraTorchBtn[aria-pressed="true"],
body.app-page #cameraModal #cameraTorchBtn.is-active {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
}
body.app-page #cameraModal #captureBtn {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
}

/* ---- Icon-only buttons in the camera modal footer ----
   The text labels stay in the DOM (forklift/detail toggle them via
   textContent for the torch state) but are visually hidden. An SVG icon
   gets injected via ::before with a CSS mask, tinted by currentColor. */
body.app-page #cameraModal .camera-iconbtn {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: #fff;
    /* Hide the text content (still readable by screen readers via aria-label
       and accessible name calculation via the title attribute). */
    font-size: 0 !important;
    line-height: 0 !important;
    position: relative;
    flex: 0 0 auto;
}
body.app-page #cameraModal .camera-iconbtn::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* Flashlight icon: a clean torch silhouette (head + handle) so the meaning
   is unambiguous regardless of state. */
body.app-page #cameraModal #cameraTorchBtn::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2h6l-1 4h-4L9 2zm.4 5h5.2l1 4-1 1v9h-5.2v-9l-1-1 1-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 2h6l-1 4h-4L9 2zm.4 5h5.2l1 4-1 1v9h-5.2v-9l-1-1 1-4z'/%3E%3C/svg%3E");
}
/* Close X icon. */
body.app-page #cameraModal .camera-close-btn::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.4 4.95 12 10.55l5.6-5.6 1.45 1.45-5.6 5.6 5.6 5.6-1.45 1.45L12 13.45l-5.6 5.6-1.45-1.45 5.6-5.6-5.6-5.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.4 4.95 12 10.55l5.6-5.6 1.45 1.45-5.6 5.6 5.6 5.6-1.45 1.45L12 13.45l-5.6 5.6-1.45-1.45 5.6-5.6-5.6-5.6z'/%3E%3C/svg%3E");
}
/* Capture: circular shutter icon. The button itself is bigger than the
   others to read as the primary action, with a thicker white ring. */
body.app-page #cameraModal #captureBtn {
    width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6) inset, 0 4px 12px rgba(0,0,0,0.18) !important;
}
body.app-page #cameraModal #captureBtn::before {
    width: 32px;
    height: 32px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23000'/%3E%3C/svg%3E");
}
body.app-page #cameraModal .modal-footer {
    align-items: center;
    justify-content: space-around;
    gap: 16px;
}

/* Mobile / narrow viewport: shrink the modal to the visible viewport,
   hide the heading + caption (they consume scarce vertical space), and let
   the preview frame compete for what's left via flex. Mirrors the
   page-scoped rules forklift/detail use — applied here unscoped so any new
   page that mounts the modal stays usable on a phone. */
@media (max-width: 1100px) {
    body.app-page #cameraModal {
        padding: 8px;
        align-items: stretch;
    }
    body.app-page #cameraModal .modal-content {
        width: 100%;
        max-height: calc((var(--app-vh, 1vh) * 100) - 8px);
        border-radius: 14px;
        display: flex;
        flex-direction: column;
    }
    body.app-page #cameraModal .modal-content > h3,
    body.app-page #cameraModal .camera-instruction {
        display: none;
    }
    body.app-page #cameraModal .modal-body {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.4rem 0.45rem 0.3rem;
        min-height: 0;
    }
    body.app-page #cameraModal .camera-preview-frame {
        width: 100%;
        max-width: 100%;
        /* Keep aspect-ratio: 210/297 so the frame is sized by width and
           never overflows the modal-body in a narrow viewport. With a
           430px-wide phone the frame is ~415 × 587px which fits inside
           modal-body's flex slot without scrolling. */
    }
    body.app-page #cameraModal .modal-footer {
        margin-top: 0;
        padding: 0.5rem 0.55rem 0.65rem;
    }
    body.app-page #cameraModal #cameraTorchBtn {
        order: -1;
        width: 100%;
        margin-right: 0;
    }
}

body.app-page .button-camera-action::before {
    content: '';
    width: 0.92rem;
    height: 0.92rem;
    flex: 0 0 0.92rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 4.5 7.6 6.4H4a2 2 0 0 0-2 2v9.6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8.4a2 2 0 0 0-2-2h-3.6L15 4.5H9Zm3 4.3a4.2 4.2 0 1 1 0 8.4a4.2 4.2 0 0 1 0-8.4Zm0 1.8a2.4 2.4 0 1 0 0 4.8a2.4 2.4 0 0 0 0-4.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 4.5 7.6 6.4H4a2 2 0 0 0-2 2v9.6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8.4a2 2 0 0 0-2-2h-3.6L15 4.5H9Zm3 4.3a4.2 4.2 0 1 1 0 8.4a4.2 4.2 0 0 1 0-8.4Zm0 1.8a2.4 2.4 0 1 0 0 4.8a2.4 2.4 0 0 0 0-4.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

body.app-page .action-button,
body.app-page .item-actions button,
body.app-page .modal-footer button {
    min-height: 38px;
    padding: 0.58rem 0.85rem;
    border-radius: 10px;
}

body.app-page .app-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.46rem 0.8rem;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: 0.84rem;
    line-height: 1.1;
    background: linear-gradient(180deg, #297ea9 0%, #165873 100%);
    box-shadow: 0 10px 22px rgba(21, 108, 138, 0.2);
}

body.app-page .app-back-link-arrow {
    display: inline-block;
    font-size: 1.05em;
    line-height: 1;
    transform: translateY(-0.02em);
}

body.app-page .page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

body.app-page .page-header-side {
    min-width: 0;
    display: flex;
    align-items: center;
}

body.app-page .page-header-side-left {
    justify-content: flex-start;
}

body.app-page .page-header-side-right {
    justify-content: flex-end;
    gap: 0.7rem;
}

body.app-page .page-header-title {
    margin: 0 !important;
    text-align: center;
    font-size: clamp(1.3rem, 1.9vw, 1.85rem) !important;
    line-height: 1.15;
    border: 0 !important;
    padding: 0 !important;
}

body.app-page .page-header-back-stack {
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.app-page .page-header-spacer {
    width: 120px;
    min-height: 1px;
}

body.app-page .page-header-location-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    background: rgba(21, 108, 138, 0.14);
    border: 1px solid rgba(21, 108, 138, 0.26);
    color: var(--app-text);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

body.app-page .app-help-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    min-width: 34px;
    min-height: 28px;
    padding: 0 0.36rem;
    border: 1px solid #d1a311;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff2a6 0%, #ffd74f 100%);
    color: #4f3a00;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 10px 20px rgba(123, 94, 5, 0.24);
    cursor: pointer;
    color: #4f3a00 !important;
    white-space: nowrap;
}

body.app-page .app-help-badge::before {
    content: '?';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: rgba(79, 58, 0, 0.14);
    font-size: 0.7rem;
    font-weight: 900;
    pointer-events: none;
}

body.app-page .app-help-badge-icon-only {
    gap: 0;
    min-width: 24px;
    min-height: 24px;
    padding: 0.18rem;
}

body.app-page .app-help-badge-icon-only::before {
    width: 14px;
    height: 14px;
    font-size: 0.68rem;
}

body.app-page .app-help-badge-info {
    border-color: #9ba8b4;
    background: linear-gradient(180deg, #f2f4f6 0%, #d8dee4 100%);
    color: #384550 !important;
    box-shadow: 0 8px 18px rgba(86, 97, 108, 0.18);
}

body.app-page .app-help-badge-info::before {
    content: 'i';
    background: rgba(56, 69, 80, 0.14);
}

body.app-page .app-help-badge-warning {
    border-color: #d76767;
    background: linear-gradient(180deg, #ffd9d9 0%, #ff9595 100%);
    color: #7d1d1d !important;
    box-shadow: 0 8px 18px rgba(125, 29, 29, 0.2);
}

body.app-page .app-help-badge-warning::before {
    content: '!';
    background: rgba(125, 29, 29, 0.16);
}

body.app-page .app-help-badge-plain {
    min-width: 34px;
    padding: 0 0.35rem;
    gap: 0;
}

body.app-page .app-help-badge-plain:not([data-help-step]) {
    min-width: 32px;
}

body.app-page .app-help-badge-inline {
    min-width: 32px;
    min-height: 26px;
    padding: 0 0.3rem;
}

body.app-page .app-help-badge-inline.app-help-badge-icon-only {
    min-width: 24px;
    min-height: 24px;
    padding: 0.18rem;
}

body.app-page.app-help-disabled .app-help-badge,
body.app-page.app-help-disabled .dashboard-help-prompt {
    display: none !important;
}

body.app-page.page-detail.app-help-disabled #itemDetailsTable th:nth-child(8) .item-details-header-help .app-help-badge,
body.app-page.page-detail.app-help-disabled #itemDetailsTable th:nth-child(9) .item-details-header-help .app-help-badge {
    display: none !important;
}

body.app-page .app-help-popover {
    position: fixed;
    z-index: 1100;
    width: min(280px, calc(100vw - 20px));
}

body.app-page .app-help-popover[hidden] {
    display: none;
}

body.app-page .app-help-popover-inner {
    border-radius: 14px;
    border: 1px solid rgba(209, 163, 17, 0.38);
    background: linear-gradient(180deg, rgba(255, 252, 236, 0.99) 0%, rgba(255, 245, 201, 0.99) 100%);
    box-shadow: 0 14px 30px rgba(72, 58, 12, 0.22);
    padding: 0.85rem 1.2rem 0.85rem 0.95rem;
}

body.app-page .app-help-popover-title {
    margin-bottom: 0.45rem;
    color: #8b6505;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.app-page .app-help-popover-body {
    color: var(--app-text);
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    max-height: min(42vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 0.95rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(82, 96, 109, 0.7) transparent;
}

body.app-page .app-help-popover-body::-webkit-scrollbar {
    width: 10px;
}

body.app-page .app-help-popover-body::-webkit-scrollbar-track {
    background: transparent;
}

body.app-page .app-help-popover-body::-webkit-scrollbar-thumb {
    background: rgba(82, 96, 109, 0.72);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

body.app-page .app-help-popover-body::-webkit-scrollbar-thumb:hover {
    background: rgba(82, 96, 109, 0.88);
}

body.app-page .app-section-heading-with-help {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}

body.app-page .app-section-heading-with-help h3 {
    margin: 0;
}

body.app-page .app-help-inline-row {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.45rem;
}

body.app-page .app-help-inline-row-start {
    justify-content: flex-start;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    width: 100%;
}

body.app-page .app-help-badge-inline-align {
    vertical-align: middle;
    margin-left: 0.45rem !important;
}

body.app-page .app-help-inline-row-spread {
    justify-content: flex-end;
    margin-top: 0.25rem;
}

body.app-page .app-table-heading-with-help {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: normal;
    min-width: 0;
    max-width: 100%;
}

body.app-page .app-table-heading-with-help .app-help-badge-inline {
    flex: 0 0 auto;
}

body.app-page .app-table-heading-with-help-nowrap {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 0.35rem;
}

body.app-page .app-auto-header-help {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.32rem;
    flex-wrap: nowrap;
    max-width: 100%;
    width: 100%;
    vertical-align: top;
    text-align: center;
}

body.app-page .app-auto-header-help-text {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
}

body.page-dispatch th,
body.page-detail th {
    overflow: visible !important;
    vertical-align: top;
}

body.page-dispatch .app-table-heading-with-help,
body.page-detail .app-table-heading-with-help {
    min-width: max-content;
}

body.page-dispatch th .app-table-heading-with-help,
body.page-detail th .app-table-heading-with-help,
body.page-detail #itemDetailsTable .item-details-header-help {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    width: 100%;
    text-align: center;
}

body.page-dispatch th .app-table-heading-with-help .app-help-badge,
body.page-detail th .app-table-heading-with-help .app-help-badge,
body.page-detail #itemDetailsTable .item-details-header-help .app-help-badge {
    margin: 0;
    align-self: center;
}

body.page-detail #itemDetailsTable .item-details-header-help {
    white-space: normal;
    justify-content: flex-start;
}

body.page-detail #itemDetailsTable .item-details-header-help .app-help-badge {
    margin: 0;
    align-self: center;
}

body.page-detail #itemDetailsTable .item-details-header-help-text {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.page-detail #loadsTable {
    table-layout: auto;
}

body.page-detail #loadsTable th:last-child,
body.page-detail #loadsTable td.actions-cell {
    width: 1%;
    white-space: nowrap;
}

body.app-page button[disabled],
body.app-page input[type="button"][disabled],
body.app-page input[type="submit"][disabled],
body.app-page input[type="reset"][disabled] {
    pointer-events: auto;
    cursor: not-allowed;
}

body.app-page .page-live-clock {
    color: var(--app-muted);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

body.page-forklift .page-header-back-stack {
    flex-wrap: nowrap;
}

@media (max-width: 1100px) {
    body.app-page .page-header {
        gap: 8px;
        margin-bottom: 0.85rem;
    }

    body.app-page .page-header-title {
        font-size: 1.08rem !important;
    }

    body.app-page .page-live-clock {
        font-size: 0.76rem;
    }

    body.app-page .page-header-spacer {
        width: 88px;
    }

    body.app-page .page-header .app-back-link {
        padding: 0.38rem 0.68rem;
        font-size: 0.74rem;
    }
}

@media (max-width: 760px) {
    body.app-page .page-header {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    body.app-page .page-header-side-left,
    body.app-page .page-header-side-right {
        width: 100%;
    }

    body.app-page .page-header-side-left {
        justify-content: flex-start;
    }

    body.app-page .page-header-side-right {
        justify-content: center;
    }

    body.app-page .page-header-spacer {
        display: none;
    }
}

body.app-page .controls,
body.app-page #dispatchSummary,
body.app-page #addLoadSection,
body.app-page .section,
body.app-page .complete-load-area,
body.app-page .load-selection,
body.app-page #loadInfo,
body.app-page .master-data-upload,
body.app-page .checkbox-scroll-container,
body.app-page #historicalDefaultsPanel,
body.app-page .app-panel,
body.page-dashboard .tile-panel {
    border-radius: var(--app-panel-radius);
    border: 1px solid rgba(215, 224, 233, 0.95);
    box-shadow: var(--app-shadow-soft);
}

html[data-app-theme="dark"] body.app-page .controls,
html[data-app-theme="dark"] body.app-page #dispatchSummary,
html[data-app-theme="dark"] body.app-page #addLoadSection,
html[data-app-theme="dark"] body.app-page .section,
html[data-app-theme="dark"] body.app-page .complete-load-area,
html[data-app-theme="dark"] body.app-page .load-selection,
html[data-app-theme="dark"] body.app-page #loadInfo,
html[data-app-theme="dark"] body.app-page .master-data-upload,
html[data-app-theme="dark"] body.app-page .checkbox-scroll-container,
html[data-app-theme="dark"] body.app-page #historicalDefaultsPanel,
html[data-app-theme="dark"] body.app-page .app-panel,
html[data-app-theme="dark"] body.page-dashboard .tile-panel {
    border-color: var(--app-border);
}

body.app-page .controls,
body.app-page .load-selection,
body.app-page #addLoadSection,
body.app-page .app-panel {
    background: linear-gradient(180deg, #f6fafc 0%, #edf4f8 100%);
    padding: var(--app-panel-padding);
}

html[data-app-theme="dark"] body.app-page .controls,
html[data-app-theme="dark"] body.app-page .load-selection,
html[data-app-theme="dark"] body.app-page #addLoadSection,
html[data-app-theme="dark"] body.app-page .app-panel {
    background: linear-gradient(180deg, #17222e 0%, #121b25 100%);
}

html[data-app-theme="dark"] body.app-page .complete-load-area,
html[data-app-theme="dark"] body.app-page #loadInfo,
html[data-app-theme="dark"] body.app-page #dispatchSummary,
html[data-app-theme="dark"] body.app-page .load-details-view,
html[data-app-theme="dark"] body.app-page .pallet-entry-area,
html[data-app-theme="dark"] body.app-page .review-column,
html[data-app-theme="dark"] body.app-page #reviewSummary {
    background: linear-gradient(180deg, #18232f 0%, #121b25 100%);
}

body.app-page .section {
    padding: 1.1rem 0 1.3rem;
    margin-bottom: 1.6rem;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

html[data-app-theme="dark"] body.app-page .section {
    border-color: #354451;
}

body.page-settings .section {
    padding-bottom: 1.4rem;
    margin-bottom: 1.8rem;
}

body.app-page .status-message,
body.app-page .error-message,
body.app-page .form-message,
body.app-page #message-area,
body.app-page .loading-message,
body.app-page .info-message,
body.app-page .success-message {
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid transparent;
}

body.app-page .loading-message,
body.app-page .info-message {
    background: var(--app-surface-info);
    color: var(--app-info-text);
    border-color: var(--app-info-border);
}

body.app-page .error-message,
body.app-page .form-message.error,
body.app-page #message-area.error {
    background: var(--app-error-bg);
    color: var(--app-error-text);
    border-color: var(--app-error-border);
}

body.app-page .success-message,
body.app-page .form-message.success,
body.app-page #message-area.success {
    background: var(--app-success-bg);
    color: var(--app-success-text);
    border-color: var(--app-success-border);
}

body.app-page .warning-box,
body.app-page #excludedDiscrepancyWarning,
body.app-page #itemDetailsWarnings {
    background: var(--app-surface-warning);
    color: var(--app-warning-text);
    border-color: var(--app-warning-border);
}

body.app-page table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1rem;
    background: var(--app-surface-strong);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    overflow: hidden;
}

html[data-app-theme="dark"] body.app-page table {
    border-color: #41515f;
}

body.app-page th,
body.app-page td {
    padding: 0.82rem 0.85rem;
    border-right: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    vertical-align: middle;
}

html[data-app-theme="dark"] body.app-page th,
html[data-app-theme="dark"] body.app-page td {
    border-right-color: #41515f;
    border-bottom-color: #41515f;
    color: var(--app-text);
}

body.app-page th:last-child,
body.app-page td:last-child {
    border-right: 0;
}

body.app-page tr:last-child td {
    border-bottom: 0;
}

body.app-page th {
    background: linear-gradient(180deg, #247ea0 0%, #155d79 100%);
    color: #fff;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.app-page .summary-table th {
    background: linear-gradient(180deg, #28936a 0%, #1d7554 100%);
}

body.app-page .purple-header th {
    background: linear-gradient(180deg, #7f9051 0%, #5c6f34 100%);
}

html[data-app-theme="dark"] body.page-detail #dispatchSummary strong,
html[data-app-theme="dark"] body.page-forklift #loadInfo strong,
html[data-app-theme="dark"] body.page-forklift #loadInfo b {
    color: #e3ebf2;
}

body.app-page .table-wrapper,
body.app-page .checkbox-scroll-container,
body.app-page .modal-body,
body.app-page #summaryModalBody {
    scrollbar-width: thin;
    scrollbar-color: #97b2c1 transparent;
}

body.app-page .table-wrapper,
body.app-page #usersTable,
body.app-page #palletStatusTable,
body.app-page #grnTable,
body.app-page #dataTable,
body.app-page #loadsTable,
body.app-page #itemDetailsTable,
body.app-page #loadPOSummaryTable {
    overflow-x: auto;
}

body.app-page .modal,
body.app-page .modal-overlay,
body.app-page .summary-modal,
body.app-page #appModalOverlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw;
    min-width: 100vw;
    min-width: 100dvw;
    height: calc(var(--app-vh, 1vh) * 100);
    min-height: calc(var(--app-vh, 1vh) * 100);
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    z-index: 1205;
    align-items: center;
    justify-content: center;
    background: var(--app-overlay-bg);
    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-backdrop-filter: blur(8px) saturate(0.9);
    backdrop-filter: blur(8px) saturate(0.9);
}

body.app-page .modal.show,
body.app-page .modal-overlay.show,
body.app-page .summary-modal.show,
body.app-page #appModalOverlay.show {
    display: flex;
}

body.app-page .modal[hidden],
body.app-page .modal-overlay[hidden],
body.app-page .summary-modal[hidden],
body.app-page #appModalOverlay[hidden] {
    display: none !important;
}

#appLoadingOverlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--app-loading-bg, var(--app-bg));
    color: var(--app-heading);
    text-align: center;
    transition: opacity 140ms ease, visibility 140ms ease;
}

#appLoadingOverlay .app-loading-card {
    width: min(100%, 420px);
    padding: 1.5rem 1.35rem;
    border-radius: 22px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

#appLoadingOverlay .app-loading-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    border: 3px solid rgba(21, 108, 138, 0.18);
    border-top-color: var(--app-primary);
    animation: appLoadingSpin 0.8s linear infinite;
}

#appLoadingOverlay .app-loading-title {
    font-size: 1.08rem;
    font-weight: 800;
    margin-bottom: 0.45rem;
    color: var(--app-heading);
}

#appLoadingOverlay .app-loading-text {
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--app-muted);
}

#appLoadingOverlay.app-loading-overlay-hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html[data-app-theme="dark"] #appLoadingOverlay .app-loading-card {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
}

html[data-app-theme="dark"] #appLoadingOverlay .app-loading-title,
html[data-app-theme="dark"] #appLoadingOverlay .app-loading-text {
    color: #d8e3ec;
}

@keyframes appLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}

html.app-modal-open,
body.app-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.page-detail .print-setup-modal,
body.page-detail #claimLoadModal,
body.page-dispatch #dispatchStatusOverlay,
body.page-receiving #quickAddModal,
body.page-receiving #grnWizardModal,
body.page-receiving #summaryModal,
body.page-settings #summaryModal,
body.page-settings #settingsDialogOverlay {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    min-width: 100dvw !important;
    height: calc(var(--app-vh, 1vh) * 100) !important;
    min-height: calc(var(--app-vh, 1vh) * 100) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--app-overlay-bg) !important;
}

body.page-forklift #reviewModal {
    z-index: 1405;
}

body.app-page #appModalOverlay.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.app-page .modal-content,
body.app-page .summary-modal-content,
body.app-page #appModalBox {
    display: flex;
    flex-direction: column;
    width: min(100%, 920px);
    max-height: calc((var(--app-vh, 1vh) * 100) - 36px);
    max-height: calc(100dvh - 36px);
    margin: 0 auto;
    border: 1px solid var(--app-border);
    border-radius: 20px;
    background: var(--app-surface-strong);
    color: var(--app-text);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
    overflow: hidden;
    /* 2026-06-03 — `.modal-close-btn` is `position: absolute` and
       anchored to top/right of the modal. Without an explicit
       positioned ancestor it walked out to the viewport corner. */
    position: relative;
}

body.app-page #appModalBox {
    width: min(100%, 430px);
    position: relative;
    inset: auto !important;
    margin: 0 auto !important;
    transform: none !important;
}

body.app-page #appModalBox.app-modal-box-wide {
    width: min(100%, 920px);
    max-width: min(96vw, 920px);
}

body.app-page .modal-content > h2,
body.app-page .modal-content > h3,
body.app-page .modal-content > h4 {
    margin: 0;
    padding: 1.3rem 4rem 0.65rem 1.5rem;
    text-align: center;
}

body.app-page .modal-content > p {
    margin: 0 0 1rem;
    padding: 0 1.5rem;
    text-align: center;
}

body.app-page .modal-header,
body.app-page .summary-modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
}

body.app-page #appModalTitle {
    margin: 0;
    padding: 1rem 4rem 0.85rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

body.app-page .modal-body,
body.app-page .summary-modal-content > #summaryModalBody,
body.app-page #appModalMessage {
    overflow: auto;
    padding: 1rem 1.25rem;
    white-space: pre-line;
    color: var(--app-text);
}

body.app-page #appModalMessage.app-modal-message-rich {
    white-space: normal;
}

body.app-page #appModalMessage.app-modal-message-rich pre {
    margin: 0;
    padding: 0.9rem 1rem;
    overflow: auto;
    border-radius: 12px;
    background: var(--app-surface-muted);
    color: var(--app-text);
    font-size: 0.82rem;
    line-height: 1.45;
}

body.app-page #appModalMessage.app-modal-message-rich .app-modal-section {
    display: grid;
    gap: 0.35rem;
}

body.app-page #appModalMessage.app-modal-message-rich .app-modal-section-title {
    font-weight: 700;
    color: var(--app-heading);
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-section-title {
    font-weight: 700;
    color: var(--app-heading);
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-muted {
    color: var(--app-muted);
    font-size: 0.84rem;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-modal {
    display: grid;
    gap: 1rem;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-summary,
body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-record {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-surface-soft);
    padding: 1rem;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-summary-grid,
body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-meta-grid {
    display: grid;
    gap: 0.6rem 0.9rem;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-field {
    display: grid;
    gap: 0.2rem;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-label {
    color: var(--app-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-value {
    color: var(--app-text);
    font-weight: 600;
    word-break: break-word;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-records {
    display: grid;
    gap: 0.9rem;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-record {
    min-width: 0;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-record-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(21, 108, 138, 0.12);
    color: var(--app-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-preview {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.8rem;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-preview.pod-evidence-preview-signature {
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #fff;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-preview img {
    display: block;
    width: auto;
    max-width: min(100%, 640px);
    max-height: min(48vh, 560px);
    height: auto;
    object-fit: contain;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: #fff;
    margin-inline: auto;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-json {
    margin-top: 0.8rem;
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-json summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--app-heading);
}

body.app-page #appModalMessage.app-modal-message-rich .pod-evidence-json[open] summary {
    margin-bottom: 0.6rem;
}

body.app-page #appModalMessage.app-modal-message-rich .dispatch-pod-modal {
    display: grid;
    gap: 0.9rem;
}

body.app-page #appModalMessage.app-modal-message-rich .dispatch-pod-modal-summary {
    display: grid;
    gap: 0.25rem;
}

body.app-page #appModalMessage.app-modal-message-rich .dispatch-pod-load-list {
    display: grid;
    gap: 0.65rem;
}

body.app-page #appModalMessage.app-modal-message-rich .dispatch-pod-load-button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--app-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-surface-soft);
    color: var(--app-text);
    text-decoration: none;
    font: inherit;
    font-weight: 700;
}

body.app-page #appModalMessage.app-modal-message-rich .dispatch-pod-load-button:hover {
    background: var(--app-surface-muted);
}

body.app-page #appModalMessage.app-modal-message-rich .dispatch-pod-load-button:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

body.app-page #appModalMessage.app-modal-message-rich .dispatch-pod-load-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    background: rgba(21, 108, 138, 0.12);
    color: var(--app-primary);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.app-page .modal-footer,
body.app-page #appModalButtons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--app-border);
}

body.app-page .modal-close-btn {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(188, 201, 212, 0.95);
    background: rgba(244, 248, 251, 0.96);
    color: var(--app-muted);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

body.app-page .modal-close-btn:hover {
    background: #e8f0f5;
    color: var(--app-text);
    transform: translateY(-1px);
}

body.app-page #appModalOkBtn,
body.app-page #appModalYesBtn {
    background: var(--app-primary);
    color: #fff;
}

body.app-page #appModalCancelBtn {
    background: var(--app-modal-button-secondary-bg);
    color: var(--app-modal-button-secondary-text);
}

@media (max-width: 1100px) {
    body.app-page #appModalTitle {
        padding: 0.9rem 1rem 0.75rem;
        font-size: 0.96rem;
    }

    body.app-page #appModalButtons {
        padding: 0.9rem 1rem 1rem;
        gap: 0.55rem;
    }
}

html[data-app-theme="dark"] body.app-page .modal-close-btn {
    border-color: #425363;
    background: rgba(25, 36, 50, 0.96);
    color: #d7e5f1;
}

html[data-app-theme="dark"] body.app-page .modal-close-btn:hover {
    background: #223141;
}

body.app-page .tab-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
    border-bottom: 0;
}

body.app-page .tab-btn {
    min-height: 44px;
    padding-inline: 1rem;
    color: var(--app-text);
    background: linear-gradient(180deg, #f8fbfd 0%, #e6eef4 100%);
    box-shadow: none;
}

body.app-page .tab-btn.active {
    color: #fff;
    background: linear-gradient(180deg, #257b9f 0%, #175d7f 100%);
}

body.app-page .hidden {
    display: none !important;
}

html[data-app-theme="dark"] body.app-page .tab-btn {
    color: #d9e4ec;
    background: linear-gradient(180deg, #233241 0%, #1a2631 100%);
    border-color: #41515f;
}

html[data-app-theme="dark"] body.app-page .tab-btn.active {
    color: #f5fbff;
    background: linear-gradient(180deg, #2f7ea1 0%, #1e5b79 100%);
}

body.page-dashboard .header {
    max-width: var(--app-shell-max);
    margin: 0 auto 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: var(--app-radius-lg);
    border: 1px solid rgba(215, 224, 233, 0.9);
    box-shadow: var(--app-shadow);
    background: linear-gradient(135deg, #163247 0%, #1d546f 58%, #24728f 100%);
}

body.page-dashboard .header h1 {
    color: #f3fbff;
}

body.page-dashboard .header #usernameDisplay {
    color: #d9f3ff;
}

html[data-app-theme="dark"] body.page-dashboard .header {
    border-color: rgba(63, 84, 102, 0.95);
    background: linear-gradient(135deg, #101922 0%, #183040 58%, #22506a 100%);
}

html[data-app-theme="dark"] body.page-dashboard .header h1 {
    color: #f5fbff;
}

html[data-app-theme="dark"] body.page-dashboard .header #usernameDisplay {
    color: #b9e8ff;
}

body.page-dashboard .tiles-container {
    gap: 1.25rem;
}

body.page-dashboard .dashboard-frame {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
}

body.page-dashboard .tile-panel {
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    color: var(--app-text);
}

body.page-dashboard .tile-panel h2 {
    color: var(--app-text);
}

body.page-dashboard .tile {
    min-height: 170px;
    border: 1px solid rgba(215, 224, 233, 0.8);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 250, 252, 0.98) 100%);
    box-shadow: var(--app-shadow-soft);
}

html[data-app-theme="dark"] body.page-dashboard .tile {
    border-color: var(--app-border);
    background: linear-gradient(180deg, rgba(26, 38, 52, 0.96) 0%, rgba(19, 28, 39, 0.98) 100%);
}

html[data-app-theme="dark"] body.page-dashboard .dashboard-frame,
html[data-app-theme="dark"] body.page-dashboard .tile-panel {
    border-color: var(--app-border);
}

html[data-app-theme="dark"] body.page-forklift .load-selection {
    border-bottom-color: #354451;
}

html[data-app-theme="dark"] body.page-forklift h2,
html[data-app-theme="dark"] body.page-forklift h3 {
    border-bottom-color: #354451;
}

html[data-app-theme="dark"] body.page-forklift #truck-layout-grid {
    border-color: #41515f;
    background: linear-gradient(180deg, #18232f 0%, #121b25 100%);
}

html[data-app-theme="dark"] body.page-forklift .truck-item.pallet {
    background-color: #20394b;
    border-color: #3d6178;
    color: #dbe7ef;
}

html[data-app-theme="dark"] body.page-forklift .truck-item.shortage-pallet {
    background-color: #4f3d18;
    border-color: #7e6330;
    color: #f4e8c4;
}

html[data-app-theme="dark"] body.page-forklift .truck-item.shortage-pallet small {
    color: #f4e8c4;
}

html[data-app-theme="dark"] body.page-forklift .pallet-entry-area,
html[data-app-theme="dark"] body.page-forklift .review-column,
html[data-app-theme="dark"] body.page-forklift #reviewSummary {
    border-color: #41515f;
}

html[data-app-theme="dark"] body.page-forklift .review-item {
    background: #111a24;
    border-color: #41515f;
    color: #d8e3ec;
}

body.page-dashboard .tile:hover {
    transform: translateY(-4px);
}

body.page-detail .custom-checkbox-container input[type="number"] {
    width: 6.2ch !important;
    min-width: 6.2ch !important;
    padding-inline: 0.45rem !important;
    text-align: center;
}

body.page-detail #poSummaryTable input[type="number"] {
    width: 6.2ch;
    min-width: 6.2ch;
}

body.page-detail #itemFilterControls,
body.app-page .app-radio-pill-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem !important;
    margin: -0.3rem 0 0.8rem !important;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    background: rgba(237, 244, 248, 0.85);
}

html[data-app-theme="dark"] body.page-detail #itemFilterControls,
html[data-app-theme="dark"] body.app-page .app-radio-pill-group {
    background: rgba(29, 42, 56, 0.92);
    border: 1px solid var(--app-border);
}

body.page-detail #itemFilterControls label,
body.app-page .app-radio-pill-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
}

body.page-detail #itemFilterControls input[type="radio"],
body.app-page .app-radio-pill-group input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
}

body.page-detail .po-crate-count-warning,
body.page-detail .po-summary-discrepancy-cell {
    color: var(--app-danger);
    font-weight: 800;
}

body.page-detail #sharedPalletCountRadioMount {
    margin: 0.35rem 0 0.65rem;
}

body.page-detail #sharedPalletCountRadioMount .app-radio-pill-group {
    margin: 0 !important;
}

body.page-settings .form-grid {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 14px 18px;
}

body.page-settings .master-data-upload {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 1rem;
    align-items: end;
}

body.page-settings .control-group {
    width: 100%;
}

body.page-settings .checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}

body.page-settings #powerBookingStatus table {
    width: 100%;
    max-width: 420px;
}

html[data-app-theme="dark"] body.page-settings .master-data-upload {
    border-color: #9a6f22;
    background: linear-gradient(180deg, rgba(72, 55, 20, 0.72) 0%, rgba(48, 37, 14, 0.82) 100%);
}

html[data-app-theme="dark"] body.page-settings #api-key-display {
    border-color: #43586a;
    background: #111a24;
    color: #dce9f5;
}

html[data-app-theme="dark"] body.page-settings pre,
html[data-app-theme="dark"] body.page-settings #summaryModalBody {
    background: #0f1720;
    color: #e6f0f8;
}

html[data-app-theme="dark"] body.page-settings #powerBookingStatus table,
html[data-app-theme="dark"] body.page-settings #powerBookingStatus th,
html[data-app-theme="dark"] body.page-settings #powerBookingStatus td {
    border-color: #415364;
}

html[data-app-theme="dark"] body.page-settings #powerBookingStatus tr[style*="background-color"] {
    background-color: #15212d !important;
}

html[data-app-theme="dark"] body.page-settings #powerBookingStatus th[style*="background-color"] {
    background-color: #1e2d3b !important;
    color: #edf5fb !important;
}

html[data-app-theme="dark"] body.page-settings .service-card,
html[data-app-theme="dark"] body.page-settings .time-preview-card,
html[data-app-theme="dark"] body.page-settings .restricted-note,
html[data-app-theme="dark"] body.page-settings #locationsTable td,
html[data-app-theme="dark"] body.page-settings #locationsTable th,
html[data-app-theme="dark"] body.page-settings #usersTable td,
html[data-app-theme="dark"] body.page-settings #usersTable th {
    background: #16202c;
    border-color: #415364;
    color: var(--app-text);
}

html[data-app-theme="dark"] body.page-settings .service-card p,
html[data-app-theme="dark"] body.page-settings .settings-intro,
html[data-app-theme="dark"] body.page-settings .location-delete-countdown {
    color: var(--app-muted);
}

html[data-app-theme="dark"] body.page-settings .settings-dialog-box {
    background: #16202c;
    color: var(--app-text);
}

html[data-app-theme="dark"] body.page-settings .settings-dialog-box h3,
html[data-app-theme="dark"] body.page-settings .settings-dialog-box p {
    color: var(--app-text);
}

body.page-forklift .container {
    max-width: 1040px;
}

body.page-forklift .pallet-entry-area,
body.page-forklift .load-selection-controls,
body.page-forklift .photo-choice-buttons {
    gap: 0.8rem;
}

body.page-forklift #loadInfo .forklift-load-info-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

body.page-forklift #loadInfo .forklift-load-info-date p {
    margin: 0;
}

body.page-forklift .truck-item {
    border-radius: 12px;
}

body.page-dispatch .actions-container,
body.page-receiving .actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

body.page-dispatch .pagination-controls {
    margin-top: 1.25rem;
}

html[data-app-theme="dark"] body.page-receiving {
    --primary-bg: #111b25;
    --secondary-bg: #16202c;
    --header-bg: #20384a;
    --primary-text: #d8e3ec;
    --light-text: #9eb1c2;
    --header-text: #f5fbff;
    --accent-blue: #3b94b5;
    --accent-blue-dark: #2a7b99;
    --accent-green: #2fa56f;
    --accent-orange: #d4982f;
    --accent-red: #d95a5a;
    --border-color: #415364;
    --highlight-bg: #203243;
    --selected-bg: #315d7f;
    --disabled-bg: #243140;
    --admin-purple: #7d86ba;
    --admin-purple-dark: #69729e;
    --label-green: #a8d7bd;
    --label-red: #e0a9a9;
    --label-yellow: #ddd3a0;
    --recent-item-bg: #413517;
    --recent-item-hover-bg: #53441c;
}

html[data-app-theme="dark"] body.page-receiving .modal-body .form-group .form-control,
html[data-app-theme="dark"] body.page-receiving .list-panel input[type="search"],
html[data-app-theme="dark"] body.page-receiving .panel-header .header-search-input,
html[data-app-theme="dark"] body.page-receiving .form-group-input-wrapper input,
html[data-app-theme="dark"] body.page-receiving .form-group-input-wrapper select,
html[data-app-theme="dark"] body.page-receiving textarea#comments_input {
    border-color: #415364;
    background: #111a24;
    color: var(--app-text);
}

html[data-app-theme="dark"] body.page-receiving .form-group-input-wrapper input:disabled {
    background: #263443;
    color: #aebdca;
}

html[data-app-theme="dark"] body.page-receiving .modal-footer,
html[data-app-theme="dark"] body.page-receiving #historicalDefaultsPanel {
    background: linear-gradient(180deg, #18232f 0%, #121b25 100%);
}

html[data-app-theme="dark"] body.page-receiving .list-view,
html[data-app-theme="dark"] body.page-receiving .list-item-a,
html[data-app-theme="dark"] body.page-receiving .modal-content[style*="max-width: 500px"] {
    background: #16202c;
}

html[data-app-theme="dark"] body.page-receiving .list-item-b {
    background: #111b25;
}

html[data-app-theme="dark"] body.page-receiving .list-item,
html[data-app-theme="dark"] body.page-receiving .modal-header,
html[data-app-theme="dark"] body.page-receiving .modal-footer {
    border-color: #415364;
}

html[data-app-theme="dark"] body.page-receiving .list-item-details strong,
html[data-app-theme="dark"] body.page-receiving #noEntriesMessage {
    color: #c5d2dd !important;
}

html[data-app-theme="dark"] body.page-receiving .modal-header .close-btn {
    color: #b8c8d7;
}

html[data-app-theme="dark"] body.page-receiving .modal-header .close-btn:hover {
    color: #f5fbff;
}

@media (max-width: 820px), (max-height: 700px) {
    body.page-receiving .page-header {
        gap: 8px;
        margin-bottom: 10px;
    }

    body.page-receiving .page-header-title {
        font-size: 1rem;
        line-height: 1.15;
    }

    body.page-receiving .controls {
        margin-bottom: 12px;
        padding: 10px;
        gap: 10px;
    }

    body.page-receiving .control-row {
        gap: 10px;
    }

    body.page-receiving .control-group {
        gap: 6px;
        flex-wrap: wrap;
    }

    body.page-receiving .control-group input,
    body.page-receiving .control-group select,
    body.page-receiving .control-group button {
        font-size: 0.88rem;
        padding: 6px 8px;
    }

    body.page-receiving .modal-overlay {
        padding: 0;
    }

    body.page-receiving #grnWizardModal .modal-content {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    body.page-receiving #grnWizardModal .modal-header {
        padding: 8px 10px;
    }

    body.page-receiving #grnWizardModal .modal-header h3 {
        font-size: 0.92rem;
    }

    body.page-receiving #grnWizardModal .modal-body {
        padding: 8px 10px;
    }

    body.page-receiving #grnWizardModal .modal-footer {
        padding: 8px 10px;
        gap: 8px;
    }

    body.page-receiving #grnWizardModal .modal-footer button {
        padding: 6px 10px;
        font-size: 0.82rem;
    }

    body.page-receiving .wizard-screen {
        padding: 0;
        gap: 8px;
        overflow: hidden;
    }

    body.page-receiving .wizard-screen h4 {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.15;
    }

    body.page-receiving .highlight-controls {
        gap: 6px;
        font-size: 0.82rem;
    }

    body.page-receiving .highlight-controls input {
        width: 46px;
        padding: 4px 6px;
        font-size: 0.82rem;
    }

    body.page-receiving .selection-container {
        flex-direction: column;
        gap: 8px;
        min-height: 0;
    }

    body.page-receiving .list-panel,
    body.page-receiving .list-panel-wide {
        min-height: 0;
        flex: 1 1 0;
    }

    body.page-receiving .panel-header {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-bottom: 6px;
    }

    body.page-receiving .panel-header label {
        font-size: 0.8rem;
    }

    body.page-receiving .panel-header .header-search-input {
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    body.page-receiving .panel-header .admin-button {
        padding: 6px 8px;
        font-size: 0.8rem;
        width: 100%;
    }

    body.page-receiving .list-view {
        min-height: 0;
        font-size: 0.85rem;
    }

    body.page-receiving .list-item {
        padding: 6px 8px;
    }

    body.page-receiving .list-item > small {
        font-size: 0.78rem;
    }

    body.page-receiving .list-item-details-wrapper {
        font-size: 0.72rem;
    }

    body.page-receiving #historicalDefaultsPanel {
        max-height: 96px;
        padding: 6px 8px;
    }

    body.page-receiving #historicalDefaultsPanel h5 {
        margin: 0 0 4px;
        font-size: 0.78rem;
    }

    body.page-receiving #detailsFormContainer {
        gap: 6px;
    }

    body.page-receiving .details-form-scroll-wrapper {
        overflow: hidden;
        padding-right: 0;
    }

    body.page-receiving .form-controls-row {
        gap: 6px 8px;
    }

    body.page-receiving .form-title {
        font-size: 0.92rem;
    }

    body.page-receiving .form-reload-button {
        padding: 4px 8px;
        font-size: 0.72rem;
    }

    body.page-receiving #grnDetailsForm {
        gap: 4px 8px;
        grid-template-columns: minmax(70px, 0.32fr) minmax(0, 0.18fr) minmax(0, 0.5fr);
    }

    body.page-receiving .form-group-display {
        min-height: 24px;
        padding: 2px 0;
        font-size: 0.82rem;
    }

    body.page-receiving .form-group-display.large {
        font-size: 0.9rem;
    }

    body.page-receiving .form-group-label {
        padding-right: 2px;
        font-size: 0.78rem;
    }

    body.page-receiving .form-group-input-wrapper {
        gap: 6px;
        row-gap: 6px;
    }

    body.page-receiving .form-group-input-wrapper label {
        font-size: 0.78rem;
    }

    body.page-receiving .form-group-input-wrapper input,
    body.page-receiving .form-group-input-wrapper select {
        padding: 4px 5px;
        font-size: 0.85rem;
    }

    body.page-receiving .form-group-input-wrapper .input-xs {
        width: 50px;
    }

    body.page-receiving .form-group-input-wrapper .input-s {
        width: 62px;
    }

    body.page-receiving .form-group-input-wrapper .input-m {
        width: 92px;
    }

    body.page-receiving .spacer-fixed-120 {
        flex-basis: 24px;
    }

    body.page-receiving textarea#comments_input {
        height: 42px;
        padding: 6px;
        font-size: 0.85rem;
    }
}

html[data-app-theme="dark"] body.page-settings .summary-modal-content {
    background: var(--app-surface-strong);
    border: 1px solid var(--app-border);
    color: var(--app-text);
}

html[data-app-theme="dark"] body.page-settings .summary-modal-header {
    border-color: var(--app-border);
}

html[data-app-theme="dark"] body.page-settings .summary-modal-header h3,
html[data-app-theme="dark"] body.page-settings .summary-modal-header .close-btn {
    color: #dce8f2;
}

html[data-app-theme="dark"] body.page-settings small.hint,
html[data-app-theme="dark"] body.page-settings [style*="color: #333"] {
    color: var(--app-muted) !important;
}

html[data-app-theme="dark"] body.page-settings [style*="color:#e74c3c"] {
    color: var(--app-danger) !important;
}

html[data-app-theme="dark"] body.page-settings [style*="background-color: #95a5a6"] {
    background: linear-gradient(180deg, #5f7384 0%, #4d6172 100%) !important;
    color: #f5fbff !important;
}

html[data-app-theme="dark"] body.page-settings [style*="background-color: #f0f4f8"],
html[data-app-theme="dark"] body.page-settings [style*="background-color: #e9ecef"] {
    background-color: #1a2631 !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] body.page-settings [style*="border: 1px solid #ddd"] {
    border-color: #415364 !important;
}

#appRotateOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(238, 243, 247, 0.96);
    color: #163247;
    text-align: center;
}

#appRotateOverlay .rotate-card {
    width: min(100%, 430px);
    padding: 1.5rem 1.35rem;
    border-radius: 22px;
    border: 1px solid rgba(21, 108, 138, 0.16);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 42px rgba(21, 47, 66, 0.14);
}

#appRotateOverlay .rotate-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 0.9rem;
}

#appRotateOverlay .rotate-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #163247;
}

#appRotateOverlay .rotate-text {
    font-size: 0.98rem;
    line-height: 1.5;
    color: #52606d;
}

#appRotateOverlay .rotate-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

#appRotateOverlay .rotate-dashboard-button {
    text-decoration: none;
}

#appRotateOverlay .rotate-dashboard-button:hover {
    text-decoration: none;
}

#appRotateOverlay .rotate-dashboard-button .app-back-link-arrow {
    display: inline-block;
    font-size: 1.08em;
    line-height: 1;
    transform: translateY(-0.02em);
}

html[data-app-theme="dark"] #appRotateOverlay {
    background: rgba(11, 18, 32, 0.96);
    color: #fff;
}

html[data-app-theme="dark"] #appRotateOverlay .rotate-card {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

html[data-app-theme="dark"] #appRotateOverlay .rotate-title,
html[data-app-theme="dark"] #appRotateOverlay .rotate-text {
    color: #fff;
}

html[data-app-theme="dark"] #appRotateOverlay .rotate-dashboard-button {
    text-decoration: none;
}

html[data-app-theme="dark"] #appRotateOverlay .rotate-dashboard-button:hover {
    text-decoration: none;
}

#appMobileFullscreenButton {
    position: fixed;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 99998;
    display: none;
    min-height: 30px;
    min-width: 86px;
    padding: 0.38rem 0.7rem;
    border: 0;
    border-radius: 999px;
    background: rgba(8, 24, 38, 0.9);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    justify-content: center;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

#appInstallButton {
    position: fixed;
    left: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 99998;
    display: none;
    min-height: 30px;
    min-width: 104px;
    padding: 0.38rem 0.8rem;
    border: 0;
    border-radius: 999px;
    background: rgba(21, 108, 138, 0.94);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    justify-content: center;
    cursor: pointer;
}

#appInstallButton:hover {
    background: rgba(16, 90, 115, 0.98);
}

#appMobileFullscreenButton.is-dragging {
    cursor: grabbing;
}

body.app-pwa #appMobileFullscreenButton,
body.app-pwa #mobileFullscreenBtn,
body.app-pwa #appInstallButton {
    display: none !important;
}

body.app-page.app-is-mobile[data-mobile-orientation="landscape"].app-mobile-portrait,
body.app-page.app-is-mobile[data-mobile-orientation="portrait"].app-mobile-landscape {
    overflow: hidden;
}

body.app-page.app-is-mobile[data-mobile-orientation="landscape"].app-mobile-portrait > *:not(#appRotateOverlay):not(#appMobileFullscreenButton):not(#appInstallButton):not(script),
body.app-page.app-is-mobile[data-mobile-orientation="portrait"].app-mobile-landscape > *:not(#appRotateOverlay):not(#appMobileFullscreenButton):not(#appInstallButton):not(script) {
    visibility: hidden;
}

body.app-page.app-is-mobile[data-mobile-orientation="landscape"].app-mobile-portrait #appRotateOverlay,
body.app-page.app-is-mobile[data-mobile-orientation="portrait"].app-mobile-landscape #appRotateOverlay {
    display: flex !important;
    visibility: visible !important;
    filter: none !important;
    pointer-events: auto !important;
}

body.app-page.app-is-mobile[data-mobile-orientation="landscape"].app-mobile-portrait #appMobileFullscreenButton,
body.app-page.app-is-mobile[data-mobile-orientation="portrait"].app-mobile-landscape #appMobileFullscreenButton,
body.app-page.app-is-mobile[data-mobile-orientation="landscape"].app-mobile-portrait #appInstallButton,
body.app-page.app-is-mobile[data-mobile-orientation="portrait"].app-mobile-landscape #appInstallButton {
    visibility: visible !important;
    filter: none !important;
    pointer-events: auto !important;
}

@media (max-width: 1100px) {
    body.app-embedded.page-dispatch #rotateNoticeOverlay,
    body.app-embedded.page-dispatch #mobileFullscreenBtn,
    body.app-embedded.page-detail #rotateNoticeOverlay,
    body.app-embedded.page-detail #mobileFullscreenBtn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.app-embedded.page-dispatch,
    body.app-embedded.page-detail {
        overflow: auto !important;
    }

    body.app-embedded.page-dispatch > *:not(script),
    body.app-embedded.page-detail > *:not(script) {
        filter: none !important;
        pointer-events: auto !important;
        user-select: auto !important;
        visibility: visible !important;
    }

}

@media (max-width: 960px) {
    body.app-page {
        padding: 14px;
    }

    body.app-page .container,
    body.app-page .login-container {
        padding: 18px;
        border-radius: 16px;
    }

    body.page-settings .form-grid,
    body.page-settings .master-data-upload {
        grid-template-columns: 1fr;
    }

    body.page-settings .form-grid > label,
    body.page-settings .form-grid > div,
    body.page-settings .form-grid > input,
    body.page-settings .form-grid > select,
    body.page-settings .form-grid > button,
    body.page-settings .form-grid > small {
        grid-column: auto !important;
    }

    body.page-dashboard .container {
        padding: 18px;
    }

    body.page-dashboard .tile {
        width: min(100%, 260px);
    }

    body.page-forklift .pallet-entry-area {
        flex-wrap: wrap;
    }
}

body.app-page.app-is-mobile {
    padding: 14px;
}

body.app-page.app-is-mobile .container,
body.app-page.app-is-mobile .login-container {
    padding: 18px;
    border-radius: 16px;
}

body.page-settings.app-is-mobile .form-grid,
body.page-settings.app-is-mobile .master-data-upload {
    grid-template-columns: 1fr;
}

body.page-settings.app-is-mobile .form-grid > label,
body.page-settings.app-is-mobile .form-grid > div,
body.page-settings.app-is-mobile .form-grid > input,
body.page-settings.app-is-mobile .form-grid > select,
body.page-settings.app-is-mobile .form-grid > button,
body.page-settings.app-is-mobile .form-grid > small {
    grid-column: auto !important;
}

body.page-dashboard.app-is-mobile .container {
    padding: 18px;
}

body.page-dashboard.app-is-mobile .tile {
    width: min(100%, 260px);
}

body.page-forklift.app-is-mobile .pallet-entry-area {
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    body.app-page {
        padding: 12px;
    }

    body.app-page th,
    body.app-page td {
        padding: 0.6rem 0.62rem;
        font-size: 0.9rem;
    }

    body.page-login .login-container {
        padding: 22px 18px;
    }

    body.page-dashboard .header {
        margin-bottom: 0.9rem;
        padding: 0.95rem 1rem;
    }

    body.page-dashboard .header h1 {
        font-size: 1.2rem;
    }

    body.page-dashboard .tiles-container {
        gap: 0.85rem;
    }

    body.page-dashboard .tile {
        width: 100%;
        min-height: 132px;
    }

    body.page-forklift .photo-choice-buttons {
        flex-direction: column;
    }

    body.page-forklift .load-selection-controls {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    body.page-forklift .load-selection-buttons {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex: 0 1 auto;
    }

    body.page-forklift .load-selection-buttons button {
        width: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    body.page-forklift .forklift-load-picker {
        flex: 1 1 280px;
    }
}

@media (max-width: 1100px) and (orientation: landscape) {
    body.app-page.app-is-mobile {
        padding: 8px;
    }

    body.app-page.app-is-mobile .container,
    body.app-page.app-is-mobile .login-container {
        min-height: calc((var(--app-vh) * 100) - 16px);
        margin: 0 auto;
    }
}


/* ===== DASHBOARD ===== */
body.page-dashboard{ font-family: Arial, sans-serif; margin: 0; background: transparent; color: var(--app-text); }
        body.page-dashboard .dashboard-hero{ margin-bottom: 22px; }
        body.page-dashboard .dashboard-hero-top{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
        body.page-dashboard .dashboard-hero h2{ margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(1.05rem, 2.2vw, 1.6rem); line-height: 1.15; }
        body.page-dashboard .dashboard-hero-actions{ display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
        body.page-dashboard .dashboard-hero-actions .button-danger{ min-height: 34px; padding: clamp(0.38rem, 1vw, 0.58rem) clamp(0.7rem, 1.6vw, 0.95rem); font-size: clamp(0.82rem, 1.45vw, 0.96rem); }
        body.page-dashboard .dashboard-hero-meta{ display: flex; justify-content: flex-end; margin-top: 10px; min-height: 0; }
        body.page-dashboard .dashboard-hero-meta .page-header-location-badge{ max-width: 100%; }
        body.page-dashboard #usernameDisplay{ color: var(--app-primary); }
        body.page-dashboard .dashboard-grid{ display: grid; grid-template-columns: minmax(320px, 1.2fr) repeat(2, minmax(220px, 1fr)); gap: 22px; align-items: stretch; }
        body.page-dashboard .dashboard-grid > *{ min-width: 0; }
        body.page-dashboard .dashboard-help-prompt{ margin-bottom: 18px; color: var(--app-text); line-height: 1.45; }
        body.page-dashboard .dashboard-help-prompt-head{ display: flex; align-items: center; gap: 0.55rem; margin-bottom: 6px; }
        body.page-dashboard .dashboard-help-prompt-title{ margin: 0; color: var(--app-heading); font-weight: 800; font-size: 0.98rem; line-height: 1.2; }
        body.page-dashboard .dashboard-help-prompt-body{ display: block; white-space: pre-wrap; max-height: min(28vh, 260px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
        body.page-dashboard .dashboard-help-prompt-actions{ margin-top: 10px; }
        body.page-dashboard .dashboard-tile-wrap{ position: relative; display: block; min-width: 0; }
        body.page-dashboard .dashboard-tile-wrap > .tile{ width: 100%; }
        body.page-dashboard .dashboard-tile-wrap > .app-help-badge{ position: absolute; top: 10px; right: 10px; z-index: 2; }
        body.page-dashboard .tile-panel{ background-color: var(--app-surface-soft); padding: var(--app-panel-padding); }
        body.page-dashboard .tile-panel h2{ margin: 0 0 16px; font-size: 1.15rem; color: var(--app-text); text-align: left; }
        body.page-dashboard .tile-panel-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.page-dashboard .tile{ background-color: var(--app-surface-strong); border-radius: var(--app-radius-md); box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; color: var(--app-text); font-size: 1.2em; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s; }
body.page-dashboard .tile:hover{ transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
body.page-dashboard .tile.disabled{ background-color: var(--app-surface-muted); color: var(--app-neutral); cursor: not-allowed; pointer-events: none; }
body.page-dashboard .tile-mobile-badge{
    display: none;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    background: rgba(21, 108, 138, 0.12);
    color: var(--app-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.page-dashboard .tile.mobile-locked .tile-mobile-badge{
    display: inline-flex;
}
body.page-dashboard .tile.mobile-locked{
    background-color: var(--app-surface-muted);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(240,247,250,0.72));
    color: var(--app-neutral);
    opacity: 0.72;
    filter: grayscale(0.35);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}
body.page-dashboard .tile.mobile-locked .tile-icon,
body.page-dashboard .tile.mobile-locked .tile-mobile-badge,
body.page-dashboard .tile.mobile-locked div{
    color: var(--app-neutral);
}
html[data-app-theme="dark"] body.page-dashboard .tile-mobile-badge{
    background: rgba(140, 231, 246, 0.14);
    color: #8ce7f6;
}
html[data-app-theme="dark"] body.page-dashboard .tile.mobile-locked .tile-mobile-badge{
    display: inline-flex;
}
html[data-app-theme="dark"] body.page-dashboard .tile.mobile-locked{
    background-color: var(--app-surface-muted);
    background-image: linear-gradient(180deg, rgba(73, 88, 104, 0.82), rgba(40, 53, 68, 0.88));
    color: #9fb0bf;
    opacity: 0.66;
    filter: grayscale(0.25);
}
html[data-app-theme="dark"] body.page-dashboard .tile.mobile-locked .tile-icon,
html[data-app-theme="dark"] body.page-dashboard .tile.mobile-locked .tile-mobile-badge,
html[data-app-theme="dark"] body.page-dashboard .tile.mobile-locked div{
    color: #9fb0bf;
}
body.page-dashboard .tile-icon{ font-size: 3em; margin-bottom: 10px; } /* Placeholder for potential icons */
body.page-dashboard .tile-small{ width: 100%; height: 124px; font-size: 1rem; }
body.page-dashboard .tile-small .tile-icon{ font-size: 2.4em; margin-bottom: 8px; }
body.page-dashboard .tile-large{ width: 100%; height: 100%; min-height: 184px; }
body.app-page .app-perf-dock{
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 1200;
    width: min(460px, calc(100vw - 24px));
    max-height: min(42vh, 420px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--app-border-strong);
    background: var(--app-surface-strong);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}
body.app-page .app-perf-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
body.app-page .app-perf-title{
    font-weight: 800;
    color: var(--app-heading);
    line-height: 1.1;
}
body.app-page .app-perf-subtitle{
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--app-muted-text);
}
body.app-page .app-perf-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
body.app-page .app-perf-actions button{
    min-height: 32px;
    padding: 0.34rem 0.65rem;
    font-size: 0.8rem;
}
body.app-page .app-perf-log{
    margin: 0;
    padding: 10px;
    overflow: auto;
    border-radius: 10px;
    background: var(--app-code-bg);
    color: var(--app-code-text);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: min(30vh, 320px);
}
@media (max-width: 900px) {
    body.app-page .app-perf-dock{
        left: 12px;
        right: 12px;
        width: auto;
        max-height: 36vh;
    }
    body.app-page .app-perf-log{
        max-height: 24vh;
        font-size: 0.74rem;
    }
}
body.page-forklift .load-selection-controls{ align-items: center; }
body.page-forklift #voice-command-area{ position: relative; }
body.page-forklift #voiceHelpBadge{ margin-right: 0; }
        @media (max-width: 900px) {
            body.page-dashboard .dashboard-grid{ grid-template-columns: 1fr; }
            body.page-dashboard .tile-panel-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
            body.page-dashboard .tile-large{ min-height: 150px; }
        }

        body.page-dashboard.app-is-mobile .dashboard-grid{ grid-template-columns: 1fr; }
        body.page-dashboard.app-is-mobile .tile-panel-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
        body.page-dashboard.app-is-mobile .tile-large{ min-height: 150px; }

        @media (max-width: 640px) {
            body.page-dashboard .dashboard-hero-top{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
            body.page-dashboard .dashboard-hero h2{ font-size: clamp(0.92rem, 4.4vw, 1.1rem); }
            body.page-dashboard .dashboard-hero-actions{ width: auto; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; gap: 6px; }
            body.page-dashboard .dashboard-hero-actions .button-danger{ min-height: 30px; padding: 0.34rem 0.62rem; font-size: 0.8rem; }
        }

        body.page-dashboard.app-is-mobile .dashboard-hero-top{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
        body.page-dashboard.app-is-mobile .dashboard-hero-actions{ width: auto; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; gap: 6px; }
        body.page-dashboard.app-is-mobile .dashboard-hero-actions .button-danger{ min-height: 30px; padding: 0.34rem 0.62rem; font-size: 0.8rem; }

        @media (orientation: portrait) {
            body.page-dashboard .dashboard-hero-meta{
                display: none;
            }
        }

        body.page-dashboard.app-is-mobile.app-mobile-portrait .dashboard-hero-meta{
            display: none;
        }


/* ===== LOGIN ===== */
body.page-login{
    font-family: Arial, sans-serif;
    background: transparent;
    color: var(--app-text);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: calc(var(--app-vh, 1vh) * 100);
    min-height: 100dvh;
    margin: 0;
    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        calc(18px + env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
}
@supports (height: -webkit-fill-available) {
    html {
        height: -webkit-fill-available;
    }

    body.page-login {
        min-height: -webkit-fill-available;
    }
}
        body.page-login .login-container{ padding: 40px; width: 100%; max-width: 400px; text-align: center; }
        body.page-login h2{ color: var(--app-heading); margin-bottom: 20px; }
body.page-login #loginForm{ display: flex; flex-direction: column; }
body.page-login #loginForm > .app-custom-dropdown{ margin-bottom: 8px; }
body.page-login input[type="text"],
body.page-login input[type="password"],
body.page-login select{ width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid var(--app-border-strong); border-radius: 6px; font-size: 1em; box-sizing: border-box; background: var(--app-surface-strong); color: var(--app-text); }
body.page-login input[type="text"],
body.page-login input[type="password"]{ background: var(--app-surface-strong); color: var(--app-text); }
body.page-login .login-remember-option{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -2px 0 14px;
    padding: 0 2px;
    color: var(--app-text);
    font-size: 0.95rem;
    text-align: left;
}
body.page-login .login-remember-option input{
    margin: 0;
    flex: 0 0 auto;
}
body.page-login input[type="text"]:-webkit-autofill,
body.page-login input[type="text"]:-webkit-autofill:hover,
body.page-login input[type="text"]:-webkit-autofill:focus,
body.page-login input[type="password"]:-webkit-autofill,
body.page-login input[type="password"]:-webkit-autofill:hover,
body.page-login input[type="password"]:-webkit-autofill:focus,
body.page-login select:-webkit-autofill,
body.page-login select:-webkit-autofill:hover,
body.page-login select:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0 1000px var(--app-surface-strong) inset !important;
    -webkit-text-fill-color: var(--app-text) !important;
    caret-color: var(--app-text);
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
        body.page-login button{ width: 100%; padding: 12px; background: linear-gradient(180deg, #2f89ac 0%, var(--app-primary) 100%); color: white; border: none; border-radius: 6px; font-size: 1.1em; cursor: pointer; font-weight: bold; }
        body.page-login button:hover{ background: linear-gradient(180deg, #358eaf 0%, var(--app-primary-strong) 100%); }
        body.page-login .error-message{ margin-top: 15px; font-weight: bold; }
        body.page-login .terms-link{ display: inline-block; margin-top: 18px; font-size: 0.95rem; }
        body.page-login .terms-modal{ display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.6); padding: 20px; }
        body.page-login .terms-modal-content{ width: min(90vw, 780px); max-height: min(80vh, 760px); display: flex; flex-direction: column; background: var(--app-surface-strong); border: 1px solid var(--app-border); border-radius: 10px; box-shadow: 0 16px 36px rgba(0,0,0,0.25); overflow: hidden; }
        body.page-login .terms-modal-header{ display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--app-border); }
        body.page-login .terms-modal-header h3{ margin: 0; font-size: 1.1rem; color: var(--app-heading); }
        body.page-login .terms-modal-close{ background: transparent; border: 0; color: var(--app-muted); font-size: 1.6rem; cursor: pointer; padding: 0 4px; width: auto; }
        body.page-login .terms-modal-body{ padding: 18px; overflow-y: auto; text-align: left; white-space: pre-wrap; line-height: 1.55; color: var(--app-text); background: var(--app-surface-soft); }
        body.page-login .terms-modal-footer{ padding: 16px 18px 18px; border-top: 1px solid var(--app-border); text-align: left; background: var(--app-surface-strong); }
        body.page-login .terms-status{ margin: 0 0 12px; font-size: 0.92rem; color: var(--app-muted); }
        body.page-login .terms-confirm{ display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 0.95rem; color: var(--app-text); }
        body.page-login .terms-confirm input{ margin-top: 3px; }
body.page-login .terms-actions{ display: flex; justify-content: flex-end; gap: 10px; }
body.page-login .terms-secondary{ width: auto; background: var(--app-modal-button-secondary-bg); color: var(--app-modal-button-secondary-text); }
body.page-login .terms-secondary:hover{ background: var(--app-surface-muted); }
body.page-login .terms-primary[disabled]{ opacity: 0.55; cursor: not-allowed; }

/* Shared MFA action layout — used on login.html and settings.html */
.mfa-action-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.mfa-action-stack > .mfa-action-primary {
    width: 100%;
}
.mfa-action-stack > .mfa-action-secondary {
    width: 100%;
    background: var(--app-surface-soft, #f1f5f9);
    color: var(--app-text, #1f2937);
    border: 1px solid var(--app-border, #d8e0e8);
}
.mfa-action-stack > .mfa-action-secondary:hover {
    background: var(--app-surface-muted, #e5e9ee);
}
.mfa-action-stack > .mfa-action-tertiary {
    width: 100%;
    background: transparent;
    color: var(--app-muted, #6b7280);
    border: 0;
    text-decoration: underline;
    padding: 6px 8px;
    font-size: 0.88rem;
}
.mfa-action-stack > .mfa-action-tertiary:hover {
    color: var(--app-heading, #0f172a);
}
.mfa-method-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.mfa-method-row > button {
    width: 100%;
}
.mfa-method-row > button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
body.page-login .theme-modal{ display: none; position: fixed; inset: 0; z-index: 1001; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.68); padding: 20px; }
body.page-login .theme-modal-content{ width: min(90vw, 460px); display: flex; flex-direction: column; background: var(--app-surface-strong); border: 1px solid var(--app-border); border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,0.28); overflow: hidden; }
body.page-login .theme-modal-header{ padding: 16px 18px 10px; border-bottom: 1px solid var(--app-border); text-align: center; }
body.page-login .theme-modal-header h3{ margin: 0; font-size: 1.05rem; color: var(--app-heading); }
body.page-login .theme-modal-body{ padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--app-surface-soft); }
body.page-login .theme-status{ margin: 0; text-align: center; color: var(--app-muted); font-size: 0.92rem; }
body.page-login .theme-options{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.page-login .theme-option{ padding: 14px 10px; border: 1px solid var(--app-border-strong); border-radius: 12px; background: var(--app-surface-strong); color: var(--app-text); font-size: 0.98rem; font-weight: 700; width: 100%; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
body.page-login .theme-option:hover:not(:disabled){ transform: translateY(-1px); }
body.page-login .theme-option.selected{ border-color: var(--app-primary); box-shadow: 0 0 0 2px rgba(47, 137, 172, 0.22); }
body.page-login .theme-option:disabled{ opacity: 0.55; cursor: not-allowed; transform: none; }
body.page-login .theme-continue{ width: 100%; background: linear-gradient(180deg, #2f89ac 0%, var(--app-primary) 100%); }


/* ===== SETTINGS ===== */
body.page-settings{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 20px; background: transparent; color: var(--app-text); }
body.page-settings .container{ max-width: 1440px; margin: 0 auto; padding: clamp(16px, 2vw, 28px); }
        body.page-settings h2,
body.page-settings h3{ color: var(--app-heading); }
        body.page-settings .section{ margin-bottom: 30px; border-bottom: 1px solid var(--app-border); padding-bottom: 20px; }
        body.page-settings .section:last-child{ border-bottom: none; }
        body.page-settings .form-grid{ display: grid; grid-template-columns: 200px 1fr; gap: 15px; align-items: center; }
        body.page-settings input,
body.page-settings select,
body.page-settings textarea{ padding: 8px; border: 1px solid var(--app-border-strong); border-radius: 4px; width: 100%; box-sizing: border-box; font-size: 1rem; background: var(--app-input-bg); color: var(--app-input-text); }
        body.page-settings textarea{ resize: vertical; }
        body.page-settings label{ font-weight: bold; }
        body.page-settings button{ padding: 10px 15px; background-color: #2ecc71; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; font-size: 1rem; }
        body.page-settings button:hover:not(:disabled){ opacity: 0.85; }
        body.page-settings button:disabled{ background-color: #bdc3c7; cursor: not-allowed; }
        body.page-settings .button-danger{ background-color: #e74c3c; }
        body.page-settings .button-info{ background-color: #3498db; }
        body.page-settings .button-warning{ background-color: #f39c12; }

        /* OPSDARKUI3 — settings-page action buttons. The base
         * `body.page-settings button { color:white }` only matched
         * <button>, so the many `<a class="button-*">` action links
         * (Open Scheduler ETA tab, Open Driver Tracking Diagnostics,
         * the ETA / Notifications / Reports tab links, etc.) had no
         * guaranteed text colour or button box and read poorly in dark
         * mode. Give every .button-* variant — anchor OR button — a
         * solid background + white text + button shape in BOTH themes. */
        body.page-settings a.button-primary,
        body.page-settings a.button-secondary,
        body.page-settings a.button-info,
        body.page-settings a.button-warning,
        body.page-settings a.button-danger {
            display: inline-block;
            padding: 8px 14px;
            border-radius: 6px;
            text-decoration: none;
            line-height: 1.25;
            border: none;
        }
        body.page-settings .button-primary,
        body.page-settings a.button-primary,
        body.page-settings .button-secondary,
        body.page-settings a.button-secondary,
        body.page-settings .button-info,
        body.page-settings a.button-info,
        body.page-settings .button-warning,
        body.page-settings a.button-warning,
        body.page-settings .button-danger,
        body.page-settings a.button-danger {
            color: #fff;
        }
        body.page-settings .button-primary,
        body.page-settings a.button-primary { background-color: #2563eb; }
        body.page-settings .button-secondary,
        body.page-settings a.button-secondary { background-color: #5a6b7b; background-image: none; }
        body.page-settings .button-info,
        body.page-settings a.button-info { background-image: none; }

        body.page-settings #message-area{ padding: 12px; border-radius: 4px; margin-bottom: 15px; display: none; }
        body.page-settings #message-area.success{ background-color: var(--app-success-bg); color: var(--app-success-text); }
        body.page-settings #message-area.error{ background-color: var(--app-danger-bg); color: var(--app-danger-text); }
        body.page-settings #message-area.info{ background-color: var(--app-surface-info); color: var(--app-info-text); }
        
        body.page-settings .form-message{ padding: 10px; border-radius: 4px; margin-top: 10px; grid-column: 2; display: none; }
        body.page-settings .form-message.success{ background-color: var(--app-success-bg); color: var(--app-success-text); }
        body.page-settings .form-message.error{ background-color: var(--app-danger-bg); color: var(--app-danger-text); }

        body.page-settings small.hint{ color: var(--app-muted); display: block; margin-top: 4px; font-size: 0.8em; grid-column: 2;}
        body.page-settings input.invalid{ border-color: #e74c3c; box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }
        body.page-settings pre{ background-color: var(--app-code-bg); color: var(--app-code-text); padding: 15px; border-radius: 5px; max-height: 500px; overflow-y: auto; display: none; margin-top: 15px; white-space: pre-wrap; word-wrap: break-word; }
        
        body.page-settings table{ width: 100%; border-collapse: collapse; margin-top: 20px; }
        body.page-settings th,
body.page-settings td{ border: 1px solid var(--app-border); padding: 8px; text-align: left; }
        body.page-settings th{ background: linear-gradient(180deg, #257b9f 0%, #175d7f 100%); color: white; }

        /* Tab Styles */
        body.page-settings .tab-container{ border-bottom: 2px solid var(--app-border); margin-bottom: 25px; }
        body.page-settings .tab-content{ display: none; animation: fadeIn 0.5s; }
        body.page-settings .tab-content.active{ display: block; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Receive Settings Styles */
        body.page-settings .checkbox-scroll-container{ padding: 15px; background-color: var(--app-surface-soft); border: 1px solid var(--app-border); border-radius: 4px; }
        body.page-settings .checkbox-grid{ display: flex; flex-wrap: wrap; gap: 10px 24px; }
        body.page-settings .checkbox-item{ display: flex; align-items: center; gap: 6px; font-size: 0.9em; }
        body.page-settings .checkbox-item label{ font-weight: normal; }
        body.page-settings .checkbox-item input{ width: auto; }
        body.page-settings .ai-sub-options{ padding-left: 25px; }
        body.page-settings .ai-sub-options.disabled{ opacity: 0.5; pointer-events: none; }
        body.page-settings .master-data-upload{ display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; background: var(--app-surface-warning); padding: 15px; border-radius: 5px; border: 1px solid var(--app-warning); }
        body.page-settings .master-data-upload .control-group{ display: flex; flex-direction: column; gap: 5px; align-items: flex-start; flex: 1; min-width: 300px; }
        
        body.page-settings #api-key-display{ background-color: var(--app-surface-muted); border: 1px dashed var(--app-border-strong); padding: 10px; font-family: monospace; word-break: break-all; margin-top: 10px; display: none; cursor: pointer; }

        /* Summary Modal (for file uploads) */
        body.page-settings .summary-modal{ display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
        body.page-settings .summary-modal-content{ background-color: var(--app-surface-strong); margin: auto; padding: 20px; border-radius: 8px; width: 90%; max-width: 700px; border: 1px solid var(--app-border); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
        body.page-settings .summary-modal-header{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--app-border); padding-bottom: 10px; margin-bottom: 10px; }
        body.page-settings .summary-modal-header h3{ margin: 0; color: var(--app-heading); }
        body.page-settings .summary-modal-header .close-btn{ color: var(--app-muted); font-size: 28px; font-weight: bold; cursor: pointer; }
        body.page-settings #summaryModalBody{ white-space: pre-wrap; font-family: monospace; max-height: 45vh; overflow-y: auto; background: var(--app-surface-soft); padding: 10px; border-radius: 4px; }
        body.page-settings #summaryDownloadLink{ display: none; margin-top: 15px; font-weight: bold; }
        body.page-settings .hidden{ display: none !important; }
        body.page-settings .settings-intro{ color: var(--app-muted); margin-top: -6px; margin-bottom: 18px; }
        body.page-settings .settings-section-header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
        body.page-settings .settings-section-header h3{ margin: 0; }
        body.page-settings .service-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
        body.page-settings .settings-general-grid{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
        body.page-settings #standardVoiceOutputCard{ order: 99; grid-column: 1 / -1; }
        body.page-settings .service-card{ border: 1px solid var(--app-border); border-radius: 8px; padding: 16px; background: var(--app-surface-soft); min-width: 0; }
        body.page-settings .service-card h4{ margin: 0 0 6px; color: var(--app-heading); }
        body.page-settings .service-card p{ margin: 0 0 14px; color: var(--app-muted); font-size: 0.92rem; line-height: 1.45; word-break: normal; overflow-wrap: normal; }
        body.page-settings .service-card .form-grid{ grid-template-columns: minmax(118px, 148px) minmax(0, 1fr); align-items: start; }
        body.page-settings .service-card .form-grid small.hint{ grid-column: 1 / -1; }
        body.page-settings .settings-card-form{ display: flex; flex-direction: column; gap: 12px; }
        body.page-settings .settings-card-actions{ display: flex; justify-content: flex-end; }
        body.page-settings .settings-password-card{ grid-column: 1 / -1; }
        body.page-settings .settings-general-grid .service-card .form-grid{ grid-template-columns: minmax(126px, 156px) minmax(0, 1fr); }
        body.page-settings .settings-general-grid .service-card .form-grid > div{ min-width: 0; }
        body.page-settings #volume-down-ptt-setting-row{ grid-column: 1 / -1; display: grid; grid-template-columns: minmax(126px, 156px) minmax(0, 1fr); gap: 10px 14px; align-items: center; }
        body.page-settings #volume-down-ptt-setting-row > label{ align-self: center; }
        body.page-settings #volume-down-ptt-setting-row > input{ justify-self: start; }
        body.page-settings #volume-down-ptt-setting-row > small{ grid-column: 2; }
        body.page-settings .api-key-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
        body.page-settings .restricted-note{ padding: 14px 16px; border-radius: 6px; background: var(--app-surface-muted); color: var(--app-muted); line-height: 1.45; word-break: normal; overflow-wrap: normal; }
        body.page-settings .audit-toolbar{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0; align-items: end; }
        body.page-settings .audit-toolbar .control-group{ display: flex; flex-direction: column; gap: 6px; }
        body.page-settings .audit-toolbar .control-group label{ font-weight: bold; }
        body.page-settings .audit-filter-stack{ display: flex; flex-direction: column; gap: 6px; }
        body.page-settings .audit-toolbar-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
        body.page-settings .audit-summary{ margin: 8px 0 12px; color: var(--app-muted); font-size: 0.92rem; }
        body.page-settings .audit-table-wrap{ max-height: 60vh; overflow: auto; border: 1px solid var(--app-border); border-radius: 6px; }
        body.page-settings #auditLogTable{ margin-top: 0; }
        body.page-settings #auditLogTable th{ position: sticky; top: 0; z-index: 1; }
        body.page-settings #auditLogTable td{ vertical-align: top; }
        body.page-settings #auditLogTable td pre{ display: block; max-height: none; margin: 0; padding: 8px; font-size: 0.85rem; background-color: var(--app-surface-muted); color: var(--app-text); }
        body.page-settings .time-preview-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
        body.page-settings .time-preview-card{ border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface-soft); padding: 14px; color: var(--app-text); }
        body.page-settings .time-preview-card h4{ margin: 0 0 6px; color: var(--app-text); font-size: 0.95rem; }
        body.page-settings .time-preview-card p{ margin: 0; color: var(--app-text); font-weight: 600; word-break: break-word; }
        body.page-settings .time-preview-meta{ margin-top: 4px; color: var(--app-muted); font-size: 0.85rem; }
        body.page-settings .voice-settings-disabled{ opacity: 0.55; }
        body.page-settings #app_time_zone{ font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
        body.page-settings .location-status-stack{ display: flex; flex-direction: column; gap: 4px; }
        body.page-settings .location-delete-countdown{ font-size: 0.86rem; color: #8b3d22; font-weight: 600; }
        body.page-settings .location-delete-countdown.hidden{ display: none; }
        body.page-settings .settings-dialog-overlay{ display: none; z-index: 1200; }
        body.page-settings .settings-dialog-overlay.show{ display: flex; }
        body.page-settings .settings-dialog-box{ width: min(92vw, 520px); max-width: min(92vw, 520px); }
        body.page-settings .settings-dialog-header h3{ margin: 0; color: var(--app-heading); }
        body.page-settings .settings-dialog-body{ display: grid; gap: 14px; }
        body.page-settings .settings-dialog-body p{ margin: 0; line-height: 1.5; color: var(--app-muted); }
        body.page-settings .settings-dialog-body input{ margin-bottom: 0; }
        body.page-settings .settings-dialog-error{ display: none; padding: 0.8rem 0.9rem; border-radius: 12px; background: var(--app-danger-bg); border: 1px solid var(--app-danger-border); color: var(--app-danger-text); }
        body.page-settings .settings-dialog-error.show{ display: block; }
        body.page-settings .settings-dialog-actions{ margin-top: 0; }
        body.page-settings .settings-dialog-actions button{ min-width: 108px; }
        body.page-settings .settings-checkbox{ width: auto; justify-self: start; }
        body.page-settings #userFormModal{ z-index: 1215; }
        body.page-settings #mfaSetupModal{ z-index: 1225; }
        body.page-settings .user-form-modal-content{ width: min(92vw, 860px); max-width: min(92vw, 860px); }
        body.page-settings .user-form-modal-body{ padding: 1rem 1.25rem 1.25rem; }
        body.page-settings .settings-module-section{ grid-column: 1 / -1; }
        body.page-settings .settings-module-heading{ display: block; font-weight: bold; color: var(--app-heading); font-size: 0.84rem; margin-bottom: 8px; }
        body.page-settings .settings-module-grid{ display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; }
        body.page-settings .settings-module-grid > .settings-module-item{ flex: 1 1 calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; min-width: 0 !important; box-sizing: border-box !important; }
        @media (min-width: 600px) {
            body.page-settings .settings-module-grid{ gap: 10px !important; }
            body.page-settings .settings-module-grid > .settings-module-item{ flex: 1 1 140px !important; max-width: 220px !important; }
        }
        body.page-settings .settings-module-item{ display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface-soft); cursor: pointer; overflow: hidden; }
        body.page-settings .settings-module-item input{ width: auto; flex-shrink: 0; }
        body.page-settings .settings-module-item span{ min-width: 0; }
        body.page-settings .settings-module-item strong{ display: block; color: var(--app-heading); }
        body.page-settings .settings-module-item small{ display: block; color: var(--app-muted); margin-top: 2px; }
body.page-settings .settings-inline{ display: flex; align-items: center; gap: 10px; }
body.page-settings .settings-wrap{ flex-wrap: wrap; }
body.page-settings .user-voice-defaults{
    gap: 8px 18px;
    align-items: center;
}
body.page-settings .user-voice-defaults label{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}
body.page-settings .user-voice-defaults input[type="checkbox"]{
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    transform: none;
}
body.page-settings .settings-gap-lg{ gap: 20px; }
        body.page-settings .settings-grow{ flex-grow: 1; }
        body.page-settings .settings-value-label{ font-weight: bold; min-width: 40px; }
        body.page-settings .settings-actions-row{ text-align: right; }
        body.page-settings .settings-summary-actions{ margin-top: 20px; }
        body.page-settings .settings-align-center{ align-self: center; }
        body.page-settings .settings-form-grid-compact{ grid-template-columns: 120px 1fr; }
        body.page-settings .settings-short-input{ width: min(100%, 96px); max-width: 96px; }
        body.page-settings .settings-medium-input{ width: min(100%, 180px); max-width: 180px; }
        body.page-settings .settings-inline-hint{ display: inline; margin-left: 10px; }
        body.page-settings .settings-block-hint{ display: block; }
        body.page-settings .settings-danger-text{ color: #e74c3c; }
        body.page-settings .settings-heading-action{ float: right; margin-top: -5px; }
        body.page-settings .settings-cancel-button{ background: var(--app-neutral); color: #fff; }
        body.page-settings .settings-status-table{ width: auto; border: 1px solid var(--app-border); margin-top: 0; }
        body.page-settings .settings-status-table th,
body.page-settings .settings-status-table td{ padding: 6px 10px; }
        body.page-settings .settings-status-row-head{ background-color: var(--app-surface-soft); }
        body.page-settings .settings-status-row-head th{ background-color: var(--app-surface-muted); color: var(--app-text); }
        body.page-settings .settings-status-strong{ font-weight: bold; }

        body.page-settings .settings-intro,
body.page-settings small.hint,
body.page-settings .service-card p{
            word-break: normal;
            overflow-wrap: break-word;
            hyphens: auto;
        }

        @media (max-width: 960px) {
            body.page-settings .form-grid{
                grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
                gap: 12px 16px;
            }

            body.page-settings .form-grid > label{
                grid-column: 1;
            }

            body.page-settings .form-grid > div,
body.page-settings .form-grid > input,
body.page-settings .form-grid > select,
body.page-settings .form-grid > button,
body.page-settings .form-grid > small{
                grid-column: 2 !important;
            }

            body.page-settings .service-card .form-grid{
                grid-template-columns: minmax(108px, 140px) minmax(0, 1fr);
            }

            body.page-settings .service-card .form-grid small.hint{
                grid-column: 1 / -1 !important;
            }

            body.page-settings .service-grid{
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }

            body.page-settings .api-key-grid{
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }
        }

        @media (max-width: 760px) {
            body.page-settings .form-grid,
body.page-settings .master-data-upload{
                grid-template-columns: 1fr !important;
            }

            body.page-settings .form-grid > label,
body.page-settings .form-grid > div,
body.page-settings .form-grid > input,
body.page-settings .form-grid > select,
body.page-settings .form-grid > button,
body.page-settings .form-grid > small{
                grid-column: auto !important;
            }
        }


/* ===== DISPATCH ===== */
body.page-dispatch{ font-family: Arial, sans-serif; margin: 20px; background: transparent; color: var(--app-text); }
        body.page-dispatch .container{ max-width: 1000px; margin: 0 auto; padding: 20px; }
        body.page-dispatch h2{ color: var(--app-heading); text-align: center; margin-bottom: 30px;}
body.page-dispatch table{ width: 100%; border-collapse: collapse; margin-top: 20px; }

.dispatch-products-panel {
    margin: 18px 0 22px;
    padding: 18px;
    border: 1px solid rgba(100, 116, 139, 0.22);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 32, 0.03), rgba(15, 23, 32, 0.01));
}

html[data-app-theme="dark"] .dispatch-products-panel {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.55), rgba(15, 23, 42, 0.35));
}

.dispatch-products-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.dispatch-products-header h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}

.dispatch-products-header p {
    margin: 0;
    color: inherit;
    opacity: 0.8;
    max-width: 56rem;
}

.dispatch-products-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.dispatch-products-toolbar input {
    min-width: 0;
    flex: 1 1 320px;
}

.dispatch-products-table-shell {
    overflow-x: auto;
}

.dispatch-products-table-shell table {
    margin-top: 0;
}

.dispatch-product-meta {
    margin-top: 4px;
    font-size: 0.78rem;
    opacity: 0.72;
}

.dispatch-product-checkbox-cell {
    text-align: center;
    width: 140px;
}

body.page-dispatch .dispatch-products-table-shell tbody tr,
body.page-dispatch .dispatch-products-table-shell tbody tr:nth-child(even),
body.page-dispatch .dispatch-products-table-shell tbody tr:nth-child(odd){
    background-color: var(--app-surface-strong) !important;
}

body.page-dispatch .dispatch-products-table-shell tbody tr:hover{
    background-color: var(--app-surface-strong) !important;
}

body.page-dispatch .dispatch-products-table-shell tbody td{
    background-color: var(--app-surface-strong) !important;
}

body.page-dispatch .dispatch-products-table-shell{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

@media (max-width: 1100px) {
    body.page-dispatch #dispatchProductsOverlay{
        align-items: flex-start;
        justify-content: center;
        padding-top: max(12px, env(safe-area-inset-top));
    }

    body.page-dispatch #dispatchProductsDialog{
        width: calc(100vw - 24px);
        height: calc((var(--app-vh, 1vh) * 100) - 24px);
        max-height: calc(100dvh - 24px);
        padding: 10px;
        gap: 7px;
    }

    body.page-dispatch .dispatch-products-toolbar{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    body.page-dispatch .dispatch-products-toolbar input{
        flex: 1 1 220px;
        min-width: 0;
        width: auto;
    }

    body.page-dispatch .dispatch-products-modal-header{
        align-items: center;
        gap: 10px;
    }

    body.page-dispatch .dispatch-products-modal-header p{
        display: none;
    }

    body.page-dispatch .dispatch-products-modal-header .modal-close-btn{
        width: 1.9rem;
        height: 1.9rem;
        font-size: 1.15rem;
    }

    body.page-dispatch .dispatch-products-modal-header p{
        display: none;
    }

    body.page-dispatch .dispatch-products-table-shell{
        flex: 1 1 auto;
        min-height: 120px;
        overflow: auto !important;
    }
}

.dispatch-products-modal-content {
    width: min(1100px, 94vw);
    max-height: min(88vh, 860px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

body.page-dispatch #dispatchProductsDialog {
    overflow: hidden;
}

.dispatch-products-modal-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding-right: 2.8rem;
}

.dispatch-products-modal-header h3 {
    margin: 0 0 4px;
}

.dispatch-products-modal-header p {
    margin: 0;
    opacity: 0.82;
}

.dispatch-products-modal-header .modal-close-btn {
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
}

#dispatchProductMessage {
    display: none;
    margin: 0;
    padding: 0;
    min-height: 0;
}

#dispatchProductMessage.status-message.loading-message,
#dispatchProductMessage.status-message.error-message {
    display: block;
    margin: 0;
    padding: 0.55rem 0.75rem;
}

body.page-dispatch th,
body.page-dispatch td{ border: 1px solid #ddd; padding: 12px; text-align: left; vertical-align: middle; }
body.page-dispatch th{ background-color: #3498db; color: white; text-transform: uppercase; font-size: 0.9em;}
body.page-dispatch #dataTable tbody tr:nth-child(even){ background-color: #f9f9f9; }
body.page-dispatch #dataTable tbody tr:hover{ background-color: #f1f1f1; }

        body.page-dispatch .actions-container{
            display: flex;
            align-items: center;
            gap: 5px; /* Adds space between buttons */
            flex-wrap: nowrap;
        }
        body.page-dispatch .action-button{
            padding: 6px 12px;
            cursor: pointer;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 0.9em;
        }
        body.page-dispatch .action-button.delete-btn{ background-color: #e74c3c; }
        body.page-dispatch .action-button.delete-btn:hover{ background-color: #c0392b; }
        body.page-dispatch .action-button.status-btn{ background-color: #8e44ad; }
        body.page-dispatch .action-button.status-btn:hover{ background-color: #732d91; }
        
        body.page-dispatch a{ color: #2980b9; text-decoration: none; font-weight: bold;}
        body.page-dispatch a:hover{ text-decoration: underline; }
        body.page-dispatch .controls{ margin-bottom: 25px; padding: 15px; background-color: var(--app-surface-muted); border-radius: 5px; display: flex; flex-direction: column; gap: 15px; }
body.page-dispatch .control-group{ display: flex; gap: 10px; align-items: center; width: 100%; flex-wrap: wrap; }
body.page-dispatch .control-group label{ font-weight: bold; font-size: 0.9em; }
body.page-dispatch .control-group input,
body.page-dispatch .control-group select{
            padding: 8px;
            border: 1px solid var(--app-border);
            border-radius: 4px;
            background: var(--app-input-bg);
            color: var(--app-input-text);
        }
body.page-dispatch .filter-group{
    align-items: center;
    flex-wrap: nowrap;
}
body.page-dispatch .filter-group input[type="date"]{
    width: auto;
    min-width: 150px;
}
body.page-dispatch .filter-group .app-custom-dropdown{
    width: auto;
    min-width: 110px;
    flex: 0 0 auto;
}
body.page-dispatch .filter-group .app-custom-dropdown-trigger{
    min-height: 40px;
}
body.page-dispatch .dispatch-filter-actions{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    width: auto;
}
body.page-dispatch .control-group button{ padding: 10px 15px; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; }
        body.page-dispatch .upload-group{
            padding-bottom: 15px;
            border-bottom: 2px solid var(--app-border);
        }
        body.page-dispatch .upload-group input[type="file"]{ flex-grow: 1; min-width: 240px; }
        body.page-dispatch .upload-group input[type="file"]::file-selector-button{
            margin-right: 12px;
            padding: 0.7rem 1rem;
            border: 0;
            border-radius: 12px;
            color: #fff;
            background: linear-gradient(180deg, #1e83a5 0%, #156c8a 100%);
            box-shadow: 0 10px 20px rgba(21, 108, 138, 0.18);
            cursor: pointer;
            font: inherit;
            font-weight: 700;
        }
        body.page-dispatch .upload-group input[type="file"]::-webkit-file-upload-button{
            margin-right: 12px;
            padding: 0.7rem 1rem;
            border: 0;
            border-radius: 12px;
            color: #fff;
            background: linear-gradient(180deg, #1e83a5 0%, #156c8a 100%);
            box-shadow: 0 10px 20px rgba(21, 108, 138, 0.18);
            cursor: pointer;
            font: inherit;
            font-weight: 700;
        }
        body.page-dispatch .upload-group button{ background-color: #2ecc71; }
        body.page-dispatch .upload-group button:hover{ background-color: #27ae60; }
body.page-dispatch .filter-group button{ background-color: #3498db; }
body.page-dispatch .filter-group button:hover{ background-color: #2980b9; }
body.page-dispatch .filter-group button.reset{ background-color: #95a5a6; }
body.page-dispatch .filter-group button.reset:hover{ background-color: #7f8c8d; }
body.page-dispatch .filter-group button#openExclusionDefaultsBtn{
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    background-color: #fd7e14;
    color: #ffffff;
    border-color: #d4640f;
}
body.page-dispatch .filter-group button#openExclusionDefaultsBtn:hover{
    background-color: #e8690d;
}
        body.page-dispatch .pagination-controls{ display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 25px; }
        body.page-dispatch .pagination-controls button{ padding: 8px 16px; cursor: pointer; background-color: #3498db; color: white; border: 1px solid #2980b9; border-radius: 4px; }
        body.page-dispatch .pagination-controls button:disabled{ background-color: #bdc3c7; border-color: #95a5a6; cursor: not-allowed; }
        body.page-dispatch .pagination-controls span{ font-weight: bold; color: var(--app-heading); }
        body.page-dispatch .status-message{ margin-top: 15px; padding: 10px; border-radius: 4px; font-style: italic; }
        body.page-dispatch .loading-message{ background-color: #e0eafc; border: 1px solid #a3b8e0; color: #31708f;}
        body.page-dispatch .error-message{ border-color: var(--app-error-border); color: var(--app-error-text); font-weight: bold; }
        body.page-dispatch .no-entries{ text-align: center; color: #7f8c8d; padding: 20px; }
        body.page-dispatch .table-shell{
            margin-top: 20px;
            overflow: hidden;
            border-radius: 16px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-strong);
        }
        body.page-dispatch #dataTable{
            margin-top: 0;
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
            border: 0;
            border-radius: 0;
            background: transparent;
            overflow: visible;
        }
        body.page-dispatch .table-shell #dataTable{
            margin-top: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            overflow: visible;
        }
        body.page-dispatch #dataTable tbody tr,
body.page-dispatch #dataTable tbody tr:nth-child(even),
body.page-dispatch #dataTable tbody tr:nth-child(odd){
            background-color: var(--app-surface-strong);
        }
        body.page-dispatch #dataTable tbody tr:hover,
body.page-dispatch #dataTable tbody tr:active,
body.page-dispatch #dataTable tbody tr:focus,
body.page-dispatch #dataTable tbody tr:focus-within{
            background-color: var(--app-surface-strong) !important;
        }
        body.page-dispatch #dataTable tbody tr,
body.page-dispatch #dataTable tbody td{
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        body.page-dispatch #dataTable tbody tr{
            cursor: default;
        }
        body.page-dispatch #dataTable tbody a,
        body.page-dispatch #dataTable tbody button{
            user-select: auto;
            -webkit-user-select: auto;
        }
        body.page-dispatch .dispatch-products-table-shell table{
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 0;
        }
        body.page-dispatch .dispatch-products-table-shell tbody tr,
        body.page-dispatch .dispatch-products-table-shell tbody tr:nth-child(even),
        body.page-dispatch .dispatch-products-table-shell tbody tr:nth-child(odd){
            background-color: var(--app-surface-strong) !important;
        }
        body.page-dispatch .dispatch-products-table-shell tbody tr:hover{
            background-color: var(--app-surface-strong) !important;
        }
        body.page-dispatch #dispatchStatusOverlay{
            display: none;
            position: fixed;
            inset: 0;
            z-index: 100000;
            align-items: flex-start;
            justify-content: center;
            padding: 18px;
            overflow-y: auto;
            background: rgba(15, 23, 42, 0.58);
        }
        body.page-dispatch #dispatchStatusDialog{
            position: relative;
            width: min(100%, 920px);
            height: min(88vh, calc(100vh - 36px));
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: auto 0;
            border: 1px solid var(--app-border);
            border-radius: 20px;
            background: var(--app-surface-strong);
            box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
        }
        body.page-dispatch .dispatch-status-header{
            position: sticky;
            top: 0;
            z-index: 2;
            padding: 1rem 3.75rem 1rem 1.25rem;
            border-bottom: 1px solid var(--app-border);
            background: var(--app-surface-strong);
        }
        body.page-dispatch .dispatch-status-header h3{
            margin: 0;
            color: var(--app-text);
            text-align: center;
        }
        body.page-dispatch #dispatchStatusClose{
            position: absolute;
            top: 0.8rem;
            right: 0.9rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 999px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            color: var(--app-muted);
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
        }
        body.page-dispatch .dispatch-status-body{
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            padding: 1rem 1.25rem 1.25rem;
            background: var(--app-surface-strong);
        }
        body.page-dispatch .status-ontruck{ color: green; font-weight: bold; }
        body.page-dispatch .status-inwarehouse{ color: #f39c12; font-weight: bold; }
        body.page-dispatch #palletStatusTable th.sortable{ cursor: pointer; user-select: none; }
        body.page-dispatch #palletStatusTable th.sortable:hover{ background-color: #2980b9; }
        body.page-dispatch #palletStatusTable .sort-indicator{ margin-left: 5px; font-size: 0.8em; }
        body.page-dispatch #palletStatusTable td,
body.page-dispatch #palletStatusTable th,
body.page-dispatch #palletStatusTable td *,
body.page-dispatch #palletStatusTable th *{
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        body.page-dispatch #palletStatusTable tr.group-color-a{ background-color: var(--app-surface-strong); }
        body.page-dispatch #palletStatusTable tr.group-color-b{ background-color: rgba(237, 244, 248, 0.86); }
        body.page-dispatch #palletStatusTable tr:hover{ background-color: rgba(230, 240, 247, 0.92) !important; }
        body.page-dispatch #palletStatusTable td::selection,
body.page-dispatch #palletStatusTable td *::selection,
body.page-dispatch #palletStatusTable th::selection,
body.page-dispatch #palletStatusTable th *::selection{
            background: var(--app-surface-strong);
            color: inherit;
        }
        body.page-dispatch #palletStatusTable td::-moz-selection,
body.page-dispatch #palletStatusTable td *::-moz-selection,
body.page-dispatch #palletStatusTable th::-moz-selection,
body.page-dispatch #palletStatusTable th *::-moz-selection{
            background: var(--app-surface-strong);
            color: inherit;
        }
        body.page-dispatch #palletStatusTable tr.group-color-b td::selection,
body.page-dispatch #palletStatusTable tr.group-color-b td *::selection{
            background: rgba(237, 244, 248, 0.86);
            color: inherit;
        }
        body.page-dispatch #palletStatusTable tr.group-color-b td::-moz-selection,
body.page-dispatch #palletStatusTable tr.group-color-b td *::-moz-selection{
            background: rgba(237, 244, 248, 0.86);
            color: inherit;
        }
        html[data-app-theme="dark"] body.page-dispatch .table-shell{
            border-color: var(--app-border);
            background: var(--app-surface-strong);
        }
        html[data-app-theme="dark"] body.page-dispatch #dispatchStatusDialog,
html[data-app-theme="dark"] body.page-dispatch .dispatch-status-header,
html[data-app-theme="dark"] body.page-dispatch .dispatch-status-body{
            background: var(--app-surface-strong);
        }
        html[data-app-theme="dark"] body.page-dispatch #dispatchStatusClose{
            background: rgba(25, 36, 50, 0.96);
            color: #d7e5f1;
        }
        html[data-app-theme="dark"] body.page-dispatch #palletStatusTable tr.group-color-a{
            background-color: rgba(22, 32, 44, 0.98);
        }
        html[data-app-theme="dark"] body.page-dispatch #palletStatusTable tr.group-color-b{
            background-color: rgba(26, 39, 53, 0.98);
        }
        html[data-app-theme="dark"] body.page-dispatch #palletStatusTable tr:hover{
            background-color: rgba(35, 52, 69, 0.94) !important;
        }
        body.page-dispatch{
            background: transparent !important;
        }
        html[data-app-theme="dark"] body.page-dispatch .app-touch-input #palletStatusTable tr.group-color-a:hover{
            background-color: rgba(22, 32, 44, 0.98) !important;
        }
        html[data-app-theme="dark"] body.page-dispatch .app-touch-input #palletStatusTable tr.group-color-b:hover{
            background-color: rgba(26, 39, 53, 0.98) !important;
        }
        body.page-dispatch .page-live-clock{
            display: flex;
            justify-content: flex-end;
            color: #536471;
            font-size: 0.95rem;
            font-weight: 600;
            text-align: right;
        }
        html[data-app-theme="dark"] body.page-dispatch .page-live-clock{
            color: var(--app-muted);
        }
        body.page-dispatch .page-topbar{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }
        body.page-dispatch .upload-note{
            display: block;
            flex: 0 0 100%;
            width: 100%;
            margin-top: -2px;
            color: #667685;
            font-size: 0.72rem;
        }
        html[data-app-theme="dark"] body.page-dispatch .upload-note{
            color: var(--app-muted);
        }
        html[data-app-theme="dark"] body.page-dispatch #palletStatusTable td::selection,
html[data-app-theme="dark"] body.page-dispatch #palletStatusTable td *::selection,
html[data-app-theme="dark"] body.page-dispatch #palletStatusTable th::selection,
html[data-app-theme="dark"] body.page-dispatch #palletStatusTable th *::selection{
            background: rgba(22, 32, 44, 0.98);
            color: inherit;
        }
        html[data-app-theme="dark"] body.page-dispatch #palletStatusTable td::-moz-selection,
html[data-app-theme="dark"] body.page-dispatch #palletStatusTable td *::-moz-selection,
html[data-app-theme="dark"] body.page-dispatch #palletStatusTable th::-moz-selection,
html[data-app-theme="dark"] body.page-dispatch #palletStatusTable th *::-moz-selection{
            background: rgba(22, 32, 44, 0.98);
            color: inherit;
        }
        html[data-app-theme="dark"] body.page-dispatch #palletStatusTable tr.group-color-b td::selection,
html[data-app-theme="dark"] body.page-dispatch #palletStatusTable tr.group-color-b td *::selection{
            background: rgba(26, 39, 53, 0.98);
            color: inherit;
        }
        html[data-app-theme="dark"] body.page-dispatch #palletStatusTable tr.group-color-b td::-moz-selection,
html[data-app-theme="dark"] body.page-dispatch #palletStatusTable tr.group-color-b td *::-moz-selection{
            background: rgba(26, 39, 53, 0.98);
            color: inherit;
        }
    
        /* dispatch-mobile-fit patch */
        body.page-dispatch,
body.page-dispatch{
            max-width: 100%;
            overflow-x: hidden;
        }

        body.page-dispatch{
            box-sizing: border-box;
        }

        body.page-dispatch *,
body.page-dispatch *::before,
body.page-dispatch *::after{
            box-sizing: border-box;
        }

        body.page-dispatch .container,
body.page-dispatch .main-container,
body.page-dispatch .page-container,
body.page-dispatch .content-container,
body.page-dispatch .wrapper{
            max-width: 100%;
        }

        body.page-dispatch #rotateNoticeOverlay{
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(15, 23, 42, 0.96);
            color: #fff;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px;
        }

        body.page-dispatch #rotateNoticeOverlay .rotate-card{
            max-width: 420px;
            width: 100%;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 16px;
            padding: 24px 18px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }

        body.page-dispatch #rotateNoticeOverlay .rotate-icon{
            font-size: 42px;
            line-height: 1;
            margin-bottom: 12px;
        }

        body.page-dispatch #rotateNoticeOverlay .rotate-title{
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        body.page-dispatch #rotateNoticeOverlay .rotate-text{
            font-size: 0.98rem;
            line-height: 1.4;
            opacity: 0.96;
        }

        @media (max-width: 1100px) {
            body.page-dispatch{
                margin: 6px !important;
                padding: 0 !important;
            }

            body.page-dispatch .container,
body.page-dispatch .main-container,
body.page-dispatch .page-container,
body.page-dispatch .content-container,
body.page-dispatch .wrapper{
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            body.page-dispatch h1{ font-size: 1.2rem !important; }
            body.page-dispatch h2{ font-size: 1.05rem !important; }
            body.page-dispatch h3{ font-size: 0.95rem !important; }
            body.page-dispatch h4{ font-size: 0.9rem !important; }

            body.page-dispatch table{
                width: 100% !important;
                table-layout: fixed !important;
                margin-top: 10px !important;
            }

            body.page-dispatch th,
body.page-dispatch td{
                padding: 5px 4px !important;
                font-size: 12px !important;
                word-break: break-word !important;
                overflow-wrap: anywhere !important;
            }

            body.page-dispatch button,
body.page-dispatch .button,
body.page-dispatch a.button,
body.page-dispatch input,
body.page-dispatch select,
body.page-dispatch textarea{
                font-size: 12px !important;
            }

            body.page-dispatch button,
body.page-dispatch .button,
body.page-dispatch a.button{
                padding: 6px 8px !important;
                line-height: 1.15 !important;
                margin-right: 3px !important;
                margin-bottom: 3px !important;
            }

            body.page-dispatch input[type="text"],
body.page-dispatch input[type="number"],
body.page-dispatch input[type="date"],
body.page-dispatch input[type="search"],
body.page-dispatch select,
body.page-dispatch textarea{
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 6px 8px !important;
            }

            body.page-dispatch .actions-cell,
body.page-dispatch td:last-child{
                white-space: normal !important;
            }
        }

        @media (max-width: 1100px) and (orientation: portrait) {
            body.page-dispatch #rotateNoticeOverlay{
                display: flex;
            }

            body.page-dispatch{
                overflow: hidden !important;
            }

            body.page-dispatch > *:not(#rotateNoticeOverlay){
                filter: blur(1.5px);
                pointer-events: none;
                user-select: none;
            }
        }

        @media (max-width: 1100px) and (orientation: landscape) {
            body.page-dispatch,
body.page-dispatch{
                width: 100% !important;
                height: 100% !important;
            }

            body.page-dispatch{
                margin: 0 !important;
                padding: 0 !important;
            }

            body.page-dispatch .container,
body.page-dispatch .main-container,
body.page-dispatch .page-container,
body.page-dispatch .content-container,
body.page-dispatch .wrapper{
                width: 100vw !important;
                max-width: 100vw !important;
                min-height: 100vh !important;
                margin: 0 !important;
                padding: 4px 6px calc(max(18px, env(safe-area-inset-bottom)) + 56px) 6px !important;
                border-radius: 0 !important;
            }

            body.page-dispatch h1{ font-size: 1rem !important; margin: 6px 0 !important; }
            body.page-dispatch h2{ font-size: 0.95rem !important; margin: 6px 0 !important; }
            body.page-dispatch h3{ font-size: 0.88rem !important; margin: 6px 0 !important; }
            body.page-dispatch h4{ font-size: 0.82rem !important; margin: 5px 0 !important; }

            body.page-dispatch table{
                margin-top: 6px !important;
                width: 100% !important;
                table-layout: fixed !important;
            }

            body.page-dispatch th,
body.page-dispatch td{
                padding: 3px 2px !important;
                font-size: 10px !important;
            }

            body.page-dispatch button,
body.page-dispatch .button,
body.page-dispatch a.button{
                font-size: 10px !important;
                padding: 4px 6px !important;
                margin-right: 2px !important;
                margin-bottom: 2px !important;
            }

            body.page-dispatch .actions-container{
                flex-wrap: nowrap;
            }

            body.page-dispatch .upload-group input[type="file"]{
                width: 100%;
                min-width: 0;
            }

            body.page-dispatch .upload-group input[type="file"]::file-selector-button,
body.page-dispatch .upload-group input[type="file"]::-webkit-file-upload-button{
                padding: 0.55rem 0.85rem !important;
                font-size: 11px !important;
                margin-right: 8px !important;
            }

            body.page-dispatch input,
body.page-dispatch select,
body.page-dispatch textarea{
                font-size: 10px !important;
                padding: 4px 5px !important;
            }
        }

    
        /* unified mobile rotate/fullscreen patch */
        body.page-dispatch{
            max-width: 100%;
            overflow-x: hidden;
        }

        body.page-dispatch{
            box-sizing: border-box;
        }

        body.page-dispatch *,
body.page-dispatch *::before,
body.page-dispatch *::after{
            box-sizing: border-box;
        }

        body.page-dispatch #rotateNoticeOverlay{
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(15, 23, 42, 0.96);
            color: #fff;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px;
        }

        body.page-dispatch #rotateNoticeOverlay .rotate-card{
            max-width: 420px;
            width: 100%;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 16px;
            padding: 24px 18px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }

        body.page-dispatch #rotateNoticeOverlay .rotate-icon{
            font-size: 42px;
            line-height: 1;
            margin-bottom: 12px;
        }

        body.page-dispatch #rotateNoticeOverlay .rotate-title{
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        body.page-dispatch #rotateNoticeOverlay .rotate-text{
            font-size: 0.98rem;
            line-height: 1.4;
            opacity: 0.96;
        }

        body.page-dispatch #mobileFullscreenBtn{
            position: fixed;
            top: 8px;
            right: 8px;
            z-index: 99998;
            display: none;
            padding: 8px 10px;
            border: none;
            border-radius: 8px;
            background: #1f6feb;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            cursor: pointer;
        }

        body.page-dispatch #mobileFullscreenBtn:hover{
            background: #1158c7;
        }

        @media (max-width: 1100px) {
            body.page-dispatch{
                margin: 6px !important;
                padding: 0 !important;
            }

            body.page-dispatch .container,
body.page-dispatch .main-container,
body.page-dispatch .page-container,
body.page-dispatch .content-container,
body.page-dispatch .wrapper{
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            body.page-dispatch h1{ font-size: 1.2rem !important; }
            body.page-dispatch h2{ font-size: 1.05rem !important; }
            body.page-dispatch h3{ font-size: 0.95rem !important; }
            body.page-dispatch h4{ font-size: 0.9rem !important; }

            body.page-dispatch table{
                width: 100% !important;
                table-layout: fixed !important;
                margin-top: 10px !important;
            }

            body.page-dispatch th,
body.page-dispatch td{
                padding: 5px 4px !important;
                font-size: 12px !important;
                word-break: break-word !important;
                overflow-wrap: anywhere !important;
            }

            body.page-dispatch button,
body.page-dispatch .button,
body.page-dispatch a.button,
body.page-dispatch input,
body.page-dispatch select,
body.page-dispatch textarea{
                font-size: 12px !important;
            }

            body.page-dispatch button,
body.page-dispatch .button,
body.page-dispatch a.button{
                padding: 6px 8px !important;
                line-height: 1.15 !important;
                margin-right: 3px !important;
                margin-bottom: 3px !important;
            }

            body.page-dispatch input[type="text"],
body.page-dispatch input[type="number"],
body.page-dispatch input[type="date"],
body.page-dispatch input[type="search"],
body.page-dispatch select,
body.page-dispatch textarea{
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 6px 8px !important;
            }

            body.page-dispatch .actions-cell,
body.page-dispatch td:last-child{
                white-space: normal !important;
            }
        }

        @media (max-width: 1100px) and (orientation: portrait) {
            body.page-dispatch #rotateNoticeOverlay{
                display: flex;
            }

            body.page-dispatch #mobileFullscreenBtn{
                display: none !important;
            }

            body.page-dispatch{
                overflow: hidden !important;
            }

            body.page-dispatch > *:not(#rotateNoticeOverlay):not(#mobileFullscreenBtn){
                filter: blur(1.5px);
                pointer-events: none;
                user-select: none;
            }
        }

        @media (max-width: 1100px) and (orientation: landscape) {
            body.page-dispatch{
                width: 100% !important;
                height: 100% !important;
            }

            body.page-dispatch{
                margin: 0 !important;
                padding: 0 !important;
            }

            body.page-dispatch .container,
body.page-dispatch .main-container,
body.page-dispatch .page-container,
body.page-dispatch .content-container,
body.page-dispatch .wrapper{
                width: 100vw !important;
                max-width: 100vw !important;
                min-height: 100vh !important;
                margin: 0 !important;
                padding: 4px 6px calc(max(18px, env(safe-area-inset-bottom)) + 56px) 6px !important;
                border-radius: 0 !important;
            }

            body.page-dispatch h1{ font-size: 1rem !important; margin: 6px 0 !important; }
            body.page-dispatch h2{ font-size: 0.95rem !important; margin: 6px 0 !important; }
            body.page-dispatch h3{ font-size: 0.88rem !important; margin: 6px 0 !important; }
            body.page-dispatch h4{ font-size: 0.82rem !important; margin: 5px 0 !important; }

            body.page-dispatch table{
                width: 100% !important;
                table-layout: fixed !important;
                margin-top: 6px !important;
            }

            body.page-dispatch th,
body.page-dispatch td{
                padding: 3px 2px !important;
                font-size: 10px !important;
            }

            body.page-dispatch button,
body.page-dispatch .button,
body.page-dispatch a.button{
                font-size: 10px !important;
                padding: 4px 6px !important;
                margin-right: 2px !important;
                margin-bottom: 2px !important;
            }

            body.page-dispatch input,
body.page-dispatch select,
body.page-dispatch textarea{
                font-size: 10px !important;
                padding: 4px 5px !important;
            }

            body.page-dispatch #mobileFullscreenBtn{
                display: block;
            }
        }

    
        /* modal rollback + targeted status popup fix */
        body.page-dispatch .modal:not(#appModalBox),
body.page-dispatch .popup:not(#appModalBox),
body.page-dispatch .dialog:not(#appModalBox),
body.page-dispatch .overlay-modal:not(#appModalBox),
body.page-dispatch .modal-overlay:not(#appModalBox),
body.page-dispatch .modal-backdrop:not(#appModalBox),
body.page-dispatch .status-modal:not(#appModalBox),
body.page-dispatch .status-popup:not(#appModalBox),
body.page-dispatch .popup-overlay:not(#appModalBox),
body.page-dispatch .dialog-overlay:not(#appModalBox),
body.page-dispatch [role="dialog"]:not(#appModalBox):not(#dispatchProductsDialog),
body.page-dispatch [aria-modal="true"]:not(#appModalBox):not(#dispatchProductsDialog){
            max-width: none !important;
            max-height: none !important;
            overflow: visible !important;
        }

        @media (max-width: 1100px) {
            body.page-dispatch #mobileFullscreenBtn{
                display: none !important;
            }
        }

/* final dispatch-specific layout overrides */
        body.page-dispatch .upload-group{
            display: flex !important;
            align-items: flex-start !important;
            gap: 12px !important;
            flex-wrap: wrap !important;
        }

        body.page-dispatch .dispatch-upload-row{
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            flex-wrap: nowrap !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        body.page-dispatch .upload-group input[type="file"]{
            flex: 1 1 auto !important;
            width: auto !important;
            min-width: 0 !important;
        }

        body.page-dispatch .dispatch-upload-row input[type="file"]{
            flex: 1 1 auto !important;
            min-width: 0 !important;
            width: auto !important;
        }

        body.page-dispatch .upload-group button{
            flex: 0 0 auto !important;
            margin: 0 !important;
            white-space: nowrap !important;
        }

        body.page-dispatch .dispatch-upload-row .app-help-badge{
            flex: 0 0 auto !important;
            align-self: center !important;
        }

        body.page-dispatch .upload-note{
            order: 3;
            flex: 0 0 100%;
            width: 100%;
        }

        body.page-dispatch #dataTable td:last-child{
            white-space: nowrap !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }

        body.page-dispatch .actions-container{
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 6px !important;
            flex-wrap: nowrap !important;
            width: auto !important;
        }

        body.page-dispatch .actions-container .action-button{
            flex: 0 0 auto !important;
            white-space: nowrap !important;
            margin: 0 !important;
        }

        @media (max-width: 1100px) {
            body.page-dispatch .upload-group{
                gap: 8px !important;
                align-items: flex-start !important;
                flex-wrap: wrap !important;
            }

            body.page-dispatch .dispatch-upload-row{
                flex-wrap: wrap !important;
            }

            body.page-dispatch .upload-group input[type="file"]::file-selector-button,
body.page-dispatch .upload-group input[type="file"]::-webkit-file-upload-button{
                padding: 0.55rem 0.85rem !important;
                font-size: 11px !important;
            }

            body.page-dispatch .actions-container .action-button{
                padding: 4px 6px !important;
                font-size: 10px !important;
            }
        }


/* ===== DETAIL ===== */
body.page-detail{ font-family: Arial, sans-serif; margin: 20px; background: transparent; color: var(--app-text); }
        body.page-detail .container{ max-width: 1600px; margin: 0 auto; padding: 20px; }
        body.page-detail h2,
body.page-detail h3,
body.page-detail h4{ color: var(--app-heading); margin-bottom: 20px; }
        body.page-detail table{
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 20px;
            table-layout: fixed;
        }
body.page-detail .table-shell{
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow-soft);
}
body.page-detail .table-shell.table-shell-scroll-x{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
        body.page-detail .table-shell-loads{
            overflow: visible;
            position: relative;
        }
        body.page-detail .table-shell table{
            margin-top: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            overflow: visible;
        }
        body.page-detail th,
body.page-detail td{
            border-right: 1px solid var(--app-border);
            border-bottom: 1px solid var(--app-border);
            padding: 10px;
            text-align: left;
            word-wrap: break-word;
        }
        body.page-detail th{ background-color: #3498db; color: white; text-transform: uppercase; font-size: 0.9em;}
        body.page-detail tr:nth-child(even){ background-color: inherit; }
        body.page-detail .summary-table th{ background-color: #16a085; }
        body.page-detail .summary-table .total-row{ font-weight: bold; background-color: var(--app-surface-muted); }
        
        body.page-detail .purple-header th{ background-color: #8e44ad; }
        
        body.page-detail .button,
body.page-detail button{ padding: 8px 12px; background-color: #2ecc71; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; margin-right: 5px; text-decoration: none; display: inline-block; }
        body.page-detail .button:hover,
body.page-detail button:hover{ background-color: #27ae60; }
        body.page-detail button:disabled{ background-color: #bdc3c7; cursor: not-allowed; }
        body.page-detail .button-danger{ background-color: #e74c3c; }
        body.page-detail .button-danger:hover{ background-color: #c0392b; }
        body.page-detail .button-secondary{ background-color: #f39c12; }
        body.page-detail .button-secondary:hover{ background-color: #e67e22; }
        body.page-detail .button-claim{ background-color: #8e44ad; }
        body.page-detail .button-claim:hover{ background-color: #7d3c98; }
        body.page-detail .button-load-items{
            appearance: none;
            -webkit-appearance: none;
            background-image: none !important;
        }
        body.page-detail .status-pending{ color: orange; font-weight: bold; }
        body.page-detail .status-in_progress{ color: dodgerblue; font-weight: bold; }
        body.page-detail .status-completed{ color: green; font-weight: bold; }
        body.page-detail .load-pod-cell{
            text-align: center;
            cursor: pointer;
            user-select: none;
        }
        body.page-detail .load-pod-cell[role="button"] .load-pod-text{
            display: inline-block;
            padding: 0.18rem 0.34rem;
            border-radius: 999px;
            background: #16a085;
            color: #fff;
            font-weight: 700;
            min-width: 1.4rem;
            text-align: center;
        }
        body.page-detail .load-pod-cell[role="button"][title*="pending" i] .load-pod-text{
            background: #95a5a6;
        }
        body.page-detail .load-pod-cell:focus-visible{
            outline: 2px solid #156c8a;
            outline-offset: -2px;
        }
        body.page-dispatch .dispatch-pod-cell{
            text-align: center;
            cursor: pointer;
            user-select: none;
        }
        body.page-dispatch .dispatch-pod-cell:focus-visible{
            outline: 2px solid #156c8a;
            outline-offset: -2px;
        }
        body.page-dispatch .dispatch-pod-summary-label{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 5.8rem;
            padding: 0.28rem 0.7rem;
            border-radius: 999px;
            background: #16a085;
            color: #fff;
            font-weight: 700;
            letter-spacing: 0.01em;
        }
        body.page-dispatch .dispatch-pod-summary-label-pending{
            background: #95a5a6;
        }
        body.page-dispatch .dispatch-pod-summary-label-progress{
            background: #d97706;
        }
        body.page-dispatch .dispatch-pod-summary-label-complete{
            background: #16a34a;
        }
        body.page-detail .error-message{ background-color: var(--app-error-bg); border-color: var(--app-error-border); color: var(--app-error-text); padding: 10px; border-radius: 4px; margin-bottom: 15px;}
        body.page-detail .load-details-view{
            display: none;
            margin-top: 20px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }
        body.page-detail #dispatchSummary{ border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; border-radius: 5px; background: #eaf5ff; }
        body.page-detail #dispatchSummary p{ margin: 5px 0; font-size: 1.1em; }
        body.page-detail #dispatchSummary strong{ color: var(--app-heading); }
        body.page-detail #addLoadSection{ margin-top: 20px; margin-bottom: 20px; padding:15px; background-color: #e9ecef; border-radius: 5px; }
        body.page-detail #itemDetailsTable th,
body.page-detail #itemDetailsTable td{ text-align: center; vertical-align: middle; }
        body.page-detail #itemDetailsTable th:nth-child(1),
body.page-detail #itemDetailsTable td:nth-child(1){ text-align: left; width: 28%; }
        body.page-detail #itemDetailsTable th.sortable{
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }
        body.page-detail #itemDetailsTable th.sortable:hover{
            filter: brightness(0.98);
        }
        body.page-detail #itemDetailsTable .sort-indicator{
            margin-left: 0.35rem;
            font-size: 0.78em;
        }
        body.page-detail .item-po-meta{
            display: block;
            margin-top: 0.2rem;
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--app-muted);
        }
        
        body.page-detail #poSummaryTable input[type=number]{ width: 80px; padding: 4px; border: 1px solid #ccc; border-radius: 3px; text-align: center; }
        body.page-detail #poSummaryTable input:disabled{ background-color: #eee; }

        body.page-detail #loadsTable th:nth-child(1){ width: 5%; }   /* Load # */
        body.page-detail #loadsTable th:nth-child(2){ width: 12%; }  /* Created At */
        body.page-detail #loadsTable th:nth-child(3){ width: 10%; }  /* Driver */
        body.page-detail #loadsTable th:nth-child(4){ width: 7%; }   /* Min. Pallets */
        body.page-detail #loadsTable th:nth-child(5){ width: 5%; }   /* Loaded */
        body.page-detail #loadsTable th:nth-child(6){ width: 8%; }  /* Progress */
        body.page-detail #loadsTable th:nth-child(7){ width: 7%; }   /* Elapsed Time */
        body.page-detail #loadsTable th:nth-child(8){ width: 4%; }   /* Pallets/Hour */
        body.page-detail #loadsTable th:nth-child(9){ width: 7%; }   /* Est. Time Left */
        body.page-detail #loadsTable th:nth-child(10){ width: 8%; }   /* Status */
        body.page-detail #loadsTable th:nth-child(11){ width: 1%; }  /* POD */
        body.page-detail #loadsTable th#loadsPodHeader{
            text-align: center;
            padding-left: 0;
            padding-right: 0;
        }
        body.page-detail #loadsTable td.load-pod-cell{
            width: 1%;
            min-width: 0;
            max-width: none;
            text-align: center;
            padding-left: 2px;
            padding-right: 2px;
        }
        body.page-detail #loadsTable td.actions-cell{
            display: table-cell;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
            padding-left: 1px;
            padding-right: 1px;
        }
        body.page-detail #loadsTable .actions-cell{
            white-space: nowrap;
        }
        body.page-detail #loadsTable .actions-cell > *{
            vertical-align: middle;
        }
        body.page-detail #loadsTable .actions-cell > * + *{
            margin-left: 2px;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-primary,
body.page-detail #loadsTable .actions-cell .load-actions-desktop{
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-wrap: nowrap;
            flex: 0 0 auto;
            min-width: 0;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-primary{
            flex: 0 0 auto;
            min-width: 0;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-desktop{
            flex: 0 0 auto;
            min-width: 0;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-mobile{
            display: none;
            position: relative;
            flex: 0 0 auto;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-desktop .load-actions-mobile{
            display: inline-flex;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-trigger{
            min-width: 42px;
            background-color: #34495e;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel{
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            z-index: 1200;
            min-width: 156px;
            padding: 8px;
            border-radius: 10px;
            border: 1px solid #d7e1e8;
            background: #ffffff;
            box-shadow: 0 14px 26px rgba(15, 23, 42, 0.18);
        }
        body.page-detail #loadsTable .actions-cell .load-actions-mobile.load-actions-open-up .load-actions-mobile-panel{
            top: auto;
            bottom: calc(100% + 6px);
        }
        body.page-detail #loadsTable .actions-cell .load-actions-mobile.is-open .load-actions-mobile-panel{
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel .button,
body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel button{
            width: 100%;
            margin-right: 0;
        }

        body.page-detail #loadsTable .actions-cell .button,
body.page-detail #loadsTable .actions-cell button{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            margin-right: 0;
            line-height: 1.15;
            min-height: 32px;
        }
        body.page-detail #loadsTable .actions-cell .button-view-load,
body.page-detail #loadsTable .actions-cell .button-load-items{
            flex: 1 1 0;
        }
        body.page-detail #loadsTable .actions-cell .button-claim,
body.page-detail #loadsTable .actions-cell .button-secondary{
            flex: 1 1 0;
        }
        body.page-detail #loadsTable .actions-cell .button-load-items{
            flex: 0 0 auto;
            width: auto;
            min-width: 58px;
        }
        body.page-detail #loadsTable .actions-cell .button-load-items-ready{
            background-color: #2ecc71 !important;
            color: #ffffff !important;
        }
        body.page-detail #loadsTable .actions-cell .button-load-items-ready:hover{
            background-color: #27ae60 !important;
        }
        body.page-detail #loadsTable .actions-cell .button-load-items-open{
            background-color: #f39c12 !important;
            color: #ffffff !important;
        }
        body.page-detail #loadsTable .actions-cell .button-load-items-open:hover{
            background-color: #d68910 !important;
        }
        body.page-detail #loadsTable .actions-cell .button-load-items-error{
            background-color: #e74c3c !important;
            color: #ffffff !important;
        }
        body.page-detail #loadsTable .actions-cell .button-load-items-error:hover{
            background-color: #c0392b !important;
        }
        body.page-detail #loadsTable .actions-cell .button-print{
            background-color: #6f7df6;
        }
        body.page-detail #loadsTable .actions-cell .button-print:hover{
            background-color: #5764d8;
        }
        body.page-detail #loadsTable .actions-cell .button-print[disabled]{
            background-color: #bdc3c7;
            color: #eef3f7;
        }
        body.page-detail #loadsTable progress{ width: 60%; }
        body.page-detail #loadsTable{ margin-bottom: 30px; }
        body.page-detail #loadItemDetailsView{ margin-bottom: 28px; }
        body.page-detail .print-setup-modal{
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1100;
            background: rgba(15, 23, 42, 0.72);
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        body.page-detail .print-setup-modal.show{
            display: flex;
        }
        body.page-detail .print-setup-box{
            width: min(92vw, 860px);
            max-height: min(88vh, 900px);
            overflow: auto;
            background: #fff;
            border-radius: 12px;
            padding: 22px;
            box-shadow: 0 18px 42px rgba(0,0,0,0.3);
        }
        body.page-detail .print-setup-grid{
            display: grid;
            gap: 12px;
            margin: 16px 0;
        }
        body.page-detail .print-setup-option{
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 12px 14px;
            border: 1px solid #dbe4ea;
            border-radius: 8px;
            background: #f8fbfd;
        }
        body.page-detail .print-setup-option input{
            margin-top: 2px;
        }
        body.page-detail .print-setup-option strong{
            display: block;
            margin-bottom: 4px;
        }
        body.page-detail .print-preview-shell{
            border: 1px solid #dbe4ea;
            border-radius: 10px;
            padding: 14px;
            background: #fcfeff;
        }
        body.page-detail .print-preview-shell h4{
            margin-top: 0;
        }
        body.page-detail .print-preview-shell ul{
            margin: 0;
            padding-left: 18px;
        }
        body.page-detail .pallet-sheet-box{
            /* Wider on desktop and fully self-contained so it doesn't get
               cropped by the centred-flex parent when content is tall. */
            width: min(96vw, 1280px);
            max-height: calc(100dvh - 8vh);
            display: flex;
            flex-direction: column;
            overflow: hidden;             /* gallery scrolls instead */
            margin: auto 0;               /* safe centring: tall content reachable */
        }
        body.page-detail #palletSheetModal{
            /* The shared print-setup-modal is align-items:center; that
               clips the top/bottom of tall flex children on desktop. Use
               flex-start + scrollable backdrop so the whole box is always
               reachable, then re-centre via margin: auto 0 on the box. */
            align-items: flex-start;
            overflow-y: auto;
            padding: 4vh 20px 6vh;
        }
        body.page-detail .pallet-sheet-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            flex: 0 0 auto;
        }
        body.page-detail .pallet-sheet-header h3{
            margin: 0;
        }
        body.page-detail .pallet-sheet-header-actions{
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        body.page-detail .pallet-sheet-summary{
            margin-bottom: 14px;
            color: #536471;
            font-size: 0.94rem;
            flex: 0 0 auto;
        }
        body.page-detail .pallet-sheet-gallery{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
            /* Make the gallery itself the scroll container so the modal
               header/summary/Add-Photo/Close stay pinned and the bottom
               cards never clip out of view on desktop. */
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            padding-right: 4px;
            padding-bottom: 8px;
        }
        body.page-detail .pallet-sheet-card{
            border: 1px solid #dbe4ea;
            border-radius: 10px;
            background: #f8fbfd;
            padding: 12px;
        }
        body.page-detail .pallet-sheet-card img{
            display: block;
            width: 100%;
            aspect-ratio: 4 / 5;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #dbe4ea;
            background: #eef3f7;
        }
        body.page-detail .pallet-sheet-card-meta{
            margin-top: 10px;
            display: grid;
            gap: 4px;
            font-size: 0.84rem;
            color: #445463;
        }
        body.page-detail .pallet-sheet-photo-size{
            font-weight: 600;
        }
        body.page-detail .pallet-sheet-result-badge{
            display: inline-flex;
            align-items: center;
            padding: 0.16rem 0.5rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1.3;
            border: 1px solid transparent;
        }
        body.page-detail .pallet-sheet-result-success{
            background: #d1fae5;
            color: #065f46;
            border-color: #a7f3d0;
        }
        body.page-detail .pallet-sheet-result-altered{
            background: #dbeafe;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }
        body.page-detail .pallet-sheet-result-failed{
            background: #fee2e2;
            color: #991b1b;
            border-color: #fecaca;
        }
        body.page-detail .pallet-sheet-result-review,
        body.page-detail .pallet-sheet-result-unknown{
            background: #e5e7eb;
            color: #374151;
            border-color: #d1d5db;
        }
        body.page-detail .pallet-sheet-result-editor{
            display: grid;
            gap: 6px;
            margin-top: 2px;
        }
        body.page-detail .pallet-sheet-result-editor select,
        body.page-detail .pallet-sheet-result-editor input{
            width: 100%;
            min-height: 34px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            background: #fff;
            color: #1e293b;
            padding: 0.4rem 0.5rem;
            font-size: 0.86rem;
        }
        body.page-detail .pallet-sheet-card-actions{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 8px;
        }
        body.page-detail .pallet-sheet-card-actions .button{
            min-height: 34px;
            padding: 0.42rem 0.7rem;
            font-size: 0.82rem;
        }
        body.page-detail .pallet-sheet-card-actions .button[disabled],
        body.page-detail .pallet-sheet-card-actions .button[aria-disabled="true"]{
            opacity: 0.58;
            cursor: not-allowed;
            box-shadow: none;
        }
        body.page-detail .pallet-sheet-action-helper{
            margin-top: 6px;
            color: #6b7280;
            font-size: 0.77rem;
            line-height: 1.4;
        }
        body.page-detail .admin-pallet-sheet-preview-box{
            width: min(980px, calc(100vw - 40px));
        }
        body.page-detail .admin-pallet-sheet-preview-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        body.page-detail .admin-pallet-sheet-preview-column{
            min-width: 0;
        }
        body.page-detail .admin-pallet-sheet-preview-column h4{
            margin: 0 0 6px;
            font-size: 0.88rem;
        }
        body.page-detail .admin-pallet-sheet-preview-list{
            display: grid;
            gap: 8px;
            min-height: 120px;
            padding: 10px;
            border: 1px solid #dbe4ea;
            border-radius: 10px;
            background: #f8fbfd;
        }
        body.page-detail .admin-pallet-sheet-preview-item,
        body.page-detail .admin-pallet-sheet-preview-separator{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 10px;
            border: 1px solid #d1dbe3;
            border-radius: 8px;
            background: #fff;
            color: #1e293b;
        }
        body.page-detail .admin-pallet-sheet-preview-separator{
            justify-content: center;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            background: #eef3f7;
        }
        body.page-detail .admin-pallet-sheet-preview-notes{
            margin-top: 12px;
            padding: 10px 12px;
            border: 1px solid #dbe4ea;
            border-radius: 10px;
            background: #f8fbfd;
            color: #445463;
            font-size: 0.9rem;
        }
        body.page-detail .pallet-sheet-delete-button{
            margin-left: auto;
        }
        body.page-detail .pallet-sheet-empty{
            grid-column: 1 / -1;       /* span the whole gallery row */
            padding: 28px 16px;
            border: 1px dashed #c8d5df;
            border-radius: 10px;
            background: #f8fbfd;
            color: #536471;
            text-align: center;
        }
        body.page-detail .print-setup-actions{
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 18px;
        }
        body.page-detail .page-live-clock{
            display: flex;
            justify-content: flex-end;
            color: #536471;
            font-size: 0.95rem;
            font-weight: 600;
            text-align: right;
        }
        body.page-detail .page-topbar{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        body.page-detail .custom-checkbox-container{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            position: relative;
        }
        body.page-detail .custom-checkbox-container input[type=number]{
             width: 48px;
             min-width: 48px;
             max-width: 48px;
             padding: 3px;
             border: 1px solid var(--app-border-strong);
             border-radius: 3px;
             background: var(--app-input-bg);
             color: var(--app-input-text);
        }
        body.page-detail .custom-checkbox-container input[type=number]:disabled{
            background-color: var(--app-surface-muted);
            color: var(--app-input-text);
            -webkit-text-fill-color: var(--app-input-text);
            opacity: 1;
            cursor: not-allowed;
        }
        body.page-detail #itemFilterControls{
            gap: 18px !important;
            margin-bottom: 6px;
        }
        body.page-detail #itemFilterControls label{
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        body.page-detail #itemFilterControls input[type=radio]{
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        body.page-detail .po-crate-count-warning,
body.page-detail .po-summary-discrepancy-cell{
            color: var(--app-error-text);
            font-weight: 700;
        }
        body.page-detail #poSummaryTable thead tr:first-child th{
            text-align: center;
        }
        body.page-detail #loadPOSummaryTable thead tr:first-child th.po-summary-equipment-group{
            background: linear-gradient(135deg, #0f6f86, #1d89a8);
            color: #ffffff;
            border-bottom-color: #0d5f74;
            box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.12);
        }
        body.page-detail #loadPOSummaryTable thead tr:nth-child(2) th.po-summary-equipment-subhead,
        body.page-detail #loadPOSummaryTable tbody td:nth-child(2),
        body.page-detail #loadPOSummaryTable tbody td:nth-child(3){
            background: rgba(21, 108, 138, 0.08) !important;
        }
        body.page-detail #loadPOSummaryTable .total-row td:nth-child(2),
        body.page-detail #loadPOSummaryTable .total-row td:nth-child(3){
            background: rgba(21, 108, 138, 0.12) !important;
            font-weight: 700;
        }
        body.page-detail #poSummaryTable thead .po-summary-subhead{
            font-size: 0.76rem;
            letter-spacing: 0.05em;
        }
        body.page-detail #loadPOSummaryTable thead tr:first-child th,
body.page-detail #loadPOSummaryTable thead tr:nth-child(2) th,
body.page-detail #poSummaryTable thead tr:nth-child(2) th{
            text-align: center;
        }
        body.page-detail #poSummaryTable tbody td:not(:first-child),
body.page-detail #loadPOSummaryTable tbody td:not(:first-child),
body.page-detail #poSummaryTable .total-row td:not(:first-child),
body.page-detail #loadPOSummaryTable .total-row td:not(:first-child){
            text-align: center;
        }

        /* THIS IS THE FIX: This rule now correctly targets ALL checkboxes */
        body.page-detail input[type=checkbox]{
            height: 18px;
            width: 18px;
            cursor: pointer;
            accent-color: #e74c3c !important; /* Use !important to ensure it overrides any other styles */
        }

        body.page-detail .copyable{
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            touch-callout: none;
            caret-color: transparent;
            touch-action: manipulation;
        }
        body.page-detail .copyable-button{
            display: inline-block;
            padding: 0;
            margin: 0;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            font-weight: inherit;
            line-height: inherit;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -webkit-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            touch-callout: none;
            caret-color: transparent;
            touch-action: manipulation;
        }
        body.page-detail .copyable-value{
            display: inline-block;
            color: inherit;
            font: inherit;
            font-weight: inherit;
            line-height: inherit;
            padding: 0.12rem 0.4rem;
            border-radius: 999px;
            transition: background-color 0.14s ease, color 0.14s ease;
            user-select: none !important;
            -webkit-user-select: none !important;
            -ms-user-select: none !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-touch-callout: none;
            pointer-events: auto;
        }
        body.page-detail .copyable:hover{
            background-color: inherit;
        }
        body.page-detail .copyable:active,
body.page-detail .copyable:focus,
body.page-detail .copyable:focus-visible{
            background-color: inherit !important;
            color: inherit !important;
            outline: none !important;
            box-shadow: none !important;
        }
        body.page-detail .copyable-button:hover,
body.page-detail .copyable-button:active,
body.page-detail .copyable-button:focus,
body.page-detail .copyable-button:focus-visible{
            background: transparent !important;
            color: inherit !important;
            outline: none !important;
            box-shadow: none !important;
        }
        body.page-detail .copyable-value:hover,
body.page-detail .copyable-value:active,
body.page-detail .copyable-value:focus,
body.page-detail .copyable-value:focus-visible{
            background: transparent !important;
            color: inherit !important;
            outline: none !important;
            box-shadow: none !important;
        }
        body.page-detail .copyable.copied-active{
            background: #d8f4df !important;
            color: #16603f !important;
        }
        body.page-detail .copyable.copied-active .copyable-value{
            background: #d8f4df !important;
            color: #16603f !important;
        }
        body.page-detail #itemDetailsTable td::selection,
body.page-detail #itemDetailsTable td *::selection,
body.page-detail #itemDetailsTable th::selection,
body.page-detail #itemDetailsTable th *::selection{
            background: #ffffff;
            color: inherit;
        }
        body.page-detail #itemDetailsTable td::-moz-selection,
body.page-detail #itemDetailsTable td *::-moz-selection,
body.page-detail #itemDetailsTable th::-moz-selection,
body.page-detail #itemDetailsTable th *::-moz-selection{
            background: #ffffff;
            color: inherit;
        }
        body.page-detail .po-group-row td::selection,
body.page-detail .po-group-row td *::selection{
            background: #34495e;
            color: white;
        }
        body.page-detail .po-group-row td::-moz-selection,
body.page-detail .po-group-row td *::-moz-selection{
            background: #34495e;
            color: white;
        }
        body.page-detail .shared-pallet-info-row td::selection,
body.page-detail .shared-pallet-info-row td *::selection{
            background: #eef4f8;
            color: #445463;
        }
        body.page-detail .shared-pallet-info-row td::-moz-selection,
body.page-detail .shared-pallet-info-row td *::-moz-selection{
            background: #eef4f8;
            color: #445463;
        }
        body.page-detail .conflict-row td::selection,
body.page-detail .conflict-row td *::selection{
            background: #f4b6b6;
            color: #7a1010;
        }
        body.page-detail .conflict-row td::-moz-selection,
body.page-detail .conflict-row td *::-moz-selection{
            background: #f4b6b6;
            color: #7a1010;
        }
body.page-detail .partial-stock-row td::selection,
body.page-detail .partial-stock-row td *::selection{
            background: var(--app-detail-partial-stock-bg);
            color: var(--app-detail-partial-stock-text);
        }
        body.page-detail .partial-stock-row td::-moz-selection,
body.page-detail .partial-stock-row td *::-moz-selection{
            background: var(--app-detail-partial-stock-bg);
            color: var(--app-detail-partial-stock-text);
        }
        body.page-detail .truck-only-row td::selection,
body.page-detail .truck-only-row td *::selection{
            background: var(--app-detail-truck-only-bg);
            color: var(--app-detail-truck-only-text);
        }
        body.page-detail .truck-only-row td::-moz-selection,
body.page-detail .truck-only-row td *::-moz-selection{
            background: var(--app-detail-truck-only-bg);
            color: var(--app-detail-truck-only-text);
        }
        body.page-detail .warehouse-only-row td::selection,
body.page-detail .warehouse-only-row td *::selection{
            background: var(--app-detail-warehouse-only-bg);
            color: var(--app-detail-warehouse-only-text);
        }
        body.page-detail .warehouse-only-row td::-moz-selection,
body.page-detail .warehouse-only-row td *::-moz-selection{
            background: var(--app-detail-warehouse-only-bg);
            color: var(--app-detail-warehouse-only-text);
        }
        
        body.page-detail .table-updated{
            transition: none;
            background-color: inherit !important;
        }

        body.page-detail #hideZeroUnitsLabel{
            font-size: 0.9em; 
            font-weight: normal; 
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        body.page-detail .conflict-row{
            background-color: #f4b6b6 !important;
            color: #7a1010 !important;
            font-weight: 700;
        }
        body.page-detail .conflict-row td{
            background-color: #f4b6b6 !important;
            border-color: #e3a4a4 !important;
            color: #7a1010 !important;
        }
        body.page-detail .conflict-row td:first-child{
            color: #7a1010 !important;
            font-weight: 700 !important;
        }
        body.page-detail .partial-stock-row td{
            background-color: var(--app-detail-partial-stock-bg) !important;
            color: var(--app-detail-partial-stock-text) !important;
        }
        body.page-detail .truck-only-row td{
            background-color: var(--app-detail-truck-only-bg) !important;
            color: var(--app-detail-truck-only-text) !important;
        }
        body.page-detail .warehouse-only-row td{
            background-color: var(--app-detail-warehouse-only-bg) !important;
            color: var(--app-detail-warehouse-only-text) !important;
        }
        body.page-detail #itemDetailsTable td,
body.page-detail #itemDetailsTable th,
body.page-detail #poSummaryTable td,
body.page-detail #poSummaryTable th,
body.page-detail #loadPOSummaryTable td,
body.page-detail #loadPOSummaryTable th{
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        body.page-detail #itemDetailsTable tbody tr,
body.page-detail #poSummaryTable tbody tr,
body.page-detail #loadPOSummaryTable tbody tr{
            cursor: default;
            -webkit-tap-highlight-color: transparent;
        }
        body.page-detail #itemDetailsTable tbody tr td,
body.page-detail #poSummaryTable tbody tr td,
body.page-detail #loadPOSummaryTable tbody tr td,
body.page-detail #itemDetailsTable tbody tr *,
body.page-detail #poSummaryTable tbody tr *,
body.page-detail #loadPOSummaryTable tbody tr *{
            -webkit-tap-highlight-color: transparent;
        }
        body.page-detail #itemDetailsTable tbody tr td,
body.page-detail #loadPOSummaryTable tbody tr td{
            background-color: #ffffff;
        }
        body.page-detail #poSummaryTable tbody tr td{
            background-color: #ffffff;
        }
        body.page-detail #itemDetailsTable tbody tr:hover td,
body.page-detail #loadPOSummaryTable tbody tr:hover td{
            background-color: #ffffff !important;
        }
        body.page-detail #itemDetailsTable tbody tr:active td,
body.page-detail #itemDetailsTable tbody tr:focus td,
body.page-detail #itemDetailsTable tbody tr:focus-within td,
body.page-detail #poSummaryTable tbody tr:active td,
body.page-detail #poSummaryTable tbody tr:focus td,
body.page-detail #poSummaryTable tbody tr:focus-within td,
body.page-detail #loadPOSummaryTable tbody tr:active td,
body.page-detail #loadPOSummaryTable tbody tr:focus td,
body.page-detail #loadPOSummaryTable tbody tr:focus-within td{
            background-color: #ffffff !important;
            outline: none !important;
        }
        body.page-detail #poSummaryTable tbody tr:hover td,
        body.page-detail #loadPOSummaryTable tbody tr:hover td{
            background-color: #ffffff !important;
        }
        body.page-detail #itemDetailsTable td:last-child,
body.page-detail #itemDetailsTable th:last-child,
body.page-detail #poSummaryTable td:last-child,
body.page-detail #poSummaryTable th:last-child,
body.page-detail #loadPOSummaryTable td:last-child,
body.page-detail #loadPOSummaryTable th:last-child{
            border-right: 0;
        }
        body.page-detail #itemDetailsTable tbody tr:last-child td,
body.page-detail #poSummaryTable tbody tr:last-child td,
body.page-detail #loadPOSummaryTable tbody tr:last-child td{
            border-bottom: 0;
        }
        body.page-detail .po-group-row:hover td,
body.page-detail .po-group-row:active td,
body.page-detail .po-group-row:focus td,
body.page-detail .po-group-row:focus-within td{
            background-color: #34495e !important;
            color: white !important;
        }
        body.page-detail .shared-pallet-info-row:hover td,
body.page-detail .shared-pallet-info-row:active td,
body.page-detail .shared-pallet-info-row:focus td,
body.page-detail .shared-pallet-info-row:focus-within td{
            background: #eef4f8 !important;
            color: #445463 !important;
        }
        body.page-detail .conflict-row:hover td,
body.page-detail .conflict-row:active td,
body.page-detail .conflict-row:focus td,
body.page-detail .conflict-row:focus-within td{
            background-color: #f4b6b6 !important;
            border-color: #e3a4a4 !important;
            color: #7a1010 !important;
        }
        body.page-detail .partial-stock-row:hover td,
body.page-detail .partial-stock-row:active td,
body.page-detail .partial-stock-row:focus td,
body.page-detail .partial-stock-row:focus-within td{
            background-color: var(--app-detail-partial-stock-bg) !important;
            color: var(--app-detail-partial-stock-text) !important;
        }
        body.page-detail .truck-only-row:hover td,
body.page-detail .truck-only-row:active td,
body.page-detail .truck-only-row:focus td,
body.page-detail .truck-only-row:focus-within td{
            background-color: var(--app-detail-truck-only-bg) !important;
            color: var(--app-detail-truck-only-text) !important;
        }
        body.page-detail .warehouse-only-row:hover td,
body.page-detail .warehouse-only-row:active td,
body.page-detail .warehouse-only-row:focus td,
body.page-detail .warehouse-only-row:focus-within td{
            background-color: var(--app-detail-warehouse-only-bg) !important;
            color: var(--app-detail-warehouse-only-text) !important;
        }
        body.page-detail .summary-table .total-row:hover td,
body.page-detail .summary-table .total-row:active td,
body.page-detail .summary-table .total-row:focus td,
body.page-detail .summary-table .total-row:focus-within td{
            background-color: #ecf0f1 !important;
        }
        body.page-detail .shared-pallet-info-row td{
            background: #eef4f8 !important;
            color: #445463 !important;
            font-weight: 600;
            line-height: 1.45;
        }
        body.page-detail .item-state-legend{
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: nowrap;
            color: inherit;
            margin-right: auto;
        }
        body.page-detail .item-state-legend-entry{
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            white-space: nowrap;
            font-size: 0.84rem;
            font-weight: 700;
            line-height: 1.1;
        }
        body.page-detail .item-state-legend-swatch{
            width: 0.9rem;
            height: 0.9rem;
            border-radius: 0.22rem;
            border: 1px solid rgba(31, 41, 55, 0.18);
            flex: 0 0 auto;
        }
        body.page-detail .item-filter-toolbar{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
            flex-wrap: nowrap;
            overflow-x: auto;
            width: 100%;
            max-width: 100%;
            padding-top: 0.08rem;
            padding-bottom: 0;
            scrollbar-width: thin;
        }
        body.page-detail .item-summary-header{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 12px;
            flex-wrap: nowrap;
            margin-top: 10px;
            margin-bottom: 4px;
            padding-top: 6px;
        }
        body.page-detail .item-summary-header-inline{
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        body.page-detail .item-summary-header-inline h3{
            margin: 0;
        }
        body.page-detail .shared-pallet-count-control-row{
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-left: auto;
        }
        body.page-detail .shared-pallet-count-label{
            font-weight: 700;
            color: var(--app-heading);
            white-space: nowrap;
        }
        body.page-detail .item-summary-header-inline #sharedPalletCountRadioMount{
            margin-left: 0;
        }
        body.page-detail .load-print-context{
            display: none !important;
        }
        body.page-detail #loadItemDetailsTitle{
            margin-bottom: 4px;
        }
        body.page-detail #itemFilterControls{
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: nowrap;
            margin-left: 0;
            white-space: nowrap;
        }
        body.page-detail #itemFilterControls label{
            display: inline-flex;
            align-items: center;
            gap: 4px;
            line-height: 1.1;
            white-space: nowrap;
        }
        body.page-detail .legend-truck-only .item-state-legend-swatch{
            background: var(--app-detail-truck-only-bg);
            border-color: var(--app-detail-truck-only-border);
        }
        body.page-detail .legend-partial-stock .item-state-legend-swatch{
            background: var(--app-detail-partial-stock-bg);
            border-color: var(--app-detail-partial-stock-border);
        }
        body.page-detail .legend-in-warehouse .item-state-legend-swatch{
            background: var(--app-detail-warehouse-only-bg);
            border-color: var(--app-detail-warehouse-only-border);
        }
        body.page-detail .legend-error .item-state-legend-swatch{
            background: var(--app-detail-legend-error-swatch-bg);
            border-color: var(--app-detail-legend-error-swatch-border);
        }
        body.page-detail .item-name-cell{
            display: flex;
            align-items: center;
            gap: 0.65rem;
            width: 100%;
            min-width: 0;
        }
        body.page-detail .item-name-text{
            flex: 1 1 auto;
            min-width: 0;
            overflow-wrap: anywhere;
            text-align: left;
        }
        body.page-detail .item-state-badges{
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.35rem;
            margin-left: auto;
            flex: 0 0 auto;
            flex-wrap: wrap;
        }
        body.page-detail .item-state-badge{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1px 7px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        body.page-detail .item-state-badge-error{
            background: var(--app-error-bg);
            color: var(--app-error-text);
            border-color: var(--app-error-border);
        }
        body.page-detail .item-state-badge-short{
            background: var(--app-surface-warning);
            color: var(--app-warning-text);
            border-color: var(--app-warning-border);
        }
        body.page-detail .item-state-badge-split{
            background: var(--app-detail-partial-stock-bg);
            color: var(--app-detail-partial-stock-text);
            border-color: var(--app-detail-partial-stock-border);
        }
        body.page-detail .item-state-badge-tick{
            background: var(--app-detail-truck-only-bg);
            color: var(--app-detail-truck-only-text);
            border-color: var(--app-detail-truck-only-border);
        }
        /* SHORTAGE_MANAGEMENT_STAGE4 — pallet-level clarification override
           badge. Shown when the Stage 3 post-processor consumed a
           shortage_pallet_details row to resolve an item that the core
           algorithm flagged as unexplained. Indigo / purple to clearly
           distinguish from the existing red Error / yellow Short badges. */
        body.page-detail .item-state-badge-override{
            background: #ede9fe;
            color: #4338ca;
            border-color: #c7d2fe;
        }
        body.page-detail .item-state-badge-forwarded{
            background: #dbeafe;
            color: #1e40af;
            border-color: #93c5fd;
        }
        body.page-detail .item-state-badge-partial{
            background: #ffedd5;
            color: #c2410c;
            border-color: #fed7aa;
        }
        /* SHORTAGE_MANAGEMENT_STAGE5 — inline chip cluster shown next
           to each PO in the Dispatch PO summary table. Built from
           per-PO sidecar metadata returned by
           dispatch.py:get_po_summary_for_dispatch_v2 + the helper
           shortage_management.build_per_po_overrides_for_dispatch.
           Visible alongside the existing PO display text; never
           replaces any number. Reuses the same colour palette as the
           Stage 4 item-state badges so the surface looks unified. */
        body.page-detail .sm-summary-chip-row{
            display: inline-flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-left: 8px;
            vertical-align: middle;
        }
        body.page-detail .sm-summary-chip{
            display: inline-block;
            padding: 1px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.01em;
            border: 1px solid transparent;
            line-height: 1.4;
            white-space: nowrap;
        }
        body.page-detail .sm-summary-chip--override  { background: #ede9fe; color: #4338ca; border-color: #c7d2fe; }
        body.page-detail .sm-summary-chip--partial   { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
        body.page-detail .sm-summary-chip--forwarded { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
        body.page-detail .sm-summary-chip--warn      { background: #fef3c7; color: #92400e; border-color: #fde68a; }

        /* SHORTAGE_MANAGEMENT_STAGE5 — Forklift truck-cell badge for
           the effective-plan breakdown. One badge per truck-cell when
           the pallet has forwarded crates inbound and/or the operator
           entered an over-count that the effective plan accepted. */
        body.page-forklift .truck-item .sm-truck-chip{
            display: inline-block;
            margin-top: 4px;
            padding: 1px 7px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            line-height: 1.4;
            border: 1px solid transparent;
            cursor: default;
            white-space: nowrap;
        }
        body.page-forklift .truck-item .sm-truck-chip--forwarded{ background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
        body.page-forklift .truck-item .sm-truck-chip--effective{ background: #fef3c7; color: #92400e; border-color: #fde68a; }
        body.page-forklift .truck-item .sm-truck-chip--override { background: #ede9fe; color: #4338ca; border-color: #c7d2fe; }
        body.page-forklift .truck-item .sm-truck-chip-row{
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }
        body.page-detail .po-group-row td{
            background-color: #34495e !important;
            color: white !important;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            padding: 11px 12px;
        }
        html[data-app-theme="dark"] body.page-detail .copyable:hover{
            background-color: inherit;
        }
        html[data-app-theme="dark"] body.page-detail .copyable,
html[data-app-theme="dark"] body.page-detail .copyable-button,
html[data-app-theme="dark"] body.page-detail .copyable:active,
html[data-app-theme="dark"] body.page-detail .copyable:focus,
html[data-app-theme="dark"] body.page-detail .copyable:focus-visible{
            background-color: inherit !important;
            color: inherit !important;
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent;
        }
        html[data-app-theme="dark"] body.page-detail .copyable-button:active,
html[data-app-theme="dark"] body.page-detail .copyable-button:focus,
html[data-app-theme="dark"] body.page-detail .copyable-button:focus-visible,
html[data-app-theme="dark"] body.page-detail .copyable-button:hover{
            background: transparent !important;
            color: inherit !important;
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent;
        }
        html[data-app-theme="dark"] body.page-detail .copyable-value,
html[data-app-theme="dark"] body.page-detail .copyable-value:active,
html[data-app-theme="dark"] body.page-detail .copyable-value:focus,
html[data-app-theme="dark"] body.page-detail .copyable-value:focus-visible,
html[data-app-theme="dark"] body.page-detail .copyable-value:hover{
            background: transparent !important;
            color: inherit !important;
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        html[data-app-theme="dark"] body.page-detail .copyable.copied-active{
            background: #17492a !important;
            color: #d8f4df !important;
        }
        html[data-app-theme="dark"] body.page-detail .copyable.copied-active .copyable-value{
            background: #17492a !important;
            color: #d8f4df !important;
        }
        html[data-app-theme="dark"] body.page-detail .item-po-meta{
            color: #a9b7c5;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable td::selection,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable td *::selection,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable th::selection,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable th *::selection{
            background: #16202c;
            color: inherit;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable td::-moz-selection,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable td *::-moz-selection,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable th::-moz-selection,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable th *::-moz-selection{
            background: #16202c;
            color: inherit;
        }
        html[data-app-theme="dark"] body.page-detail .po-group-row td::selection,
html[data-app-theme="dark"] body.page-detail .po-group-row td *::selection{
            background: #2a4054;
            color: #f4f8fb;
        }
        html[data-app-theme="dark"] body.page-detail .po-group-row td::-moz-selection,
html[data-app-theme="dark"] body.page-detail .po-group-row td *::-moz-selection{
            background: #2a4054;
            color: #f4f8fb;
        }
        html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row td::selection,
html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row td *::selection{
            background: #22313d;
            color: #c5d2dc;
        }
        html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row td::-moz-selection,
html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row td *::-moz-selection{
            background: #22313d;
            color: #c5d2dc;
        }
        html[data-app-theme="dark"] body.page-detail .conflict-row td::selection,
html[data-app-theme="dark"] body.page-detail .conflict-row td *::selection{
            background: #5a2a31;
            color: #ffe7ea;
        }
        html[data-app-theme="dark"] body.page-detail .conflict-row td::-moz-selection,
html[data-app-theme="dark"] body.page-detail .conflict-row td *::-moz-selection{
            background: #5a2a31;
            color: #ffe7ea;
        }
        html[data-app-theme="dark"] body.page-detail .partial-stock-row td::selection,
html[data-app-theme="dark"] body.page-detail .partial-stock-row td *::selection{
            background: var(--app-detail-partial-stock-bg);
            color: var(--app-detail-partial-stock-text);
        }
        html[data-app-theme="dark"] body.page-detail .partial-stock-row td::-moz-selection,
html[data-app-theme="dark"] body.page-detail .partial-stock-row td *::-moz-selection{
            background: var(--app-detail-partial-stock-bg);
            color: var(--app-detail-partial-stock-text);
        }
        html[data-app-theme="dark"] body.page-detail .truck-only-row td::selection,
html[data-app-theme="dark"] body.page-detail .truck-only-row td *::selection{
            background: var(--app-detail-truck-only-bg);
            color: var(--app-detail-truck-only-text);
        }
        html[data-app-theme="dark"] body.page-detail .truck-only-row td::-moz-selection,
html[data-app-theme="dark"] body.page-detail .truck-only-row td *::-moz-selection{
            background: var(--app-detail-truck-only-bg);
            color: var(--app-detail-truck-only-text);
        }
        html[data-app-theme="dark"] body.page-detail .warehouse-only-row td::selection,
html[data-app-theme="dark"] body.page-detail .warehouse-only-row td *::selection{
            background: var(--app-detail-warehouse-only-bg);
            color: var(--app-detail-warehouse-only-text);
        }
        html[data-app-theme="dark"] body.page-detail .warehouse-only-row td::-moz-selection,
html[data-app-theme="dark"] body.page-detail .warehouse-only-row td *::-moz-selection{
            background: var(--app-detail-warehouse-only-bg);
            color: var(--app-detail-warehouse-only-text);
        }
        html[data-app-theme="dark"] body.page-detail .partial-stock-row td{
            background-color: var(--app-detail-partial-stock-bg) !important;
            color: var(--app-detail-partial-stock-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .warehouse-only-row td{
            background-color: var(--app-detail-warehouse-only-bg) !important;
            color: var(--app-detail-warehouse-only-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .truck-only-row td{
            background-color: var(--app-detail-truck-only-bg) !important;
            color: var(--app-detail-truck-only-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .conflict-row td{
            background-color: #5a2a31 !important;
            color: #ffe7ea !important;
        }
        html[data-app-theme="dark"] body.page-detail .conflict-row td:first-child{
            color: #ffe7ea !important;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable th,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable th,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td{
            border-color: #283540 !important;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr td{
            background-image: none !important;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:not(.po-group-row):not(.conflict-row):not(.partial-stock-row):not(.truck-only-row):not(.warehouse-only-row) td{
            background-color: #16202c !important;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:hover td{
            background-color: #16202c !important;
        }
        html[data-app-theme="dark"] body.page-detail #poSummaryTable tbody tr td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr td{
            background-color: #16202c !important;
            color: #d8e3ec !important;
        }
        html[data-app-theme="dark"] body.page-detail #poSummaryTable tbody tr:hover td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:hover td{
            background-color: #16202c !important;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:active td,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:focus td,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:focus-within td,
html[data-app-theme="dark"] body.page-detail #poSummaryTable tbody tr:active td,
html[data-app-theme="dark"] body.page-detail #poSummaryTable tbody tr:focus td,
html[data-app-theme="dark"] body.page-detail #poSummaryTable tbody tr:focus-within td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:active td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:focus td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:focus-within td{
            background-color: #16202c !important;
            outline: none !important;
        }
        html[data-app-theme="dark"] body.page-detail .po-group-row:hover td,
html[data-app-theme="dark"] body.page-detail .po-group-row:active td,
html[data-app-theme="dark"] body.page-detail .po-group-row:focus td,
html[data-app-theme="dark"] body.page-detail .po-group-row:focus-within td{
            background-color: #2a4054 !important;
            color: #f4f8fb !important;
        }
        html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row:hover td,
html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row:active td,
html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row:focus td,
html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row:focus-within td{
            background: #22313d !important;
            color: #c5d2dc !important;
        }
        html[data-app-theme="dark"] body.page-detail .partial-stock-row:hover td,
html[data-app-theme="dark"] body.page-detail .partial-stock-row:active td,
html[data-app-theme="dark"] body.page-detail .partial-stock-row:focus td,
html[data-app-theme="dark"] body.page-detail .partial-stock-row:focus-within td{
            background-color: var(--app-detail-partial-stock-bg) !important;
            color: var(--app-detail-partial-stock-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .warehouse-only-row:hover td,
html[data-app-theme="dark"] body.page-detail .warehouse-only-row:active td,
html[data-app-theme="dark"] body.page-detail .warehouse-only-row:focus td,
html[data-app-theme="dark"] body.page-detail .warehouse-only-row:focus-within td{
            background-color: var(--app-detail-warehouse-only-bg) !important;
            color: var(--app-detail-warehouse-only-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .truck-only-row:hover td,
html[data-app-theme="dark"] body.page-detail .truck-only-row:active td,
html[data-app-theme="dark"] body.page-detail .truck-only-row:focus td,
html[data-app-theme="dark"] body.page-detail .truck-only-row:focus-within td{
            background-color: var(--app-detail-truck-only-bg) !important;
            color: var(--app-detail-truck-only-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .conflict-row:hover td,
html[data-app-theme="dark"] body.page-detail .conflict-row:active td,
html[data-app-theme="dark"] body.page-detail .conflict-row:focus td,
html[data-app-theme="dark"] body.page-detail .conflict-row:focus-within td{
            background-color: #5a2a31 !important;
            color: #ffe7ea !important;
            border-color: #8a525b !important;
        }
        html[data-app-theme="dark"] body.page-detail .summary-table .total-row:hover td,
html[data-app-theme="dark"] body.page-detail .summary-table .total-row:active td,
html[data-app-theme="dark"] body.page-detail .summary-table .total-row:focus td,
html[data-app-theme="dark"] body.page-detail .summary-table .total-row:focus-within td{
            background-color: #16202c !important;
            color: #d8e3ec !important;
        }
        html[data-app-theme="dark"] body.page-detail .app-touch-input #itemDetailsTable tbody tr:not(.po-group-row):not(.conflict-row):not(.partial-stock-row):not(.truck-only-row):not(.warehouse-only-row):hover td{
            background-color: #16202c !important;
        }
        html[data-app-theme="dark"] body.page-detail .app-touch-input .po-group-row:hover td{
            background-color: #2a4054 !important;
            color: #f4f8fb !important;
        }
        html[data-app-theme="dark"] body.page-detail .app-touch-input .shared-pallet-info-row:hover td{
            background: #22313d !important;
            color: #c5d2dc !important;
        }
        html[data-app-theme="dark"] body.page-detail .app-touch-input .conflict-row:hover td{
            background-color: #5a2a31 !important;
            border-color: #8a525b !important;
            color: #ffe7ea !important;
        }
        html[data-app-theme="dark"] body.page-detail .app-touch-input .partial-stock-row:hover td{
            background-color: var(--app-detail-partial-stock-bg) !important;
            color: var(--app-detail-partial-stock-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .app-touch-input .truck-only-row:hover td{
            background-color: var(--app-detail-truck-only-bg) !important;
            color: var(--app-detail-truck-only-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .app-touch-input .warehouse-only-row:hover td{
            background-color: var(--app-detail-warehouse-only-bg) !important;
            color: var(--app-detail-warehouse-only-text) !important;
        }
        html[data-app-theme="dark"] body.page-detail .shared-pallet-info-row td{
            background: #22313d !important;
            color: #c5d2dc !important;
        }
        html[data-app-theme="dark"] body.page-detail .po-group-row td{
            background-color: #2a4054 !important;
            color: #f4f8fb !important;
        }

        /* normalized item details palette */
        body.page-detail #itemDetailsTable tbody tr{
            --detail-item-row-bg: #ffffff;
            --detail-item-row-text: #24313d;
            --detail-item-row-border: #d7e1e8;
        }
        body.page-detail #itemDetailsTable tbody tr td{
            background-color: var(--detail-item-row-bg) !important;
            color: var(--detail-item-row-text) !important;
            border-color: var(--detail-item-row-border) !important;
            background-image: none !important;
        }
        body.page-detail #itemDetailsTable tbody tr:hover td,
body.page-detail #itemDetailsTable tbody tr:active td,
body.page-detail #itemDetailsTable tbody tr:focus td,
body.page-detail #itemDetailsTable tbody tr:focus-within td{
            background-color: var(--detail-item-row-bg) !important;
            color: var(--detail-item-row-text) !important;
            border-color: var(--detail-item-row-border) !important;
        }
        body.page-detail #itemDetailsTable tbody tr.po-group-row{
            --detail-item-row-bg: #34495e;
            --detail-item-row-text: #ffffff;
            --detail-item-row-border: #34495e;
        }
        body.page-detail #itemDetailsTable tbody tr.shared-pallet-info-row{
            --detail-item-row-bg: #eef4f8;
            --detail-item-row-text: #445463;
            --detail-item-row-border: #d2dee7;
        }
        body.page-detail #itemDetailsTable tbody tr.conflict-row{
            --detail-item-row-bg: #f4b6b6;
            --detail-item-row-text: #7a1010;
            --detail-item-row-border: #e3a4a4;
        }
        body.page-detail #itemDetailsTable tbody tr.partial-stock-row{
            --detail-item-row-bg: var(--app-detail-partial-stock-bg);
            --detail-item-row-text: var(--app-detail-partial-stock-text);
            --detail-item-row-border: var(--app-detail-partial-stock-border);
        }
        body.page-detail #itemDetailsTable tbody tr.truck-only-row{
            --detail-item-row-bg: var(--app-detail-truck-only-bg);
            --detail-item-row-text: var(--app-detail-truck-only-text);
            --detail-item-row-border: var(--app-detail-truck-only-border);
        }
        body.page-detail #itemDetailsTable tbody tr.warehouse-only-row{
            --detail-item-row-bg: var(--app-detail-warehouse-only-bg);
            --detail-item-row-text: var(--app-detail-warehouse-only-text);
            --detail-item-row-border: var(--app-detail-warehouse-only-border);
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr{
            --detail-item-row-bg: #16202c;
            --detail-item-row-text: #d8e3ec;
            --detail-item-row-border: #283540;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.po-group-row{
            --detail-item-row-bg: #2a4054;
            --detail-item-row-text: #f4f8fb;
            --detail-item-row-border: #3b556b;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.shared-pallet-info-row{
            --detail-item-row-bg: #22313d;
            --detail-item-row-text: #c5d2dc;
            --detail-item-row-border: #344755;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.conflict-row{
            --detail-item-row-bg: #5a2a31;
            --detail-item-row-text: #ffe7ea;
            --detail-item-row-border: #8a525b;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.partial-stock-row{
            --detail-item-row-bg: var(--app-detail-partial-stock-bg);
            --detail-item-row-text: var(--app-detail-partial-stock-text);
            --detail-item-row-border: var(--app-detail-partial-stock-border);
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.truck-only-row{
            --detail-item-row-bg: var(--app-detail-truck-only-bg);
            --detail-item-row-text: var(--app-detail-truck-only-text);
            --detail-item-row-border: var(--app-detail-truck-only-border);
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.warehouse-only-row{
            --detail-item-row-bg: var(--app-detail-warehouse-only-bg);
            --detail-item-row-text: var(--app-detail-warehouse-only-text);
            --detail-item-row-border: var(--app-detail-warehouse-only-border);
        }
        html[data-app-theme="dark"] body.page-detail .legend-truck-only .item-state-legend-swatch{
            background: var(--app-detail-truck-only-bg);
            border-color: var(--app-detail-truck-only-border);
        }
        html[data-app-theme="dark"] body.page-detail .legend-partial-stock .item-state-legend-swatch{
            background: var(--app-detail-partial-stock-bg);
            border-color: var(--app-detail-partial-stock-border);
        }
        html[data-app-theme="dark"] body.page-detail .legend-in-warehouse .item-state-legend-swatch{
            background: var(--app-detail-warehouse-only-bg);
            border-color: var(--app-detail-warehouse-only-border);
        }
        html[data-app-theme="dark"] body.page-detail .legend-error .item-state-legend-swatch{
            background: var(--app-detail-legend-error-swatch-bg);
            border-color: var(--app-detail-legend-error-swatch-border);
        }
body.page-detail #loadPOSummaryTable td.po-summary-discrepancy-cell,
body.page-detail #loadPOSummaryTable .has-summary-discrepancy td.po-summary-discrepancy-cell{
            color: var(--app-error-text) !important;
            font-weight: 800 !important;
        }
        html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-discrepancy-cell,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .has-summary-discrepancy td.po-summary-discrepancy-cell{
            color: var(--app-error-text) !important;
            font-weight: 800 !important;
        }
        html[data-app-theme="dark"] body.page-detail #itemDetailsWarnings,
html[data-app-theme="dark"] body.page-detail #excludedDiscrepancyWarning{
            background-color: #4a3a12 !important;
            border-color: #7d6630 !important;
            color: #f4e3ab !important;
        }
        html[data-app-theme="dark"] body.page-detail .print-setup-box{
            background: #16222c;
            color: #dce7ef;
        }
        html[data-app-theme="dark"] body.page-detail .print-setup-option,
html[data-app-theme="dark"] body.page-detail .print-preview-shell{
            background: #101820;
            border-color: #314251;
            color: #dce7ef;
        }
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-card,
html[data-app-theme="dark"] body.page-detail .pallet-sheet-empty{
            background: #101820;
            border-color: #314251;
            color: #dce7ef;
        }
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-card img{
            border-color: #314251;
            background: #16222c;
        }
html[data-app-theme="dark"] body.page-detail .pallet-sheet-card-meta,
html[data-app-theme="dark"] body.page-detail .pallet-sheet-summary,
html[data-app-theme="dark"] body.page-detail .pallet-sheet-photo-size,
html[data-app-theme="dark"] body.page-detail .pallet-sheet-result-badge{
            color: #b4c2cf;
        }
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-result-success{
            background: #0f2f22;
            color: #8ef0c6;
            border-color: #1f5c44;
        }
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-result-altered{
            background: #10253f;
            color: #a5c8ff;
            border-color: #24406d;
        }
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-result-failed{
            background: #3d1111;
            color: #ffb4b4;
            border-color: #652020;
        }
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-result-review,
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-result-unknown{
            background: #1f2937;
            color: #d1d5db;
            border-color: #374151;
        }
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-result-editor select,
        html[data-app-theme="dark"] body.page-detail .pallet-sheet-result-editor input{
            background: #111827;
            border-color: #374151;
            color: #dbeafe;
        }
        html[data-app-theme="dark"] body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel{
            background: #16222c;
            border-color: #314251;
            box-shadow: 0 18px 34px rgba(0,0,0,0.35);
        }

        /* mobile-fit patch */
        body.page-detail{
            max-width: 100%;
            overflow-x: hidden;
        }

        body.page-detail{
            box-sizing: border-box;
        }

        body.page-detail *,
body.page-detail *::before,
body.page-detail *::after{
            box-sizing: border-box;
        }

        body.page-detail .container{
            width: 100%;
        }

        body.page-detail #rotateNoticeOverlay{
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(238, 243, 247, 0.96);
            color: #163247;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px;
        }

        body.page-detail #rotateNoticeOverlay .rotate-card{
            max-width: 420px;
            width: 100%;
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(21, 108, 138, 0.16);
            border-radius: 16px;
            padding: 24px 18px;
            box-shadow: 0 18px 42px rgba(21, 47, 66, 0.14);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        body.page-detail #rotateNoticeOverlay .rotate-icon{
            font-size: 42px;
            line-height: 1;
            margin-bottom: 12px;
        }

        body.page-detail #rotateNoticeOverlay .rotate-title{
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: #163247;
        }

        body.page-detail #rotateNoticeOverlay .rotate-text{
            font-size: 0.98rem;
            line-height: 1.4;
            opacity: 0.96;
            color: #52606d;
        }
        body.page-detail #rotateNoticeOverlay .rotate-actions{
            margin-top: 16px;
            display: flex;
            justify-content: center;
        }
        body.page-detail #rotateNoticeOverlay .rotate-dashboard-button{
            min-width: 190px;
            min-height: 42px;
            margin-right: 0;
        }
        body.page-detail #rotateNoticeOverlay .rotate-card .button{
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay{
            background: rgba(15, 23, 42, 0.96);
            color: #fff;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-card{
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.18);
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-title,
        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-text{
            color: #fff;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-dashboard-button{
            text-decoration: none;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-dashboard-button:hover{
            text-decoration: none;
        }

        @media (max-width: 1100px) {
            body.page-detail{
                margin: 8px;
            }

            body.page-detail .container{
                max-width: 100%;
                padding: 10px;
                border-radius: 6px;
            }

            body.page-detail h2{
                font-size: 1.25rem;
                margin-bottom: 12px;
            }

            body.page-detail h3{
                font-size: 1.05rem;
                margin-bottom: 10px;
            }

            body.page-detail h4{
                font-size: 0.95rem;
                margin-bottom: 8px;
            }

            body.page-detail #dispatchSummary p,
body.page-detail label,
body.page-detail td,
body.page-detail th,
body.page-detail input,
body.page-detail button,
body.page-detail .button{
                font-size: 12px;
            }

            body.page-detail table{
                margin-top: 10px;
                table-layout: fixed;
            }

            body.page-detail th,
body.page-detail td{
                padding: 5px 4px;
                word-break: break-word;
                overflow-wrap: anywhere;
            }

            body.page-detail .button,
body.page-detail button{
                padding: 6px 8px;
                margin-right: 3px;
                border-radius: 4px;
                line-height: 1.15;
            }

            body.page-detail input[type=checkbox]{
                width: 16px;
                height: 16px;
            }

            body.page-detail #loadsTable td.actions-cell{
                display: table-cell !important;
                white-space: nowrap !important;
                vertical-align: middle;
                overflow: visible;
            }
            body.page-detail .table-shell-loads{
                overflow: visible !important;
            }
            body.page-detail #loadsTable .actions-cell{
                white-space: nowrap !important;
            }
            body.page-detail #loadsTable th:nth-child(11),
body.page-detail #loadsTable td:nth-child(11){
                width: 1% !important;
                min-width: 0 !important;
                max-width: none !important;
                text-align: center !important;
            }

            body.page-detail #loadsTable .actions-cell .button,
body.page-detail #loadsTable .actions-cell button{
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 0;
            }
            body.page-detail #loadsTable .actions-cell .load-actions-primary{
                flex: 0 0 40px;
                width: 40px;
                min-width: 40px;
            }
            body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items{
                flex: 0 0 40px;
                width: 40px;
                min-width: 40px;
                max-width: 40px;
                padding: 6px 2px !important;
                font-size: 11px !important;
            }
            body.page-detail #loadsTable .actions-cell .load-actions-desktop{
                display: none;
            }
            body.page-detail #loadsTable .actions-cell .load-actions-mobile{
                display: inline-flex;
                flex: 0 0 40px;
                width: 40px;
                min-width: 40px;
            }
            body.page-detail #loadsTable .actions-cell .load-actions-mobile-trigger{
                width: 40px;
                min-width: 40px;
                max-width: 40px;
                padding: 6px 2px !important;
                font-size: 11px !important;
            }
            body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel{
                width: min(180px, calc(100vw - 24px));
            }
            body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel .button,
body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel button{
                margin-bottom: 0;
                padding: 8px 10px !important;
            }

            body.page-detail #loadsTable progress{
                width: 52px;
            }

            body.page-detail #poSummaryTable input[type=number]{
                width: 62px;
                padding: 3px;
            }

            body.page-detail .custom-checkbox-container{
                gap: 4px;
            }

            body.page-detail .custom-checkbox-container input[type=number]{
                width: 48px;
                min-width: 48px;
                max-width: 48px;
                padding: 3px;
            }

            body.page-detail #loadNumberInput{
                width: 52px !important;
                margin-right: 8px !important;
            }

            body.page-detail #minimumPallets{
                width: 62px;
            }

            body.page-detail #itemFilterControls{
                gap: 8px !important;
                font-size: 12px !important;
                flex-wrap: nowrap;
                justify-content: flex-end;
                padding-top: 4px;
            }

            body.page-detail .item-filter-toolbar,
body.page-detail .item-state-legend{
                flex-wrap: nowrap;
            }

            body.page-detail .item-summary-header{
                margin-top: 14px;
                margin-bottom: 6px;
                padding-top: 10px;
                flex-wrap: nowrap;
            }

            body.page-detail #loadItemDetailsTitle{
                margin-bottom: 10px;
            }

            body.page-detail #itemFilterControls label{
                display: inline-flex;
                align-items: center;
                gap: 4px;
                position: relative;
                top: 2px;
            }

            body.page-detail #addLoadSection{
                margin-top: 12px;
                margin-bottom: 12px;
                padding: 10px;
            }

            body.page-detail .load-details-view{
                margin-top: 12px;
                padding: 10px;
            }
        }

        @media (max-width: 1100px) and (orientation: portrait) {
            body.page-detail #rotateNoticeOverlay{
                display: flex;
            }

            body.page-detail{
                overflow: hidden;
            }

            body.page-detail .container{
                filter: blur(1.5px);
                pointer-events: none;
                user-select: none;
            }
        }

        @media (max-width: 1100px) and (orientation: landscape) {
            body.page-detail{
                margin: 4px;
            }

            body.page-detail .container{
                padding: 6px;
            }

            body.page-detail h2{
                font-size: 1.05rem;
                margin-bottom: 8px;
            }

            body.page-detail h3{
                font-size: 0.95rem;
                margin-bottom: 8px;
            }

            body.page-detail h4{
                font-size: 0.88rem;
                margin-bottom: 6px;
            }

            body.page-detail #dispatchSummary p,
body.page-detail label,
body.page-detail td,
body.page-detail th,
body.page-detail input,
body.page-detail button,
body.page-detail .button{
                font-size: 10px;
            }

            body.page-detail th,
body.page-detail td{
                padding: 3px 2px;
            }

            body.page-detail .button,
body.page-detail button{
                padding: 4px 6px;
                font-size: 10px;
                margin-right: 2px;
            }

            body.page-detail #loadsTable progress{
                width: 42px;
                height: 10px;
            }

            body.page-detail #poSummaryTable input[type=number]{
                width: 52px;
                font-size: 10px;
            }

            body.page-detail .custom-checkbox-container input[type=number]{
                width: 48px;
                min-width: 48px;
                max-width: 48px;
                font-size: 10px;
            }

            body.page-detail #loadNumberInput{
                width: 40px !important;
            }

            body.page-detail #minimumPallets{
                width: 50px;
            }

            body.page-detail #dispatchSummary{
                padding: 8px;
                margin-bottom: 10px;
            }

            body.page-detail #addLoadSection{
                padding: 8px;
                margin-top: 8px;
                margin-bottom: 8px;
            }

            body.page-detail .load-details-view{
                padding: 8px;
                margin-top: 8px;
            }

            body.page-detail .po-group-row td{
                padding: 5px 6px;
                font-size: 10px;
            }
        }

    
        /* unified mobile rotate/fullscreen patch */
        body.page-detail,
body.page-detail{
            max-width: 100%;
            overflow-x: hidden;
        }

        body.page-detail{
            box-sizing: border-box;
        }

        body.page-detail *,
body.page-detail *::before,
body.page-detail *::after{
            box-sizing: border-box;
        }

        body.page-detail #rotateNoticeOverlay{
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(15, 23, 42, 0.96);
            color: #fff;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px;
        }

        body.page-detail #rotateNoticeOverlay .rotate-card{
            max-width: 420px;
            width: 100%;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 16px;
            padding: 24px 18px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }

        body.page-detail #rotateNoticeOverlay .rotate-icon{
            font-size: 42px;
            line-height: 1;
            margin-bottom: 12px;
        }

        body.page-detail #rotateNoticeOverlay .rotate-title{
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        body.page-detail #rotateNoticeOverlay .rotate-text{
            font-size: 0.98rem;
            line-height: 1.4;
            opacity: 0.96;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay{
            background: rgba(15, 23, 42, 0.96);
            color: #fff;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-card{
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.18);
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay{
            background: rgba(15, 23, 42, 0.96);
            color: #fff;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-card{
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.18);
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-title,
        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-text{
            color: #fff;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-dashboard-button{
            text-decoration: none;
        }

        html[data-app-theme="dark"] body.page-detail #rotateNoticeOverlay .rotate-dashboard-button:hover{
            text-decoration: none;
        }

        body.page-detail #mobileFullscreenBtn{
            position: fixed;
            top: 8px;
            right: 8px;
            z-index: 99998;
            display: none;
            padding: 8px 10px;
            border: none;
            border-radius: 8px;
            background: #1f6feb;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            cursor: pointer;
        }

        body.page-detail #mobileFullscreenBtn:hover{
            background: #1158c7;
        }

        @media (max-width: 1100px) {
            body.page-detail{
                margin: 6px !important;
                padding: 0 !important;
            }

            body.page-detail .container,
body.page-detail .main-container,
body.page-detail .page-container,
body.page-detail .content-container,
body.page-detail .wrapper{
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            body.page-detail h1{ font-size: 1.2rem !important; }
            body.page-detail h2{ font-size: 1.05rem !important; }
            body.page-detail h3{ font-size: 0.95rem !important; }
            body.page-detail h4{ font-size: 0.9rem !important; }

            body.page-detail table{
                width: 100% !important;
                table-layout: fixed !important;
                margin-top: 10px !important;
            }

            body.page-detail th,
body.page-detail td{
                padding: 5px 4px !important;
                font-size: 12px !important;
                word-break: break-word !important;
                overflow-wrap: anywhere !important;
            }

            body.page-detail button,
body.page-detail .button,
body.page-detail a.button,
body.page-detail input,
body.page-detail select,
body.page-detail textarea{
                font-size: 12px !important;
            }

            body.page-detail button,
body.page-detail .button,
body.page-detail a.button{
                padding: 6px 8px !important;
                line-height: 1.15 !important;
                margin-right: 3px !important;
                margin-bottom: 3px !important;
            }

            body.page-detail #loadsTable{
                table-layout: auto !important;
            }

            body.page-detail .table-shell-loads{
                overflow: visible !important;
            }

            body.page-detail #loadsTable th:nth-child(11),
body.page-detail #loadsTable td:nth-child(11){
                width: 1% !important;
                min-width: 0 !important;
                max-width: none !important;
                white-space: nowrap !important;
                text-align: center !important;
            }

            body.page-detail #loadsTable td.actions-cell{
                padding-left: 1px !important;
                padding-right: 1px !important;
                text-align: center !important;
            }

            body.page-detail #loadsTable .actions-cell{
                white-space: nowrap !important;
            }

            body.page-detail #loadsTable .actions-cell .load-actions-primary,
body.page-detail #loadsTable .actions-cell .load-actions-mobile{
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex: 0 0 40px !important;
                width: 40px !important;
                min-width: 40px !important;
                max-width: 40px !important;
                margin: 0 !important;
            }

            body.page-detail #loadsTable .actions-cell .load-actions-desktop{
                display: none !important;
            }

            body.page-detail #loadsTable .actions-cell .button,
body.page-detail #loadsTable .actions-cell button,
body.page-detail #loadsTable .actions-cell a.button{
                margin-right: 0 !important;
                margin-bottom: 0 !important;
            }

            body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items,
body.page-detail #loadsTable .actions-cell .load-actions-mobile-trigger{
                width: 40px !important;
                min-width: 40px !important;
                max-width: 40px !important;
                padding: 6px 2px !important;
                font-size: 11px !important;
            }

            body.page-detail input[type="text"],
body.page-detail input[type="number"],
body.page-detail input[type="date"],
body.page-detail input[type="search"],
body.page-detail select,
body.page-detail textarea{
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 6px 8px !important;
            }

            body.page-detail td:last-child:not(.actions-cell){
                white-space: normal !important;
            }
        }

        @media (max-width: 1100px) and (orientation: portrait) {
            body.page-detail #rotateNoticeOverlay{
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            body.page-detail #rotateNoticeOverlay .rotate-card{
                display: flex !important;
            }

            body.page-detail #rotateNoticeOverlay .rotate-actions{
                display: flex !important;
                width: 100%;
            }

            body.page-detail #rotateNoticeOverlay .rotate-dashboard-button{
                display: inline-flex !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 100%;
                max-width: 220px;
            }

            body.page-detail #mobileFullscreenBtn{
                display: none !important;
            }

            body.page-detail{
                overflow: hidden !important;
            }

            body.page-detail > *:not(#rotateNoticeOverlay):not(#mobileFullscreenBtn){
                filter: blur(1.5px);
                pointer-events: none;
                user-select: none;
            }
        }

        @media (max-width: 1100px) and (orientation: landscape) {
            body.page-detail{
                width: 100% !important;
                height: 100% !important;
            }

            body.page-detail{
                margin: 0 !important;
                padding: 0 !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
            }

            body.page-detail .container,
body.page-detail .main-container,
body.page-detail .page-container,
body.page-detail .content-container,
body.page-detail .wrapper{
                width: 100vw !important;
                max-width: 100vw !important;
                min-height: 100vh !important;
                min-height: calc(var(--app-vh, 1vh) * 100) !important;
                min-height: 100dvh !important;
                margin: 0 !important;
                padding: 4px 6px calc(max(18px, env(safe-area-inset-bottom)) + 56px) 6px !important;
                border-radius: 0 !important;
            }

            body.page-detail h1{ font-size: 1rem !important; margin: 6px 0 !important; }
            body.page-detail h2{ font-size: 0.95rem !important; margin: 6px 0 !important; }
            body.page-detail h3{ font-size: 0.88rem !important; margin: 6px 0 !important; }
            body.page-detail h4{ font-size: 0.82rem !important; margin: 5px 0 !important; }

            body.page-detail table{
                width: 100% !important;
                table-layout: fixed !important;
                margin-top: 6px !important;
            }

            body.page-detail th,
body.page-detail td{
                padding: 3px 2px !important;
                font-size: 10px !important;
            }

            body.page-detail button,
body.page-detail .button,
body.page-detail a.button{
                font-size: 10px !important;
                padding: 4px 6px !important;
                margin-right: 2px !important;
                margin-bottom: 2px !important;
            }

            body.page-detail #loadsTable{
                table-layout: auto !important;
                margin-bottom: 18px !important;
            }

            body.page-detail #loadsTable th:nth-child(11),
body.page-detail #loadsTable td:nth-child(11){
                width: 1% !important;
                min-width: 0 !important;
                max-width: none !important;
                white-space: nowrap !important;
                text-align: center !important;
            }

            body.page-detail #loadsTable td.actions-cell{
                padding-left: 1px !important;
                padding-right: 1px !important;
                text-align: center !important;
            }

            body.page-detail #loadsTable .actions-cell .load-actions-primary,
body.page-detail #loadsTable .actions-cell .load-actions-mobile{
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex: 0 0 40px !important;
                width: 40px !important;
                min-width: 40px !important;
                max-width: 40px !important;
                margin: 0 !important;
            }

            body.page-detail #loadsTable .actions-cell .load-actions-desktop{
                display: none !important;
            }

            body.page-detail #loadsTable .actions-cell .button,
body.page-detail #loadsTable .actions-cell button,
body.page-detail #loadsTable .actions-cell a.button{
                margin-right: 0 !important;
                margin-bottom: 0 !important;
            }

            body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items,
body.page-detail #loadsTable .actions-cell .load-actions-mobile-trigger{
                width: 40px !important;
                min-width: 40px !important;
                max-width: 40px !important;
                padding: 4px 2px !important;
                font-size: 10px !important;
            }

            body.page-detail input,
body.page-detail select,
body.page-detail textarea{
                font-size: 10px !important;
                padding: 4px 5px !important;
            }

        body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items.button-load-items-ready,
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel .button-load-items.button-load-items-ready{
            background-color: #2ecc71 !important;
            border-color: #27ae60 !important;
            color: #ffffff !important;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items.button-load-items-ready:hover,
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel .button-load-items.button-load-items-ready:hover{
            background-color: #27ae60 !important;
            border-color: #229954 !important;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items.button-load-items-open,
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel .button-load-items.button-load-items-open{
            background-color: #f39c12 !important;
            border-color: #d68910 !important;
            color: #ffffff !important;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items.button-load-items-open:hover,
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel .button-load-items.button-load-items-open:hover{
            background-color: #d68910 !important;
            border-color: #b9770e !important;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items.button-load-items-error,
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel .button-load-items.button-load-items-error{
            background-color: #e74c3c !important;
            border-color: #c0392b !important;
            color: #ffffff !important;
        }
        body.page-detail #loadsTable .actions-cell .load-actions-primary .button-load-items.button-load-items-error:hover,
        body.page-detail #loadsTable .actions-cell .load-actions-mobile-panel .button-load-items.button-load-items-error:hover{
            background-color: #c0392b !important;
            border-color: #a93226 !important;
        }

            body.page-detail #mobileFullscreenBtn{
                display: block;
            }
        }
/* force common page popups/modals to true center */
        body.page-detail .modal,
body.page-detail .popup,
body.page-detail .dialog,
body.page-detail .overlay-modal,
body.page-detail .modal-overlay,
body.page-detail .modal-backdrop,
body.page-detail .status-modal,
body.page-detail .status-popup,
body.page-detail .popup-overlay,
body.page-detail .dialog-overlay,
body.page-detail [role="dialog"],
body.page-detail [aria-modal="true"]{
            box-sizing: border-box;
        }

        body.page-detail .modal.show,
body.page-detail .popup.show,
body.page-detail .dialog.show,
body.page-detail .overlay-modal.show,
body.page-detail .status-modal.show,
body.page-detail .status-popup.show,
body.page-detail [role="dialog"]:not([hidden]),
body.page-detail [aria-modal="true"]:not([hidden]){
            max-height: 88vh !important;
        }

        body.page-detail .modal,
body.page-detail .popup,
body.page-detail .dialog,
body.page-detail .status-modal,
body.page-detail .status-popup,
body.page-detail [role="dialog"],
body.page-detail [aria-modal="true"]{
            top: 50% !important;
            left: 50% !important;
            right: auto !important;
            bottom: auto !important;
            transform: translate(-50%, -50%) !important;
            margin: 0 !important;
            max-width: min(96vw, 900px) !important;
            max-height: 88vh !important;
            overflow: auto !important;
        }

        body.page-detail #printSetupModal{
            overflow-y: auto;
        }

        body.page-detail #printSetupModal .print-setup-box{
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            transform: none !important;
            width: min(860px, calc(100vw - 40px)) !important;
            max-width: min(860px, calc(100vw - 40px)) !important;
            max-height: min(88vh, calc(100dvh - 40px)) !important;
            margin: 0 !important;
            box-sizing: border-box;
        }

        body.page-detail #palletSheetModal{
            overflow-y: auto;
        }

        body.page-detail #palletSheetModal .pallet-sheet-box{
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            transform: none !important;
            /* Wider on desktop. The previous 980px clamp made the dialog
               feel cramped and forced single-column layouts even on big
               monitors. */
            width: min(1280px, calc(100vw - 40px)) !important;
            max-width: min(1280px, calc(100vw - 40px)) !important;
            /* Use BOTH `height` and `max-height`. With only `max-height`,
               a small content payload (e.g. one photo) made the box
               collapse to ~140px and the gallery shrank to 8px — the
               original "doesn't display anything / clips bottom" bug.
               `height` gives flex children a real size to grow into. */
            height: min(88vh, calc(100dvh - 40px)) !important;
            max-height: min(88vh, calc(100dvh - 40px)) !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column;
            overflow: hidden !important;
            box-sizing: border-box;
        }

        /* When only one pallet sheet is being displayed, fit it to the
           viewport instead of letting the box scroll. The previous version
           used `flex: 1 1 0` on the gallery without a real box height,
           which collapsed the photo to a sliver. */
        body.page-detail #palletSheetModal .pallet-sheet-box:has(.pallet-sheet-card:only-child) .pallet-sheet-gallery{
            flex: 1 1 0;
            min-height: 0;
            display: block;
            overflow: hidden;
        }
        body.page-detail #palletSheetModal .pallet-sheet-card:only-child{
            display: flex;
            flex-direction: row;
            gap: 16px;
            height: 100%;
            min-height: 0;
            align-items: stretch;
            box-sizing: border-box;
        }
        body.page-detail #palletSheetModal .pallet-sheet-card:only-child > a{
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            min-height: 0;
            margin: 0;
        }
        body.page-detail #palletSheetModal .pallet-sheet-card:only-child img{
            aspect-ratio: auto;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        body.page-detail #palletSheetModal .pallet-sheet-card:only-child .pallet-sheet-card-meta{
            flex: 0 0 320px;
            margin-top: 0;
            min-height: 0;
            max-height: 100%;
            overflow-y: auto;
            padding-right: 4px;
        }
        @media (max-width: 720px){
            body.page-detail #palletSheetModal .pallet-sheet-card:only-child{
                flex-direction: column;
            }
            body.page-detail #palletSheetModal .pallet-sheet-card:only-child > a{
                flex: 1 1 0;
            }
            body.page-detail #palletSheetModal .pallet-sheet-card:only-child .pallet-sheet-card-meta{
                flex: 0 0 auto;
                max-height: 45%;
            }
        }

        body.page-detail .claim-modal-form{
            display: grid;
            gap: 12px;
        }
        body.page-detail #claimLoadModal{
            position: fixed;
            inset: 0;
            z-index: 99990;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding: 18px;
            overflow-y: auto;
            background: var(--app-overlay-bg);
            box-sizing: border-box;
        }
        body.page-detail #claimLoadModal.show{
            display: flex;
        }
        body.page-detail #claimLoadModal .claim-modal-dialog{
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            transform: none !important;
            width: min(100%, 520px) !important;
            max-width: min(100%, 520px) !important;
            height: auto;
            max-height: min(88vh, calc(100dvh - 36px));
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: auto 0;
            background: var(--app-surface-strong);
            color: var(--app-text);
            border-radius: 14px;
            box-shadow: 0 18px 50px rgba(0,0,0,0.35);
            border: 1px solid rgba(0,0,0,0.08);
            box-sizing: border-box;
        }
        body.page-detail #claimLoadModal .claim-modal-header{
            position: sticky;
            top: 0;
            z-index: 2;
            padding: 16px 52px 12px 16px;
            border-bottom: 1px solid var(--app-border);
            background: var(--app-surface-strong);
        }
        body.page-detail #claimLoadModal .modal-close-btn{
            position: absolute;
            top: 10px;
            right: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 999px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            font-size: 1.4rem;
            line-height: 1;
            cursor: pointer;
            color: var(--app-muted);
        }
        body.page-detail #claimLoadModal .modal-close-btn:hover{
            color: var(--app-text);
        }
        body.page-detail #claimLoadModal .claim-modal-body{
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            padding: 16px 16px 12px 16px;
            background: var(--app-surface-strong);
        }
        body.page-detail #claimLoadModalTitle{
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
            color: var(--app-text);
            line-height: 1.25;
        }
        body.page-detail .claim-modal-form label{
            font-weight: 700;
            color: var(--app-text);
        }
        body.page-detail .claim-modal-form select,
body.page-detail .claim-modal-form textarea{
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid var(--app-border);
            border-radius: 6px;
            font-size: 0.95rem;
            background: var(--app-surface-strong);
            color: var(--app-text);
        }
        body.page-detail .claim-contact-summary{
            padding: 10px 12px;
            background: var(--app-surface-soft);
            border: 1px solid var(--app-border);
            border-radius: 6px;
            color: var(--app-muted);
            font-size: 0.92rem;
        }
        body.page-detail .claim-delivery-options{
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            align-items: center;
        }
        body.page-detail .claim-delivery-options label{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
        }
        body.page-detail .claim-modal-actions{
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        body.page-detail .claim-modal-status{
            display: none;
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 0.92rem;
        }
        body.page-detail .claim-modal-status.error{
            display: block;
            background: #f8d7da;
            color: #721c24;
        }
        body.page-detail .claim-modal-status.success{
            display: block;
            background: #d4edda;
            color: #155724;
        }
        body.page-detail #sharedPalletStatusOverlay{
            position: fixed;
            top: 0 !important;
            left: 0 !important;
            right: auto !important;
            bottom: auto !important;
            width: 100vw !important;
            width: 100dvw !important;
            min-width: 100vw !important;
            min-width: 100dvw !important;
            height: calc(var(--app-vh, 1vh) * 100) !important;
            min-height: calc(var(--app-vh, 1vh) * 100) !important;
            height: 100dvh !important;
            min-height: 100dvh !important;
            transform: none !important;
            margin: 0 !important;
            border-radius: 0 !important;
            align-items: flex-start;
            justify-content: center;
            padding: 18px;
            padding-bottom: calc(18px + env(safe-area-inset-bottom));
            box-sizing: border-box;
            background: var(--app-overlay-bg);
            overflow-y: auto;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-dialog{
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            transform: none !important;
            width: min(100%, 1040px) !important;
            max-width: min(100%, 1040px) !important;
            height: min(88vh, calc((var(--app-vh, 1vh) * 100) - 36px)) !important;
            max-height: min(88vh, calc((var(--app-vh, 1vh) * 100) - 36px)) !important;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin: auto 0;
            background: var(--app-surface-strong);
            color: var(--app-text);
            border-radius: 14px;
            border: 1px solid rgba(0,0,0,0.08);
            box-shadow: 0 18px 50px rgba(0,0,0,0.35);
            box-sizing: border-box;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-header{
            position: sticky;
            top: 0;
            z-index: 2;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 52px 12px 16px;
            border-bottom: 1px solid var(--app-border);
            background: var(--app-surface-strong);
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-header h3{
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
            color: var(--app-text);
            line-height: 1.25;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-header p{
            margin: 0.35rem 0 0;
            color: var(--app-muted);
            font-size: 0.92rem;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-body{
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            padding: 16px;
            background: var(--app-surface-strong);
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-list{
            display: grid;
            gap: 12px;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-card{
            border: 1px solid var(--app-border);
            border-radius: 14px;
            padding: 12px;
            background: var(--app-surface);
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-card-header{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 10px;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-card-header h4{
            margin: 0;
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--app-heading);
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-card-header p{
            margin: 0.35rem 0 0;
            color: var(--app-muted);
            font-size: 0.92rem;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-card-meta{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
            text-align: right;
            color: var(--app-muted);
            font-size: 0.9rem;
            font-weight: 600;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-card-note{
            margin-bottom: 10px;
            color: var(--app-text);
            font-size: 0.92rem;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-items-table{
            width: 100%;
            border-collapse: collapse;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-items-table th,
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-items-table td{
            padding: 8px 10px;
            border-bottom: 1px solid var(--app-border);
            text-align: left;
            vertical-align: top;
        }
        body.page-detail #sharedPalletStatusOverlay .shared-pallet-items-table th{
            font-size: 0.84rem;
            color: var(--app-muted);
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        body.page-detail .shared-pallet-count-button{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 0;
            padding: 0 0.25rem;
            margin: 0;
            border: 0;
            background: none;
            color: var(--app-link);
            font: inherit;
            font-weight: 700;
            line-height: 1;
            text-decoration: underline;
            cursor: pointer;
            box-shadow: none;
            width: auto;
            white-space: nowrap;
        }
        body.page-detail .shared-pallet-count-button:hover{
            color: var(--app-link-hover);
        }
        body.page-detail #sharedPalletStatusOverlay #sharedPalletStatusDialog{
            position: relative !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            transform: none !important;
            inset: auto !important;
            align-self: flex-start !important;
            margin: auto 0 !important;
        }
        @media (max-width: 1100px) {
            body.page-detail #sharedPalletStatusOverlay{
                padding: 6px;
                padding-bottom: calc(6px + env(safe-area-inset-bottom));
                align-items: flex-start;
            }
            body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-dialog{
                width: calc(100vw - 12px) !important;
                max-width: calc(100vw - 12px) !important;
                height: calc((var(--app-vh, 1vh) * 100) - 12px) !important;
                max-height: calc(100dvh - 12px) !important;
                border-radius: 12px;
            }
            body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-header{
                padding: 12px 46px 10px 12px;
            }
            body.page-detail #sharedPalletStatusOverlay .shared-pallet-status-body{
                padding: 12px;
            }
            body.page-detail #sharedPalletStatusOverlay .shared-pallet-items-table th,
            body.page-detail #sharedPalletStatusOverlay .shared-pallet-items-table td{
                padding: 7px 8px;
                font-size: 0.88rem;
            }
        }

        @media (max-width: 1100px) {
            body.page-detail #claimLoadModal{
                padding: 6px;
            }
            body.page-detail #claimLoadModal .claim-modal-dialog{
                width: calc(100vw - 12px) !important;
                max-width: calc(100vw - 12px) !important;
                max-height: calc(100dvh - 12px);
                border-radius: 12px;
            }
            body.page-detail #claimLoadModal .claim-modal-header{
                padding: 12px 46px 10px 12px;
            }
            body.page-detail #claimLoadModal .claim-modal-body{
                padding: 12px 12px 10px 12px;
            }
            body.page-detail #claimLoadModalTitle{
                font-size: 0.92rem;
            }
            body.page-detail .claim-modal-form{
                gap: 10px;
            }
            body.page-detail .claim-contact-summary,
body.page-detail .claim-modal-status,
body.page-detail .claim-modal-form select,
body.page-detail .claim-modal-form textarea{
                font-size: 0.86rem;
            }
            body.page-detail .claim-modal-actions button{
                min-width: 72px;
                padding: 7px 10px;
                font-size: 12px;
            }
            body.page-detail .modal,
body.page-detail .popup,
body.page-detail .dialog,
body.page-detail .status-modal,
body.page-detail .status-popup,
body.page-detail [role="dialog"],
body.page-detail [aria-modal="true"]{
                max-width: calc(100vw - 12px) !important;
                width: auto !important;
            }

            body.page-detail #printSetupModal{
                padding: 6px;
                align-items: flex-start;
            }

            body.page-detail #printSetupModal .print-setup-box{
                width: calc(100vw - 12px) !important;
                max-width: calc(100vw - 12px) !important;
                max-height: calc(100dvh - 12px) !important;
                margin: auto 0 !important;
                padding: 16px 14px;
            }

            body.page-detail #palletSheetModal{
                padding: 6px;
                align-items: flex-start;
            }

            body.page-detail #palletSheetModal .pallet-sheet-box{
                width: calc(100vw - 12px) !important;
                max-width: calc(100vw - 12px) !important;
                max-height: calc(100dvh - 12px) !important;
                margin: auto 0 !important;
                padding: 16px 14px;
            }
        }

/* ===== RECEIVING ===== */
body.page-receiving{
            --primary-bg: var(--app-bg); --secondary-bg: var(--app-surface-strong); --header-bg: #24485d;
            --primary-text: var(--app-text); --light-text: var(--app-muted); --header-text: #fff;
            --accent-blue: #2d85a7; --accent-blue-dark: #1f6782; --accent-green: var(--app-success);
            --accent-orange: var(--app-warning); --accent-red: var(--app-danger); --border-color: var(--app-border);
            --highlight-bg: var(--app-surface-info); --selected-bg: #5b8fac; --disabled-bg: var(--app-surface-muted);
            --admin-purple: #6f7ea6; --admin-purple-dark: #596789;
            --label-green: #3d8a5e; --label-red: #a45151; --label-yellow: #8f6e1f;
            --recent-item-bg: var(--app-surface-warning);
            --recent-item-hover-bg: #f4e7b6;
        }
        body.page-receiving .modal-body .form-group{
            margin-bottom: 15px;
        }
        body.page-receiving .modal-body .form-group label{
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        body.page-receiving .modal-body .form-group .form-control{
            width: 100%;
            padding: 8px;
            border: 1px solid var(--app-border-strong);
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 1rem;
            background: var(--app-input-bg);
            color: var(--app-input-text);
        }
        body.page-receiving #quickAddModal{
            z-index: 1001;
        }
        body.page-receiving{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: var(--primary-bg); color: var(--primary-text); font-size: 16px; }
        body.page-receiving .container{ max-width: var(--app-shell-max); margin: 0 auto; background-color: var(--secondary-bg); padding: var(--app-shell-padding); border-radius: var(--app-shell-radius); box-shadow: var(--app-shadow); }
        body.page-receiving h2{ color: var(--header-bg); text-align: center; margin-bottom: 20px; }
        body.page-receiving h3{ color: var(--header-bg); text-align: center; margin: 10px 0; }
        body.page-receiving a{ color: var(--accent-blue-dark); text-decoration: none; font-weight: bold; }
        body.page-receiving .controls{ margin-bottom: 25px; padding: var(--app-panel-padding); background-color: var(--app-surface-muted); border-radius: var(--app-panel-radius); display: flex; flex-direction: column; gap: 15px; }
        body.page-receiving .control-row{ display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; width: 100%; }
        body.page-receiving .control-group{ display: flex; gap: 10px; align-items: center; }
        body.page-receiving .control-group label{ font-weight: bold; font-size: 0.9em; }
        body.page-receiving .control-group input,
body.page-receiving .control-group select,
body.page-receiving .control-group button{ font-size: 1rem; padding: 8px; border: 1px solid var(--app-border-strong); border-radius: 4px; }
        body.page-receiving .control-group button{ padding: 10px 15px; color: white; border: none; border-radius: 4px; cursor: pointer; background-color: var(--accent-blue); transition: background-color 0.2s; }
        body.page-receiving .control-group button:hover{ background-color: var(--accent-blue-dark); }
        body.page-receiving .action-button{ background-color: var(--accent-green); }
        body.page-receiving .upload-button{ background-color: var(--accent-orange); }
        
        body.page-receiving .status-message{ margin: 15px 0; padding: 10px; border-radius: 4px; display: none; }
        body.page-receiving .loading-message{ background-color: var(--app-surface-info); color: var(--app-info-text);}
        body.page-receiving .error-message{ background-color: var(--app-error-bg); color: var(--app-error-text); }
        body.page-receiving .table-wrapper{ overflow-x: auto; border-radius: var(--app-panel-radius); border: 1px solid rgba(215, 224, 233, 0.95); box-shadow: var(--app-shadow-soft); background: var(--app-surface-strong); }
        body.page-receiving table{ width: 100%; border-collapse: collapse; margin-top: 20px; }
        body.page-receiving th,
body.page-receiving td{ border: 1px solid var(--border-color); padding: 10px; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9em; }
        body.page-receiving th{ background-color: var(--header-bg); color: var(--header-text); cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 10;}
        body.page-receiving td[title]{ cursor: help; }
        body.page-receiving .actions-cell button{ margin-right: 5px; padding: 5px 10px; color: white; border: none; border-radius: 3px; cursor: pointer; }
        body.page-receiving .btn-edit{ background-color: var(--accent-orange); }
        body.page-receiving .btn-delete{ background-color: var(--accent-red); }
        body.page-receiving .modal-overlay{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; }

        body.page-receiving .modal-header{
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-color);
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap: 12px;
            background: var(--header-bg);
        }
        body.page-receiving .modal-header h3{
            margin: 0;
            flex: 1 1 auto;
            min-width: 0;
            color: var(--header-text);
            font-size: 1rem;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.page-receiving .modal-header .close-btn{ font-size: 1.5rem; cursor: pointer; border: none; background: none; padding: 0 5px; color: var(--header-text); }
        body.page-receiving .modal-header .close-btn:hover{ color: #fff; }

        body.page-receiving .modal-footer{ padding: 10px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; background-color: var(--app-surface-muted); }
        body.page-receiving .modal-footer button{ padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
        body.page-receiving .modal-footer button:disabled{ background-color: var(--disabled-bg); color: var(--light-text); cursor: not-allowed; }
        body.page-receiving #summaryModal .modal-content{ max-width: 800px; height: auto; max-height: 80vh; }
        body.page-receiving #summaryModalBody{ padding: 20px; white-space: pre-wrap; font-family: monospace; overflow-y: auto; line-height: 1.5; }
        body.page-receiving #summaryModalBody b{ font-weight: bold; }
        body.page-receiving #summaryDownloadLink{ display: none; margin-top: 15px; font-weight: bold; }
        body.page-receiving .summary-result{ display: flex; flex-direction: column; gap: 10px; }
        body.page-receiving .summary-result.error-message{ margin: 0; }
        body.page-receiving .summary-details{ margin-top: 2px; }
        body.page-receiving .summary-details summary{
            cursor: pointer;
            font-weight: 700;
            color: var(--app-primary-strong);
            text-transform: lowercase;
            outline: none;
        }
        body.page-receiving .summary-details summary::-webkit-details-marker{ display: none; }
        body.page-receiving .summary-details summary::before{ content: "› "; display: inline-block; transition: transform 0.15s ease; }
        body.page-receiving .summary-details[open] summary::before{ transform: rotate(90deg); }
        body.page-receiving .summary-details pre{
            margin: 10px 0 0;
            padding: 12px;
            border-radius: 6px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-muted);
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 30vh;
            overflow: auto;
        }

body.page-receiving #grnWizardModal .modal-content{
    background: var(--secondary-bg);
    border-radius: 8px;
    width: 95%; /* Increased width */
    max-width: 1400px; /* Increased max-width */
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

body.page-receiving .wizard-screen{
    display: none;
    padding: 15px; /* Symmetrical padding */
    overflow-y: auto;
    flex-grow: 1;
    gap: 15px;
}

/* --- FIX: Creates the Label-Input-Button layout --- */
body.page-receiving .panel-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

body.page-receiving .panel-header label{
    flex-shrink: 0; /* Prevents the label from shrinking */
    font-weight: bold;
}

body.page-receiving .panel-header .header-search-input{
    flex-grow: 1; /* Allows the search input to fill available space */
    width: 100%; /* Fallback for older browsers */
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

body.page-receiving .panel-header .admin-button{
    flex-shrink: 0; /* Prevents the button from shrinking */
}

/* final helper layout corrections */
body.page-dispatch .table-shell,
body.page-detail {
    overflow-x: visible;
}

body.page-dispatch .table-shell {
    overflow: hidden !important;
}

body.page-dispatch .dispatch-products-table-shell {
    overflow: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}

body.page-dispatch #dataTable {
    table-layout: auto !important;
}

body.page-dispatch .dispatch-progress-cell {
    min-width: 142px;
}

body.page-dispatch .dispatch-progress-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 132px;
}

body.page-dispatch .dispatch-progress-bar {
    position: relative;
    flex: 1 1 auto;
    min-width: 84px;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(21, 108, 138, 0.12);
    border: 1px solid rgba(21, 108, 138, 0.18);
}

body.page-dispatch .dispatch-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1aa36f 0%, #1e8a5c 100%);
}

body.page-dispatch .dispatch-progress-text {
    flex: 0 0 auto;
    min-width: 38px;
    text-align: right;
    font-weight: 700;
    color: var(--app-heading);
}

html[data-app-theme="dark"] body.page-dispatch .dispatch-progress-bar {
    background: rgba(59, 148, 181, 0.16);
    border-color: rgba(59, 148, 181, 0.24);
}

html[data-app-theme="dark"] body.page-dispatch .dispatch-progress-text {
    color: var(--app-text);
}

body.page-dispatch #dataTable th:first-child,
body.page-dispatch #dataTable td:first-child {
    width: 1%;
    white-space: nowrap;
}

body.page-dispatch #dataTable .app-table-heading-with-help,
body.page-detail #loadsTable .app-table-heading-with-help {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.45rem;
}

body.page-dispatch .dispatch-upload-row button,
body.page-dispatch .dispatch-upload-row .app-help-badge {
    margin: 0 !important;
}

body.page-forklift .pallet-entry-main-row {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 96px) minmax(72px, 84px) minmax(0, 1fr) !important;
}

body.page-forklift .pallet-entry-help-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.15rem;
}

body.page-forklift .pallet-entry-help-row .app-help-badge {
    justify-self: end;
}
body.page-receiving .list-panel-wide{
    flex: 2;
}

        body.page-receiving .wizard-screen.active{ display: flex; flex-direction: column; }
body.page-receiving .selection-container{
    display: flex;
    gap: 20px;
    /* This is the critical change: Force the container to span the full width */
    width: 100%;
    flex-grow: 1;
    min-height: 0;
    align-items: stretch;
}
        /* --- FINAL STYLE FIX --- */
        body.page-receiving .admin-button{
            background-color: var(--accent-blue);
            border: none;
        }
        body.page-receiving .admin-button:hover{
            background-color: var(--accent-blue-dark);
        }

        body.page-receiving .modal-body{ flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; background-color: var(--secondary-bg); }
        
        /* Makes wizard text dark and visible on the white background */
body.page-receiving .wizard-screen h4,
body.page-receiving .list-panel{
    /* Now that the parent has a full width, flex: 1 works correctly,
       telling each panel to grow and take up an equal share of that width. */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
        body.page-receiving .highlight-controls,
body.page-receiving #detailsFormContainer,
body.page-receiving #historicalDefaultsPanel h5{
            color: var(--primary-text);
        }

        /* Alternating row background colors */
        body.page-receiving .list-item-a{ background-color: var(--secondary-bg); } /* White */
        body.page-receiving .list-item-b{ background-color: var(--primary-bg); }   /* Light Grey */
        
        /* Restores the light yellow background for historical items */
        body.page-receiving .list-item.recent-item{
            background-color: var(--recent-item-bg); /* Light Yellow */
        }
        body.page-receiving .list-item.recent-item:hover{
            background-color: var(--recent-item-hover-bg); /* Darker Yellow Hover */
        }
        body.page-receiving .list-item.most-recent-item{
            background-color: var(--recent-item-bg);
            border-left: 4px solid var(--accent-blue);
        }

        /* Standard hover for non-historical items */
        body.page-receiving .list-item:hover{ background-color: var(--highlight-bg); }

        /* Ensures the 'selected' style (blue) overrides all other background colors */
        body.page-receiving .list-item.selected,
body.page-receiving .list-item.selected:hover{
            background-color: var(--selected-bg) !important;
            font-weight: bold;
            color: var(--header-text);
        }
        body.page-receiving .list-item.selected > small{
             color: var(--header-text);
        }
        
        /* --- Styles for Step 3 Details Form --- */
body.page-receiving #historicalDefaultsPanel{
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    max-height: 165px;
    overflow: hidden;
    background-color: var(--app-surface-muted);
    padding: 10px;
    border-radius: 5px;
}
        body.page-receiving #detailsFormContainer{ flex-grow: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }

        body.page-receiving .highlight-controls input{
            width: 60px;
            padding: 5px 8px;
            font-size: 0.9em;
            text-align: center;
        }

        body.page-receiving .list-view{
            flex-grow: 1;
            min-height: 320px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: var(--secondary-bg);
            color: var(--primary-text);
            padding: 2px 0;
        }
        body.page-receiving .list-item{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            background-color: var(--primary-bg);
            color: var(--primary-text);
        }
        body.page-receiving .list-item:hover{ background-color: var(--highlight-bg); }
        body.page-receiving .list-item.selected{ background-color: var(--selected-bg); font-weight: bold; }
        body.page-receiving .list-item > span{ flex-basis: 70%; color: inherit; }
        body.page-receiving .list-item > small{ flex-basis: 30%; text-align: right; color: var(--light-text); }
        body.page-receiving .list-item-details-wrapper{ flex-basis: 100%; margin-top: 5px; color: var(--light-text); font-size: 0.8em; }
        body.page-receiving .list-item-details{ display: flex; flex-wrap: wrap; gap: 4px 10px; }
        body.page-receiving .list-item-details strong{ color: var(--app-muted); }
        body.page-receiving .page-live-clock{
            display: flex;
            justify-content: flex-end;
            color: var(--app-muted);
            font-size: 0.95rem;
            font-weight: 600;
            text-align: right;
        }
        body.page-receiving .page-topbar{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        body.page-receiving #historicalDefaultsPanel .list-view{
            min-height: 0;
        }
        

        body.page-receiving .details-form-scroll-wrapper{ overflow-y: auto; padding-right: 10px; flex-grow: 1; }
        body.page-receiving .form-controls-row{
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px 12px;
        }
        body.page-receiving .form-title{ font-size: 1.2rem; font-weight: bold; }
        body.page-receiving .form-reload-button{ padding: 5px 10px; font-size: 0.8rem; background-color: var(--accent-blue); color: white; border: none; border-radius: 4px; cursor: pointer; }
        body.page-receiving .form-reload-button:hover{ background-color: var(--accent-blue-dark); }
        body.page-receiving #grnDetailsForm{
            display: grid;
            grid-template-columns: 0.35fr 0.15fr 0.5fr;
            gap: 8px 12px;
            align-items: center;
            min-width: 0;
        }
        body.page-receiving .form-group-display{ padding: 5px; font-size: 1rem; min-height: 35px; display:flex; flex-direction:column; justify-content:center; }
        body.page-receiving .form-group-display.large{ font-size: 1.1rem; }
        body.page-receiving .form-group-display.green{ color: var(--label-green); }
        body.page-receiving .form-group-display.red{ color: var(--label-red); }
        body.page-receiving .form-group-display.yellow{ color: var(--label-yellow); }
        body.page-receiving .form-group-label{ text-align: right; font-weight: bold; padding-right: 5px; }
        body.page-receiving .form-group-input-wrapper{
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            row-gap: 8px;
            width: 100%;
        }
        body.page-receiving .form-group-input-wrapper label{ font-size: 0.9em; flex-shrink: 0; white-space: nowrap; }
        body.page-receiving .form-group-input-wrapper input,
body.page-receiving .form-group-input-wrapper select{
            font-size: 1rem; padding: 6px; border: 1px solid var(--app-border-strong); border-radius: 4px;
            background-color: var(--app-input-bg); color: var(--app-input-text);
        }
        body.page-receiving .form-group-input-wrapper input:disabled{ background-color: var(--app-surface-muted); color: var(--app-muted); cursor: not-allowed; }
        body.page-receiving .form-group-input-wrapper .input-xs{ width: 60px; }
        body.page-receiving .form-group-input-wrapper .input-s{ width: 80px; }
        body.page-receiving .form-group-input-wrapper .input-m{ width: 120px; }
        body.page-receiving .form-group-input-wrapper .spacer{ flex-grow: 1; }
        body.page-receiving .spacer-fixed-120{ flex-basis: 120px; }
        body.page-receiving .checkbox-group{ display: flex; align-items: center; gap: 5px; }
        body.page-receiving .checkbox-group label{ font-weight: normal; }
        body.page-receiving .comments-label{ align-self: flex-start; padding-top: 5px; }
        body.page-receiving textarea#comments_input{ width: 100%; height: 60px; padding: 8px; border: 1px solid var(--app-border-strong); border-radius: 4px; box-sizing: border-box; background-color: var(--app-input-bg); color: var(--app-input-text);}


/* ===== FORKLIFT ===== */
body.page-forklift{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 8px; background: transparent; color: var(--app-text); }
        body.page-forklift .container{ max-width: 980px; margin: 6px auto; padding: 12px; }
        body.page-forklift:not(.app-is-mobile) .container{ max-width: 490px; }
        body.page-forklift h2,
body.page-forklift h3{ color: var(--app-heading); border-bottom: 2px solid var(--app-border); padding-bottom: 10px; }
body.page-forklift .load-selection{ padding-bottom: 15px; border-bottom: 1px solid var(--app-border); margin-bottom: 15px;}
        body.page-forklift .direct-load-entry{ padding: 16px; background: var(--app-surface-info); border: 1px solid var(--app-info-border); border-radius: 8px; margin-bottom: 18px; }
        body.page-forklift .direct-load-entry h3{ margin-top: 0; }
        body.page-forklift .direct-load-summary{ display: grid; gap: 8px; margin-bottom: 12px; }
        body.page-forklift .direct-load-message{ padding: 12px; border-radius: 6px; background: var(--app-surface-strong); border: 1px solid var(--app-border); color: var(--app-text); margin-bottom: 12px; white-space: pre-wrap; }
        body.page-forklift .load-selection-controls{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
        body.page-forklift .load-selection select,
body.page-forklift .load-selection button{ padding: 10px; font-size: 1em; border-radius: 4px; border: 1px solid var(--app-border-strong); box-sizing: border-box; }
        body.page-forklift .forklift-load-picker{
            position: relative;
            flex: 1 1 320px;
            min-width: 220px;
        }
        body.page-forklift .forklift-load-picker-native{
            position: absolute;
            width: 1px;
            height: 1px;
            margin: 0;
            padding: 0;
            border: 0;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            clip-path: inset(50%);
            white-space: nowrap;
        }
        body.page-forklift .forklift-load-picker-trigger{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            min-height: 48px;
            padding: 10px 14px;
            border: 1px solid var(--app-border-strong);
            border-radius: 10px;
            background: linear-gradient(180deg, var(--app-surface-strong) 0%, var(--app-surface-soft) 100%);
            color: var(--app-text);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px rgba(15, 23, 42, 0.08);
            cursor: pointer;
            text-align: left;
        }
        body.page-forklift .forklift-load-picker-trigger:hover{
            filter: brightness(1.01);
        }
        body.page-forklift .forklift-load-picker-trigger:focus-visible{
            outline: 3px solid rgba(21, 108, 138, 0.28);
            outline-offset: 2px;
        }
        body.page-forklift .forklift-load-picker-label{
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
        }
        body.page-forklift .forklift-load-picker-caret{
            flex: 0 0 auto;
            font-size: 0.85rem;
            opacity: 0.72;
        }
        body.page-forklift .forklift-load-picker-menu{
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            z-index: 40;
            max-height: 320px;
            overflow-y: auto;
            padding: 6px;
            border: 1px solid var(--app-border-strong);
            border-radius: 12px;
            background: var(--app-surface-strong);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
        }
        body.page-forklift .forklift-load-picker-option{
            display: block;
            width: 100%;
            padding: 10px 12px;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: var(--app-text);
            font: inherit;
            text-align: left;
            cursor: pointer;
        }
        body.page-forklift .forklift-load-picker-option:hover,
        body.page-forklift .forklift-load-picker-option:focus-visible{
            background: var(--app-surface-soft);
            outline: none;
        }
        body.page-forklift .forklift-load-picker-option[aria-selected="true"]{
            background: rgba(21, 108, 138, 0.14);
            font-weight: 700;
        }
        body.page-forklift .forklift-load-picker-option-mine{
            background: var(--app-success-bg);
            color: var(--app-success-text);
            border-left: 3px solid var(--app-success);
        }
        body.page-forklift .forklift-load-picker-option-mine:hover,
        body.page-forklift .forklift-load-picker-option-mine:focus-visible{
            background: var(--app-success-bg);
            filter: brightness(0.96);
        }
        body.page-forklift .forklift-load-picker-option-other{
            background: var(--app-danger-bg);
            color: var(--app-danger-text);
            border-left: 3px solid var(--app-danger);
        }
        body.page-forklift .forklift-load-picker-option-other:hover,
        body.page-forklift .forklift-load-picker-option-other:focus-visible{
            background: var(--app-danger-bg);
            filter: brightness(0.96);
        }
        body.page-forklift .forklift-load-picker-option-claimer{
            display: block;
            margin-top: 2px;
            font-size: 0.78rem;
            font-style: italic;
            opacity: 0.85;
        }
        body.page-forklift .forklift-load-picker-option-label{
            display: block;
        }
        body.page-forklift .forklift-load-picker-empty{
            padding: 10px 12px;
            color: var(--app-muted);
            font-style: italic;
        }
        body.page-forklift .load-selection .app-help-badge{
            border-radius: 999px;
            flex: 0 0 auto;
            align-self: center;
            width: auto;
            min-width: 34px;
            min-height: 28px;
            padding: 0 0.36rem;
            background: linear-gradient(180deg, #fff2a6 0%, #ffd74f 100%);
            border-color: #d1a311;
            color: #4f3a00 !important;
        }
        body.page-forklift .load-selection-buttons{ display: flex; flex: 0 1 auto; align-items: center; gap: 8px; }
        body.page-forklift .load-selection-buttons button{ display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; white-space: nowrap; }
        body.page-forklift .load-selection button:not(.app-help-badge):not(.forklift-load-picker-trigger):not(.forklift-load-picker-option){ background-color: #17a2b8; color:white; border-color: #17a2b8; cursor: pointer; }
        body.page-forklift .load-selection-controls > .app-help-badge{
            align-self: center;
            margin-top: -0.35rem;
        }
        body.page-forklift #loadInfo{ margin-top: 20px; padding: 15px; background-color: var(--app-surface-soft); border: 1px solid var(--app-border); border-radius: 5px; }
        body.page-forklift #loadInfo p{ margin: 8px 0; font-size: 1.1em; }
        body.page-forklift .pallet-entry-area{ display: flex; flex-direction: column; align-items: stretch; background: var(--app-surface-muted); padding: 15px; border-radius: 5px; margin-top: 25px; gap: 10px; }
        body.page-forklift .pallet-entry-main-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, 96px) minmax(72px, 84px) minmax(0, 1fr); align-items: center; gap: 8px; }
        body.page-forklift .pallet-entry-area input{
            padding: 10px;
            font-size: 1em;
            font-weight: 600;
            border: 1px solid var(--app-border-strong);
            border-radius: 10px;
            text-align: center;
            width: 100%;
            min-width: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, var(--app-input-bg) 100%);
            color: var(--app-input-text);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(15, 23, 42, 0.08);
        }
        body.page-forklift .pallet-entry-area input.app-keyboard-input-active,
body.page-forklift .pallet-entry-area input:focus{
            border-color: #156c8a;
            background: linear-gradient(180deg, rgba(195, 227, 239, 0.36) 0%, rgba(169, 213, 229, 0.2) 100%);
            box-shadow: 0 0 0 3px rgba(21, 108, 138, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.36);
        }
        body.page-forklift #palletIdInput{ max-width: 96px; }
        body.page-forklift #crateCountInput{ max-width: 84px; }
        body.page-forklift .add-pallet-btn,
body.page-forklift .update-pallet-btn{ padding: 10px 15px; font-size: 1em; color: white; border: none; border-radius: 4px; cursor: pointer; flex-shrink: 0; }
        body.page-forklift .pallet-entry-main-row .add-pallet-btn{ width: 100%; min-width: 0; white-space: nowrap; padding-inline: 12px; }
        body.page-forklift .add-pallet-btn{ background-color: #28a745; }
        body.page-forklift .update-pallet-btn{ background-color: #ffc107; color: #212529; display: none; align-self: center; min-width: min(280px, 100%); }
        body.page-forklift .cancel-edit-btn{
            display: none;
            align-self: center;
            min-width: min(280px, 100%);
            padding: 10px 15px;
            font-size: 1em;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background-color: #6c757d;
        }
        body.page-forklift .pallet-edit-mode-active #addLeftBtn,
        body.page-forklift .pallet-edit-mode-active #addRightBtn{
            opacity: 0.55;
            cursor: not-allowed;
            pointer-events: none;
        }
        body.page-forklift .pallet-edit-input-highlight{
            background-color: #fff6bf !important;
            border-color: #d4a017 !important;
            box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.22) !important;
        }
        html[data-app-theme="dark"] body.page-forklift .pallet-edit-input-highlight{
            background-color: #4b3a12 !important;
            border-color: #e0b03f !important;
            box-shadow: 0 0 0 2px rgba(224, 176, 63, 0.24) !important;
            color: #f4e3ab !important;
        }
        body.page-forklift #palletEditFloatingBadge{
            position: fixed;
            z-index: 2147483647;
            display: none;
            align-items: center;
            justify-content: center;
            min-height: 22px;
            padding: 4px 8px;
            border: 1px solid var(--app-border);
            border-radius: 5px;
            background: var(--app-surface-soft);
            color: var(--app-text);
            font-size: 0.7rem;
            font-weight: 700;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
        }
        html[data-app-theme="dark"] body.page-forklift #palletEditFloatingBadge{
            background: #16222c;
            border-color: #314251;
            color: #d8e3ec;
            box-shadow: 0 10px 24px rgba(0,0,0,0.34);
        }
        body.page-forklift .separator-area{ position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 15px auto 0; width: fit-content; max-width: 100%; }
        body.page-forklift .add-separator-btn{ padding: 8px 20px; font-size: 0.9em; color: #fff; background-color: #6c757d; border: none; border-radius: 4px; cursor: pointer; }
        body.page-forklift.app-keyboard-mode-custom.app-keypad-layout-forklift #forkliftControls{
            position: relative;
            min-height: 1px;
            margin-top: 0;
        }
        body.page-forklift.app-keyboard-mode-custom.app-keypad-layout-forklift #forkliftControls > #voice-command-area,
        body.page-forklift.app-keyboard-mode-custom.app-keypad-layout-forklift #forkliftControls > .pallet-entry-area,
        body.page-forklift.app-keyboard-mode-custom.app-keypad-layout-forklift #forkliftControls > .separator-area{
            position: absolute !important;
            top: 0 !important;
            left: -10000px !important;
            width: 1px !important;
            height: 1px !important;
            min-width: 1px !important;
            min-height: 1px !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        body.page-forklift .complete-load-area{ text-align: center; margin-top: 20px; padding: 15px; background-color: var(--app-surface-warning); border: 1px solid var(--app-warning-border); border-radius: 5px; }
        body.page-forklift #completeLoadBtn{ background-color: #e74c3c; color: white; padding: 12px 25px; font-size: 1.1em; font-weight: bold; width: 100%; border: none; border-radius: 4px; cursor: pointer; }
        body.page-forklift #completeLoadBtn:hover{ background-color: #c0392b; }
        body.page-forklift #truck-layout-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            border: 2px solid var(--app-border-strong);
            padding: 10px;
            background: var(--app-surface-strong);
            min-height: 200px;
            margin-top: 10px;
            overflow: hidden;
            transition: height 360ms cubic-bezier(0.22, 1, 0.36, 1);
            will-change: height;
            overflow-anchor: none;
        }
        body.page-forklift .truck-layout-empty{ grid-column: 1 / -1; }
        body.page-forklift .truck-item{ padding: 12px 8px; border-radius: 5px; text-align: center; position: relative; font-size: 1.05em; min-height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
        body.page-forklift .truck-item.pallet{ background-color: var(--app-surface-info); border: 1px solid var(--app-info-border); }
        body.page-forklift .truck-item.shortage-pallet{ background-color: var(--app-surface-warning); border-color: var(--app-warning-border); }
        body.page-forklift .truck-item.shortage-pallet small{ color: var(--app-warning-text); font-weight: bold; }
        body.page-forklift .truck-item.separator{ grid-column: 1 / -1; background-color: var(--app-forklift-separator-bg); color: var(--app-forklift-separator-text); font-weight: bold; padding: 8px 0; font-size: 0.9em; letter-spacing: 2px; }
        body.page-forklift .truck-item.pallet-return-flash{ animation: forkliftPalletReturnFlash 3.2s ease-out; }
        body.page-forklift .truck-item.truck-item-delete-animate{ animation: forkliftTruckItemDelete 520ms ease-in forwards; overflow: hidden; transform-origin: center center; }
        @keyframes forkliftTruckItemDelete{
            0%{ opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.0); filter: saturate(1); }
            30%{ opacity: 1; transform: scale(1.03); box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.28); filter: saturate(1.1); }
            100%{ opacity: 0; transform: scale(0.86); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.0); filter: saturate(0.8); }
        }
        @keyframes forkliftPalletReturnFlash{
            0%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
            8%{ box-shadow: 0 0 0 4px rgba(224, 176, 63, 0.38); transform: scale(1.012); }
            16%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
            34%{ box-shadow: 0 0 0 4px rgba(224, 176, 63, 0.38); transform: scale(1.012); }
            42%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
            60%{ box-shadow: 0 0 0 4px rgba(224, 176, 63, 0.38); transform: scale(1.012); }
            68%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
            100%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
        }
        html[data-app-theme="dark"] body.page-forklift .truck-item.pallet-return-flash{ animation: forkliftPalletReturnFlashDark 3.2s ease-out; }
        html[data-app-theme="dark"] body.page-forklift .truck-item.truck-item-delete-animate{ animation: forkliftTruckItemDeleteDark 520ms ease-in forwards; overflow: hidden; transform-origin: center center; }
        @keyframes forkliftTruckItemDeleteDark{
            0%{ opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.0); filter: saturate(1); }
            30%{ opacity: 1; transform: scale(1.03); box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.38); filter: saturate(1.1); }
            100%{ opacity: 0; transform: scale(0.86); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.0); filter: saturate(0.8); }
        }
        @keyframes forkliftPalletReturnFlashDark{
            0%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
            8%{ box-shadow: 0 0 0 4px rgba(224, 176, 63, 0.5); transform: scale(1.012); }
            16%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
            34%{ box-shadow: 0 0 0 4px rgba(224, 176, 63, 0.5); transform: scale(1.012); }
            42%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
            60%{ box-shadow: 0 0 0 4px rgba(224, 176, 63, 0.5); transform: scale(1.012); }
            68%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
            100%{ box-shadow: 0 0 0 0 rgba(224, 176, 63, 0.0); transform: scale(1); }
        }
        body.app-page.app-keypad-visible{ padding-bottom: calc(18px + 244px + env(safe-area-inset-bottom)); }
        body.app-page.app-keypad-layout-compact.app-keypad-visible{ padding-bottom: calc(18px + 196px + env(safe-area-inset-bottom)); }
        body.app-page.app-keypad-layout-forklift.app-keypad-visible{ padding-bottom: calc(18px + 286px + env(safe-area-inset-bottom)); }
        body.app-page .app-keypad-launcher{
            position: fixed;
            left: 50%;
            bottom: calc(6px + env(safe-area-inset-bottom));
            z-index: 1184;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            min-width: 108px;
            padding: 6px 14px 8px;
            border-radius: 16px 16px 8px 8px;
            border: 1px solid rgba(159, 193, 214, 0.22);
            background: linear-gradient(180deg, rgba(12, 26, 36, 0.92) 0%, rgba(15, 31, 43, 0.97) 100%);
            box-shadow: 0 -6px 22px rgba(4, 12, 20, 0.28);
            color: #dfeef7;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            transform: translate(-50%, calc(100% + 18px));
            opacity: 0;
            pointer-events: none;
            transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
            touch-action: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        body.app-page .app-keypad-launcher.show{
            transform: translate(-50%, 0);
            opacity: 1;
            pointer-events: auto;
        }
        body.app-page .app-keypad-launcher-grip,
        body.app-page .app-keypad-swipe-grip{
            width: 44px;
            height: 5px;
            border-radius: 999px;
            background: rgba(223, 238, 247, 0.58);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        body.app-page .app-keypad-launcher-label{
            line-height: 1;
            text-transform: uppercase;
        }
        body.app-page .app-numeric-keypad{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1185;
            padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
            background: linear-gradient(180deg, rgba(12, 26, 36, 0.96) 0%, rgba(15, 31, 43, 0.99) 100%);
            border-top: 1px solid rgba(159, 193, 214, 0.22);
            box-shadow: 0 -18px 32px rgba(4, 12, 20, 0.36);
            transform: translateY(calc(105% + var(--app-keypad-drag-offset, 0px)));
            opacity: 0;
            pointer-events: none;
            transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
            backdrop-filter: blur(12px);
        }
        html[data-app-theme="dark"] body.app-page .app-numeric-keypad{
            background: linear-gradient(180deg, rgba(9, 17, 25, 0.98) 0%, rgba(14, 22, 31, 0.99) 100%);
            border-top-color: rgba(104, 139, 159, 0.28);
        }
        body.app-page .app-numeric-keypad.show{
            transform: translateY(var(--app-keypad-drag-offset, 0px));
            opacity: 1;
            pointer-events: auto;
        }
        body.app-page .app-numeric-keypad.app-keypad-dragging{
            transition: none;
        }
        body.app-page .app-numeric-keypad.app-keypad-arming button{
            pointer-events: none;
        }
        body.app-page .app-keypad-swipe-handle{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 0 8px;
            touch-action: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        body.app-page .app-numeric-keypad-grid{
            display: grid;
            gap: 4px;
            max-width: 520px;
            margin: 0 auto;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        body.app-page .app-keypad-forklift-top-row{
            display: grid;
            grid-template-columns: minmax(82px, 0.95fr) minmax(56px, 0.75fr) minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(56px, 0.75fr);
            align-items: center;
            gap: 6px;
            max-width: 720px;
            margin: 0 auto 8px;
        }
        body.app-page .app-keypad-forklift-entry-cluster{
            display: contents;
        }
        body.app-page .app-keypad-forklift-edit-row{
            display: none;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            max-width: 720px;
            margin: 0 auto 8px;
        }
        body.app-page .app-forklift-keypad-edit-mode .app-keypad-forklift-edit-row{
            display: grid;
        }
        body.app-page .app-keypad-input-host,
        body.app-page .app-keypad-forklift-action,
        body.app-page .app-keypad-forklift-edit-action{
            min-width: 0;
        }
        body.app-page .app-numeric-keypad button{
            min-height: 38px;
            border-radius: 12px;
            border: 1px solid rgba(160, 190, 210, 0.22);
            background: linear-gradient(180deg, #244d66 0%, #173d52 100%);
            color: #e6f4fb;
            font-weight: 700;
            font-size: 0.92rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            transition: transform 110ms ease, filter 110ms ease, box-shadow 110ms ease;
        }
        body.app-page .app-keypad-input-host{
            display: flex;
            align-items: stretch;
            min-width: 0;
        }
        /* Voice PTT row sits BELOW the digit grid with extra top
           spacing so it's clearly separated from the keypad keys —
           the buyer should never confuse it with a number entry.
           Lives at the bottom of the keypad for thumb reach.
           Hidden by default; the page calls
           window.setVoicePttButtonVisible(true) when its session
           confirms voice is enabled. */
        body.app-page .app-keypad-voice-row{
            max-width: 520px;
            margin: 14px auto 0;
            display: flex;
            justify-content: stretch;
        }
        body.app-page .app-keypad-voice-row[hidden]{
            display: none;
        }
        body.app-page .app-keypad-voice-button{
            flex: 1 1 auto;
            min-height: 52px;
            border-radius: 14px;
            border: 1px solid rgba(255, 100, 100, 0.45);
            background: linear-gradient(180deg, #5a2d3d 0%, #3d1d29 100%);
            color: #ffeaea;
            font-weight: 700;
            font-size: 1.0rem;
            letter-spacing: 0.02em;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(80, 18, 32, 0.32);
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: none;
            transition: transform 110ms ease, filter 110ms ease, box-shadow 110ms ease;
        }
        body.app-page .app-keypad-voice-button.app-keypad-button-pressed{
            transform: translateY(1px);
            filter: brightness(1.15);
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
        }
        body.app-page .app-keypad-voice-button[disabled]{
            opacity: 0.55;
            cursor: not-allowed;
        }
        /* Voice PTT pill mounted inside the location-tabs drawer.
           - Sits directly below the last location tab (NOT pinned to
             the bottom).
           - Top margin = tab-spacing + 30%·|tab-spacing| so the gap
             from the last tab is always 30% more than the gap between
             two tabs (works for positive or negative tab-spacing).
           - The button is at a fixed position within the drawer; the
             column drag (long-press on a tab) still translates this
             button along with the rest of the aside.
           - Width matches a tab; tap target is generous. */
        /* Universal mic PTT button on the purchases location drawer.
           ─────────────────────────────────────────────────────────────
           DESIGN (do not "improve" without re-reading the spec):
             • TRAPEZOIDAL — narrow inner (left) edge poking into the
               content area, WIDE outer (right) edge flush with the
               viewport's right edge. Built with clip-path polygon so
               the shape doesn't depend on a skew transform (which
               would mess up the SVG icon centring).
             • Mic icon ONLY (no caption, no HOLD label).
             • Red default, BRIGHT red while held (.is-holding). Held
               state is added on local pointerdown AND mirrored when
               external sources (hardware volume-down PTT, keypad mic)
               dispatch app:voice-ptt-press — see _renderVoicePttDrawerButton
               in static/purchases.html for the JS side.
             • Universal — every user role gets this button. Non-buyers
               see no location tabs, but the mic still appears.
             • Drawer-anchored — placed inside .purchases-tabs so the
               column drag (long-press on a location tab) translates
               this button along with the tabs. The button itself is
               NOT draggable (its pointerdown stopPropagation()s).
             • Dark theme — the red palette is identical in both
               themes; the icon is white. No theme-specific overrides
               are required (no light/dark glow tweaks below). */
        /* Global drawer used on every non-purchases module (dashboard,
           dispatch, pod, settings, etc.). Same right-edge anchoring
           and width vars as .purchases-tabs so the mic ends up in the
           same screen position regardless of which module is open. The
           purchases page has its own .purchases-tabs and skips this
           drawer (system-voice.js detects and bails). */
        body .app-global-drawer{
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: var(--tab-width, 48px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: stretch;
            padding: 14px 0;
            pointer-events: none;
            z-index: 2147483647;
        }
        body .app-global-drawer > *{
            pointer-events: auto;
        }

        body.page-purchases .purchases-tabs .purchases-voice-ptt-btn,
        body .app-global-drawer .purchases-voice-ptt-btn{
            /* TRIPLE-GAP from the last location tab — was tab-spacing
               + 30%·|tab-spacing| (which produced a near-overlap with
               default --tab-spacing=-16px). Now tab-spacing + 3.0×
               |tab-spacing|, i.e. ~32px clear gap with the default,
               scaling proportionally as the buyer adjusts --tab-spacing
               in the adjust modal. On the global drawer there are no
               location tabs above the mic, so the formula collapses to
               a clean ~32px top inset. */
            margin-top: calc(var(--tab-spacing, -16px) + abs(var(--tab-spacing, -16px)) * 3);
            margin-left: 0;
            margin-right: 0;
            padding: 10px 6px 10px 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Match the location tab exactly — same height, same width,
               same border-radius profile, same skewY parallelogram, so
               the mic reads as a red sibling of the tabs above it. The
               previous clip-path approach razor-cut the outer edge and
               looked like the button had been guillotined; switching to
               border-radius + skewY (the same technique location tabs
               use) gives all four corners a true rounded curve, with
               the wider rounding on the inner (left) side and a softer
               rounding on the outer (right) side flush with the screen. */
            min-height: var(--tab-height, 64px);
            width: 100%;
            border: 0;
            box-sizing: border-box;
            /* Same corner shape as .purchases-tab — 22px on the inner
               (left) side, 6px on the outer (right) side. ALL corners
               rounded; nothing razor-cut. */
            border-radius: 22px 6px 6px 22px;
            /* Same skewY parallelogram as the location tabs, so the
               mic stacks visually with them as a continuous rolodex
               rather than reading as a separate widget. */
            transform: skewY(-7deg);
            background: linear-gradient(90deg,
                #b91c1c 0%,
                #dc2626 55%,
                #ef4444 100%);
            color: #fff;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: none;
            /* Standard box-shadow now that there's no clip-path eating
               it — same shadow vocabulary as the location tabs so the
               two widgets read as siblings. */
            box-shadow:
                inset -3px 0 6px rgba(0,0,0,0.22),
                inset 2px 0 0 rgba(255,255,255,0.25),
                -2px 1px 4px rgba(0,0,0,0.10);
            transition: filter 110ms ease, background 110ms ease, box-shadow 110ms ease;
            pointer-events: auto;
        }
        /* Counter-skew the icon so it reads upright inside the
           parallelogram body — same trick .purchases-tab > * uses. */
        body.page-purchases .purchases-tabs .purchases-voice-ptt-btn > *,
        body .app-global-drawer .purchases-voice-ptt-btn > *{
            transform: skewY(7deg);
        }
        body.page-purchases .purchases-tabs .purchases-voice-ptt-btn[hidden],
        body .app-global-drawer .purchases-voice-ptt-btn[hidden]{
            display: none;
        }
        /* Held / depressed state — DARK red. The pressed look reads
           like the button has sunk into the surface rather than lit
           up. Inner inset shadow + tighter outer shadow reinforce the
           depressed feel. Driven by the .is-holding class set in JS
           for both local pointer events AND mirrored external sources
           (hardware volume-down PTT, keypad mic). */
        body.page-purchases .purchases-tabs .purchases-voice-ptt-btn.is-holding,
        body .app-global-drawer .purchases-voice-ptt-btn.is-holding{
            background: linear-gradient(90deg,
                #5e1010 0%,
                #7f1d1d 55%,
                #991b1b 100%);
            box-shadow:
                inset 0 3px 8px rgba(0, 0, 0, 0.45),
                inset -3px 0 6px rgba(0, 0, 0, 0.30),
                0 1px 2px rgba(0, 0, 0, 0.30);
            filter: brightness(0.92);
        }
        /* Backward-compat: legacy code paths toggle the older class
           name; mirror the dark depressed look there too. */
        body.page-purchases .purchases-tabs .purchases-voice-ptt-btn.app-keypad-button-pressed,
        body .app-global-drawer .purchases-voice-ptt-btn.app-keypad-button-pressed{
            background: linear-gradient(90deg,
                #5e1010 0%,
                #7f1d1d 55%,
                #991b1b 100%);
            box-shadow:
                inset 0 3px 8px rgba(0, 0, 0, 0.45),
                inset -3px 0 6px rgba(0, 0, 0, 0.30),
                0 1px 2px rgba(0, 0, 0, 0.30);
            filter: brightness(0.92);
        }
        /* Mic icon — sized relative to the button. The clip-path masks
           anything outside the trapezoid, so we don't need to inset
           the icon manually; just centre it slightly toward the right
           (wider) end so it sits in the visual centre of the
           clipped shape, not the bounding box. */
        body.page-purchases .purchases-tabs .purchases-voice-ptt-icon,
        body .app-global-drawer .purchases-voice-ptt-icon{
            width: 22px;
            height: 22px;
            margin-left: 8px;       /* shift toward the wider (screen) edge */
            pointer-events: none;
        }

        /* ANDROID_BRIDGE_DRAWER (2026-05-22) — in-drawer tracking
           button styles. Sibling of .purchases-voice-ptt-btn (mic);
           same parallelogram shape and screen-edge anchoring so the
           two read as a stacked rolodex. Green palette so it's clearly
           distinct from the red mic. The .app-tracking-light is a
           small LED-style indicator pinned to the inner (left) edge
           so it remains visible in the collapsed peek.

           TAB_ADJUST_GLOBAL (2026-05-22) — the purchases page mounts
           its mic + tracking inside `.purchases-tabs` rather than
           `.app-global-drawer`. We tag that container with the
           `.app-global-drawer-ctx` class at runtime so all these
           rules apply there too without duplicating ~120 lines. */
        body .app-global-drawer .app-tracking-btn,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn{
            margin-top: 12px;
            margin-left: 0;
            margin-right: 0;
            padding: 10px 6px 10px 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            min-height: var(--tab-height, 64px);
            width: 100%;
            border: 0;
            box-sizing: border-box;
            border-radius: 22px 6px 6px 22px;
            transform: skewY(-7deg);
            background: linear-gradient(90deg,
                #475569 0%,
                #64748b 55%,
                #94a3b8 100%);
            color: #fff;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            /* DRIVER_DRAWER_UNIFY FIX — `none` (not `manipulation`) so a
               vertical drag isn't claimed by the browser as a scroll (which
               fires pointercancel and starves the drag of pointermove). The
               mic + location tabs already use `none`; the tracking button must
               too, or hold-to-slide never receives the move events. */
            touch-action: none;
            box-shadow:
                inset -3px 0 6px rgba(0,0,0,0.22),
                inset 2px 0 0 rgba(255,255,255,0.20),
                -2px 1px 4px rgba(0,0,0,0.10);
            transition: filter 110ms ease, background 110ms ease, box-shadow 110ms ease;
            pointer-events: auto;
        }
        /* DRIVER_DRAWER_UNIFY (2026-05-27) — safety net: guarantee the
           tracking button gets the parallelogram TEMPLATE on the Purchases
           drawer even if the `.app-global-drawer-ctx` marker is ever missing
           or applied late. Mirrors the mic's unconditional selector
           (`.purchases-tabs .purchases-voice-ptt-btn`) so the tracking button
           can never fall back to a bare rectangle. Shape only — colour/state
           still come from the data-state rules below. */
        body.page-purchases .purchases-tabs .app-tracking-btn{
            border-radius: 22px 6px 6px 22px;
            transform: skewY(-7deg);
            min-height: var(--tab-height, 64px);
            width: 100%;
            border: 0;
            box-sizing: border-box;
            padding: 10px 6px 10px 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        body.page-purchases .purchases-tabs .app-tracking-btn > *{
            transform: skewY(7deg);
        }
        /* Counter-skew the icon + light so they read upright inside
           the parallelogram body — same trick the mic uses. */
        body .app-global-drawer .app-tracking-btn > *,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn > *{
            transform: skewY(7deg);
        }
        body .app-global-drawer .app-tracking-icon,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-icon{
            width: 22px;
            height: 22px;
            margin-left: 8px;
            pointer-events: none;
        }
        /* DRIVER_ASSIST_STAGE_3 — fullscreen nav controls on the drawer
           (map-angle / diagnostics / exit). Reuse the tracking parallelogram
           template; the glyph is counter-skewed via the `> *` rule above. */
        body .app-global-drawer .da-drawer-nav-btn .da-drawer-nav-glyph{
            font-size: 22px;
            line-height: 1;
            font-weight: 700;
            pointer-events: none;
        }
        /* The drawer's `.app-tracking-btn { display:flex }` rule outranks the
           UA `[hidden]` rule, so `hidden` alone wouldn't hide these buttons —
           they'd show on every page (incl. My Tasks) and never disappear when
           navigation closes. Force them hidden when the attribute is set. */
        body .app-global-drawer .da-drawer-nav-btn[hidden]{
            display: none !important;
        }
        body .app-global-drawer .da-drawer-nav-exit{
            background: linear-gradient(90deg, #b91c1c 0%, #dc2626 55%, #ef4444 100%);
        }
        /* The "light" — small LED pinned to the LEFT (inner-rounded)
           edge of the parallelogram. That's the side that remains
           visible in the collapsed peek (the drawer slides off-screen
           to the right; only the inner edge stays on-screen). Off
           state is muted grey-blue; on state is bright green with a
           pulsing halo. */
        body .app-global-drawer .app-tracking-light,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-light{
            position: absolute;
            top: 50%;
            left: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #1e293b;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
            transform: translateY(-50%) skewY(7deg);
            transition: background 200ms ease, box-shadow 200ms ease;
            pointer-events: none;
        }
        /* ON state — bright green parallelogram + glowing LED. */
        body .app-global-drawer .app-tracking-btn[data-state="on"],
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="on"]{
            background: linear-gradient(90deg,
                #15803d 0%,
                #16a34a 55%,
                #22c55e 100%);
            box-shadow:
                inset -3px 0 6px rgba(0,0,0,0.25),
                inset 2px 0 0 rgba(255,255,255,0.30),
                -2px 1px 4px rgba(0,0,0,0.10),
                0 0 14px rgba(34,197,94,0.45);
        }
        body .app-global-drawer .app-tracking-btn[data-state="on"] .app-tracking-light,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="on"] .app-tracking-light{
            background: #4ade80;
            box-shadow: 0 0 0 3px rgba(74,222,128,0.40),
                        0 0 8px rgba(74,222,128,0.80);
            animation: appTrackingLightPulse 1400ms ease-in-out infinite;
        }
        @keyframes appTrackingLightPulse {
            0%, 100% {
                box-shadow: 0 0 0 3px rgba(74,222,128,0.40),
                            0 0 6px rgba(74,222,128,0.70);
            }
            50% {
                box-shadow: 0 0 0 6px rgba(74,222,128,0.10),
                            0 0 14px rgba(74,222,128,0.95);
            }
        }
        /* SCHEDULER_GPS_TRACKING_BUTTON_REHYDRATION_FIX — transient
           starting/stopping variants. Same green family as ON, but
           with a faster pulse on the LED so the operator knows the
           request is in flight. Treated visually as on-ish so the
           button doesn't flap to off and back. */
        body .app-global-drawer .app-tracking-btn[data-state="starting"],
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="starting"]{
            background: linear-gradient(90deg,
                #15803d 0%,
                #16a34a 55%,
                #22c55e 100%);
            box-shadow:
                inset -3px 0 6px rgba(0,0,0,0.25),
                inset 2px 0 0 rgba(255,255,255,0.30),
                -2px 1px 4px rgba(0,0,0,0.10),
                0 0 14px rgba(34,197,94,0.30);
            opacity: 0.92;
        }
        body .app-global-drawer .app-tracking-btn[data-state="starting"] .app-tracking-light,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="starting"] .app-tracking-light{
            background: #facc15;
            box-shadow: 0 0 0 3px rgba(250,204,21,0.40),
                        0 0 8px rgba(250,204,21,0.80);
            animation: appTrackingLightPulse 700ms ease-in-out infinite;
        }
        body .app-global-drawer .app-tracking-btn[data-state="stopping"],
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="stopping"]{
            background: linear-gradient(90deg,
                #475569 0%, #64748b 55%, #94a3b8 100%);
            opacity: 0.85;
        }
        /* SCHEDULER_GPS_ANDROID_SERVICE_AND_BACKEND_SESSION_SYNC_FIX
           — Backend session is active AND Android start succeeded
           but no GPS ping has been observed yet. Amber so the
           dispatcher can tell at a glance "tracking is almost on".
           Distinct from yellow `starting` (which is mid-handshake). */
        body .app-global-drawer .app-tracking-btn[data-state="on_waiting_for_ping"],
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="on_waiting_for_ping"]{
            background: linear-gradient(90deg,
                #b45309 0%, #d97706 55%, #f59e0b 100%);
            box-shadow:
                inset -3px 0 6px rgba(0,0,0,0.25),
                inset 2px 0 0 rgba(255,255,255,0.30),
                -2px 1px 4px rgba(0,0,0,0.10),
                0 0 14px rgba(245,158,11,0.45);
        }
        body .app-global-drawer .app-tracking-btn[data-state="on_waiting_for_ping"] .app-tracking-light,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="on_waiting_for_ping"] .app-tracking-light{
            background: #fbbf24;
            box-shadow: 0 0 0 3px rgba(251,191,36,0.40),
                        0 0 8px rgba(251,191,36,0.80);
            animation: appTrackingLightPulse 1000ms ease-in-out infinite;
        }
        /* DRIVER_ASSIST_STAGE_2_1 — tracking started but the driver is
           OUTSIDE their shift window, so policy rejects every ping and no
           accepted ping will ever arrive. Distinct BLUE state (not the amber
           "waiting for GPS") so the driver can tell at a glance this is a
           working-hours issue, not a signal issue. */
        body .app-global-drawer .app-tracking-btn[data-state="on_outside_hours"],
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="on_outside_hours"]{
            background: linear-gradient(90deg,
                #1e40af 0%, #2563eb 55%, #3b82f6 100%);
            box-shadow:
                inset -3px 0 6px rgba(0,0,0,0.25),
                inset 2px 0 0 rgba(255,255,255,0.30),
                -2px 1px 4px rgba(0,0,0,0.10),
                0 0 14px rgba(59,130,246,0.45);
        }
        body .app-global-drawer .app-tracking-btn[data-state="on_outside_hours"] .app-tracking-light,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="on_outside_hours"] .app-tracking-light{
            background: #93c5fd;
            box-shadow: 0 0 0 3px rgba(147,197,253,0.40),
                        0 0 8px rgba(147,197,253,0.80);
            animation: appTrackingLightPulse 1400ms ease-in-out infinite;
        }
        body .app-global-drawer .app-tracking-btn[data-state="stopping"] .app-tracking-light,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="stopping"] .app-tracking-light{
            background: #94a3b8;
            box-shadow: none;
            animation: none;
        }
        /* ERROR state — red gradient. The OS Android icon may still
           be on (foreground service stays alive until we kill it)
           but the policy layer has rejected the session, so the
           operator needs to see something went wrong. */
        body .app-global-drawer .app-tracking-btn[data-state="error"],
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="error"]{
            background: linear-gradient(90deg,
                #991b1b 0%, #dc2626 55%, #ef4444 100%);
            box-shadow:
                inset -3px 0 6px rgba(0,0,0,0.25),
                inset 2px 0 0 rgba(255,255,255,0.30),
                -2px 1px 4px rgba(0,0,0,0.10),
                0 0 14px rgba(239,68,68,0.45);
        }
        body .app-global-drawer .app-tracking-btn[data-state="error"] .app-tracking-light,
        body .purchases-tabs.app-global-drawer-ctx .app-tracking-btn[data-state="error"] .app-tracking-light{
            background: #fca5a5;
            box-shadow: 0 0 0 3px rgba(252,165,165,0.50),
                        0 0 8px rgba(252,165,165,0.80);
            animation: appTrackingLightPulse 600ms ease-in-out infinite;
        }

        /* Drawer auto-hide. Collapsed = slide right, leaving a 12 px
           peek so the user can still see (and tap) the outer edge of
           both buttons. Smooth transform transition so it slides
           rather than jumps. */
        body .app-global-drawer{
            /* DRIVER_DRAWER_UNIFY — translateY lets the user slide the whole
               drawer up/down (hold a non-mic button + drag); persisted as
               --global-drawer-y. translateX still drives the collapse peek. */
            transform: translate(var(--global-drawer-x, 0px), var(--global-drawer-y, 0px));
            transition: transform 0.22s ease;
        }
        /* While actively dragging, follow the finger with no easing lag. */
        body .app-global-drawer.is-sliding{
            transition: none;
        }
        body .app-global-drawer.is-collapsed{
            --global-drawer-x: calc(var(--tab-width, 48px) - 12px);
        }
        /* Wider invisible swipe/tap zone on the left of the drawer so
           the user can grab the collapsed peek from anywhere along the
           right edge (mirrors the purchases-tabs::after pattern). */
        body .app-global-drawer::after{
            content: '';
            position: absolute;
            top: 0; bottom: 0; right: 100%;
            width: 24px;
            pointer-events: auto;
            background: transparent;
        }
        /* DRIVER_DRAWER_UNIFY FIX (2026-05-27) — THE square-on-press bug.
           The global `body.app-page button:hover:not(:disabled)` rule sets
           `transform: translateY(-1px)`. On a touch device `:hover` fires on
           press, and because the skew lives in `transform`, that rule REPLACED
           `skewY(-7deg)` → whichever drawer button was pressed flashed SQUARE.
           Re-assert the parallelogram skew on hover/active for all four drawer
           buttons (global + purchases mic & tracking). Press feedback still
           comes from background / box-shadow / filter, never transform.
           ⚠️ Do NOT animate or override `transform` on these buttons — it
           carries the skewY that makes the trapezoid shape. */
        /* POP-UP LOCK — buttons in a just-revealed drawer ignore taps for
           ~300 ms (the JS adds .da-popup-lock then removes it) so a tap aimed
           at the screen isn't hijacked by a button that popped up. */
        body .app-global-drawer.da-popup-lock .app-tracking-btn,
        body .app-global-drawer.da-popup-lock .purchases-voice-ptt-btn,
        body .app-global-drawer.da-popup-lock .app-drawer-module-btn,
        body .purchases-tabs.da-popup-lock .purchases-tab,
        body .purchases-tabs.da-popup-lock .app-tracking-btn,
        body .purchases-tabs.da-popup-lock .purchases-voice-ptt-btn{
            pointer-events: none !important;
        }
        body .app-global-drawer .app-tracking-btn:hover,
        body .app-global-drawer .app-tracking-btn:active,
        body .app-global-drawer .purchases-voice-ptt-btn:hover,
        body .app-global-drawer .purchases-voice-ptt-btn:active,
        body .purchases-tabs .app-tracking-btn:hover,
        body .purchases-tabs .app-tracking-btn:active,
        body .purchases-tabs .purchases-voice-ptt-btn:hover,
        body .purchases-tabs .purchases-voice-ptt-btn:active{
            transform: skewY(-7deg) !important;
        }

        /* DRIVER_DRAWER_UNIFY FIX (2026-05-27) — the old "peek shake" animated
           `transform` (skewY + translate) on the tracking button while
           collapsed + tracking-on. On Android WebView, animating transform on a
           skewed, border-radiused element intermittently rasterized the
           un-skewed bounding box (button flashed SQUARE) and disturbed the
           sibling mic's compositing. The pulsing green LED already shows GPS is
           live in the collapsed peek, so the shake is removed. DO NOT
           re-introduce a transform-based animation on these buttons — if a
           reminder is wanted, animate box-shadow / filter only, never transform
           (transform carries the skewY that makes the parallelogram shape). */

        body.app-page .app-keypad-input-placeholder{
            display: inline-flex;
            visibility: hidden;
            pointer-events: none;
        }
        body.app-page .app-keypad-mounted-input{
            width: 100% !important;
            min-width: 0;
            max-width: none !important;
            min-height: 42px;
            margin: 0;
            padding: 0.58rem 0.55rem;
            border-radius: 12px;
            border: 1px solid rgba(160, 190, 210, 0.22);
            background: rgba(234, 243, 249, 0.12);
            color: #e6f4fb;
            font-weight: 700;
            font-size: 0.88rem;
            text-align: center;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
        }
        body.app-page .app-keypad-mounted-input.app-keyboard-input-active,
        body.app-page .app-keypad-mounted-input:focus{
            border-color: #78b9d4;
            box-shadow: 0 0 0 2px rgba(120, 185, 212, 0.22), inset 0 1px 0 rgba(255,255,255,0.05);
            background: rgba(44, 104, 131, 0.35);
            outline: none;
        }
        body.app-page .app-keypad-mounted-input.pallet-edit-input-highlight{
            border-color: #d4a017 !important;
            background: rgba(164, 122, 26, 0.3) !important;
            box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.18) !important;
            color: #f5e7bf !important;
        }
        body.app-page .app-keypad-forklift-separator,
        body.app-page .app-keypad-forklift-side,
        body.app-page .app-keypad-forklift-voice{
            min-height: 42px;
            padding-inline: 0.7rem;
            font-size: 0.82rem;
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-separator{
            background: linear-gradient(180deg, #9f8b5b 0%, #7b6840 100%);
            color: #f6f0e4;
            border-color: rgba(88, 72, 40, 0.42);
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-side{
            color: #eaf6fc;
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-side[data-proxy-action="left"],
        body.app-page .app-numeric-keypad button.app-keypad-forklift-side[data-proxy-action="right"]{
            background: linear-gradient(180deg, #244d66 0%, #173d52 100%);
            border-color: rgba(160, 190, 210, 0.22);
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-field{
            justify-content: center;
            padding-inline: 0.8rem;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(217, 232, 241, 0.1) 100%);
            color: #e6f4fb;
            border-color: rgba(188, 214, 229, 0.32);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(15, 23, 42, 0.12);
            font-weight: 600;
            text-align: center;
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-field.app-keyboard-input-active{
            border-color: #9ed8ee;
            box-shadow: 0 0 0 3px rgba(120, 185, 212, 0.28), inset 0 1px 0 rgba(255,255,255,0.14);
            background: linear-gradient(180deg, rgba(56, 127, 158, 0.42) 0%, rgba(38, 95, 121, 0.5) 100%);
            color: #f6fcff;
        }
        body.app-page .app-keypad-forklift-update{
            background: linear-gradient(180deg, #c59a3a 0%, #a67d22 100%);
            color: #231700;
        }
        body.app-page .app-keypad-forklift-edit-action[data-proxy-action="cancel"]{
            background: linear-gradient(180deg, #6f7c87 0%, #58636d 100%);
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-voice{
            background: linear-gradient(180deg, #f2a23d 0%, #db7b1d 100%);
            color: #2f1600;
            border-color: rgba(118, 61, 5, 0.36);
            font-size: 0.78rem;
            line-height: 1.05;
            text-align: center;
            white-space: normal;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
        }
        body.app-page .app-keypad-proxy-voice-icon{
            font-size: 0.95rem;
            line-height: 1;
            flex: 0 0 auto;
        }
        body.app-page .app-keypad-proxy-voice-label{
            line-height: 1.05;
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-voice.listening{
            box-shadow: 0 0 0 3px rgba(242, 162, 61, 0.24), 0 0 24px rgba(242, 162, 61, 0.2);
            filter: brightness(1.05);
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-voice.voice-btn-held{
            background: linear-gradient(180deg, #dc3545 0%, #b02a37 100%);
            color: #fff4f4;
            border-color: rgba(122, 18, 29, 0.5);
            box-shadow: 0 0 0 7px rgba(220, 53, 69, 0.16), 0 10px 22px rgba(176, 42, 55, 0.24);
            filter: saturate(1.08);
            animation: forkliftVoiceHoldPulse 0.72s ease-in-out infinite;
        }
        body.app-page .app-numeric-keypad button.app-keypad-forklift-voice.insane-mode{
            background: linear-gradient(180deg, #8e3648 0%, #6f2433 100%);
        }
        body.app-page .app-numeric-keypad button:hover:not(:disabled){
            filter: brightness(1.06);
        }
        body.app-page .app-numeric-keypad button:active,
        body.app-page .app-numeric-keypad button.app-keypad-button-pressed{
            transform: scale(0.96);
            filter: brightness(1.12);
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.28);
        }
        body.app-page .app-numeric-keypad button[data-action="clear"],
        body.app-page .app-numeric-keypad button[data-action="backspace"],
        body.app-page .app-numeric-keypad button[data-action="previous"],
        body.app-page .app-numeric-keypad button[data-action="next"],
        body.app-page .app-numeric-keypad button[data-action="toggle"]{
            background: linear-gradient(180deg, #1b5877 0%, #12384c 100%);
        }
        body.app-page .app-numeric-keypad button[data-action="previous"],
        body.app-page .app-numeric-keypad button[data-action="next"],
        body.app-page .app-numeric-keypad button[data-action="toggle"]{
            background: linear-gradient(180deg, #b9894e 0%, #94652f 100%);
            color: #f8f1e7;
            border-color: rgba(102, 67, 29, 0.46);
        }
        body.app-page .app-numeric-keypad button[data-action="clear"]{
            background: linear-gradient(180deg, #9f8b5b 0%, #7b6840 100%);
            color: #f6f0e4;
            border-color: rgba(88, 72, 40, 0.42);
        }
        body.app-page .app-numeric-keypad button[data-action="backspace"]{
            background: linear-gradient(180deg, #94635e 0%, #744843 100%);
            color: #f8eded;
            border-color: rgba(87, 49, 45, 0.44);
        }
        body.app-page .app-numeric-keypad button[data-action="done"]{
            background: linear-gradient(180deg, #0f7a57 0%, #0d5f44 100%);
        }
        @media (max-width: 420px){
            body.app-page .app-keypad-forklift-top-row{
                grid-template-columns: minmax(70px, 0.95fr) minmax(48px, 0.72fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(48px, 0.72fr);
                gap: 5px;
            }
            body.app-page .app-keypad-input-host,
            body.app-page .app-keypad-forklift-action,
            body.app-page .app-keypad-forklift-edit-action{
                font-size: 0.78rem;
                padding-inline: 0.45rem;
            }
            body.app-page .app-keypad-mounted-input{
                font-size: 0.82rem;
                padding-inline: 0.4rem;
            }
        }
        body.page-forklift .item-actions{ margin-top: 6px; display: flex; gap: 4px; justify-content: center; align-items: center; flex-wrap: wrap; }
        body.page-forklift .item-actions button{ font-size: 0.8em; padding: 3px 6px; border-radius: 3px; border: 1px solid; cursor: pointer; }
        body.page-forklift .view-items-btn{ background-color: #007bff; border-color: #006fe6; color: white; }
        body.page-forklift .edit-btn{ background-color: #ffc107; border-color: #d39e00; }
        body.page-forklift .delete-btn{ background-color: #dc3545; border-color: #b02a37; color: white; }
        body.page-forklift button:disabled{ background-color: #a7a7a7; border-color: #888; color: #eee; cursor: not-allowed; }
        body.page-forklift .status-message{ margin-top: 15px; padding: 10px; border-radius: 4px; font-weight: bold; text-align: center; }
        body.page-forklift .error-message{ background-color: var(--app-error-bg); color: var(--app-error-text); }
        body.page-forklift .success-message{ background-color: var(--app-success-bg); color: var(--app-success-text); }
        body.page-forklift .info-message{ background-color: var(--app-surface-info); color: var(--app-info-text); }
        body.page-forklift .modal-content{ position: relative; }
        body.page-forklift #palletItemsTable{ width: 100%; border-collapse: collapse; margin-top: 15px; }
        body.page-forklift #palletItemsTable th,
body.page-forklift #palletItemsTable td{ border: 1px solid #ddd; padding: 8px; text-align: left; }
        body.page-forklift #voice-command-area{ text-align: center; margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
        body.page-forklift #voice-command-area .voice-command-row{ position: relative; display: flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; gap: 0.85rem; margin: 0 auto; }
        body.page-forklift #voice-command-area #voiceBtn{
            background: linear-gradient(180deg, #2a6a89 0%, #18455b 100%);
            border-radius: 999px;
            min-width: 60px;
            width: 60px;
            height: 60px;
            padding: 0;
            border: 1px solid rgba(70, 122, 150, 0.42);
            color: #eef8fc;
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            transition: background-color 0.18s, transform 0.18s, box-shadow 0.18s, filter 0.18s;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            margin: 0;
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-user-drag: none;
            -webkit-tap-highlight-color: transparent;
            position: relative;
            z-index: 2;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px rgba(17, 39, 52, 0.2);
        }
        body.page-forklift #voiceBtn.listening{
            box-shadow: 0 0 0 4px rgba(102, 193, 230, 0.18), 0 0 20px rgba(102, 193, 230, 0.2);
            filter: brightness(1.05);
        }
        body.page-forklift #voiceBtn.voice-btn-held{
            transform: scale(0.96);
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(102, 193, 230, 0.18);
            filter: brightness(0.98);
        }
        @keyframes forkliftVoiceHoldPulse{
            0%{ box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.18), 0 12px 28px rgba(220, 53, 69, 0.18); }
            50%{ box-shadow: 0 0 0 14px rgba(220, 53, 69, 0.30), 0 16px 34px rgba(220, 53, 69, 0.30); }
            100%{ box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.18), 0 12px 28px rgba(220, 53, 69, 0.18); }
        }
        body.page-forklift #voiceStatus{ margin-top: 8px; font-style: italic; color: var(--app-muted); height: 1.2em; }
        body.page-forklift .forklift-control-help-badge{
            position: absolute;
            top: -0.45rem;
            margin: 0 !important;
            z-index: 1;
        }
        body.page-forklift .forklift-control-help-left{
            right: calc(100% + 0.45rem);
        }
        body.page-forklift .forklift-control-help-right{
            left: calc(100% + 0.45rem);
        }
        
        body.page-forklift #loadFromSheetBtn{ background-color: #fd7e14; color: white; margin-left: 10px; }
        html.forklift-bootstrap-pending body.page-forklift #loadSelectionArea,
        html.forklift-bootstrap-pending body.page-forklift #directLoadAccessArea,
        html.forklift-bootstrap-pending body.page-forklift #currentLoadSection{
            display: none !important;
        }
        body.page-forklift #cameraModal .modal-content,
        body.page-detail #cameraModal .modal-content{
            width: min(100%, 980px);
        }
        body.page-forklift #cameraModal .modal-body{
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
            padding: 0.75rem 1rem;
            overflow: hidden;
        }
        body.page-forklift #cameraModal .camera-instruction{
            margin: 0;
            font-size: 0.92rem;
            text-align: center;
        }
        body.page-forklift #cameraModal .camera-preview-frame{
            width: min(100%, 560px);
            max-width: 100%;
            aspect-ratio: 210 / 297;
            height: auto;
            margin: 0 auto;
            background: #000;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        body.page-forklift #cameraModal video{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center center;
            background: #000;
        }
        body.page-forklift #cameraModal canvas{ display: none; }
        body.page-forklift .modal-footer{
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }
        body.page-forklift .modal-footer button{ padding: 10px 15px; font-size: 1em; border-radius: 4px; border: 1px solid transparent; cursor: pointer; margin-left: 0;}
        body.page-forklift #cameraTorchBtn{
            margin-right: auto;
            min-width: 132px;
        }
        body.page-forklift #cameraTorchBtn.is-active{
            background: linear-gradient(180deg, #e0ac43 0%, #b87409 100%);
            color: #fff;
        }
        body.page-forklift #captureBtn{ background-color: #28a745; color: white; }
        body.page-forklift .spinner{ border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 12px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        body.page-forklift #review-area{ display: flex; gap: 8px; margin-top: 6px; }
        body.page-forklift .review-column{ flex: 1; border: 1px solid var(--app-border); padding: 4px; border-radius: 5px; background: var(--app-surface-soft); min-height: 120px; min-width: 0; }
        body.page-forklift .review-item{
            display: grid;
            grid-template-columns: 1fr;
            gap: 3px;
            padding: 3px 4px;
            background: var(--app-surface-strong);
            border: 1px solid var(--app-border);
            border-radius: 4px;
            margin-bottom: 3px;
            min-width: 0;
            justify-items: center;
        }
        body.page-forklift .input-row{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: max-content;
            max-width: 100%;
            margin: 0 auto;
            justify-self: center;
            transform: translateX(-7px);
            min-width: 0;
        }
        body.page-forklift .review-input-group{
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
        }
        body.page-forklift .review-input-label{
            font-size: 0.8em;
            white-space: nowrap;
            display: inline-block;
            text-align: center;
            line-height: 1;
        }
        body.page-forklift .digit-input{
            width: 24px;
            text-align: center;
            border: 1px solid var(--app-border-strong);
            padding: 0 1px;
            border-radius: 4px;
            font-size: 0.8em;
            box-sizing: border-box;
            appearance: textfield;
            -moz-appearance: textfield;
            display: inline-block;
            line-height: 1.05;
            height: 28px;
            min-height: 28px;
            margin: 0;
            background: transparent;
            color: inherit;
            overflow: hidden;
            justify-self: center;
        }
        body.page-forklift .digit-input::-webkit-outer-spin-button,
body.page-forklift .digit-input::-webkit-inner-spin-button{
            -webkit-appearance: none;
            margin: 0;
        }
        body.page-forklift .pallet-input{ width: 32px; }
        body.page-forklift .crate-input{ width: 22px; }
        body.page-forklift .review-separator{ display: flex; align-items: center; justify-content: center; min-height: 30px; margin: 4px 0 8px; border-radius: 4px; border: 1px dashed var(--app-forklift-review-separator-border); background: var(--app-forklift-review-separator-gradient); color: var(--app-forklift-review-separator-text); font-size: 0.74em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
        body.page-forklift .review-dropzone{ min-height: 120px; }
        body.page-forklift #reviewSummary{ margin-top: 4px; padding: 4px 6px; background: var(--app-surface-soft); border: 1px solid var(--app-border); border-radius: 4px; font-size: 0.78em; }

        body.page-forklift .review-duplicate-popover{ position: fixed; z-index: 2147483647; max-width: min(190px, calc(100vw - 28px)); padding: 6px 8px; border-radius: 8px; border: 1px solid var(--app-border); background: var(--app-surface-strong); color: var(--app-text); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14); font-size: 0.66rem; line-height: 1.18; pointer-events: none; }
        body.page-forklift .review-duplicate-popover::after{ content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-left: 1px solid var(--app-border); border-top: 1px solid var(--app-border); transform: rotate(45deg); }
        body.page-forklift .review-duplicate-popover > div + div{ margin-top: 2px; }
        body.page-forklift .review-field-invalid{ border-color: var(--app-error-border) !important; background-color: var(--app-error-bg); }
        body.page-forklift .review-field-warning{ border-color: #e0b03f !important; background-color: var(--app-surface-warning); }
        body.page-forklift .review-item.review-has-error{ border-color: var(--app-error-border); }
        body.page-forklift .review-item.review-has-warning{ border-color: #e0b03f; }
        body.page-forklift .review-item.review-has-error .review-separator{ border-color: var(--app-error-border); }
        body.page-forklift #reviewModal .modal-content{ max-width: min(1220px, calc(100vw - 8px)); max-height: min(94vh, 1000px); display: flex; flex-direction: column; padding: 8px 10px; }
        body.page-forklift #reviewModal .modal-footer{ flex-shrink: 0; }
        body.page-forklift #review-area{ flex: 1 1 auto; min-height: 0; max-height: min(72vh, 820px); overflow-y: auto; padding-right: 1px; }
        body.page-forklift #review-area h4{ position: sticky; top: 0; margin: 0 0 3px; padding: 3px 0; background: var(--app-surface-soft); z-index: 1; font-size: 0.84em; }
        body.page-forklift #reviewNotesSection{ margin-top: 6px; padding: 6px 8px; border: 1px solid var(--app-border); border-radius: 6px; background: var(--app-surface-soft); }
        body.page-forklift #reviewNotesSection h4{ margin: 0 0 4px; font-size: 0.82em; }
        body.page-forklift #reviewNotes{ white-space: pre-wrap; font-size: 0.76em; color: var(--app-muted); }
        body.page-forklift #reviewNotes ul{ margin: 0; padding-left: 18px; }
        html[data-app-theme="dark"] body.page-forklift .review-column{
            background: #16222c;
            border-color: #314251;
        }
        html[data-app-theme="dark"] body.page-forklift .review-item{
            background: #101820;
            border-color: #314251;
            color: #dce7ef;
        }
        html[data-app-theme="dark"] body.page-forklift .truck-item.separator{
            background-color: var(--app-forklift-separator-bg);
            color: var(--app-forklift-separator-text);
        }
        html[data-app-theme="dark"] body.page-forklift .review-separator{
            border-color: var(--app-forklift-review-separator-border);
            background: var(--app-forklift-review-separator-gradient);
            color: var(--app-forklift-review-separator-text);
        }
        html[data-app-theme="dark"] body.page-forklift #reviewSummary,
html[data-app-theme="dark"] body.page-forklift #reviewNotesSection{
            background: #101820;
            border-color: #314251;
            color: #dce7ef;
        }
        html[data-app-theme="dark"] body.page-forklift #review-area h4{
            background: #16222c;
            color: #dce7ef;
        }
        html[data-app-theme="dark"] body.page-forklift #reviewNotes{
            color: #c5d1db;
        }
        html[data-app-theme="dark"] body.page-forklift .review-field-invalid{
            border-color: var(--app-error-border) !important;
            background-color: var(--app-error-bg) !important;
            color: var(--app-error-text);
        }
        html[data-app-theme="dark"] body.page-forklift .review-field-warning{
            border-color: #b99136 !important;
            background-color: #4b3a12 !important;
            color: #f4e3ab;
        }
        html[data-app-theme="dark"] body.page-forklift .digit-input{
            width: 24px;
            text-align: center;
            border: 1px solid #ccc;
            padding: 0 1px;
            border-radius: 4px;
            font-size: 0.8em;
            box-sizing: border-box;
            appearance: textfield;
            -moz-appearance: textfield;
            display: inline-block;
            line-height: 1.05;
            height: 28px;
            min-height: 28px;
            margin: 0;
            background: transparent;
            color: inherit;
            overflow: hidden;
        }
        html[data-app-theme="dark"] body.page-forklift .review-item.review-has-error{
            border-color: var(--app-error-border);
        }
        html[data-app-theme="dark"] body.page-forklift .review-item.review-has-warning{
            border-color: #8f7530;
        }
        html[data-app-theme="dark"] body.page-forklift .review-duplicate-popover{
            background: #101820;
            border-color: #314251;
            color: #dce7ef;
            box-shadow: 0 14px 30px rgba(0,0,0,0.35);
        }

        @media (max-width: 630px) {
            body.page-forklift .pallet-entry-main-row{ grid-template-columns: minmax(0, 1fr) 78px 66px minmax(0, 1fr); gap: 8px; }
            body.page-forklift #voice-command-area #voiceBtn{
                min-width: 60px;
                width: 60px;
                height: 60px;
                padding: 0;
                font-size: 24px;
                border-radius: 999px;
            }
            body.page-forklift #addLeftBtn,
body.page-forklift #addRightBtn{ font-size: 0; padding: 6px 18px; }
            body.page-forklift #addLeftBtn::before{ content: '<'; font-size: 1.5rem; font-weight: bold; }
            body.page-forklift #addRightBtn::before{ content: '>'; font-size: 1.5rem; font-weight: bold; }
            body.page-forklift .item-actions{ flex-direction: row; align-items: center; justify-content: center; gap: 5px; width: 100%; flex-wrap: wrap; }
            body.page-forklift .item-actions button{ padding: 3px 6px; width: auto; min-width: 88px; font-size: 0.8em; }

            body.page-forklift .load-selection-controls{
                flex-direction: column;
                align-items: stretch;
            }
            body.page-forklift .load-selection select{
                width: 100%;
                min-width: 0;
                flex: 0 0 auto;
            }
            body.page-forklift .load-selection-buttons{
                width: 100%;
                flex: 0 0 auto;
                display: flex;
                flex-direction: row;
                gap: 6px;
            }
            body.page-forklift .forklift-load-picker{
                width: 100%;
                flex: 0 0 auto;
                min-width: 0;
            }
            body.page-forklift .load-selection-buttons button{
                width: 100%;
                flex: 1 1 0;
                min-height: 52px;
                padding: 10px 8px;
                font-size: 0.95em;
            }
            body.page-forklift .load-selection-controls > .app-help-badge{
                width: auto;
                align-self: center;
                margin-top: 0;
            }
        }
        @media (max-width: 480px) {
            body.page-forklift .container{ padding: 15px; } body.page-forklift .pallet-entry-area{ padding: 10px; } body.page-forklift .truck-item{ font-size: 1rem; }
            body.page-forklift .pallet-entry-main-row{ grid-template-columns: minmax(0, 1fr) 72px 60px minmax(0, 1fr); gap: 6px; }
            body.page-forklift #voice-command-area #voiceBtn{
                min-width: 60px;
                width: 60px;
                height: 60px;
                padding: 0;
                font-size: 24px;
                border-radius: 999px;
            }
            body.page-forklift .load-selection-buttons{
                flex-direction: row;
                gap: 6px;
            }
            body.page-forklift .forklift-load-picker-trigger{
                min-height: 50px;
                padding: 10px 12px;
            }
            body.page-forklift .load-selection-buttons button{
                font-size: 0.9em;
                padding: 10px 6px;
                min-height: 50px;
            }
            body.page-forklift .forklift-control-help-badge{
                top: -0.3rem;
            }
        }
        body.page-forklift #voiceBtn.insane-mode{
            background: linear-gradient(180deg, #88384a 0%, #672534 100%);
            border-color: #5b1d29;
            color: #fff1f4;
        }
        body.page-forklift #voiceBtn.insane-mode.listening{
            box-shadow: 0 0 0 3px rgba(255, 110, 140, 0.22), 0 0 22px rgba(255, 110, 140, 0.20);
        }
        html.app-prevent-pull-refresh,
        html.app-prevent-pull-refresh body{
            overscroll-behavior-y: none;
        }
    
        body.page-forklift #photoChoiceModal .modal-content{ max-width: 420px; text-align: center; }
        body.page-forklift .photo-choice-buttons{ display: flex; gap: 10px; margin-top: 15px; }
        body.page-forklift .photo-choice-buttons button{ flex: 1; padding: 12px 10px; font-size: 1em; border: none; border-radius: 6px; cursor: pointer; }
        body.page-forklift .photo-choice-camera{ background-color: #007bff; color: white; }
        body.page-forklift .photo-choice-file{ background-color: #fd7e14; color: white; }
        body.page-forklift .photo-choice-cancel{ margin-top: 10px; background-color: #6c757d; color: white; padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer; width: 100%; }

    
        body.page-forklift .review-reason{
            display: none;
            width: 100%;
            max-width: 100%;
            margin-top: 2px;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.7em;
            line-height: 1.15;
            flex-direction: column;
            align-items: flex-start;
            justify-self: stretch;
            text-align: left;
            gap: 2px;
        }
        body.page-forklift .review-reason-badge{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 1px 6px;
            border-radius: 999px;
            border: 1px solid transparent;
            white-space: nowrap;
        }
        body.page-forklift .review-reason-badge-button{
            cursor: pointer;
            user-select: none;
            text-decoration: none;
        }
        body.page-forklift .review-reason-badge.error{
            background: var(--app-error-bg);
            border-color: var(--app-error-border);
            color: var(--app-error-text);
        }
        body.page-forklift .review-reason-badge.warning{
            background: #fff8dd;
            border-color: #e6c35f;
            color: #8c6a00;
        }
        html[data-app-theme="dark"] body.page-forklift .review-reason-badge.error{
            background: var(--app-error-bg);
            border-color: var(--app-error-border);
            color: var(--app-error-text);
        }
        html[data-app-theme="dark"] body.page-forklift .review-reason-badge.warning{
            background: #4b3a12;
            border-color: #b99136;
            color: #f4e3ab;
        }

        body.page-detail #cameraModal .modal-body{
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
            padding: 0.75rem 1rem;
            overflow: hidden;
        }
        body.page-detail #cameraModal .camera-instruction{
            margin: 0;
            font-size: 0.92rem;
            text-align: center;
        }
        body.page-detail #cameraModal .camera-preview-frame{
            width: min(100%, 560px);
            max-width: 100%;
            aspect-ratio: 210 / 297;
            height: auto;
            margin: 0 auto;
            background: #000;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
        }
        body.page-detail #cameraModal video{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center center;
            background: #000;
        }
        body.page-detail #cameraModal canvas{ display: none; }
        body.page-detail .modal-footer{
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }
        body.page-detail .modal-footer button{ padding: 10px 15px; font-size: 1em; border-radius: 4px; border: 1px solid transparent; cursor: pointer; margin-left: 0;}
        body.page-detail #cameraTorchBtn{
            margin-right: auto;
            min-width: 132px;
        }
        body.page-detail #cameraTorchBtn.is-active{
            background: linear-gradient(180deg, #e0ac43 0%, #b87409 100%);
            color: #fff;
        }
        body.page-detail #captureBtn{ background-color: #28a745; color: white; }
        body.page-detail .spinner{ border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 12px auto; }

        @media (max-width: 1100px) {
            body.page-forklift #cameraModal,
            body.page-detail #cameraModal{
                padding: 8px;
                align-items: stretch;
            }
            body.page-forklift #cameraModal .modal-content,
            body.page-detail #cameraModal .modal-content{
                width: 100%;
                max-height: calc((var(--app-vh) * 100) - 8px);
                border-radius: 16px;
            }
            body.page-forklift #cameraModal .modal-content > h3,
            body.page-detail #cameraModal .modal-content > h3,
            body.page-forklift #cameraModal .camera-instruction,
            body.page-detail #cameraModal .camera-instruction{
                display: none;
            }
            body.page-forklift #cameraModal .modal-body,
            body.page-detail #cameraModal .modal-body{
                flex: 1 1 auto;
                justify-content: center;
                gap: 8px;
                padding: 0.45rem 0.45rem 0.3rem;
            }
            body.page-forklift #cameraModal .modal-footer,
            body.page-detail #cameraModal .modal-footer{
                margin-top: 0;
                padding: 0.5rem 0.6rem 0.65rem;
            }
            body.page-forklift #cameraModal #cameraTorchBtn,
            body.page-detail #cameraModal #cameraTorchBtn{
                order: -1;
                width: 100%;
                margin-right: 0;
            }
        }

        body.page-detail #review-area{ display: flex; gap: 8px; margin-top: 6px; }
        body.page-detail .review-column{ flex: 1; border: 1px solid var(--app-border); padding: 4px; border-radius: 5px; background: var(--app-surface-soft); min-height: 120px; min-width: 0; }
        body.page-detail .review-with-photo{ display: flex; flex-direction: column; gap: 10px; margin-top: 6px; flex: 1 1 auto; min-height: 0; min-width: 0; }
        body.page-detail .review-with-photo > #review-area{ flex: 1 1 auto; min-width: 0; margin-top: 0; }
        body.page-detail .review-photo-pane{ flex: 1 1 0; min-width: 0; border: 1px solid var(--app-border); border-radius: 8px; padding: 6px 8px; background: var(--app-surface-soft); display: flex; flex-direction: column; gap: 6px; }
        body.page-detail .review-photo-pane h4{ margin: 0; font-size: 0.84em; color: var(--app-heading); }
        body.page-detail .review-photo-frame{ flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--app-code-bg); border-radius: 6px; overflow: hidden; }
        body.page-detail .review-photo-frame img{ max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit: contain; display: block; }
        @media (min-width: 900px) {
            body.page-detail .review-with-photo{ flex-direction: row; align-items: stretch; }
            body.page-detail .review-with-photo > .review-photo-pane{ flex: 1 1 50%; max-width: 50%; }
            body.page-detail .review-with-photo > #review-area{ flex: 1 1 50%; }
        }
        body.page-detail .review-item{
            display: grid;
            grid-template-columns: 1fr;
            gap: 3px;
            padding: 3px 4px;
            background: var(--app-surface-strong);
            border: 1px solid var(--app-border);
            border-radius: 4px;
            margin-bottom: 3px;
            min-width: 0;
            justify-items: center;
        }
        body.page-detail .input-row{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: max-content;
            max-width: 100%;
            margin: 0 auto;
            justify-self: center;
            transform: translateX(-7px);
            min-width: 0;
        }
        body.page-detail .review-input-group{ display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
        body.page-detail .review-input-label{ font-size: 0.8em; white-space: nowrap; display: inline-block; text-align: center; line-height: 1; }
        body.page-detail .digit-input{
            width: 24px;
            text-align: center;
            border: 1px solid var(--app-border-strong);
            padding: 0 1px;
            border-radius: 4px;
            font-size: 0.8em;
            box-sizing: border-box;
            appearance: textfield;
            -moz-appearance: textfield;
            display: inline-block;
            line-height: 1.05;
            height: 28px;
            min-height: 28px;
            margin: 0;
            background: transparent;
            color: inherit;
            overflow: hidden;
            justify-self: center;
        }
        body.page-detail .digit-input::-webkit-outer-spin-button,
body.page-detail .digit-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
        body.page-detail .pallet-input{ width: 32px; }
        body.page-detail .crate-input{ width: 22px; }
        body.page-detail .review-separator{ display: flex; align-items: center; justify-content: center; min-height: 30px; margin: 4px 0 8px; border-radius: 4px; border: 1px dashed var(--app-forklift-review-separator-border); background: var(--app-forklift-review-separator-gradient); color: var(--app-forklift-review-separator-text); font-size: 0.74em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
        body.page-detail .review-dropzone{ min-height: 120px; }
        body.page-detail #reviewSummary{ margin-top: 4px; padding: 4px 6px; background: var(--app-surface-soft); border: 1px solid var(--app-border); border-radius: 4px; font-size: 0.78em; }
        body.page-detail .review-duplicate-popover{ position: fixed; z-index: 2147483647; max-width: min(190px, calc(100vw - 28px)); padding: 6px 8px; border-radius: 8px; border: 1px solid var(--app-border); background: var(--app-surface-strong); color: var(--app-text); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14); font-size: 0.66rem; line-height: 1.18; pointer-events: none; }
        body.page-detail .review-duplicate-popover::after{ content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-left: 1px solid var(--app-border); border-top: 1px solid var(--app-border); transform: rotate(45deg); }
        body.page-detail .review-duplicate-popover > div + div{ margin-top: 2px; }
        body.page-detail .review-field-invalid{ border-color: var(--app-error-border) !important; background-color: var(--app-error-bg); }
        body.page-detail .review-field-warning{ border-color: #e0b03f !important; background-color: var(--app-surface-warning); }
        body.page-detail .review-item.review-has-error{ border-color: var(--app-error-border); }
        body.page-detail .review-item.review-has-warning{ border-color: #e0b03f; }
        body.page-detail .review-item.review-has-error .review-separator{ border-color: var(--app-error-border); }
        body.page-detail #reviewModal{
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: calc(var(--app-vh, 1vh) * 100) !important;
            height: 100dvh !important;
            transform: none !important;
            align-items: flex-start !important;
            justify-content: center !important;
            padding: 12px 8px calc(16px + env(safe-area-inset-bottom)) !important;
            overflow-y: auto !important;
        }
        body.page-detail #reviewModal.show{
            display: flex !important;
        }
        body.page-detail #reviewModal .modal-content{ max-width: min(1220px, calc(100vw - 8px)); max-height: min(94vh, 1000px); display: flex; flex-direction: column; padding: 8px 10px; }
        body.page-detail #reviewModal .modal-footer{ flex-shrink: 0; }
        body.page-detail #review-area{ flex: 1 1 auto; min-height: 0; max-height: min(72vh, 820px); overflow-y: auto; padding-right: 1px; }
        body.page-detail #review-area h4{ position: sticky; top: 0; margin: 0 0 3px; padding: 3px 0; background: var(--app-surface-soft); z-index: 1; font-size: 0.84em; }
        body.page-detail #reviewNotesSection{ margin-top: 6px; padding: 6px 8px; border: 1px solid var(--app-border); border-radius: 6px; background: var(--app-surface-soft); }
        body.page-detail #reviewNotesSection h4{ margin: 0 0 4px; font-size: 0.82em; }
        body.page-detail #reviewNotes{ white-space: pre-wrap; font-size: 0.76em; color: var(--app-muted); }
        body.page-detail #reviewNotes ul{ margin: 0; padding-left: 18px; }
        body.page-detail #photoChoiceModal .modal-content{ max-width: 420px; text-align: center; }
        body.page-detail .photo-choice-buttons{ display: flex; gap: 10px; margin-top: 15px; }
        body.page-detail .photo-choice-buttons button{ flex: 1; padding: 12px 10px; font-size: 1em; border: none; border-radius: 6px; cursor: pointer; }
        body.page-detail .photo-choice-camera{ background-color: #007bff; color: white; }
        body.page-detail .photo-choice-file{ background-color: #fd7e14; color: white; }
        body.page-detail .photo-choice-cancel{ margin-top: 10px; background-color: #6c757d; color: white; padding: 10px 14px; border: none; border-radius: 6px; cursor: pointer; width: 100%; }
        body.page-detail .review-reason{
            display: none;
            width: 100%;
            max-width: 100%;
            margin-top: 2px;
            margin-left: 0;
            margin-right: 0;
            font-size: 0.7em;
            line-height: 1.15;
            flex-direction: column;
            align-items: flex-start;
            justify-self: stretch;
            text-align: left;
            gap: 2px;
        }
        body.page-detail .review-reason-badge{ display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 1px 6px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
        body.page-detail .review-reason-badge-button{ cursor: pointer; user-select: none; text-decoration: none; }
        body.page-detail .review-reason-badge.error{ background: var(--app-error-bg); border-color: var(--app-error-border); color: var(--app-error-text); }
        body.page-detail .review-reason-badge.warning{ background: #fff8dd; border-color: #e6c35f; color: #8c6a00; }
        html[data-app-theme="dark"] body.page-detail .review-column{ background: #16222c; border-color: #314251; }
        html[data-app-theme="dark"] body.page-detail .review-item{ background: #101820; border-color: #314251; color: #dce7ef; }
        html[data-app-theme="dark"] body.page-detail .review-separator{ border-color: var(--app-forklift-review-separator-border); background: var(--app-forklift-review-separator-gradient); color: var(--app-forklift-review-separator-text); }
        html[data-app-theme="dark"] body.page-detail #reviewSummary,
html[data-app-theme="dark"] body.page-detail #reviewNotesSection{ background: #101820; border-color: #314251; color: #dce7ef; }
        html[data-app-theme="dark"] body.page-detail #review-area h4{ background: #16222c; color: #dce7ef; }
        html[data-app-theme="dark"] body.page-detail #reviewNotes{ color: #c5d1db; }
        html[data-app-theme="dark"] body.page-detail .review-field-invalid{ border-color: var(--app-error-border) !important; background-color: var(--app-error-bg) !important; color: var(--app-error-text); }
        html[data-app-theme="dark"] body.page-detail .review-field-warning{ border-color: #b99136 !important; background-color: #4b3a12 !important; color: #f4e3ab; }
        html[data-app-theme="dark"] body.page-detail .digit-input{ background: transparent; color: inherit; border: 1px solid #ccc; }
        html[data-app-theme="dark"] body.page-detail .review-item.review-has-error{ border-color: var(--app-error-border); }
        html[data-app-theme="dark"] body.page-detail .review-item.review-has-warning{ border-color: #8f7530; }
        html[data-app-theme="dark"] body.page-detail .review-duplicate-popover{ background: #101820; border-color: #314251; color: #dce7ef; box-shadow: 0 14px 30px rgba(0,0,0,0.35); }
        html[data-app-theme="dark"] body.page-detail .review-reason-badge.error{ background: var(--app-error-bg); border-color: var(--app-error-border); color: var(--app-error-text); }
        html[data-app-theme="dark"] body.page-detail .review-reason-badge.warning{ background: #4b3a12; border-color: #b99136; color: #f4e3ab; }


/* ===== SHELL ===== */
body.page-shell{
            padding: 0;
            overflow: hidden;
        }

body.page-shell .shell-frame{
            display: block;
            width: 100vw;
            width: 100dvw;
            height: 100vh;
            height: 100dvh;
            height: calc(var(--app-vh, 1vh) * 100);
            border: 0;
            background: transparent;
        }


/* ===== MARKUP CLEANUP ===== */
body.page-login #errorMessage,
body.page-dispatch #loadingMessage,
body.page-dispatch #errorMessage,
body.page-dispatch #pagination,
body.page-dispatch #modalLoading,
body.page-dispatch #modalError,
body.page-detail #loadingMessageDetail,
body.page-detail #errorMessageDetail,
body.page-detail #itemDetailsWarnings,
body.page-detail #excludedDiscrepancyWarning,
body.page-forklift #backToDetailsLink,
body.page-forklift #globalMessage,
body.page-forklift #imageFileInput,
body.page-forklift #directLoadAccessArea,
body.page-forklift #directLoadMessage,
body.page-forklift #currentLoadSection,
body.page-forklift #completeLoadArea,
body.page-forklift #voice-command-area,
body.page-forklift #updateBtn,
body.page-forklift #palletMessage,
body.page-forklift #reviewNotesSection,
body.page-receiving #noEntriesMessage,
body.page-receiving #productFields,
body.page-receiving #quickAddMessage,
body.page-receiving #wizardPrevBtn,
body.page-receiving #wizardFinishBtn {
    display: none;
}

body.page-dispatch .forklift-link-row {
    margin-top: 20px;
    text-align: center;
}

body.page-detail #loadNumberInput {
    width: 60px;
    margin-right: 15px;
}

body.page-detail #minimumPallets {
    width: 80px;
}

body.page-detail #loadNumberInput,
body.page-detail #minimumPallets {
    padding: 8px;
    border: 1px solid var(--app-border);
    border-radius: 4px;
}

body.page-detail #itemDetailsWarnings,
body.page-detail #excludedDiscrepancyWarning {
    margin-top: 10px;
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;
}

body.page-detail #itemDetailsWarnings {
    margin-top: 15px;
}

body.page-detail #itemFilterControls {
    display: flex;
    gap: 15px;
    font-size: 0.9em;
}

body.page-detail .po-summary-heading {
    margin-top: 30px;
}

body.page-detail .shared-pallet-paperwork-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

body.page-detail .shared-pallet-paperwork-copy {
    width: fit-content;
}

body.page-detail #loadPOSummaryTable thead th {
    background: linear-gradient(180deg, #8e44ad 0%, #6d2f8d 100%);
    color: #fff;
}

body.page-detail #loadPOSummaryTable tbody tr td {
    background-color: #f5ecfb;
}

body.page-detail #loadPOSummaryTable tbody tr:hover td {
    background-color: #efe1f7 !important;
}

body.page-detail #loadPOSummaryTable tbody tr:active td,
body.page-detail #loadPOSummaryTable tbody tr:focus td,
body.page-detail #loadPOSummaryTable tbody tr:focus-within td {
    background-color: #efe1f7 !important;
}

body.page-detail #loadPOSummaryTable .total-row td {
    background-color: #e6d1f3;
    font-weight: 800;
}

        body.page-detail #loadPOSummaryTable .shared-pallet-info-row td {
            background-color: #f1e3fa;
        }

        body.page-detail #loadPOSummaryTable thead tr:first-child th.po-summary-equipment-group,
        body.page-detail #loadPOSummaryTable thead tr:nth-child(2) th.po-summary-equipment-subhead,
        body.page-detail #loadPOSummaryTable tbody td.po-summary-equipment-cell,
        body.page-detail #loadPOSummaryTable .total-row td.po-summary-equipment-cell{
            border-color: #0d5f74 !important;
        }

        body.page-detail #loadPOSummaryTable thead tr:first-child th.po-summary-equipment-group{
            background: linear-gradient(135deg, #0b5f74, #1588a7) !important;
    color: #ffffff !important;
    border-left-width: 2px;
    border-right-width: 2px;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.14), inset 0 2px 0 rgba(255, 255, 255, 0.06);
}

        body.page-detail #loadPOSummaryTable thead tr:nth-child(2) th.po-summary-equipment-subhead{
            background: linear-gradient(180deg, rgba(21, 108, 138, 0.16), rgba(21, 108, 138, 0.10)) !important;
            color: var(--app-heading);
            font-weight: 800;
        }

        body.page-detail #loadPOSummaryTable tbody td.po-summary-equipment-cell{
            background: linear-gradient(180deg, rgba(21, 108, 138, 0.07), rgba(21, 108, 138, 0.03)) !important;
            font-weight: 700;
        }

        body.page-detail #loadPOSummaryTable tbody tr:hover td.po-summary-equipment-cell{
            background: linear-gradient(180deg, rgba(21, 108, 138, 0.11), rgba(21, 108, 138, 0.06)) !important;
        }

        body.page-detail #loadPOSummaryTable .total-row td.po-summary-equipment-cell{
            background: linear-gradient(180deg, rgba(21, 108, 138, 0.12), rgba(21, 108, 138, 0.08)) !important;
        }

        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable,
        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value{
            background: inherit !important;
            color: inherit !important;
        }

        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:hover,
        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:active,
        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:focus,
        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:focus-visible,
        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:hover,
        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:active,
        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:focus,
        body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:focus-visible{
            background: inherit !important;
            color: inherit !important;
        }

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable thead tr:first-child th.po-summary-equipment-group{
    background: linear-gradient(135deg, #114d63, #1b6f8a);
    border-bottom-color: #0f4457;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable thead tr:nth-child(2) th.po-summary-equipment-subhead,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody td.po-summary-equipment-cell{
    background: rgba(59, 148, 181, 0.12) !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .total-row td.po-summary-equipment-cell{
    background: rgba(59, 148, 181, 0.16) !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value{
    background: inherit !important;
    color: inherit !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:hover,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:active,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:focus,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:focus-visible,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:hover,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:active,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:focus,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:focus-visible{
    background: inherit !important;
    color: inherit !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable thead tr:first-child th.po-summary-equipment-group,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable thead tr:nth-child(2) th.po-summary-equipment-subhead,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody td.po-summary-equipment-cell,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .total-row td.po-summary-equipment-cell{
    border-color: #2f6f82 !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable thead th {
    background: linear-gradient(180deg, #76408f 0%, #5f2e76 100%);
    color: #fff;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr td {
    background-color: #241730 !important;
    color: #eadcf5 !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:hover td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:active td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:focus td,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:focus-within td {
    background-color: #2b1a39 !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .total-row td {
    background-color: #341e45 !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .shared-pallet-info-row td {
    background-color: #2d1a3b !important;
}

body.page-detail .close-details-button {
    margin-top: 20px;
}

body.page-forklift #backToDetailsLink {
    margin-bottom: 20px;
}

body.page-forklift #confirmLoadBtn {
    background-color: #28a745;
    color: #fff;
}

body.page-receiving #modeIronbark {
    margin-left: 15px;
}

body.page-receiving #noEntriesMessage {
    padding: 20px;
    color: var(--light-text);
    text-align: center;
}

body.page-receiving #quickAddModal .modal-content {
    max-width: 500px;
    height: auto;
}

body.page-receiving .quick-add-body,
body.page-receiving .summary-modal-body {
    padding: 20px;
    background-color: var(--secondary-bg);
    color: var(--primary-text);
}

body.page-receiving #quickAddMessage {
    margin-top: 15px;
}

body.page-receiving .summary-modal-body #summaryModalBody {
    padding: 0;
    white-space: pre-wrap;
    font-family: monospace;
    overflow-y: auto;
}

body.page-receiving #summaryDownloadLink {
    margin: 0 20px 20px;
    font-weight: 700;
}

body.page-receiving .summary-modal-footer {
    justify-content: flex-end;
}

body.page-receiving .wizard-error-message {
    display: block;
    margin: 0 0 1rem;
}

/* ===== RECEIVING AND SETTINGS SHARED CLEANUP ===== */
body.page-settings .tab-content {
    display: none;
}

body.page-settings .tab-content.active {
    display: block;
}

body.page-receiving .control-row,
body.page-receiving .control-group,
body.page-receiving .modal-footer,
body.page-settings .master-data-upload,
body.page-settings .audit-toolbar-actions,
body.page-settings .settings-inline {
    flex-wrap: wrap;
}

body.page-receiving .control-group,
body.page-receiving .selection-container,
body.page-receiving .list-panel,
body.page-receiving .list-panel-wide,
body.page-receiving .panel-header,
body.page-receiving .form-group-input-wrapper,
body.page-settings .service-card,
body.page-settings .service-card .form-grid > div,
body.page-settings .service-card .form-grid > input,
body.page-settings .service-card .form-grid > select,
body.page-settings .service-card .form-grid > textarea {
    min-width: 0;
}

body.page-receiving #quickAddModal,
body.page-receiving #grnWizardModal,
body.page-receiving #summaryModal,
body.page-settings #summaryModal,
body.page-settings #settingsDialogOverlay,
body.page-dispatch #dispatchStatusOverlay,
body.page-detail #claimLoadModal,
body.page-detail #printSetupModal,
body.page-detail #palletSheetModal {
    z-index: 1205;
}

body.page-receiving #quickAddModal {
    z-index: 1210;
}

body.page-receiving #grnWizardModal .modal-content {
    width: min(1400px, calc(100vw - 40px));
    max-width: min(1400px, calc(100vw - 40px));
    max-height: min(90vh, calc((var(--app-vh) * 100) - 28px));
}

body.page-receiving #grnWizardModal .modal-body {
    min-height: 0;
    padding: 1rem 1.25rem;
}

body.page-receiving #quickAddModal .modal-content,
body.page-receiving #summaryModal .modal-content,
body.page-settings .summary-modal-content {
    width: min(800px, calc(100vw - 40px));
    max-width: min(800px, calc(100vw - 40px));
}

body.page-receiving .selection-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.page-receiving .list-panel,
body.page-receiving .list-panel-wide {
    width: 100%;
}

body.page-receiving .list-view,
body.page-receiving .details-form-scroll-wrapper,
body.page-receiving #historicalDefaultsPanel .list-view,
body.page-settings .audit-table-wrap,
body.page-settings #summaryModalBody {
    overscroll-behavior: contain;
}

body.page-receiving #grnDetailsForm {
    grid-template-columns: minmax(150px, 0.34fr) minmax(120px, 0.18fr) minmax(0, 0.48fr);
}

body.page-receiving .form-group-label {
    align-self: center;
}

body.page-receiving .modal-footer > div {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.page-settings .summary-modal-content {
    padding: 0;
    overflow: hidden;
}

body.page-settings .summary-modal-header,
body.page-settings .settings-dialog-header {
    padding: 1rem 1.25rem;
}

body.page-settings .summary-modal-header .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface-soft);
    color: var(--app-muted);
}

body.page-settings #summaryModalBody {
    margin: 0 1.25rem;
}

body.page-settings .summary-modal .modal-footer {
    padding-top: 0.9rem;
}

body.page-dispatch #dispatchStatusOverlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--app-overlay-bg);
}

body.page-dispatch #dispatchStatusOverlay.show {
    display: flex;
}

body.page-dispatch #dispatchStatusDialog {
    width: min(1100px, calc(100vw - 40px));
    max-height: min(85vh, calc((var(--app-vh) * 100) - 32px));
    overflow: hidden;
}

@media (max-width: 1200px) {
    body.page-receiving .selection-container {
        grid-template-columns: 1fr;
    }

    body.page-receiving #grnDetailsForm {
        grid-template-columns: minmax(140px, 0.38fr) minmax(110px, 0.22fr) minmax(0, 0.4fr);
    }
}

@media (max-width: 900px) {
    body.page-receiving .control-row {
        gap: 12px;
        align-items: stretch;
    }

    body.page-receiving .control-group {
        width: 100%;
    }

    body.page-receiving #grnWizardModal .modal-content {
        width: min(100vw - 20px, 1400px);
        max-width: min(100vw - 20px, 1400px);
        height: auto;
    }

    body.page-receiving #grnDetailsForm {
        grid-template-columns: 1fr;
    }

    body.page-receiving .form-group-label {
        text-align: left;
        padding-right: 0;
        align-self: end;
    }

    body.page-receiving .form-group-display {
        min-height: 0;
        padding-left: 0;
    }
}

/* ===== SETTINGS FINAL NORMALIZATION ===== */
body.page-settings .section {
    margin-bottom: 24px !important;
    padding-bottom: 24px !important;
}

body.page-settings .section > h3 {
    margin: 0 0 10px !important;
}

body.page-settings .settings-intro,
body.page-settings .restricted-note {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body.page-settings .settings-readonly-section {
    opacity: 0.62;
    filter: saturate(0.72);
}

body.page-settings .settings-readonly-note {
    margin-bottom: 12px !important;
}

body.page-settings .form-grid {
    align-items: center !important;
    gap: 12px 18px !important;
}

body.page-settings .form-grid > label,
body.page-settings .service-card .form-grid > label {
    align-self: center !important;
    margin: 0 !important;
}

body.page-settings .service-grid,
body.page-settings .api-key-grid {
    align-items: stretch !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: 18px !important;
}

body.page-settings .settings-general-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.page-settings .settings-tab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.page-settings .settings-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
}

body.page-settings .settings-ai-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.page-settings .settings-receive-grid,
body.page-settings .api-key-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.page-settings .settings-directory-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

body.page-settings .service-grid > .service-card,
body.page-settings .api-key-grid > .service-card {
    height: 100%;
}

body.page-settings .settings-admin-grid .service-card {
    border: 1px solid var(--app-border) !important;
    background: var(--app-surface-soft) !important;
    box-shadow: none !important;
    gap: 12px !important;
    padding: 18px !important;
}

body.page-settings .settings-admin-grid .admin-flat-card {
    border: 1px solid var(--app-border) !important;
    background: var(--app-surface-soft) !important;
    box-shadow: none !important;
    padding: 18px !important;
}

body.page-settings .settings-admin-grid .admin-flat-card > h4,
body.page-settings .settings-admin-grid .admin-flat-card > p,
body.page-settings .settings-admin-grid .admin-flat-card > .settings-table-shell {
    margin: 0 !important;
}

body.page-settings .settings-admin-grid .admin-flat-card .settings-table-shell {
    background: var(--app-surface-strong) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 10px !important;
}

body.page-settings .settings-admin-grid .admin-flat-form {
    gap: 10px !important;
}

body.page-settings .settings-admin-grid .admin-flat-form .form-grid {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) !important;
    gap: 10px 16px !important;
}

body.page-settings .settings-admin-grid .admin-flat-form input:not([type="checkbox"]):not([type="radio"]),
body.page-settings .settings-admin-grid .admin-flat-form select,
body.page-settings .settings-admin-grid .admin-flat-form textarea {
    width: 100% !important;
    max-width: none !important;
}

body.page-settings .settings-admin-grid .admin-flat-form .settings-medium-input,
body.page-settings .settings-admin-grid .admin-flat-form .settings-short-input {
    width: 100% !important;
    max-width: none !important;
}

body.page-settings .settings-wide-card {
    grid-column: 1 / -1 !important;
}

/* STAGE1_ADMIN_REORG_20260523 — Admin tab visual order reshuffled
   so Users & Access shows first (previously buried at order:50),
   followed by Locations, Integrations, System Time, and finally
   Advanced Admin Tools (POD Manager, Suppliers, Audit Log). The
   DOM order is unchanged; this is CSS-only. Heading rows are
   injected inline in static/settings.html and use grid-column:
   1/-1 so they span the full width.  The settings-admin-group-heading
   selectors here have the same body.page-settings prefix so they
   beat the inline rules in settings.html when both are loaded. */
body.page-settings #stage1-admin-heading-users        { order: 10; }
body.page-settings #user-management-section           { order: 11; }
body.page-settings #stage1-admin-heading-locations    { order: 20; }
body.page-settings #location-directory-section        { order: 21; }
body.page-settings #location-management-section       { order: 22; }
body.page-settings #stage1-admin-heading-integrations { order: 30; }
body.page-settings #delivery-services-section         { order: 31; }
body.page-settings #stage1-admin-heading-time         { order: 40; }
body.page-settings #time-settings-section             { order: 41; }
body.page-settings #stage1-admin-heading-advanced     { order: 50; }
body.page-settings #pod-manager-section               { order: 51; }
body.page-settings #suppliers-manager-section         { order: 52; }
body.page-settings #audit-log-section                 { order: 53; }

body.page-settings .service-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 18px !important;
}

body.page-settings .service-card > h4,
body.page-settings .service-card > p,
body.page-settings .service-card > .form-grid,
body.page-settings .service-card > .settings-actions-row,
body.page-settings .service-card > #api-key-display,
body.page-settings .service-card > small {
    margin: 0 !important;
}

body.page-settings .service-card p,
body.page-settings .settings-intro,
body.page-settings small.hint {
    line-height: 1.5 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
}

body.page-settings .settings-card-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.page-settings .settings-card-actions {
    display: flex !important;
    justify-content: flex-end !important;
}

body.page-settings .settings-password-card {
    grid-column: 1 / -1 !important;
}

body.page-settings .settings-general-grid .service-card .form-grid {
    grid-template-columns: clamp(112px, 28%, 156px) minmax(0, 1fr) !important;
}

body.page-settings .settings-ai-grid .service-card .form-grid {
    grid-template-columns: clamp(114px, 30%, 164px) minmax(0, 1fr) !important;
}

body.page-settings .settings-tab-grid .service-card .form-grid {
    grid-template-columns: clamp(124px, 34%, 182px) minmax(0, 1fr) !important;
}

body.page-settings .settings-tab-grid .service-card .form-grid > div {
    min-width: 0;
}

body.page-settings .service-card .master-data-upload {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body.page-settings .service-card .master-data-upload .control-group {
    min-width: 0;
}

body.page-settings .settings-table-shell {
    border: 1px solid var(--app-border);
    border-radius: 10px;
    overflow: auto;
    background: var(--app-surface-strong);
    width: 100%;
}

body.page-settings .settings-table-shell table {
    margin-top: 0 !important;
}

body.page-settings .settings-table-shell th,
body.page-settings .settings-table-shell td {
    white-space: nowrap;
}

body.page-settings #volume-down-ptt-setting-row {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(126px, 156px) minmax(0, 1fr) !important;
    gap: 10px 14px !important;
    align-items: center !important;
}

body.page-settings #volume-down-ptt-setting-row > label {
    align-self: center !important;
}

body.page-settings #volume-down-ptt-setting-row > input {
    justify-self: start !important;
}

body.page-settings #volume-down-ptt-setting-row > small {
    grid-column: 2 !important;
}

body.page-settings .service-card .form-grid {
    align-items: center !important;
    gap: 10px 14px !important;
}

body.page-settings .service-card .form-grid > div,
body.page-settings .service-card .form-grid > input,
body.page-settings .service-card .form-grid > select,
body.page-settings .service-card .form-grid > textarea {
    min-width: 0;
}

body.page-settings .settings-short-input {
    width: min(100%, 12ch) !important;
    max-width: 12ch !important;
}

body.page-settings .settings-medium-input {
    width: min(100%, 22ch) !important;
    max-width: 22ch !important;
}

@media (max-width: 960px) {
    body.page-settings .form-grid {
        grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) !important;
    }

    body.page-settings .form-grid > label {
        grid-column: 1 !important;
    }

    body.page-settings .form-grid > div,
    body.page-settings .form-grid > input,
    body.page-settings .form-grid > select,
    body.page-settings .form-grid > button,
    body.page-settings .form-grid > small {
        grid-column: 2 !important;
    }

    body.page-settings .service-card .form-grid {
        grid-template-columns: minmax(108px, 140px) minmax(0, 1fr) !important;
    }

    body.page-settings .settings-general-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.page-settings .settings-tab-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.page-settings .settings-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.page-settings .settings-admin-grid .service-card {
        border: 1px solid var(--app-border) !important;
        background: var(--app-surface-soft) !important;
        box-shadow: none !important;
        padding: 16px !important;
    }

    body.page-settings .settings-admin-grid .admin-flat-form .form-grid {
        grid-template-columns: minmax(176px, 1fr) minmax(0, 1.2fr) !important;
    }

    body.page-settings .api-key-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.page-settings .settings-ai-grid,
    body.page-settings .settings-receive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.page-settings .form-grid,
    body.page-settings .master-data-upload {
        grid-template-columns: 1fr !important;
    }

    body.page-settings .form-grid > label,
    body.page-settings .form-grid > div,
    body.page-settings .form-grid > input,
    body.page-settings .form-grid > select,
    body.page-settings .form-grid > button,
    body.page-settings .form-grid > small {
        grid-column: auto !important;
    }

    body.page-settings .form-grid > label,
    body.page-settings .service-card .form-grid > label {
        align-self: start !important;
    }

    body.page-settings .settings-general-grid {
        grid-template-columns: 1fr !important;
    }

    body.page-settings .settings-tab-grid {
        grid-template-columns: 1fr !important;
    }

    body.page-settings .settings-admin-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.page-settings .settings-admin-grid .service-card {
        border: 1px solid var(--app-border) !important;
        background: var(--app-surface-soft) !important;
        box-shadow: none !important;
        border-radius: 14px !important;
        padding: 16px !important;
    }

    body.page-settings .settings-admin-grid .admin-flat-card .settings-table-shell {
        background: var(--app-surface-strong) !important;
        border: 1px solid var(--app-border) !important;
        border-radius: 10px !important;
    }

    body.page-settings .settings-admin-grid .service-card:last-child {
        border-bottom: 1px solid var(--app-border) !important;
    }

    body.page-settings .settings-admin-grid .service-card > h4,
    body.page-settings .settings-admin-grid .service-card > p,
    body.page-settings .settings-admin-grid .service-card > .settings-table-shell,
    body.page-settings .settings-admin-grid .service-card > .settings-card-form,
    body.page-settings .settings-admin-grid .service-card > .settings-section-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-settings .settings-admin-grid .admin-flat-form .form-grid {
        grid-template-columns: 1fr !important;
    }

    body.page-settings .settings-password-card {
        grid-column: auto !important;
    }

    body.page-settings #volume-down-ptt-setting-row {
        grid-template-columns: 1fr !important;
    }

    body.page-settings #volume-down-ptt-setting-row > small {
        grid-column: auto !important;
    }

    body.page-settings .settings-short-input,
    body.page-settings .settings-medium-input {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ===== SHARED TIPS ===== */
body.app-page .app-tips-launcher,
body.app-page .app-tips-card,
body.app-page .app-tutorial-modal {
    font-family: inherit;
}

body.app-page .app-tips-launcher {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 860;
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(21, 108, 138, 0.3);
    border-radius: 999px;
    background: linear-gradient(180deg, #f8fcff 0%, #ebf4f9 100%);
    color: var(--app-text);
    box-shadow: var(--app-shadow-soft);
    font-weight: 700;
    cursor: pointer;
}

body.app-page .app-tips-launcher.show {
    display: inline-flex;
}

body.app-page .app-tips-card {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 860;
    display: none;
    width: min(360px, calc(100vw - 36px));
    padding: 1rem;
    border: 1px solid rgba(21, 108, 138, 0.22);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 247, 251, 0.98) 100%);
    box-shadow: var(--app-shadow);
    color: var(--app-text);
}

body.app-page .app-tips-card.show {
    display: block;
}

body.app-page .app-tips-card-header,
body.app-page .app-tutorial-header,
body.app-page .app-tutorial-stage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.app-page .app-tips-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-primary);
    font-weight: 800;
}

body.app-page .app-tips-card h3,
body.app-page .app-tutorial-header h3,
body.app-page .app-tutorial-stage-header h4 {
    margin: 0;
    color: var(--app-heading);
}

body.app-page .app-tips-summary,
body.app-page .app-tutorial-intro,
body.app-page .app-tutorial-step-body {
    margin: 0;
    color: var(--app-muted);
    line-height: 1.5;
}

body.app-page .app-tips-list {
    margin: 0.85rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.5rem;
}

body.app-page .app-tips-list li {
    color: var(--app-text);
    line-height: 1.45;
}

body.app-page .app-tips-actions,
body.app-page .app-tutorial-footer,
body.app-page .app-tutorial-mini-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

body.app-page .app-tips-card button,
body.app-page .app-tutorial-modal button {
    width: auto;
    min-width: 0;
    border: 0;
    border-radius: 12px;
    padding: 0.65rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

body.app-page .app-tips-card .app-tips-primary,
body.app-page .app-tutorial-modal .app-tips-primary {
    background: linear-gradient(180deg, #2e88ab 0%, var(--app-primary) 100%);
    color: #fff;
}

body.app-page .app-tips-card .app-tips-secondary,
body.app-page .app-tutorial-modal .app-tips-secondary {
    background: var(--app-surface-muted);
    color: var(--app-text);
}

body.app-page .app-tips-card .app-tips-icon-button,
body.app-page .app-tutorial-modal .app-tips-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--app-muted);
    font-size: 1.45rem;
    line-height: 1;
}

body.app-page .app-tutorial-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: var(--app-overlay-bg);
}

body.app-page .app-tutorial-modal.show {
    display: flex;
}

body.app-page .app-tutorial-dialog {
    width: min(820px, calc(100vw - 44px));
    max-height: min(calc(var(--app-vh, 1vh) * 100 - 32px), 900px);
    max-height: min(calc(100dvh - 32px), 900px);
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--app-border);
    background: linear-gradient(180deg, #fdfefe 0%, #eef5f8 100%);
    box-shadow: var(--app-shadow);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
}

body.app-page .app-tutorial-body {
    display: grid;
    grid-template-columns: minmax(150px, 186px) minmax(0, 1fr);
    gap: 0.85rem;
    margin-top: 0.85rem;
    min-height: 0;
    overflow: auto;
}

body.app-page .app-tutorial-outline {
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

body.app-page .app-tutorial-step-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
    padding: 0.75rem 0.85rem;
    background: var(--app-surface-strong);
    color: var(--app-text);
    border: 1px solid var(--app-border);
}

body.app-page .app-tutorial-step-link.is-active {
    border-color: rgba(21, 108, 138, 0.44);
    background: rgba(21, 108, 138, 0.12);
}

body.app-page .app-tutorial-step-link-index,
body.app-page .app-tutorial-counter,
body.app-page .app-tutorial-mini-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(21, 108, 138, 0.14);
    color: var(--app-primary);
    font-weight: 800;
    font-size: 0.82rem;
}

body.app-page .app-tutorial-stage {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

body.app-page .app-tutorial-preview {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

body.app-page .app-tutorial-preview-card {
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow-soft);
    padding: 1rem;
}

body.app-page .app-tutorial-preview-card.app-tutorial-preview-card-compact {
    padding: 0.85rem;
}

body.app-page .app-tutorial-preview-label {
    margin-bottom: 0.8rem;
    color: var(--app-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.app-page .app-tutorial-mini-form,
body.app-page .app-tutorial-mini-stack {
    display: grid;
    gap: 0.7rem;
}

body.app-page .app-tutorial-mini-stack-tight {
    gap: 0.45rem;
}

body.app-page .app-tutorial-mini-field,
body.app-page .app-tutorial-mini-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-text);
}

body.app-page .app-tutorial-mini-focus {
    border-color: rgba(21, 108, 138, 0.44);
    box-shadow: inset 0 0 0 1px rgba(21, 108, 138, 0.16);
}

body.app-page .app-tutorial-mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.62rem 0.95rem;
    border-radius: 12px;
    background: var(--app-surface-muted);
    color: var(--app-text);
}

body.app-page .app-tutorial-mini-button-primary {
    background: linear-gradient(180deg, #2e88ab 0%, var(--app-primary) 100%);
    color: #fff;
}

body.app-page .app-tutorial-mini-button-danger {
    background: linear-gradient(180deg, #d95e5e 0%, var(--app-danger) 100%);
    color: #fff;
}

body.app-page .app-tutorial-mini-status-open {
    background: linear-gradient(180deg, #f6b451 0%, #e29522 100%);
    color: #fff;
}

body.app-page .app-tutorial-mini-status-ready {
    background: linear-gradient(180deg, #3ca86d 0%, var(--app-success) 100%);
    color: #fff;
}

body.app-page .app-tutorial-mini-status-error {
    background: linear-gradient(180deg, #dc5d5d 0%, var(--app-danger) 100%);
    color: #fff;
}

body.app-page .app-tutorial-mini-note {
    color: var(--app-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

body.app-page .app-tutorial-mini-modal,
body.app-page .app-tutorial-mini-warning {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border-radius: 14px;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
}

body.app-page .app-tutorial-mini-warning p {
    margin: 0;
    color: var(--app-muted);
}

body.app-page .app-tutorial-mini-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

body.app-page .app-tutorial-mini-toolbar.wrap {
    flex-wrap: wrap;
    justify-content: flex-start;
}

body.app-page .app-tutorial-mini-scroll {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--app-surface-strong);
}

body.app-page .app-tutorial-mini-line {
    height: 10px;
    border-radius: 999px;
    background: rgba(82, 96, 109, 0.18);
}

body.app-page .app-tutorial-mini-line.short {
    width: 64%;
}

body.app-page .app-tutorial-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

body.app-page .app-tutorial-mini-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.app-page .app-tutorial-mini-tile {
    min-height: 92px;
    border-radius: 14px;
    background: var(--app-surface-soft);
    color: var(--app-text);
    border: 1px solid var(--app-border);
}

body.app-page .app-tutorial-mini-table {
    display: grid;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    overflow: hidden;
}

body.app-page .app-tutorial-mini-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 0.8fr 1.1fr;
    gap: 0.6rem;
    align-items: center;
    padding: 0.8rem 0.9rem;
    background: var(--app-surface-strong);
}

body.app-page .app-tutorial-mini-table-row.app-tutorial-mini-load-row {
    grid-template-columns: 0.7fr 0.9fr 1.6fr;
}

body.app-page .app-tutorial-mini-table-head {
    background: rgba(21, 108, 138, 0.12);
    font-weight: 800;
}

body.app-page .app-tutorial-mini-link {
    color: var(--app-primary);
    font-weight: 700;
}

body.app-page .app-tutorial-mini-layout-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

body.app-page .app-tutorial-mini-truck-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

body.app-page .app-tutorial-mini-truck-head,
body.app-page .app-tutorial-mini-truck-slot,
body.app-page .app-tutorial-mini-truck-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.6rem 0.72rem;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-strong);
    color: var(--app-text);
    font-weight: 700;
}

body.app-page .app-tutorial-mini-truck-head {
    min-height: 34px;
    background: rgba(21, 108, 138, 0.12);
    color: var(--app-primary);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.app-page .app-tutorial-mini-truck-separator {
    grid-column: 1 / -1;
    min-height: 34px;
    background: var(--app-surface-muted);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

body.app-page .app-tutorial-mini-layout-grid span,
body.app-page .app-tutorial-mini-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 12px;
    background: var(--app-surface-muted);
    color: var(--app-text);
    font-weight: 700;
}

body.app-page .app-tutorial-mini-arrow {
    min-height: 30px;
    background: transparent;
    color: var(--app-primary);
}

html[data-app-theme="dark"] body.app-page .app-tips-launcher,
html[data-app-theme="dark"] body.app-page .app-tips-card,
html[data-app-theme="dark"] body.app-page .app-tutorial-dialog {
    border-color: var(--app-border);
    background: linear-gradient(180deg, rgba(24, 35, 47, 0.98) 0%, rgba(16, 25, 34, 0.98) 100%);
}

html[data-app-theme="dark"] body.app-page .app-help-popover-inner {
    border-color: #7c6518;
    background: linear-gradient(180deg, rgba(43, 36, 14, 0.98) 0%, rgba(28, 24, 12, 0.98) 100%);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

html[data-app-theme="dark"] body.app-page .app-help-popover-title {
    color: #f3d26b;
}

html[data-app-theme="dark"] body.app-page .app-help-popover-body {
    color: #f0ead8;
    scrollbar-color: rgba(156, 180, 199, 0.78) transparent;
}

html[data-app-theme="dark"] body.app-page .app-help-popover-body::-webkit-scrollbar-thumb {
    background: rgba(156, 180, 199, 0.72);
}

html[data-app-theme="dark"] body.app-page .app-help-popover-body::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 180, 199, 0.92);
}

@media (max-width: 760px) {
    body.app-page .app-tips-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }

    body.app-page .app-tips-launcher {
        left: 12px;
        bottom: 12px;
    }

    body.app-page .app-tutorial-modal {
        padding: 12px;
    }

    body.app-page .app-tutorial-dialog {
        width: min(100vw - 24px, 100%);
        max-height: calc(var(--app-vh, 1vh) * 100 - 16px);
        max-height: calc(100dvh - 16px);
        padding: 0.8rem;
    }

    body.app-page .app-tutorial-body {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    body.app-page .app-tutorial-mini-grid,
    body.app-page .app-tutorial-mini-grid-three,
    body.app-page .app-tutorial-mini-layout-grid,
    body.app-page .app-tutorial-mini-truck-board,
    body.app-page .app-tutorial-mini-table-row {
        grid-template-columns: 1fr;
    }

    body.app-page .app-tutorial-mini-truck-separator {
        grid-column: auto;
    }

    body.app-page .app-tutorial-header,
    body.app-page .app-tutorial-stage-header,
    body.app-page .app-tutorial-footer,
    body.app-page .app-tips-actions {
        gap: 0.55rem;
    }

    body.app-page .app-tutorial-outline {
        grid-auto-flow: column;
        grid-auto-columns: minmax(116px, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.2rem;
    }

    body.app-page .app-tutorial-step-link {
        padding: 0.65rem 0.72rem;
    }

    body.app-page .app-tutorial-preview-card,
    body.app-page .app-tutorial-preview-card.app-tutorial-preview-card-compact {
        padding: 0.72rem;
    }

    body.app-page .app-tutorial-preview-label {
        margin-bottom: 0.55rem;
        font-size: 0.76rem;
    }

    body.app-page .app-tutorial-intro,
    body.app-page .app-tutorial-step-body,
    body.app-page .app-tips-summary,
    body.app-page .app-tips-list li,
    body.app-page .app-tutorial-mini-note,
    body.app-page .app-tutorial-mini-warning p {
        font-size: 0.88rem;
    }

    body.app-page .app-tutorial-mini-form,
    body.app-page .app-tutorial-mini-stack,
    body.app-page .app-tutorial-preview,
    body.app-page .app-tutorial-stage {
        gap: 0.6rem;
    }

    body.app-page .app-tutorial-mini-field,
    body.app-page .app-tutorial-mini-chip,
    body.app-page .app-tutorial-mini-button {
        min-height: 34px;
        padding: 0.55rem 0.72rem;
        font-size: 0.84rem;
    }

    body.app-page .app-tutorial-mini-tile {
        min-height: 74px;
        font-size: 0.88rem;
    }

    body.app-page .app-tutorial-mini-table-row {
        padding: 0.65rem 0.72rem;
        gap: 0.45rem;
        font-size: 0.84rem;
    }

    body.app-page .app-tutorial-mini-warning,
    body.app-page .app-tutorial-mini-modal {
        padding: 0.72rem;
    }
}

/* final badge/layout overrides */
body.app-page .app-help-badge,
body.app-page .app-help-badge-inline,
body.app-page .app-help-badge-plain {
    color: #4f3a00 !important;
}

body.app-page .app-help-badge-info {
    color: #384550 !important;
}

body.app-page .app-help-badge-warning {
    color: #7d1d1d !important;
}

body.page-dispatch .dispatch-upload-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.page-dispatch .dispatch-upload-row input[type="file"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

body.page-dispatch .dispatch-upload-row button,
body.page-dispatch .dispatch-upload-row .app-help-badge {
    flex: 0 0 auto !important;
    margin: 0 !important;
    align-self: center !important;
}

body.page-dispatch #dataTable {
    table-layout: auto !important;
}

body.page-dispatch #dataTable th,
body.page-detail #loadsTable th {
    overflow: visible !important;
}

body.page-dispatch #dataTable th,
body.page-dispatch #dataTable td {
    border-right: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
    border-left: 0;
    border-top: 0;
    text-align: center;
}

body.page-dispatch #dataTable td:first-child,
body.page-dispatch #dataTable th:first-child {
    text-align: center;
}

body.page-dispatch #dataTable th:first-child,
body.page-dispatch #dataTable td:first-child {
    border-left: 0;
}

body.page-dispatch #dataTable thead th {
    border-top: 0;
}

body.page-dispatch #dataTable thead th:first-child {
    border-top-left-radius: 16px;
}

body.page-dispatch #dataTable thead th:last-child {
    border-top-right-radius: 16px;
}

body.page-dispatch #dataTable th:first-child,
body.page-dispatch #dataTable td:first-child {
    width: 1% !important;
    white-space: nowrap !important;
}

body.page-dispatch #dataTable .app-table-heading-with-help,
body.page-detail #loadsTable .app-table-heading-with-help {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

body.page-detail #loadsTable {
    table-layout: auto !important;
}

body.page-detail #loadsTable th:last-child,
body.page-detail #loadsTable td.actions-cell {
    width: 1% !important;
    white-space: nowrap !important;
    min-width: 118px !important;
}

@media print {
    body.page-detail {
        padding: 0 !important;
        background: #ffffff !important;
    }

    body.page-detail .container > * {
        display: none !important;
    }

    body.page-detail .container #loadItemDetailsView,
    body.page-detail .container #loadItemDetailsView * {
        visibility: visible !important;
    }

    body.page-detail .container #loadItemDetailsView {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid;
    }

    body.page-detail #loadItemDetailsView .item-filter-toolbar,
    body.page-detail #loadItemDetailsView .close-details-button,
    body.page-detail #loadItemDetailsView .app-help-badge,
    body.page-detail #loadItemDetailsView #excludedDiscrepancyWarning,
    body.page-detail #loadItemDetailsView #itemDetailsWarnings {
        display: none !important;
    }

    body.page-detail #loadItemDetailsView #itemDetailsTable,
    body.page-detail #loadItemDetailsView #loadPOSummaryTable {
        page-break-inside: avoid;
    }

    body.page-detail #loadItemDetailsView .load-print-context {
        display: block !important;
        margin: 0 0 10px;
        color: #000 !important;
    }

    body.page-detail #loadItemDetailsView table {
        width: 100% !important;
    }
}

body.page-forklift .pallet-entry-main-row {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 96px) minmax(72px, 84px) minmax(0, 1fr) !important;
}

body.page-forklift .pallet-entry-help-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.15rem;
}

body.page-forklift .pallet-entry-help-row .app-help-badge {
    justify-self: end !important;
}

html[data-app-theme="dark"] body.app-page .app-help-popover-inner {
    border-color: #7c6518 !important;
    background: linear-gradient(180deg, rgba(43, 36, 14, 0.98) 0%, rgba(28, 24, 12, 0.98) 100%) !important;
}

html[data-app-theme="dark"] body.app-page .app-help-popover-title {
    color: #f3d26b !important;
}

html[data-app-theme="dark"] body.app-page .app-help-popover-body {
    color: #f0ead8 !important;
}

html[data-app-theme="dark"] body.app-page .app-help-badge-info {
    border-color: #627283;
    background: linear-gradient(180deg, #2c3945 0%, #202a34 100%);
    color: #d8e3ec !important;
}

html[data-app-theme="dark"] body.app-page .app-help-badge-info::before {
    background: rgba(216, 227, 236, 0.14);
}

html[data-app-theme="dark"] body.app-page .app-help-badge-warning {
    border-color: #b95b5b;
    background: linear-gradient(180deg, #613437 0%, #442427 100%);
    color: #ffd6d6 !important;
}

html[data-app-theme="dark"] body.app-page .app-help-badge-warning::before {
    background: rgba(255, 214, 214, 0.16);
}

@media (max-width: 1100px) {
    body.page-dispatch .dispatch-upload-row {
        flex-wrap: wrap !important;
    }

    body.page-forklift .pallet-entry-main-row {
        grid-template-columns: minmax(0, 1fr) 78px 66px minmax(0, 1fr) auto !important;
    }
}

@media (max-width: 760px) {
    body.page-forklift .pallet-entry-main-row {
        grid-template-columns: minmax(0, 1fr) 72px 60px minmax(0, 1fr) auto !important;
    }
}

/* final item-details header wrapping */
body.page-detail #itemDetailsTable {
    table-layout: fixed !important;
}

body.page-detail #itemDetailsTable th,
body.page-detail #itemDetailsTable td {
    text-align: center;
    vertical-align: middle;
}

body.page-detail #itemDetailsTable th:nth-child(1),
body.page-detail #itemDetailsTable td:nth-child(1) {
    text-align: left;
    width: 24% !important;
}

body.page-detail #itemDetailsTable th:nth-child(2),
body.page-detail #itemDetailsTable td:nth-child(2) { width: 8% !important; }
body.page-detail #itemDetailsTable th:nth-child(3),
body.page-detail #itemDetailsTable td:nth-child(3) { width: 7% !important; }
body.page-detail #itemDetailsTable th:nth-child(4),
body.page-detail #itemDetailsTable td:nth-child(4) { width: 8% !important; }
body.page-detail #itemDetailsTable th:nth-child(5),
body.page-detail #itemDetailsTable td:nth-child(5) { width: 8% !important; }
body.page-detail #itemDetailsTable th:nth-child(6),
body.page-detail #itemDetailsTable td:nth-child(6) { width: 9% !important; }
body.page-detail #itemDetailsTable th:nth-child(7),
body.page-detail #itemDetailsTable td:nth-child(7) { width: 9% !important; }
body.page-detail #itemDetailsTable th:nth-child(8),
body.page-detail #itemDetailsTable td:nth-child(8) { width: 11% !important; }
body.page-detail #itemDetailsTable th:nth-child(9),
body.page-detail #itemDetailsTable td:nth-child(9) { width: 8% !important; }
body.page-detail #itemDetailsTable th:nth-child(10),
body.page-detail #itemDetailsTable td:nth-child(10) { width: 8% !important; }

body.page-detail #itemDetailsTable th:nth-child(8),
body.page-detail #itemDetailsTable th:nth-child(9),
body.page-detail #itemDetailsTable th:nth-child(10) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
}

body.page-detail #itemDetailsTable th:nth-child(8) .item-details-header-help,
body.page-detail #itemDetailsTable th:nth-child(9) .item-details-header-help {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.18rem !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
}

body.page-detail #itemDetailsTable th:nth-child(8) .item-details-header-help .app-help-badge,
body.page-detail #itemDetailsTable th:nth-child(9) .item-details-header-help .app-help-badge {
    display: inline-flex !important;
    margin: 0 !important;
    align-self: center !important;
}

body.page-detail #itemDetailsTable th:nth-child(8) .item-details-header-help-text,
body.page-detail #itemDetailsTable th:nth-child(9) .item-details-header-help-text {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.05 !important;
}

body.page-detail #itemDetailsTable td:nth-child(8),
body.page-detail #itemDetailsTable td:nth-child(9),
body.page-detail #itemDetailsTable td:nth-child(10) {
    padding-inline: 2px !important;
}

/* final detail-page input sizing and dark-state palette */
body.page-detail .custom-checkbox-container input[type="number"] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding-inline: 0.1rem !important;
    padding-block: 0.1rem !important;
    height: 28px !important;
    text-align: center !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums;
}

body.page-detail #itemDetailsTable td:nth-child(8) {
    line-height: 1 !important;
}

body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container,
body.page-detail #itemDetailsTable td:nth-child(9) .custom-checkbox-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.28rem !important;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    line-height: 1 !important;
}

body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container {
    min-width: 100% !important;
}

body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container input[type="checkbox"],
body.page-detail #itemDetailsTable td:nth-child(9) .custom-checkbox-container input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    vertical-align: middle !important;
    align-self: center !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    transform: scale(1.35);
    transform-origin: center;
}

body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container input[type="number"] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 0.12rem !important;
    margin: 0 !important;
    line-height: 1 !important;
}

body.page-detail #itemDetailsTable tbody tr.load-completed-row td {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
}

body.page-detail #itemDetailsTable tbody tr.load-completed-row .custom-checkbox-container input:disabled {
    cursor: not-allowed !important;
}

body.page-detail #itemDetailsTable tbody tr.load-completed-row .custom-checkbox-container input[type="number"]:disabled {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-muted) !important;
    border-color: var(--app-border) !important;
}

body.page-detail #itemDetailsTable tbody tr.load-completed-row .custom-checkbox-container input[type="checkbox"]:disabled {
    opacity: 0.6 !important;
}

body.page-detail #itemDetailsTable .shortage-input-highlight {
    background-color: #fff6bf !important;
    border-color: #d4a017 !important;
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.22) !important;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable .shortage-input-highlight {
    background-color: #4b3a12 !important;
    border-color: #e0b03f !important;
    box-shadow: 0 0 0 2px rgba(224, 176, 63, 0.24) !important;
    color: #f4e3ab !important;
}

#shortageEditFloatingBadge{
    position: fixed;
    z-index: 2147483647;
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 4px 8px;
    border: 1px solid var(--app-border);
    border-radius: 5px;
    background: var(--app-surface-soft);
    color: var(--app-text);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

html[data-app-theme="dark"] #shortageEditFloatingBadge{
    background: #16222c;
    border-color: #314251;
    color: #d8e3ec;
    box-shadow: 0 10px 24px rgba(0,0,0,0.34);
}

@media (min-width: 761px) {
    body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container {
        gap: 0.35rem !important;
    }

    body.page-detail .custom-checkbox-container input[type="number"],
    body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container input[type="number"] {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }

    body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container input[type="checkbox"],
    body.page-detail #itemDetailsTable td:nth-child(9) .custom-checkbox-container input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }
}

@media (max-width: 760px) {
    body.page-detail .table-shell.table-shell-scroll-x {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        overscroll-behavior-x: contain !important;
    }

    body.page-detail #itemDetailsTable {
        width: 1094px !important;
        min-width: 1094px !important;
        table-layout: fixed !important;
    }

    body.page-detail #itemDetailsTable th:nth-child(1),
    body.page-detail #itemDetailsTable td:nth-child(1) {
        width: 280px !important;
        min-width: 280px !important;
    }

    body.page-detail #itemDetailsTable th:nth-child(2),
    body.page-detail #itemDetailsTable td:nth-child(2),
    body.page-detail #itemDetailsTable th:nth-child(3),
    body.page-detail #itemDetailsTable td:nth-child(3),
    body.page-detail #itemDetailsTable th:nth-child(4),
    body.page-detail #itemDetailsTable td:nth-child(4),
    body.page-detail #itemDetailsTable th:nth-child(5),
    body.page-detail #itemDetailsTable td:nth-child(5),
    body.page-detail #itemDetailsTable th:nth-child(6),
    body.page-detail #itemDetailsTable td:nth-child(6),
    body.page-detail #itemDetailsTable th:nth-child(7),
    body.page-detail #itemDetailsTable td:nth-child(7) {
        width: 84px !important;
        min-width: 84px !important;
    }

    body.page-detail #itemDetailsTable th:nth-child(8),
    body.page-detail #itemDetailsTable td:nth-child(8) {
        width: 118px !important;
        min-width: 118px !important;
    }

    body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-width: 100% !important;
        white-space: nowrap !important;
    }

    body.page-detail .custom-checkbox-container input[type="number"] {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        padding-inline: 0.1rem !important;
        padding-block: 0.08rem !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    body.page-detail #itemDetailsTable th:nth-child(9),
    body.page-detail #itemDetailsTable td:nth-child(9),
    body.page-detail #itemDetailsTable th:nth-child(10),
    body.page-detail #itemDetailsTable td:nth-child(10) {
        width: 96px !important;
        min-width: 96px !important;
    }

    body.page-detail #itemDetailsTable th:nth-child(8),
    body.page-detail #itemDetailsTable td:nth-child(8),
    body.page-detail #itemDetailsTable th:nth-child(9),
    body.page-detail #itemDetailsTable td:nth-child(9),
    body.page-detail #itemDetailsTable th:nth-child(10),
    body.page-detail #itemDetailsTable td:nth-child(10) {
        position: static !important;
        background-clip: padding-box !important;
        right: auto !important;
        left: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container input[type="checkbox"],
    body.page-detail #itemDetailsTable td:nth-child(9) .custom-checkbox-container input[type="checkbox"],
    body.page-detail #itemDetailsTable td:nth-child(10) .custom-checkbox-container input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        transform: none !important;
    }

            body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container input[type="checkbox"] {
                display: inline-flex !important;
            }

            body.page-detail #itemDetailsTable td:nth-child(8) .custom-checkbox-container input[type="number"] {
                scroll-margin-block: 30vh;
            }
        }

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr {
    --detail-item-row-bg: #18232e;
    --detail-item-row-text: #dce6ee;
    --detail-item-row-border: #2c3b47;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.po-group-row {
    --detail-item-row-bg: #31516a;
    --detail-item-row-text: #f5fbff;
    --detail-item-row-border: #4a6c86;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.shared-pallet-info-row {
    --detail-item-row-bg: #243746;
    --detail-item-row-text: #d6e1e8;
    --detail-item-row-border: #3b5364;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.conflict-row {
    --detail-item-row-bg: #6c3640;
    --detail-item-row-text: #fff0f3;
    --detail-item-row-border: #9a616b;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.partial-stock-row {
    --detail-item-row-bg: var(--app-detail-partial-stock-bg);
    --detail-item-row-text: var(--app-detail-partial-stock-text);
    --detail-item-row-border: var(--app-detail-partial-stock-border);
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.truck-only-row {
    --detail-item-row-bg: var(--app-detail-truck-only-bg);
    --detail-item-row-text: var(--app-detail-truck-only-text);
    --detail-item-row-border: var(--app-detail-truck-only-border);
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.warehouse-only-row {
    --detail-item-row-bg: var(--app-detail-warehouse-only-bg);
    --detail-item-row-text: var(--app-detail-warehouse-only-text);
    --detail-item-row-border: var(--app-detail-warehouse-only-border);
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.load-completed-row td {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) !important;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr td,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:hover td,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:active td,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:focus td,
html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr:focus-within td {
    background-color: var(--detail-item-row-bg) !important;
    color: var(--detail-item-row-text) !important;
    border-color: var(--detail-item-row-border) !important;
    background-image: none !important;
}

html[data-app-theme="dark"] body.page-detail .app-touch-input #itemDetailsTable tbody tr:hover td {
    background-color: var(--detail-item-row-bg) !important;
    color: var(--detail-item-row-text) !important;
    border-color: var(--detail-item-row-border) !important;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.load-completed-row td {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) !important;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.load-completed-row .custom-checkbox-container input[type="number"]:disabled {
    background-color: #18232e !important;
    color: #9eb0bf !important;
    border-color: #314251 !important;
}

html[data-app-theme="dark"] body.page-detail #itemDetailsTable tbody tr.load-completed-row .custom-checkbox-container input[type="checkbox"]:disabled {
    opacity: 0.5 !important;
}

html[data-app-theme="dark"] body.page-detail .legend-truck-only .item-state-legend-swatch {
    background: var(--app-detail-truck-only-bg);
    border-color: var(--app-detail-truck-only-border);
}

html[data-app-theme="dark"] body.page-detail .legend-partial-stock .item-state-legend-swatch {
    background: var(--app-detail-partial-stock-bg);
    border-color: var(--app-detail-partial-stock-border);
}

html[data-app-theme="dark"] body.page-detail .legend-in-warehouse .item-state-legend-swatch {
    background: var(--app-detail-warehouse-only-bg);
    border-color: var(--app-detail-warehouse-only-border);
}

html[data-app-theme="dark"] body.page-detail .legend-error .item-state-legend-swatch {
    background: var(--app-detail-legend-error-swatch-bg);
    border-color: var(--app-detail-legend-error-swatch-border);
}

/* Remove the viewport-sized inner wrapper on dispatch/detail so the page
   itself scrolls instead of an almost full-screen box. */
body.page-dispatch,
body.page-detail {
    margin: 0 !important;
    padding: 0 !important;
}

body.page-dispatch .container,
body.page-detail .container {
    display: block !important;
    width: auto !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding:
        max(10px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

@media (max-width: 1100px) and (orientation: landscape) {
    body.page-dispatch .container,
    body.page-detail .container {
        width: min(100%, calc(100dvw - (2 * max(12px, env(safe-area-inset-left), env(safe-area-inset-right))))) !important;
        max-width: min(100%, calc(100dvw - (2 * max(12px, env(safe-area-inset-left), env(safe-area-inset-right))))) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
        padding-right: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
    }
}

@media (min-width: 961px) {
    body.app-page:not(.page-login) {
        margin: 0 !important;
    }

    body.app-page:not(.page-login):not(.page-forklift) .container {
        width: min(calc(100vw - 48px), 1800px) !important;
        max-width: min(calc(100vw - 48px), 1800px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html body.app-page.page-forklift .container,
    html body.app-page.page-forklift > .container {
        width: 490px !important;
        max-width: 490px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

body.page-detail #loadPOSummaryTable tbody tr:hover td.po-summary-equipment-cell,
body.page-detail #loadPOSummaryTable tbody tr:active td.po-summary-equipment-cell,
body.page-detail #loadPOSummaryTable tbody tr:focus td.po-summary-equipment-cell,
body.page-detail #loadPOSummaryTable tbody tr:focus-within td.po-summary-equipment-cell {
    background: linear-gradient(180deg, rgba(21, 108, 138, 0.11), rgba(21, 108, 138, 0.06)) !important;
    background-color: rgba(21, 108, 138, 0.11) !important;
    color: inherit !important;
}

body.page-detail #loadPOSummaryTable .total-row td.po-summary-equipment-cell {
    background: linear-gradient(180deg, rgba(21, 108, 138, 0.12), rgba(21, 108, 138, 0.08)) !important;
    background-color: rgba(21, 108, 138, 0.12) !important;
}

body.page-detail #loadPOSummaryTable .total-row:hover td.po-summary-equipment-cell,
body.page-detail #loadPOSummaryTable .total-row:active td.po-summary-equipment-cell,
body.page-detail #loadPOSummaryTable .total-row:focus td.po-summary-equipment-cell,
body.page-detail #loadPOSummaryTable .total-row:focus-within td.po-summary-equipment-cell {
    background: linear-gradient(180deg, rgba(21, 108, 138, 0.12), rgba(21, 108, 138, 0.08)) !important;
    background-color: rgba(21, 108, 138, 0.12) !important;
}

body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:hover,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:active,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:focus,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:focus-visible,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:hover,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:active,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:focus,
body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:focus-visible {
    background: inherit !important;
    color: inherit !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:hover td.po-summary-equipment-cell,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:active td.po-summary-equipment-cell,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:focus td.po-summary-equipment-cell,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable tbody tr:focus-within td.po-summary-equipment-cell {
    background: rgba(59, 148, 181, 0.12) !important;
    background-color: rgba(59, 148, 181, 0.12) !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .total-row td.po-summary-equipment-cell {
    background: rgba(59, 148, 181, 0.16) !important;
    background-color: rgba(59, 148, 181, 0.16) !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .total-row:hover td.po-summary-equipment-cell,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .total-row:active td.po-summary-equipment-cell,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .total-row:focus td.po-summary-equipment-cell,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable .total-row:focus-within td.po-summary-equipment-cell {
    background: rgba(59, 148, 181, 0.16) !important;
    background-color: rgba(59, 148, 181, 0.16) !important;
}

html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:hover,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:active,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:focus,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable:focus-visible,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:hover,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:active,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:focus,
html[data-app-theme="dark"] body.page-detail #loadPOSummaryTable td.po-summary-equipment-cell .copyable-value:focus-visible {
    background: inherit !important;
    color: inherit !important;
}

/* ============================================================
   UISTYLE2 — Shared UI Component Foundation (additive, append-only)

   This block was added by stage UISTYLE2 (2026-05-11). It defines
   the canonical shared UI vocabulary the audit reports
   (THEME1 + UISTYLE1) recommended:

     • theme variable aliases (bare names → existing --app-* tokens)
     • new tokens (--focus-ring, --input-border, --disabled-*,
       --font-size-*, --info-bg, --surface-2/-3, --pill-* family)
     • shared component classes: .app-btn*, .app-btn-mobile*,
       .app-toolbar*, .app-card, .app-drawer*, .app-table*,
       .app-pill*, .app-alert*, .app-modal-* contract,
       .app-form-*, .app-validation*, .app-empty-state, etc.
     • Scheduler-specific aliases: .sched-bar / .sched-segment /
       .sched-handle (all pointing at the existing .ops-* set)

   This block ONLY adds new selectors. It does not change a single
   existing rule above. Pages that don't use the new classes look
   identical. See docs/uistyle2_shared_ui_component_foundation_report.md.
   ============================================================ */

/* ---- Variable aliases (bare-name tokens point at existing --app-*) ---- */
:root {
    /* Surfaces */
    --surface:        var(--app-surface-strong);
    --surface-2:      var(--app-surface-soft);
    --surface-3:      var(--app-surface-muted);
    /* Text */
    --text:           var(--app-text);
    --text-muted:     var(--app-muted);
    /* OPSDARKUI5 — `--app-text-muted` was referenced by several modal /
     * popover close-× buttons and hint texts but was NEVER defined, so
     * it silently used each rule's literal fallback. Alias it to the
     * themed muted colour so those elements follow the active theme. */
    --app-text-muted: var(--app-muted);
    /* Borders */
    --border:         var(--app-border);
    --border-strong:  var(--app-border-strong);
    /* Brand / semantic */
    --accent:         var(--app-primary);
    --accent-strong:  var(--app-primary-strong);
    --danger:         var(--app-danger);
    --warning:        var(--app-warning);
    --success:        var(--app-success);
    /* OPSDARKUI2 — `--app-warning-bg` / `--app-warning-fg` were used by
     * several ops-board warning blocks (slice warnings, the
     * missing-return block, DIFOT readiness) but were NEVER defined in
     * either theme, so they fell back to LIGHT literals (#fff7ed /
     * #92400e) — a glaring light box in dark mode. Alias them to the
     * existing theme-aware warning surface/text vars so they follow the
     * active theme. */
    --app-warning-bg: var(--app-surface-warning);
    --app-warning-fg: var(--app-warning-text);
    /* Info family — derive a base from the existing -text + -border pair */
    --info:           #1976a8;
    --info-bg:        var(--app-surface-info);
    --info-text:      var(--app-info-text);
    --info-border:    var(--app-info-border);
    /* Effects */
    --shadow:         var(--app-shadow);
    --shadow-soft:    var(--app-shadow-soft);
    --overlay-bg:     var(--app-overlay-bg);
    --focus-ring:     0 0 0 3px rgba(21, 108, 138, 0.32);
    /* Inputs */
    --input-bg:       var(--app-input-bg);
    --input-text:     var(--app-input-text);
    --input-border:   var(--app-border);
    /* Disabled */
    --disabled-bg:    #e9eef3;
    --disabled-text:  #98a3ae;
    /* Radii */
    --radius-sm:      var(--app-radius-sm);
    --radius-md:      var(--app-radius-md);
    --radius-lg:      var(--app-radius-lg);
    /* Spacing */
    --space-xs:       var(--app-space-1);
    --space-sm:       var(--app-space-2);
    --space-md:       var(--app-space-3);
    --space-lg:       var(--app-space-5);
    /* Typography */
    --font-size-sm:   12px;
    --font-size-base: 14px;
    --font-size-lg:   16px;
    /* Pill family */
    --pill-info-bg:      #e6f0fa;  --pill-info-text:    #0a4972;
    --pill-success-bg:   #e3f5ec;  --pill-success-text: #166534;
    --pill-warning-bg:   #fff4d6;  --pill-warning-text: #7a5305;
    --pill-danger-bg:    #fde2e2;  --pill-danger-text:  #8a1a1a;
    --pill-muted-bg:     #eef2f6;  --pill-muted-text:   #4b5563;
    --pill-neutral-bg:   #e5eaf0;  --pill-neutral-text: #283447;
    /* Tab strip */
    --tab-bg:            transparent;
    --tab-bg-active:     var(--app-surface-strong);
    --tab-text:          var(--app-muted);
    --tab-text-active:   var(--app-text);
    /* Table rows */
    --table-row-bg:      var(--app-surface-strong);
    --table-row-bg-alt:  var(--app-surface-soft);
    --table-row-bg-hover: var(--app-surface-muted);
}

html[data-app-theme="dark"] {
    --info:              #5fa8d3;
    --info-bg:           var(--app-surface-info);
    --info-text:         var(--app-info-text);
    --info-border:       var(--app-info-border);
    --focus-ring:        0 0 0 3px rgba(91, 168, 217, 0.42);
    --input-border:      var(--app-border);
    --disabled-bg:       #1a2530;
    --disabled-text:     #5c6a78;
    /* Pill family — dark tones */
    --pill-info-bg:      #143247;  --pill-info-text:    #cfe5f4;
    --pill-success-bg:   #163325;  --pill-success-text: #9cdeba;
    --pill-warning-bg:   #3a2f15;  --pill-warning-text: #efd391;
    --pill-danger-bg:    #3a2024;  --pill-danger-text:  #f2b8c0;
    --pill-muted-bg:     #1f2a36;  --pill-muted-text:   #a9b7c5;
    --pill-neutral-bg:   #22303d;  --pill-neutral-text: #d8e3ec;
    /* Tab strip — dark */
    --tab-bg:            transparent;
    --tab-bg-active:     var(--app-surface-strong);
    --tab-text:          var(--app-muted);
    --tab-text-active:   var(--app-text);
    /* Table rows — dark */
    --table-row-bg:      var(--app-surface-strong);
    --table-row-bg-alt:  var(--app-surface-soft);
    --table-row-bg-hover: var(--app-surface-muted);
}

/* ---- Buttons ---- */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    text-decoration: none;
    box-sizing: border-box;
}
.app-btn:hover { background: var(--surface-3); }
.app-btn:active { transform: scale(0.98); }
.app-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-btn[disabled], .app-btn.app-btn-disabled {
    background: var(--disabled-bg);
    color: var(--disabled-text);
    cursor: not-allowed;
    pointer-events: none;
}

.app-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.app-btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.app-btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.app-btn-secondary:hover { background: var(--surface-2); }

.app-btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.app-btn-danger:hover { background: var(--app-danger-strong); border-color: var(--app-danger-strong); }

.app-btn-warning {
    background: var(--warning);
    color: #fff;
    border-color: var(--warning);
}
.app-btn-warning:hover { filter: brightness(0.94); }

.app-btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.app-btn-success:hover { filter: brightness(0.94); }

.app-btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: transparent;
}
.app-btn-ghost:hover { background: var(--surface-2); }

.app-btn-icon {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.app-btn-icon:hover { background: var(--surface-2); }

.app-btn-small {
    min-height: 32px;
    padding: 4px 10px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

/* ---- Mobile button family — Purchases reference style ----
   Source: static/purchases.html .purchases-toolbar-btn
   (min-height: 0; padding: 6px 12px; font-size: 13px). */
.app-toolbar-mobile {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    min-width: 0;
}

.app-action-row-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.app-btn-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
}
.app-btn-mobile:hover { background: var(--surface-2); }
.app-btn-mobile:active { transform: scale(0.97); }
.app-btn-mobile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-btn-mobile[disabled], .app-btn-mobile.app-btn-disabled {
    background: var(--disabled-bg);
    color: var(--disabled-text);
    cursor: not-allowed;
}

.app-btn-mobile-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.app-btn-mobile-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.app-btn-mobile-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.app-btn-mobile-secondary:hover { background: var(--surface-2); }

.app-btn-mobile-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.app-btn-mobile-danger:hover { background: var(--app-danger-strong); border-color: var(--app-danger-strong); }

.app-btn-mobile-icon {
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-btn-mobile-icon:hover { color: var(--text); }
.app-btn-mobile-icon:active { transform: scale(0.96); }

/* ---- Mobile selects / inputs / dropdowns (height-matched to .app-btn-mobile) ---- */
.app-select-mobile,
.app-input-mobile {
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 13px;
    min-height: 0;
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
}
.app-select-mobile:focus-visible,
.app-input-mobile:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--accent);
}
.app-dropdown-mobile {
    /* Slot for shims around .app-custom-dropdown when used in compact rows */
    font-size: 13px;
}

/* ---- Forms ---- */
.app-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}
.app-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}

.app-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.app-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
}
.app-input,
.app-textarea,
.app-select {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    font-size: var(--font-size-base);
    line-height: 1.4;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-text);
    box-sizing: border-box;
}
.app-textarea { min-height: 96px; resize: vertical; }
.app-input:focus-visible,
.app-textarea:focus-visible,
.app-select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--accent);
}
.app-input[disabled],
.app-textarea[disabled],
.app-select[disabled] {
    background: var(--disabled-bg);
    color: var(--disabled-text);
    cursor: not-allowed;
}

/* Native checkbox / radio share an aspect ratio + accent colour. */
.app-checkbox,
.app-radio {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}
.app-checkbox:focus-visible,
.app-radio:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

/* Switch — checkbox styled as a track + thumb. Apply to <input type="checkbox" class="app-switch"> */
.app-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 22px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin: 0;
    flex: 0 0 auto;
}
.app-switch::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}
.app-switch:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.app-switch:checked::before { transform: translateX(16px); }
.app-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.app-switch[disabled] { opacity: 0.55; cursor: not-allowed; }

.app-help {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: 2px;
}
.app-validation {
    font-size: var(--font-size-sm);
    margin-top: 2px;
    color: var(--text-muted);
}
.app-validation-error    { color: var(--app-error-text); }
.app-validation-warning  { color: var(--app-warning-text); }
.app-validation-success  { color: var(--app-success-text); }

/* Address-autocomplete status row — mapsfix-autocomplete shim slot */
.app-address-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pill-muted-bg);
}
.app-address-status-confirmed { background: var(--pill-success-bg); color: var(--pill-success-text); }
.app-address-status-manual    { background: var(--pill-warning-bg); color: var(--pill-warning-text); }
.app-address-status-disabled  { background: var(--pill-muted-bg);   color: var(--pill-muted-text); opacity: 0.85; }

/* ---- Cards / panels / drawers / toolbars ---- */
.app-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-soft);
    box-sizing: border-box;
}
.app-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}
.app-card-body { display: block; }
.app-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border);
}
.app-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Drawer — generic side panel. Caller controls width / position. */
.app-drawer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.app-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1;
}
.app-drawer-body {
    padding: var(--space-md);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.app-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm) 0;
}

/* ---- Tables / lists / empty state ---- */
.app-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    background: var(--surface);
    color: var(--text);
}
.app-table thead th {
    text-align: left;
    font-weight: 600;
    padding: 8px 10px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.app-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.app-table.app-table-zebra tbody tr:nth-child(odd) td {
    background: var(--table-row-bg-alt);
}
.app-table tbody tr:hover td { background: var(--table-row-bg-hover); }
.app-table.app-table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.app-row-warning td { background: var(--pill-warning-bg) !important; }
.app-row-error td   { background: var(--pill-danger-bg)  !important; }
.app-row-success td { background: var(--pill-success-bg) !important; }

.app-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.app-list > li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
}
.app-list > li:last-child { border-bottom: 0; }

.app-empty-state {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}
.app-empty-state-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.7; }
.app-empty-state-title { font-weight: 600; color: var(--text); margin: 0 0 4px; }
.app-empty-state-text { font-size: var(--font-size-sm); margin: 0; }
.app-empty-state-actions { margin-top: var(--space-md); display: inline-flex; gap: var(--space-sm); }

/* ---- Status: pills + alerts + utility text ---- */
.app-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    background: var(--pill-neutral-bg);
    color: var(--pill-neutral-text);
    white-space: nowrap;
}
.app-pill-info     { background: var(--pill-info-bg);    color: var(--pill-info-text); }
.app-pill-success  { background: var(--pill-success-bg); color: var(--pill-success-text); }
.app-pill-warning  { background: var(--pill-warning-bg); color: var(--pill-warning-text); }
.app-pill-error,
.app-pill-danger   { background: var(--pill-danger-bg);  color: var(--pill-danger-text); }
.app-pill-muted    { background: var(--pill-muted-bg);   color: var(--pill-muted-text); }
.app-pill-neutral  { background: var(--pill-neutral-bg); color: var(--pill-neutral-text); }

.app-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--font-size-base);
}
.app-alert-info {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}
.app-alert-warning {
    background: var(--app-surface-warning);
    border-color: var(--app-warning-border);
    color: var(--app-warning-text);
}
.app-alert-error {
    background: var(--app-error-bg);
    border-color: var(--app-error-border);
    color: var(--app-error-text);
}
.app-alert-success {
    background: var(--app-success-bg);
    border-color: var(--app-success-border);
    color: var(--app-success-text);
}

.app-muted   { color: var(--text-muted); }
.app-loading { color: var(--text-muted); font-size: var(--font-size-sm); }
.app-tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--text-muted);
}
.app-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1000;
}
.app-tooltip[data-tooltip]:hover::after,
.app-tooltip[data-tooltip]:focus-visible::after { opacity: 1; }

.app-toast {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: var(--font-size-base);
}
.app-toast-info    { border-color: var(--info-border); }
.app-toast-success { border-color: var(--app-success-border); background: var(--app-success-bg); color: var(--app-success-text); }
.app-toast-warning { border-color: var(--app-warning-border); background: var(--app-surface-warning); color: var(--app-warning-text); }
.app-toast-error   { border-color: var(--app-error-border); background: var(--app-error-bg); color: var(--app-error-text); }

/* ---- Modal contract (UISTYLE2 standard) ----
   Required structure (see docs/uistyle2_shared_ui_component_foundation_report.md):
     <div class="app-modal-backdrop">
       <div class="app-modal app-modal-md" role="dialog" aria-modal="true">
         <header class="app-modal-header">
           <h3 class="app-modal-title">…</h3>
           <button type="button" class="app-modal-close" aria-label="Close">×</button>
         </header>
         <div class="app-modal-body app-modal-scroll">…</div>
         <footer class="app-modal-footer">…</footer>
       </div>
     </div>
   The close X is REQUIRED in every normal modal (top-right, inside header). */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.app-modal-backdrop[hidden] { display: none !important; }

.app-modal,
.app-modal-shell {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(calc(100vw - 24px), 480px);
    max-height: calc(100dvh - 24px);
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.app-modal-sm   { max-width: min(calc(100vw - 24px), 320px); }
.app-modal-md   { max-width: min(calc(100vw - 24px), 480px); }
.app-modal-lg   { max-width: min(calc(100vw - 24px), 720px); }
.app-modal-full { max-width: calc(100vw - 24px); }

.app-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1;
    flex: 0 0 auto;
}
.app-modal-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    flex: 1 1 auto;
    min-width: 0;
}
.app-modal-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-modal-close:hover { background: var(--surface-2); color: var(--text); }
.app-modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.app-modal-body {
    padding: var(--space-md);
    flex: 1 1 auto;
    min-height: 0;
}
.app-modal-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.app-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .app-modal.app-modal-fullscreen-mobile,
    .app-modal-shell.app-modal-fullscreen-mobile {
        max-width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
    }
    .app-modal-backdrop { padding: 0; }
}

/* ---- Scheduler-specific shared classes ----
   Aliases so new code can use semantic .sched-* names while existing
   .ops-* selectors continue to apply unchanged. Adding these does NOT
   replace .ops-block / .ops-run-segment / .ops-segment-handle. */
.sched-timeline {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.sched-bar          { /* alias surface for .ops-block */ }
.sched-segment      { /* alias surface for .ops-run-segment */ }
.sched-segment-travel,
.sched-segment-service,
.sched-segment-return { /* role surfaces; consumers may attach data attributes */ }
.sched-handle       { /* alias surface for .ops-segment-handle */ }
.sched-lane-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text);
}
.sched-avatar,
.sched-entity-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--border);
}
.sched-eta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: 999px;
    background: var(--pill-info-bg);
    color: var(--pill-info-text);
}
.sched-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    opacity: 0.85;
}
.sched-route-warning {
    background: var(--pill-warning-bg);
    color: var(--pill-warning-text);
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    border-radius: 999px;
}
.sched-route-anomaly {
    background: var(--pill-danger-bg);
    color: var(--pill-danger-text);
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    border-radius: 999px;
}
.sched-demo-dock {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: var(--space-md);
}
.sched-address-status {
    /* Alias of .app-address-status for Scheduler-specific call sites. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pill-muted-bg);
}

/* ---- Dark-mode overrides specifically for the new component classes ----
   Most of the new vocabulary is variable-driven and needs no overrides.
   These rules cover the small set where the variable-only approach is
   not sufficient (e.g. switch thumb shadow, modal focus rings). */
html[data-app-theme="dark"] .app-switch::before {
    background: #d8e3ec;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
html[data-app-theme="dark"] .app-modal-close:hover { background: var(--surface-2); }
html[data-app-theme="dark"] .app-card,
html[data-app-theme="dark"] .app-drawer,
html[data-app-theme="dark"] .app-modal,
html[data-app-theme="dark"] .app-modal-shell {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
}

/* ---- End UISTYLE2 foundation block ---- */

/* ============================================================
   UISTYLE3 — mapsfix-autocomplete CSS class hooks
   (replaces inline literal styles formerly written by
   static/shared/mapsfix-autocomplete.js paintBadge + dropdown
   row mouseenter handlers).
   ============================================================ */
.mapsfix-ac-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
    border: 1px solid transparent;
    /* Tone classes (.app-pill-*, .app-address-status-*) on the
       same element supply background, color, border-color. */
}
.mapsfix-ac-row {
    padding: 6px 10px;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    background: transparent;
    transition: background 0.12s ease;
}
.mapsfix-ac-row:hover,
.mapsfix-ac-row:focus,
.mapsfix-ac-row.is-active {
    background: var(--surface-3);
}

/* ============================================================
   DESIGN1 — Design Mode inspector overlay
   Loaded only when html.design-mode-active is set by
   /shared/design-mode.js (admin-only, off by default).
   ============================================================ */
html.design-mode-active * { cursor: crosshair !important; }

.design-inspector-outline {
    position: absolute;
    pointer-events: none;
    border: 2px solid #f59e0b;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    z-index: 999998;
    transition: all 0.08s ease;
}

.design-inspector-panel {
    position: fixed;
    top: 12px;
    right: 12px;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface, #fff);
    color: var(--text, #1f2937);
    border: 1px solid var(--border, #d1d5db);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    z-index: 999999;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    cursor: auto !important;
}
.design-inspector-panel.design-inspector-panel--collapsed {
    max-height: 44px;
    overflow: hidden;
}
.design-inspector-panel * { cursor: auto !important; }

.design-inspector-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #d1d5db);
    background: var(--surface, #fff);
    position: sticky;
    top: 0;
    z-index: 1;
}
.design-inspector-toolbar strong {
    font-size: 13px;
    flex: 1 1 auto;
}
.design-inspector-toolbar button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font: inherit;
    background: transparent;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    color: var(--text-muted, #4b5563);
    cursor: pointer;
}
.design-inspector-toolbar button:hover {
    background: var(--surface-2, #f3f4f6);
    color: var(--text, #1f2937);
}

.design-inspector-body { padding: 8px 12px 14px; }
.design-inspector-empty {
    padding: 14px 0;
    color: var(--text-muted, #6b7280);
    font-style: italic;
}
.design-inspector-section {
    margin: 10px 0;
    padding: 8px 0;
    border-top: 1px solid var(--border, #e5e7eb);
}
.design-inspector-section:first-of-type { border-top: 0; }

.design-inspector-selector {
    display: block;
    margin-top: 4px;
    padding: 4px 6px;
    font-size: 11px;
    background: var(--surface-2, #f3f4f6);
    color: var(--text, #1f2937);
    border-radius: 4px;
    word-break: break-all;
    white-space: pre-wrap;
}

.design-inspector-grid {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 4px 8px;
    font-size: 12px;
    align-items: baseline;
}
.design-inspector-grid > span {
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.design-inspector-grid > code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    word-break: break-all;
    color: var(--text, #1f2937);
}

.design-inspector-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0;
}
.design-inspector-flag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--pill-muted-bg, #eef2f6);
    color: var(--pill-muted-text, #4b5563);
}
.design-inspector-flag-ok    { background: var(--pill-success-bg, #e3f5ec); color: var(--pill-success-text, #166534); }
.design-inspector-flag-warn  { background: var(--pill-warning-bg, #fff4d6); color: var(--pill-warning-text, #7a5305); }
.design-inspector-flag-off   { opacity: 0.7; }

.design-inspector-warning {
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--pill-warning-bg, #fff4d6);
    color: var(--pill-warning-text, #7a5305);
    border-radius: 6px;
    font-size: 12px;
}

.design-inspector-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    margin: 6px 0;
}
.design-inspector-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}
.design-inspector-field span {
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}
.design-inspector-field input,
.design-inspector-field textarea {
    padding: 4px 6px;
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 4px;
    background: var(--input-bg, #fff);
    color: var(--input-text, #1f2937);
    width: 100%;
    box-sizing: border-box;
}

.design-inspector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

@media (max-width: 480px) {
    .design-inspector-panel {
        width: calc(100vw - 16px);
        right: 8px;
        top: 8px;
        max-height: 70dvh;
    }
}
/* ---- End DESIGN1 inspector block ---- */

/* ============================================================
   DARKFIX1 — Global <input type="range"> theming
   One slider style for both light + dark, applied to every native
   range input on .app-page (and the .app-slider opt-in class for
   inputs outside body.app-page). Track + thumb both use theme
   variables so dark mode adapts automatically.
   ============================================================ */
body.app-page input[type="range"],
.app-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body.app-page input[type="range"]:focus-visible,
.app-slider:focus-visible {
    outline: none;
}
body.app-page input[type="range"]:focus-visible::-webkit-slider-thumb,
.app-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--focus-ring), 0 1px 3px rgba(0, 0, 0, 0.35);
}
body.app-page input[type="range"]:focus-visible::-moz-range-thumb,
.app-slider:focus-visible::-moz-range-thumb {
    box-shadow: var(--focus-ring), 0 1px 3px rgba(0, 0, 0, 0.35);
}
body.app-page input[type="range"][disabled],
.app-slider[disabled] { cursor: not-allowed; opacity: 0.55; }

/* WebKit / Blink / Safari */
body.app-page input[type="range"]::-webkit-slider-runnable-track,
.app-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3, #e5eaf0);
    border: 1px solid var(--border, #d7e0e9);
}
body.app-page input[type="range"]::-webkit-slider-thumb,
.app-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--accent, #156c8a);
    border: 2px solid var(--surface, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

/* Firefox */
body.app-page input[type="range"]::-moz-range-track,
.app-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3, #e5eaf0);
    border: 1px solid var(--border, #d7e0e9);
}
body.app-page input[type="range"]::-moz-range-thumb,
.app-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #156c8a);
    border: 2px solid var(--surface, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
/* IE / legacy Edge — style.css does not need to handle these for
   modern Chromium/Firefox/Safari, but the rules below are no-ops
   in modern browsers and keep older IE installs themed. */
body.app-page input[type="range"]::-ms-track,
.app-slider::-ms-track {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3, #e5eaf0);
    border-color: transparent;
    color: transparent;
}
body.app-page input[type="range"]::-ms-fill-lower,
.app-slider::-ms-fill-lower {
    background: var(--accent-strong, #0e556d);
    border-radius: 999px;
}
body.app-page input[type="range"]::-ms-fill-upper,
.app-slider::-ms-fill-upper {
    background: var(--surface-3, #e5eaf0);
    border-radius: 999px;
}
body.app-page input[type="range"]::-ms-thumb,
.app-slider::-ms-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #156c8a);
    border: 2px solid var(--surface, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

/* Dark-mode override for thumb border so it sits on the dark
   surface tone (the variable already does this for --surface, but
   we make it explicit here for legacy fallback values). */
html[data-app-theme="dark"] body.app-page input[type="range"]::-webkit-slider-thumb,
html[data-app-theme="dark"] .app-slider::-webkit-slider-thumb {
    border-color: var(--surface, #16202c);
}
html[data-app-theme="dark"] body.app-page input[type="range"]::-moz-range-thumb,
html[data-app-theme="dark"] .app-slider::-moz-range-thumb {
    border-color: var(--surface, #16202c);
}
/* ---- End DARKFIX1 slider block ---- */

/* ============================================================ */
/* SHORTAGE_MANAGEMENT_STAGE8 — Dispatch detail forwarded crates */
/* ============================================================ */
/* Adds a "Crates Forwarded" column to the top PO summary and    */
/* bottom per-load PO summary tables on detail.html, plus a       */
/* "Forwarded shortage replenishment items" section beneath the   */
/* items table. Forwarded crates are physical paperwork only —    */
/* they are NEVER merged into planned/dispatched totals.          */

body.page-detail .summary-table th.sm-forwarded-col,
body.page-detail .summary-table td.sm-forwarded-col {
    /* No column-level background/border — blend with the rest of the table. */
}
body.page-detail .summary-table .total-row td.sm-forwarded-col {
    font-weight: 600;
}
body.page-detail .sm-forwarded-crates-cell {
    display: inline-block;
    padding: 1px 8px;
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9em;
}

body.page-detail .sm-forwarded-banner-row td {
    background: linear-gradient(90deg, #dbeafe 0%, #eff6ff 100%);
    color: #1e3a8a;
    font-weight: 700;
    padding: 8px 12px;
    border-top: 2px solid #93c5fd;
    border-bottom: 1px solid #bfdbfe;
}
body.page-detail .sm-forwarded-banner-hint {
    font-weight: 400;
    font-style: italic;
    color: #1e40af;
    margin-left: 6px;
}
body.page-detail .sm-forwarded-item-row td {
    background: #f0f9ff;
    border-bottom: 1px solid #e0f2fe;
    padding: 6px 12px;
}
body.page-detail .sm-forwarded-item-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.92em;
}
body.page-detail .sm-forwarded-item-grid > span {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #1f2937;
}
body.page-detail .sm-forwarded-chip-po {
    background: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
    font-weight: 600;
}
body.page-detail .sm-forwarded-item-desc {
    font-weight: 600;
    color: #111827 !important;
}
body.page-detail .sm-forwarded-source {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #4b5563 !important;
    font-size: 0.88em;
}
body.page-detail .sm-forwarded-arrow {
    background: transparent !important;
    border: none !important;
    font-size: 1.2em;
    color: #2563eb !important;
    padding: 0 !important;
}
body.page-detail .sm-forwarded-pallet {
    background: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
    color: #065f46 !important;
    font-weight: 600;
}
body.page-detail .sm-forwarded-units {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}
body.page-detail .sm-forwarded-shortage-empty {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #7f1d1d !important;
    font-style: italic;
    text-decoration: line-through;
    opacity: 0.85;
}
body.page-detail .sm-forwarded-status {
    background: #ede9fe !important;
    border-color: #c4b5fd !important;
    color: #5b21b6 !important;
    text-transform: capitalize;
    font-size: 0.85em;
}
body.page-detail .sm-forwarded-status-completed {
    background: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    color: #065f46 !important;
}
body.page-detail .sm-forwarded-status-cancelled {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}
body.page-detail .sm-forwarded-notes {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #78350f !important;
    font-style: italic;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================ */
/* SHORTAGE_MANAGEMENT_STAGE8B — Total Crates column            */
/* ============================================================ */
/* Three-way crate split: Current (plain non-clickable) +       */
/* Forwarded (chip non-clickable) + Total (clickable copy).      */
/* Total cell is the ONLY actionable crate-total cell in both    */
/* the top PO summary and the bottom per-load PO summary.        */

body.page-detail .summary-table th.sm-total-crates-col,
body.page-detail .summary-table td.sm-total-crates-col {
    /* No column-level background/border — blend with the rest of the table. */
    font-weight: 600;
}
body.page-detail .summary-table .total-row td.sm-total-crates-col {
    font-weight: 700;
}
body.page-detail .sm-total-crates-cell {
    display: inline-block;
    padding: 1px 8px;
    font-weight: 700;
}
/* The copy-to-clipboard child rendered by renderCopyableTableValue
   inside a Total cell should look actionable (cursor:pointer). */
body.page-detail td.sm-total-crates-col .copyable-value {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* ============================================================ */
/* SHORTAGE_MANAGEMENT_STAGE9B — Fulfilment UI                  */
/* ============================================================ */
/* New `sm-fulfilment-*` namespace. Does NOT collide with        */
/* `sm-forwarded-*` (Stage 8), `sm-total-crates-*` (Stage 8b),   */
/* or `sm-summary-chip*` / `sm-truck-chip*` / `item-state-badge*`*/
/* (Stages 4/5/7). Scoped via `body.page-dispatch` and           */
/* `body.page-detail` so other pages stay unaffected.            */

/* --- Dispatch list "Fulfilled With" column ------------------ */
body.page-dispatch td.sm-fulfilment-col,
body.page-dispatch th.sm-fulfilment-col {
    /* No column-level background/border — blend with the rest of the table. */
    vertical-align: top;
}
body.page-dispatch td.sm-fulfilment-cell {
    font-size: 0.9em;
    line-height: 1.35;
    max-width: 280px;
}
body.page-dispatch .sm-fulfilment-cell-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.page-dispatch .sm-fulfilment-pct-orig {
    display: inline-block;
    color: #6b7280;
    font-weight: 500;
    margin-right: 4px;
}
body.page-dispatch .sm-fulfilment-pct-final {
    display: inline-block;
    font-weight: 700;
}
body.page-dispatch .sm-fulfilment-pct-fulfilled { color: #047857; }
body.page-dispatch .sm-fulfilment-pct-partially_fulfilled { color: #d97706; }
body.page-dispatch .sm-fulfilment-pct-over_fulfilled,
body.page-dispatch .sm-fulfilment-pct-unresolved,
body.page-dispatch .sm-fulfilment-pct-needs_review { color: #b91c1c; }
body.page-dispatch .sm-fulfilment-pct-no_fulfilment_needed { color: #047857; }
body.page-dispatch .sm-fulfilment-link {
    color: #1f2937;
    font-weight: 500;
}
body.page-dispatch .sm-fulfilment-more,
body.page-dispatch .sm-fulfilment-pending {
    color: #6b7280;
    font-style: italic;
    font-size: 0.9em;
}
body.page-dispatch .sm-fulfilment-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid;
    font-weight: 600;
    font-size: 0.85em;
}
body.page-dispatch .sm-fulfilment-badge-ok      { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
body.page-dispatch .sm-fulfilment-badge-partial { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
body.page-dispatch .sm-fulfilment-badge-warn    { background: #fee2e2; border-color: #fecaca; color: #991b1b; }

/* Dark-theme: brighten the inline text colors inside the Fulfilled With
   cell so they remain readable against the dark table surface. The
   column itself now blends with the rest of the table (no tinted
   background), so only the foreground text needs adjustment. */
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-pct-orig,
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-more,
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-pending {
    color: var(--app-muted);
}
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-link {
    color: var(--app-text);
}
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-pct-fulfilled,
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-pct-no_fulfilment_needed {
    color: #6ee7b7;
}
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-pct-partially_fulfilled {
    color: #fcd34d;
}
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-pct-over_fulfilled,
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-pct-unresolved,
html[data-app-theme="dark"] body.page-dispatch .sm-fulfilment-pct-needs_review {
    color: #fca5a5;
}

/* --- Detail page source-side banner ------------------------- */
body.page-detail .sm-fulfilment-banner {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0 16px;
}
body.page-detail .sm-fulfilment-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
body.page-detail .sm-fulfilment-banner-header h3 {
    margin: 0;
    color: #78350f;
    font-size: 1.05em;
}
body.page-detail .sm-fulfilment-banner-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-weight: 700;
    font-size: 0.9em;
}
body.page-detail .sm-fulfilment-banner-status.sm-fulfilment-badge-ok      { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
body.page-detail .sm-fulfilment-banner-status.sm-fulfilment-badge-partial { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
body.page-detail .sm-fulfilment-banner-status.sm-fulfilment-badge-warn    { background: #fee2e2; border-color: #fecaca; color: #991b1b; }

body.page-detail .sm-fulfilment-three-line {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 10px;
}
body.page-detail .sm-fulfilment-line {
    display: flex;
    gap: 12px;
    align-items: baseline;
}
body.page-detail .sm-fulfilment-line-label {
    color: #78350f;
    font-weight: 600;
    min-width: 140px;
}
body.page-detail .sm-fulfilment-line-value {
    color: #1f2937;
}
body.page-detail .sm-fulfilment-line-secondary {
    color: #6b7280;
    font-size: 0.9em;
    margin-left: 6px;
}
body.page-detail .sm-fulfilment-line-final {
    padding-top: 6px;
    border-top: 1px dashed #fcd34d;
    margin-top: 4px;
}
body.page-detail .sm-fulfilment-line-final .sm-fulfilment-line-label {
    color: #166534;
}
body.page-detail .sm-fulfilment-with-block {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #fcd34d;
}
body.page-detail .sm-fulfilment-with-label {
    font-weight: 700;
    color: #78350f;
    margin-bottom: 4px;
}
body.page-detail .sm-fulfilment-with-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.page-detail .sm-fulfilment-link-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 2px 0;
}
body.page-detail .sm-fulfilment-link {
    font-weight: 600;
    color: #1d4ed8;
}
body.page-detail .sm-fulfilment-link-credit {
    color: #6b7280;
    font-size: 0.9em;
}
body.page-detail .sm-fulfilment-pending-hint {
    margin: 6px 0 0;
    color: #92400e;
    font-style: italic;
    font-size: 0.9em;
}

/* --- Detail page destination-side row decorations ----------- */
body.page-detail .sm-fulfilment-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    color: #1f2937;
}
body.page-detail .sm-fulfilment-status-shipped,
body.page-detail .sm-fulfilment-status-confirmed,
body.page-detail .sm-fulfilment-status-completed {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}
body.page-detail .sm-fulfilment-status-planned,
body.page-detail .sm-fulfilment-status-loaded {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #4b5563;
}
body.page-detail .sm-fulfilment-status-cancelled {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}
body.page-detail .sm-fulfilment-pallet-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #ede9fe;
    border: 1px solid #c4b5fd;
    border-radius: 4px;
    color: #5b21b6;
    font-weight: 600;
    font-size: 0.9em;
}
body.page-detail .sm-fulfilment-fulfils-line {
    margin-top: 6px;
    padding: 4px 8px;
    background: #ecfdf5;
    border: 1px dashed #6ee7b7;
    border-radius: 4px;
    color: #065f46;
    font-size: 0.9em;
}
body.page-detail .sm-fulfilment-fulfils-arrow {
    font-size: 1.05em;
    margin-right: 4px;
    color: #047857;
}
body.page-detail .sm-fulfilment-confirm-btn {
    margin-left: auto;
    padding: 4px 10px;
    background: #f59e0b;
    color: #fff;
    border: 1px solid #d97706;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85em;
    cursor: pointer;
}
body.page-detail .sm-fulfilment-confirm-btn:hover {
    background: #d97706;
}

/* --- Confirm Fulfilment modal ------------------------------- */
.confirm-fulfilment-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 18px 20px;
    max-width: 560px;
    width: 92%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}
.confirm-fulfilment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}
.confirm-fulfilment-subtitle {
    color: #6b7280;
    margin: 4px 0 0;
    font-size: 0.9em;
}
.confirm-fulfilment-context {
    background: #f3f4f6;
    border-radius: 4px;
    padding: 6px 10px;
    margin: 10px 0;
    color: #1f2937;
    font-size: 0.9em;
}
.confirm-fulfilment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.confirm-fulfilment-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.confirm-fulfilment-field > span {
    font-weight: 600;
    font-size: 0.9em;
    color: #374151;
}
.confirm-fulfilment-field input,
.confirm-fulfilment-field select,
.confirm-fulfilment-field textarea {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.95em;
    font-family: inherit;
}
.confirm-fulfilment-row {
    display: flex;
    gap: 12px;
}
.confirm-fulfilment-row .confirm-fulfilment-field {
    flex: 1;
}
.confirm-fulfilment-error {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.9em;
}
.confirm-fulfilment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* ============================================================ */
/* SHORTAGE_MANAGEMENT_STAGE9C — Over-fulfilment confirm visual */
/* ============================================================ */
/* Visually loud Save button when the modal needs an explicit
   over-fulfilment override click. */
.confirm-fulfilment-actions button.sm-fulfilment-save-warning {
    background: #b91c1c;
    border-color: #991b1b;
    color: #fff;
}
.confirm-fulfilment-actions button.sm-fulfilment-save-warning:hover {
    background: #991b1b;
}

/* ====================================================================
   STAGE2_LEFTRAIL_20260523 — Settings grouped left-rail navigation.

   - Wide viewport (≥ 980px): fixed sticky rail on the left, page
     content pushed right by padding-left. Each group always-open.
   - Narrow viewport: rail flows inline at the top; groups are
     native <details> accordions, summaries are tappable.
   - Body keeps the legacy .tab-container in DOM as a safety
     fallback; it is hidden only after .settings-rail-ready is set
     by the rail bootstrap JS — if JS fails, the original tab strip
     remains usable.
   - Light + dark themes share the same structure; dark theme
     overrides via [data-app-theme="dark"].
   ==================================================================== */

body.page-settings .settings-rail {
    box-sizing: border-box;
    background: var(--app-surface, #ffffff);
    color: var(--app-text, #0f172a);
    border: 1px solid var(--app-divider, rgba(15, 23, 42, 0.10));
    border-radius: 12px;
    padding: 12px;
    margin: 0 0 16px 0;
}

body.page-settings .settings-rail-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted, #64748b);
    padding: 4px 6px 8px 6px;
}

body.page-settings .settings-rail-group {
    margin-bottom: 6px;
}

body.page-settings .settings-rail-details {
    border: 0;
}

body.page-settings .settings-rail-summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 6px;
    border-radius: 8px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.page-settings .settings-rail-summary::-webkit-details-marker { display: none; }
body.page-settings .settings-rail-summary::marker { content: ""; }

body.page-settings .settings-rail-summary:hover {
    background: rgba(15, 23, 42, 0.04);
}

body.page-settings .settings-rail-group-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Muted so the CATEGORY reads as a quiet section header, clearly
       distinct from the darker, larger item labels below it. */
    color: var(--app-muted, #64748b);
}

body.page-settings .settings-rail-group-desc {
    display: block;
    font-size: 11px;
    color: var(--app-muted, #64748b);
    margin-top: 2px;
}

body.page-settings .settings-rail-list {
    list-style: none;
    /* Indent items under the category with a left guide line so the
       hierarchy is obvious — items are visibly nested, not flush with
       the category header. */
    margin: 4px 0 10px 8px;
    padding: 0 0 0 10px;
    border-left: 2px solid var(--app-divider, rgba(15, 23, 42, 0.10));
}

body.page-settings .settings-rail-li {
    margin: 0;
    padding: 0;
}

body.page-settings .settings-rail-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: inherit;
    text-decoration: none;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

body.page-settings .settings-rail-item:hover,
body.page-settings .settings-rail-item:focus-visible {
    background: rgba(15, 23, 42, 0.06);
    outline: none;
}

body.page-settings .settings-rail-item.is-active {
    background: var(--app-primary-soft, rgba(21, 108, 138, 0.10));
    color: var(--app-primary, #156c8a);
    font-weight: 600;
}

body.page-settings .settings-rail-item-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

body.page-settings .settings-rail-item-hint {
    display: block;
    font-size: 11px;
    color: var(--app-muted, #64748b);
    margin-top: 2px;
    line-height: 1.4;
}

body.page-settings .settings-rail-item.settings-rail-item-link::after {
    content: " ↗";
    color: var(--app-muted, #64748b);
    font-size: 11px;
}

body.page-settings .settings-rail-item.settings-rail-item-jump::after {
    content: " ↪";
    color: var(--app-muted, #64748b);
    font-size: 11px;
}

/* Hide the legacy tab strip once the rail has rendered. Until then
   the strip stays visible (fallback). */
body.page-settings.settings-rail-ready .tab-container {
    display: none !important;
}

/* STAGE6E_VISIBLE_SHELL_FIX_20260524 — wide-viewport breakpoint
   lowered from 980 → 768 so the fixed rail T-layout applies on
   tablet-landscape and small-laptop widths too. Stage 6B-6D
   verified the architecture but didn't test laptop/tablet
   viewports; at 720-979 the rail used to fall back to a
   `position: static` full-width block at the TOP of the
   document, so the user had to scroll past the entire rail to
   reach the active panel and lost the rail entirely when
   scrolling content. The rail now stays fixed-left from 768
   upwards. Below 768 the rail still stacks (true mobile),
   plus the new sticky rule below keeps it visible when
   scrolling content. */
@media (min-width: 768px) {
    body.page-settings.settings-rail-ready {
        padding-left: 260px;
    }
    body.page-settings .settings-rail {
        position: fixed;
        top: 12px;
        left: 12px;
        width: 236px;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        z-index: 40;
        margin: 0;
    }
    /* Each group is always-open on wide; the <summary> stays as a
       header but the accordion toggle is effectively disabled. */
    body.page-settings .settings-rail-details {
        /* Use 'open' attribute via JS, but also keep contents visible
           on wide regardless of the open attribute. */
    }
    body.page-settings .settings-rail-details > .settings-rail-list {
        display: block !important;
    }
    body.page-settings .settings-rail-summary {
        cursor: default;
    }
    body.page-settings .settings-rail-summary:hover {
        background: transparent;
    }
}

/* STAGE6E_VISIBLE_SHELL_FIX_20260524 — narrow-viewport breakpoint
   lowered from 979→767 so the static-inline-at-top fallback only
   kicks in on TRUE mobile (≤767). At 768-979 the rule above
   keeps the rail as a fixed left sidebar, giving the operator a
   visible T-layout on tablet-landscape and small-laptop
   widths. Below 768 the rail flows inline AND is sticky-top
   (see the @media (max-width: 767px) block further down) so it
   doesn't disappear when scrolling content. */
@media (max-width: 767px) {
    body.page-settings .settings-rail {
        position: static;
        width: auto;
        margin: 0 0 12px 0;
    }
    /* Native <details> default: collapsed unless [open] is set.
       The bootstrap script opens the first group by default. */
    body.page-settings .settings-rail-summary::after {
        content: "▾";
        float: right;
        color: var(--app-muted, #64748b);
        transition: transform 0.15s ease;
        margin-left: 8px;
    }
    body.page-settings .settings-rail-details:not([open]) .settings-rail-summary::after {
        transform: rotate(-90deg);
    }
}

/* Dark-mode overrides. */
[data-app-theme="dark"] body.page-settings .settings-rail {
    background: var(--app-surface, #111827);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--app-text, #e5e7eb);
}
[data-app-theme="dark"] body.page-settings .settings-rail-summary:hover {
    background: rgba(255, 255, 255, 0.06);
}
[data-app-theme="dark"] body.page-settings .settings-rail-item:hover,
[data-app-theme="dark"] body.page-settings .settings-rail-item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}
[data-app-theme="dark"] body.page-settings .settings-rail-item.is-active {
    background: rgba(21, 108, 138, 0.25);
    color: #93c5fd;
}
[data-app-theme="dark"] body.page-settings .settings-rail-title,
[data-app-theme="dark"] body.page-settings .settings-rail-group-desc,
[data-app-theme="dark"] body.page-settings .settings-rail-item-hint {
    color: rgba(229, 231, 235, 0.72);
}
/* Category header a touch brighter than desc/hint so it still reads as a
   header in dark mode, while staying dimmer than the item labels. */
[data-app-theme="dark"] body.page-settings .settings-rail-group-label {
    color: rgba(229, 231, 235, 0.80);
}
[data-app-theme="dark"] body.page-settings .settings-rail-list {
    border-left-color: rgba(255, 255, 255, 0.12);
}

/* ====================================================================
   STAGE2_1_LEFTRAIL_POLISH_20260523 — visual + layout polish for
   the Stage 2 grouped Settings rail.

   Fixes:
     (1) Horizontal scroll on desktop. The page wrapper .container
         carries max-width: var(--app-shell-max) (1320px). After the
         Stage 2 padding-left:260px the available viewport space at
         e.g. 1366×768 was only 1106px, so .container forced a 212px
         page-level horizontal scroll. Now the .container inside a
         rail-ready settings page uses max-width:100% and zero auto-
         margin so it fills exactly the available width.
     (2) Parent vs child visual confusion. Group headings are no
         longer button-shaped: no hover, no rounded background, no
         cursor change on desktop. They sit above a top divider and
         use a small-caps muted label so they read as "section
         titles", not "links". Child rail items now have indentation,
         distinct hover state, a strong active background and a
         3px left accent bar.
     (3) Active state hard to see. .is-active items carry a
         high-contrast primary-coloured background, bold primary
         text, and a 3px accent bar pinned to the left edge.
     (4) "Users / Locations / Integrations / Time" omnibus child
         is replaced by 5 separate child entries that all activate
         the existing #adminTools tab and scroll to the relevant
         Stage 1 admin sub-section (#user-management-section,
         #location-directory-section, #delivery-services-section,
         #time-settings-section, #audit-log-section). No DOM was
         moved; the jump uses the existing rail-jump path.

   Notes:
     - Stage 2's base rules are preserved above this block and
       still apply; the new selectors here have equal or higher
       specificity, ordered later, so they win deterministically.
     - body horizontal overflow is also clamped to `hidden` as a
       belt-and-braces safety, but only after .container is fixed
       (no content actually overflows now).
   ==================================================================== */

/* ----- (1) horizontal overflow fix -------------------------------- */
/* The earlier wide-screen rule at line ~12264 sets `.container` to
   width: min(calc(100vw - 48px), 1800px) !important;
   That ignores the body.padding-left we added for the rail, so the
   container overflows the available space by ~rail width. The
   override below uses (0,4,2) specificity and !important to beat
   it deterministically. Stage 2.1 root-cause fix, not a hack. */
html body.page-settings.settings-rail-ready {
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 0;
}
html body.app-page.page-settings.settings-rail-ready .container {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    /* STAGE2_1 critical: the existing light-theme rule at line ~168
       sets `backdrop-filter: blur(10px) !important;` on .container.
       backdrop-filter makes an element a containing block for
       descendants with `position: fixed` — that's why the Stage 2
       rail rendered at left ≈ 270 (inside the container) instead
       of left: 8 (against the viewport). Disabling the filter here
       restores the rail's fixed positioning relative to the
       viewport in both light and dark themes. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.page-settings.settings-rail-ready .tab-content,
body.page-settings.settings-rail-ready .container > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Slightly narrower rail and tighter content gap to leave more
   room. STAGE6E lowered the breakpoint from 980→768. */
@media (min-width: 768px) {
    body.page-settings.settings-rail-ready {
        padding-left: clamp(220px, 18vw, 268px);
    }
    body.page-settings .settings-rail {
        width: clamp(200px, calc(18vw - 8px), 252px);
        left: 8px;
        top: 8px;
        max-height: calc(100vh - 16px);
    }
}

/* ----- (1b) opaque rail background — the default --app-surface var
   is rgba(255,255,255,0.96), which lets the content area bleed
   through the fixed rail by ~4% and produces a "ghosted text"
   effect under the rail labels. Force a fully opaque background
   here so the rail reads as a solid surface in both light and
   dark themes. */
body.page-settings .settings-rail {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
[data-app-theme="dark"] body.page-settings .settings-rail {
    background-color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ----- (2) clearer parent group / child item distinction ---------- */

/* Group section: top divider, no card-like border, no hover bg.
   Tighter vertical spacing so all 6 groups + their items fit in
   a standard 768-tall desktop viewport without forcing the rail's
   inner overflow scroll on every load. */
body.page-settings .settings-rail-group {
    margin: 10px 0 4px 0;
    padding: 8px 0 0 0;
    border-top: 1px solid var(--app-divider, rgba(15, 23, 42, 0.10));
    background: transparent;
}
body.page-settings .settings-rail-group:first-of-type {
    margin-top: 2px;
    padding-top: 0;
    border-top: 0;
}

/* Parent heading — explicitly NOT button-like on desktop. */
body.page-settings .settings-rail-summary {
    background: transparent !important;
    padding: 2px 8px 8px 8px;
    border-radius: 0;
}
body.page-settings .settings-rail-summary:hover {
    background: transparent !important;
}

body.page-settings .settings-rail-group-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-muted, #475569);
}
body.page-settings .settings-rail-group-desc {
    font-size: 10px;
    color: var(--app-muted, #94a3b8);
    margin-top: 3px;
    line-height: 1.4;
    font-style: italic;
}

/* Child items — clearly button-like. Indented from the heading. */
body.page-settings .settings-rail-list {
    margin: 4px 0 0 0;
    padding: 0;
}
body.page-settings .settings-rail-item {
    padding: 8px 10px 8px 14px;
    margin: 1px 0;
    border-radius: 8px;
    position: relative;
}
body.page-settings .settings-rail-item-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text, #0f172a);
    line-height: 1.3;
}
body.page-settings .settings-rail-item-hint {
    font-size: 11px;
    color: var(--app-muted, #64748b);
    margin-top: 2px;
    line-height: 1.4;
}

/* Hover — clearly different from group heading (which has no hover). */
body.page-settings .settings-rail-item:hover,
body.page-settings .settings-rail-item:focus-visible {
    background: rgba(21, 108, 138, 0.08);
    outline: none;
}

/* ----- (3) active state — high contrast + left accent bar -------- */
body.page-settings .settings-rail-item.is-active {
    background: rgba(21, 108, 138, 0.14);
}
body.page-settings .settings-rail-item.is-active::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--app-primary, #156c8a);
}
body.page-settings .settings-rail-item.is-active .settings-rail-item-label {
    color: var(--app-primary, #156c8a);
    font-weight: 700;
}
body.page-settings .settings-rail-group.is-active-group .settings-rail-group-label {
    color: var(--app-primary, #156c8a);
}

/* In-page jumps inside the same tab (e.g. Users & Access → adminTools
   #user-management-section) read as ordinary items: don't show the
   ↪ indicator because that's misleading. The cross-tab jumps under
   Advanced/Technical keep the indicator via .settings-rail-item-jump
   without .settings-rail-item-jump-inline. */
body.page-settings .settings-rail-item-jump.settings-rail-item-jump-inline::after {
    content: "";
}

/* Reset the existing ↪ indicator so it only appears on cross-tab
   jumps. Stage 2 added a default ↪; Stage 2.1 makes it explicit. */
body.page-settings .settings-rail-item.settings-rail-item-jump::after {
    content: " ↪";
    color: var(--app-muted, #64748b);
    font-size: 11px;
}
body.page-settings .settings-rail-item.settings-rail-item-jump.settings-rail-item-jump-inline::after {
    content: "";
}

/* STAGE6E_VISIBLE_SHELL_FIX_20260524 — mobile-only fallback;
   breakpoint lowered from 979→767. Above 768 the rail keeps its
   fixed-left sidebar layout (T-shape). */
@media (max-width: 767px) {
    body.page-settings.settings-rail-ready {
        padding-left: 0;
    }
    body.page-settings .settings-rail {
        /* sticky-top so it stays visible when scrolling content;
           the position:static fallback set in the other 767-block
           is overridden here intentionally — sticky beats static
           in cascade order if both selectors match. */
        position: sticky;
        top: 56px;
        z-index: 40;
        width: auto;
        max-height: 40vh;
        overflow-y: auto;
        margin: 0 0 12px 0;
    }
    body.page-settings .settings-rail-summary {
        cursor: pointer;
    }
    body.page-settings .settings-rail-summary::after {
        content: "▾";
        float: right;
        color: var(--app-muted, #64748b);
        transition: transform 0.15s ease;
        margin-left: 8px;
    }
    body.page-settings .settings-rail-details:not([open]) .settings-rail-summary::after {
        transform: rotate(-90deg);
    }
}

/* ----- dark mode --------------------------------------------------- */
[data-app-theme="dark"] body.page-settings .settings-rail-group {
    border-top-color: rgba(255, 255, 255, 0.10);
}
[data-app-theme="dark"] body.page-settings .settings-rail-group-label {
    color: rgba(229, 231, 235, 0.85);
}
[data-app-theme="dark"] body.page-settings .settings-rail-group-desc {
    color: rgba(229, 231, 235, 0.55);
}
[data-app-theme="dark"] body.page-settings .settings-rail-item-label {
    color: var(--app-text, #e5e7eb);
}
[data-app-theme="dark"] body.page-settings .settings-rail-item-hint {
    color: rgba(229, 231, 235, 0.65);
}
[data-app-theme="dark"] body.page-settings .settings-rail-item:hover,
[data-app-theme="dark"] body.page-settings .settings-rail-item:focus-visible {
    background: rgba(56, 189, 248, 0.10);
}
[data-app-theme="dark"] body.page-settings .settings-rail-item.is-active {
    background: rgba(56, 189, 248, 0.18);
}
[data-app-theme="dark"] body.page-settings .settings-rail-item.is-active::before {
    background: #7dd3fc;
}
[data-app-theme="dark"] body.page-settings .settings-rail-item.is-active .settings-rail-item-label {
    color: #7dd3fc;
}
[data-app-theme="dark"] body.page-settings .settings-rail-group.is-active-group .settings-rail-group-label {
    color: #7dd3fc;
}

/* ====================================================================
   STAGE3C1_DARKMODE_FIX_20260523 — dark-mode overrides for the
   bright pastel cards / pills / panels that were carried over
   from the original light-only Settings + diagnostics design.

   The Stage 1 / 2 / 2.1 / 3A–3C work focused on layout, gates,
   and visual hierarchy. Several inline-style boxes and
   pastel-background semantic badges were left light-only because
   they were defined alongside their panels' bespoke CSS. In dark
   mode those produced bright pastel rectangles that broke the
   theme.

   Strategy:
     - Attribute selectors catch every *-badge-ok / -info / -warn
       / -error variant across all 9 ETA panels and the email-
       scanner / receipt-lab / master-data status pills.
     - Inline-style backgrounds like `#fafbfc`, `#f8fafc`, `#fef2f2`,
       `#fee` are intercepted via [style*=...] selectors so we
       don't have to edit dozens of inline `style="..."` blobs.
     - Tables / striping rules get explicit dark-mode equivalents.
     - Semantic colour stays semantic: OK = green-ish, WARN =
       amber, ERROR = red. Only the channel-mixing changes (the
       light pastel fill becomes a translucent-on-dark tint).

   Light theme is untouched — every rule is scoped under
   [data-app-theme="dark"].
   ==================================================================== */

/* ----- ETA panel semantic badges (9 panels × 4 states = 36 rules → 4) */
[data-app-theme="dark"] body.page-settings [class*="-badge-ok"]    {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}
[data-app-theme="dark"] body.page-settings [class*="-badge-info"]  {
    background: rgba(59, 130, 246, 0.20) !important;
    color: #93c5fd !important;
}
[data-app-theme="dark"] body.page-settings [class*="-badge-warn"]  {
    background: rgba(245, 158, 11, 0.20) !important;
    color: #fcd34d !important;
}
[data-app-theme="dark"] body.page-settings [class*="-badge-error"] {
    background: rgba(239, 68, 68, 0.20) !important;
    color: #fca5a5 !important;
}

/* ----- Email scanner connection-state pill */
[data-app-theme="dark"] body.page-settings #emailScannerSettings .es-status.es-on {
    background: rgba(34, 197, 94, 0.20) !important;
    color: #86efac !important;
}
[data-app-theme="dark"] body.page-settings #emailScannerSettings .es-status.es-off {
    background: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
}
[data-app-theme="dark"] body.page-settings #emailScannerSettings .es-status.es-unknown {
    background: rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
}

/* Email scanner status box that loads diagnostic messages. The
   audit caught this with mean RGB 235 (light pink). */
[data-app-theme="dark"] body.page-settings #emailScannerOut {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fecaca !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
}

/* ----- Receipt Lab status pills */
[data-app-theme="dark"] body.page-settings #receiptLabSettings .rl-status.err {
    color: #fff !important;
    background: rgba(239, 68, 68, 0.55) !important;
    border-color: rgba(239, 68, 68, 0.65) !important;
}
[data-app-theme="dark"] body.page-settings #receiptLabSettings .rl-status.ok {
    color: #fff !important;
    background: rgba(34, 197, 94, 0.55) !important;
    border-color: rgba(34, 197, 94, 0.65) !important;
}

/* ----- DAL log summary + table striping. The audit caught
   #dalLogsSummary (mean 250) and the table rows (mean 245). */
[data-app-theme="dark"] body.page-settings #dalLogsSummary,
[data-app-theme="dark"] body.page-settings #dalLogsSummary[style] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--app-text, #e5e7eb) !important;
}
[data-app-theme="dark"] body.page-settings #dalLogsTable thead tr,
[data-app-theme="dark"] body.page-settings #dalLogsTable tr {
    background: transparent !important;
}
[data-app-theme="dark"] body.page-settings #dalLogsTable tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* ----- Audit log table row striping (admin tab) — same family */
[data-app-theme="dark"] body.page-settings #auditLogTable thead tr {
    background: rgba(255, 255, 255, 0.05) !important;
}
[data-app-theme="dark"] body.page-settings #auditLogTable tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* ----- Inline-style light backgrounds. These are scattered
   across automation/scheduler panels (lines 1966, 2045-2061,
   2215, 2291, 2344, 2378, 2403 of settings.html and similar).
   Using [style*=...] selectors so we don't have to touch the
   dozens of inline style attributes one by one. */

/* Light cream fill #fafbfc (automation cards, alert preview
   boxes, sched maps test result). */
[data-app-theme="dark"] body.page-settings [style*="#fafbfc"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--app-text, #e5e7eb) !important;
}
/* Slightly bluer #f8fafc (DAL summary, maps test pre, automation
   summary tiles). */
[data-app-theme="dark"] body.page-settings [style*="#f8fafc"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--app-text, #e5e7eb) !important;
}
/* Soft slate #f1f5f9 + #eef2f7 surfaces. */
[data-app-theme="dark"] body.page-settings [style*="#f1f5f9"],
[data-app-theme="dark"] body.page-settings [style*="#eef2f7"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--app-text, #e5e7eb) !important;
}

/* Light-red warn rows used in the automation panels: `background:#fee;
   color:#900`. Map to a translucent-red dark-mode tint. */
[data-app-theme="dark"] body.page-settings [style*="background:#fee"],
[data-app-theme="dark"] body.page-settings [style*="background: #fee"],
[data-app-theme="dark"] body.page-settings [style*="background:#fef2f2"],
[data-app-theme="dark"] body.page-settings [style*="background: #fef2f2"] {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
    color: #fecaca !important;
}
/* The deep red text inside those warn rows reads as ink on
   light pink. Lighten it for the dark-tinted bg above. */
[data-app-theme="dark"] body.page-settings [style*="background:#fee"] [style*="color:#900"],
[data-app-theme="dark"] body.page-settings [style*="background: #fee"] [style*="color:#900"] {
    color: #fecaca !important;
}

/* The Stage 1 STAGE1_VIS_CLEANUP scheduler "Danger zone" card
   (1741) uses `border: 1px solid #fca5a5; background: #fef2f2`.
   Caught by the [style*="#fef2f2"] rule above; also tame the
   border colour. */
[data-app-theme="dark"] body.page-settings [style*="#fca5a5"] {
    border-color: rgba(252, 165, 165, 0.40) !important;
}

/* ----- Sched scheduler shortcut tiles + service cards in admin
   sometimes show a faint white-strong fill. Force the existing
   --app-surface-soft token (dark-aware). */
[data-app-theme="dark"] body.page-settings .sched-shortcut {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--app-text, #e5e7eb) !important;
}
[data-app-theme="dark"] body.page-settings .sched-shortcut:hover {
    background: rgba(56, 189, 248, 0.10) !important;
}

/* ----- Generic safety net: any direct child of .tab-content
   with an inline white fill becomes the dark surface. */
[data-app-theme="dark"] body.page-settings .tab-content [style*="background:#fff"],
[data-app-theme="dark"] body.page-settings .tab-content [style*="background: #fff"],
[data-app-theme="dark"] body.page-settings .tab-content [style*="background:#ffffff"],
[data-app-theme="dark"] body.page-settings .tab-content [style*="background: #ffffff"],
[data-app-theme="dark"] body.page-settings .tab-content [style*="background-color:#fff"],
[data-app-theme="dark"] body.page-settings .tab-content [style*="background-color: #fff"] {
    background: var(--app-surface, #111827) !important;
    color: var(--app-text, #e5e7eb) !important;
}

/* ----- Scheduler diagnostics page — no offenders found by the
   audit but defensively flip any inline white fill that lands
   there to the dark surface. */
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="background:#fff"],
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="background: #fff"],
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="#f8fafc"] {
    background: var(--app-surface, #111827) !important;
    color: var(--app-text, #e5e7eb) !important;
}

/* Same safety net for the Reports Hub. */
[data-app-theme="dark"] body.page-reports [style*="background:#fff"],
[data-app-theme="dark"] body.page-reports [style*="background: #fff"],
[data-app-theme="dark"] body.page-reports [style*="#f8fafc"] {
    background: var(--app-surface, #111827) !important;
    color: var(--app-text, #e5e7eb) !important;
}

/* ----- The Stage 3C signpost banner inside the Scheduler tab
   used inline `style` with `background: var(--app-surface, #ffffff)`.
   That works in light. In dark the var resolves but if the
   token chain hasn't loaded yet, the #ffffff fallback flashes.
   Force the dark token explicitly when dark theme is on. */
[data-app-theme="dark"] body.page-settings #schedulerSettings .section [style*="background: var(--app-surface"] {
    background: var(--app-surface, #111827) !important;
}

/* ====================================================================
   STAGE3D_DARKMODE_DIAG_PAGE_20260523 — mirror Stage 3C.1's badge /
   pill / inline-style dark-mode overrides onto the new
   /scheduler/diagnostics page so the moved panels keep the dark-
   compatible palette they had under body.page-settings.

   Stage 3C.1's selectors were scoped to body.page-settings to keep
   blast radius small. After Stage 3D the same elements (eta-*-badge,
   inline-style cards, status pills, danger-zone red rows) live on
   body.page-scheduler-diagnostics. This block duplicates the rules
   with the new body class so the dark theme stays consistent across
   both pages.
   ==================================================================== */

/* Semantic badges. */
[data-app-theme="dark"] body.page-scheduler-diagnostics [class*="-badge-ok"] {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}
[data-app-theme="dark"] body.page-scheduler-diagnostics [class*="-badge-info"] {
    background: rgba(59, 130, 246, 0.20) !important;
    color: #93c5fd !important;
}
[data-app-theme="dark"] body.page-scheduler-diagnostics [class*="-badge-warn"] {
    background: rgba(245, 158, 11, 0.20) !important;
    color: #fcd34d !important;
}
[data-app-theme="dark"] body.page-scheduler-diagnostics [class*="-badge-error"] {
    background: rgba(239, 68, 68, 0.20) !important;
    color: #fca5a5 !important;
}

/* Inline-style light surfaces carried over from settings.html. */
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="#fafbfc"],
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="#f8fafc"],
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="#f1f5f9"],
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="#eef2f7"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--app-text, #e5e7eb) !important;
}

/* The danger-zone card uses `background: #fef2f2` + red border. */
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="background:#fee"],
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="background: #fee"],
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="background:#fef2f2"],
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="background: #fef2f2"] {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
    color: #fecaca !important;
}
[data-app-theme="dark"] body.page-scheduler-diagnostics [style*="#fca5a5"] {
    border-color: rgba(252, 165, 165, 0.40) !important;
}

/* moved-diagnostic-placeholder card in Settings — keep it muted in dark. */
[data-app-theme="dark"] body.page-settings .moved-diagnostic-placeholder {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px;
    padding: 14px 16px;
}
body.page-settings .moved-diagnostic-placeholder {
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid var(--app-divider, rgba(15, 23, 42, 0.08));
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
body.page-settings .moved-diagnostic-placeholder h3 {
    font-size: 14px;
    margin: 0 0 6px 0;
    color: var(--app-muted, #475569);
}
body.page-settings .moved-diagnostic-placeholder p {
    font-size: 12px;
    color: var(--app-muted, #64748b);
    margin: 0 0 8px 0;
    line-height: 1.5;
}

/* Wrapped moved panels inside scheduler_diagnostics — keep a slim
   gutter between cards so they don't bleed into each other. */
body.page-scheduler-diagnostics .schedx-moved-group {
    margin-top: 18px;
}
body.page-scheduler-diagnostics .schedx-moved-panel {
    margin-top: 16px;
}

/* The moved panels carry their own `.section` styling rules that
   were originally written against body.page-settings. Mirror them
   for body.page-scheduler-diagnostics so the dark surface still
   renders correctly. */
body.page-scheduler-diagnostics .section {
    background: var(--app-surface, #ffffff);
    border: 1px solid var(--app-divider, rgba(15, 23, 42, 0.10));
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    color: var(--app-text, #0f172a);
}
[data-app-theme="dark"] body.page-scheduler-diagnostics .section {
    background: var(--app-surface, #111827);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--app-text, #e5e7eb);
}

/* ---- Stage 3D mobile-overflow safety on /scheduler/diagnostics.
   Moved panels carry their own .section + .eta-*-recent-wrap +
   .eta-*-table styles that worked inside the Settings layout
   (clamped by .container max-width). On a single-column shell
   they need explicit horizontal scrolling for wide tables and
   `min-width: 0` on flex/grid children. */
body.page-scheduler-diagnostics .schedx-shell { min-width: 0; }
body.page-scheduler-diagnostics .section {
    min-width: 0;
    overflow-x: hidden;
}
body.page-scheduler-diagnostics .section .settings-table-shell,
body.page-scheduler-diagnostics .section [class*="-recent-wrap"],
body.page-scheduler-diagnostics .section [class*="-list-wrap"],
body.page-scheduler-diagnostics .section .audit-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
body.page-scheduler-diagnostics .section table { max-width: 100%; }
@media (max-width: 600px) {
    body.page-scheduler-diagnostics .schedx-shell {
        padding-left: 12px;
        padding-right: 12px;
    }
    body.page-scheduler-diagnostics .section {
        padding: 12px;
    }
}

/* ================================================================
   STAGE6B_PAGE_SHELL_TLAYOUT_20260524 — consistent T-shaped page
   shell for /settings, /reports, /scheduler/diagnostics.

   Goal: a full-width topbar that spans the viewport (above the
   left rail AND the main content), with the body's left rail +
   main content sitting below it as the bottom of the "T".

   The Settings page already has a left rail (`.settings-rail`)
   positioned `fixed` at top-left. Stage 6B keeps that approach
   for layout-stability and instead lifts the existing
   `.page-header` to a fixed top-bar so the rail starts BELOW it.

   The Reports and Scheduler Diagnostics pages share a simpler
   `.app-page-topbar` element + single-column body — no rail.

   Dark mode: uses the existing --app-* CSS variables so the
   bar flips automatically.
   ============================================================= */

/* --- Reports + Diagnostics shared topbar --------------------- */
.app-page-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    background: var(--app-surface, #ffffff);
    border-bottom: 1px solid var(--app-divider, rgba(15, 23, 42, 0.10));
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    width: 100%;
    box-sizing: border-box;
    color: var(--app-text, #0f172a);
}
[data-app-theme="dark"] .app-page-topbar {
    background: #0f172a;
    border-bottom-color: rgba(255, 255, 255, 0.10);
    color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.app-page-topbar-left,
.app-page-topbar-center,
.app-page-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.app-page-topbar-left  { flex: 0 0 auto; }
.app-page-topbar-center { flex: 1 1 auto; }
.app-page-topbar-right { flex: 0 0 auto; }
.app-page-topbar-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-page-topbar-sub {
    font-size: 12px;
    color: var(--app-muted, #64748b);
    line-height: 1.2;
    margin-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
}
.app-page-topbar .app-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--app-divider, rgba(15, 23, 42, 0.12));
    background: var(--app-surface, #ffffff);
    color: var(--app-text, #0f172a);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.app-page-topbar .app-back-link:hover {
    background: rgba(15, 23, 42, 0.04);
}
[data-app-theme="dark"] .app-page-topbar .app-back-link {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}
[data-app-theme="dark"] .app-page-topbar .app-back-link:hover {
    background: #273449;
}

/* Mobile: keep topbar single-line but smaller padding/title. */
@media (max-width: 720px) {
    .app-page-topbar {
        padding: 8px 12px;
        gap: 10px;
    }
    .app-page-topbar-title { font-size: 15px; }
    .app-page-topbar-sub { display: none; }
}

/* --- Settings: lift the existing .page-header into a fixed
       full-width topbar ------------------------------------- */
body.page-settings.settings-rail-ready .page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 10px 16px;
    background: var(--app-surface, #ffffff);
    border-bottom: 1px solid var(--app-divider, rgba(15, 23, 42, 0.10));
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-app-theme="dark"] body.page-settings.settings-rail-ready .page-header {
    background: #0f172a;
    border-bottom-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Reserve room at the top of the page for the now-fixed topbar
   and push the rail down to start below it. The existing rail
   rule at line ~14437 sets top: 8px; we override here so the
   rail sits inside the body region beneath the topbar. */
body.page-settings.settings-rail-ready {
    padding-top: 56px;
}
/* STAGE6E_VISIBLE_SHELL_FIX_20260524 — was 980. */
@media (min-width: 768px) {
    body.page-settings.settings-rail-ready .settings-rail {
        top: 64px;
        max-height: calc(100vh - 72px);
    }
}
/* STAGE6E_VISIBLE_SHELL_FIX_20260524 — true-mobile breakpoint
   updated from 979→767. Below 768 the rail stacks above content
   but is `position: sticky; top: 56px` so it stays visible when
   the user scrolls inside content (previously: the rail
   scrolled out of view, which is what the operator reported as
   "the panel is missing in some Settings items"). */
@media (max-width: 767px) {
    body.page-settings.settings-rail-ready .settings-rail {
        position: sticky;
        top: 56px;
        z-index: 40;
        max-height: 40vh;
        overflow-y: auto;
        margin-bottom: 12px;
    }
    body.page-settings.settings-rail-ready .page-header {
        padding: 8px 12px;
    }
    body.page-settings.settings-rail-ready .page-header-title {
        font-size: 15px;
    }
    body.page-settings.settings-rail-ready {
        padding-top: 52px;
    }
}

/* --- Reports + Diagnostics body sits below the topbar ------- */
body.page-reports .reports-shell,
body.page-scheduler-diagnostics .schedx-shell {
    /* The .app-page-topbar is now ABOVE these shells. Drop the
       internal "back link" floating treatment so the topbar's
       back link is the canonical entry-point. */
    padding-top: 16px;
}
/* Hide the legacy floating back links on Reports + Diagnostics
   (they're now in the new topbar). Keep them in DOM as fallback
   if the topbar fails to render for any reason. */
body.page-reports.app-page-tlayout .reports-back,
body.page-scheduler-diagnostics.app-page-tlayout .schedx-back {
    display: none;
}
/* Compact in-page section nav (used on Reports). */
.app-page-section-nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 18px;
    background: var(--app-surface-soft, rgba(15, 23, 42, 0.03));
    border-bottom: 1px solid var(--app-divider, rgba(15, 23, 42, 0.08));
    font-size: 13px;
}
[data-app-theme="dark"] .app-page-section-nav {
    background: #111827;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.app-page-section-nav a {
    color: var(--app-text, #0f172a);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
}
.app-page-section-nav a:hover {
    background: rgba(15, 23, 42, 0.06);
}
[data-app-theme="dark"] .app-page-section-nav a {
    color: #e2e8f0;
}
[data-app-theme="dark"] .app-page-section-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ====================================================================
   STAGE6F_REAL_SHELL_DOM_FIX_20260524 — Real DOM shell for the
   Settings page. Replaces the Stage 6E `position: fixed` rail
   trick with a CSS grid layout anchored to a real DOM structure:

       .container.settings-app-shell
         header.settings-shell-topbar
         #message-area
         .settings-shell-body
           aside.settings-shell-rail   (wraps the existing
                                        nav.settings-rail)
           main.settings-shell-main    (holds .tab-container +
                                        every .tab-content panel)

   The grid lives on .settings-shell-body (rail | main) and is
   independent of body padding-left, fixed positioning, or any
   viewport breakpoint above 768px. Stage 6E's @media (min-width:
   768px) padding-left + fixed-rail rules are neutralised below
   so the shell is the single source of truth on every viewport
   between 768 and ∞.

   Mobile (≤767): the body collapses to block flow, the rail
   becomes `position: sticky; top: 56px` and stays visible while
   the user scrolls content — the failure mode Stage 6E left in
   place at 720-979 is gone because the shell decides layout, not
   a CSS media query.

   No element ID, JS selector, save endpoint, form name, or data
   attribute moves. Stage 6D's `data-settings-shell-*` attributes
   still ride on the same elements. Stage 6B's .page-header
   styling still applies (the topbar element keeps the class).
   ==================================================================== */

/* (1) Shell wrapper — the .container element itself. */
body.page-settings .container.settings-app-shell {
    display: block;
    /* The grid lives on .settings-shell-body, not here, so the
       wrapper stays a normal block — this preserves the existing
       .container backdrop / max-width behaviour from the Stage 2.1
       polish rules without forcing the topbar into the grid. */
    min-height: 100vh;
    position: relative;
}

/* (2) Topbar — sticky at the top of the shell. Inherits the
   existing .page-header layout/typography but adds sticky-positioning
   so it survives content scroll. z-index above the rail so the
   "Dashboard" back-link and Settings title are always reachable. */
body.page-settings .settings-shell-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    /* The .page-header class already paints the background and
       border in both themes — preserve those, just ensure the sticky
       element isn't transparent. */
    background: var(--app-surface, #ffffff);
}
[data-app-theme="dark"] body.page-settings .settings-shell-topbar {
    background: var(--app-surface, #111827);
}

/* (3) Shell body — the grid container. Two columns: rail (220-280)
   and main (everything else). gap 16px. align-items:start keeps the
   rail anchored to the top instead of stretching to match the main
   column's height. min-height:0 prevents the grid track from
   blowing out when a long .tab-content forces overflow. */
body.page-settings .settings-shell-body {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-height: 0;
    margin-top: 12px;
}

/* (4) Rail column — sticky just below the topbar so it stays
   visible while content scrolls. align-self:start to opt out of
   the grid's default stretch. Internal overflow if the rail is
   taller than the viewport. */
body.page-settings .settings-shell-rail {
    grid-column: 1;
    position: sticky;
    top: 72px;
    align-self: start;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    z-index: 90;
}

/* The nav.settings-rail inside .settings-shell-rail loses its
   Stage 6E `position: fixed` so it sits naturally inside the grid
   column. Width is governed by the column, not by the rail itself. */
body.page-settings .settings-shell-rail .settings-rail {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    overflow-y: visible !important;
}

/* (5) Main column — holds .tab-container + every .tab-content.
   min-width:0 unlocks proper grid shrinking when a child has
   `overflow-x:auto` or a wide table inside. */
body.page-settings .settings-shell-main {
    grid-column: 2;
    min-width: 0;
}

/* (6) Neutralise the Stage 6E fixed-rail trick. The Stage 6E
   rules added body.padding-left and fixed-positioned the rail at
   any viewport ≥ 768px. With the new grid shell, both are wrong:
   the grid handles the layout, and padding-left would push the
   shell off-screen. Force the legacy rules off whenever the new
   shell is mounted. */
body.page-settings.settings-rail-ready.settings-rail-ready {
    padding-left: 0 !important;
}
/* If the rail JS hasn't applied .settings-rail-ready yet, the
   legacy padding-left still won't apply because the new grid
   layout doesn't depend on it. Belt-and-braces: clear it
   unconditionally on .page-settings. */
body.page-settings {
    padding-left: 0 !important;
}

/* (7) Mobile — collapse the grid to block flow and make the rail
   sticky-top so it stays visible while scrolling content. */
@media (max-width: 767px) {
    body.page-settings .settings-shell-body {
        display: block;
    }
    body.page-settings .settings-shell-rail {
        position: sticky;
        top: 56px;
        max-height: 45vh;
        margin: 0 0 12px 0;
        z-index: 90;
    }
    body.page-settings .settings-shell-rail .settings-rail {
        margin: 0 !important;
    }
}

/* (8) Stage 2.1 horizontal-overflow safety is preserved — the
   .container still gets max-width:100%, no margin auto, no
   backdrop-filter — but the rail width clamp is no longer
   relevant because the grid column governs it.
   Drop the Stage 2.1 rail-width clamps so the grid wins. */
@media (min-width: 768px) {
    body.page-settings.settings-rail-ready .settings-shell-rail
                                           .settings-rail {
        /* Hard reset — grid track decides the width. */
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        top: auto !important;
    }
}

/* (9) Dark-mode topbar override already handled above. The rail
   keeps its existing dark-mode look from the earlier rules. */

/* End STAGE6F_REAL_SHELL_DOM_FIX_20260524 */

/* STAGE6F additional safety — Stage 2.1's horizontal-overflow
   clamp targeted `.container > *` which doesn't reach through the
   new shell layers. Re-apply the same clamp to every direct
   child of .settings-shell-main and to every .tab-content panel
   inside it. */
body.page-settings .settings-shell-main,
body.page-settings .settings-shell-main > *,
body.page-settings .settings-shell-main .tab-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
body.page-settings .settings-shell-main {
    /* Defensive: panels with non-shrinkable inner content (wide
       tables, fixed-width grids) get horizontal scroll inside the
       main column instead of pushing the page overflow. */
    overflow-x: auto;
}

/* POD_FOR_SIMPLE_SHEETS (2026-05-30) — camera + tablet POD-status
   icons in the dispatch table's POD column. Greyed (disabled) when
   nothing of that type is captured; coloured + clickable when at
   least one record exists. Click opens a viewer modal filtered to
   that type only. */
.dispatch-pod-icon-pair {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.dispatch-pod-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.dispatch-pod-icon-active {
    color: #0d8a4a;
    background: rgba(13, 138, 74, 0.10);
    border-color: rgba(13, 138, 74, 0.35);
}
.dispatch-pod-icon-active:hover {
    background: rgba(13, 138, 74, 0.20);
    border-color: rgba(13, 138, 74, 0.55);
}
.dispatch-pod-icon-disabled {
    color: #adb5bd;
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.55;
}
.dispatch-pod-icon svg { display: block; }

/* Simple-sheet POD viewer modal — minimal layout that the existing
   global Modal can render. */
.dispatch-pod-simple-viewer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.dispatch-pod-simple-viewer-title {
    font-weight: 600;
    font-size: 1rem;
}
.dispatch-pod-simple-viewer-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dispatch-pod-record-card {
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
}
.dispatch-pod-record-card header {
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #495057;
}
.dispatch-pod-record-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 14px;
}
@media (max-width: 600px) {
    .dispatch-pod-record-grid { grid-template-columns: 1fr; }
}
.dispatch-pod-record-meta div {
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.dispatch-pod-record-meta code {
    font-size: 0.75rem;
    color: #495057;
}
.dispatch-pod-no-image {
    color: #adb5bd;
    font-style: italic;
    padding: 16px;
    text-align: center;
    border: 1px dashed #e0e3e8;
    border-radius: 8px;
}

/* POD capture button + modal on the per-import detail page. */
.ss-pod-capture-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ss-pod-capture-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ss-pod-capture-modal label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}
.ss-pod-capture-modal input,
.ss-pod-capture-modal textarea {
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font: inherit;
}
.ss-pod-signature-canvas {
    width: 100%;
    height: 200px;
    border: 1px dashed #ced4da;
    border-radius: 8px;
    background: #fafbfc;
    touch-action: none;
}
.ss-pod-capture-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* ---------------------------------------------------------------
 * TRACK_HOVER_1 (2026-06-10) — hover popover on user task tracking.
 * Theme-token only so dark mode reads correctly.
 * --------------------------------------------------------------- */
.track-hover-pop {
    position: fixed;
    z-index: 1200;
    width: min(320px, calc(100vw - 16px));
    background: var(--surface, #fff);
    color: var(--text, #1f2933);
    border: 1px solid var(--border, #d7e0e9);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.4;
    pointer-events: auto;
}
.track-hover-pop[hidden] { display: none; }
.track-hover-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border, #d7e0e9);
}
.track-hover-pop-title {
    font-weight: 700;
    color: var(--text, #1f2933);
    font-size: 13px;
}
.track-hover-pop-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid var(--border, #d7e0e9);
    color: var(--text-muted, #52606d);
    background: var(--surface-2, var(--surface, #f7fafc));
}
.track-hover-status-on {
    color: var(--success, #1e8a5c);
    border-color: var(--success, #1e8a5c);
}
.track-hover-status-off {
    color: var(--text-muted, #52606d);
}
.track-hover-status-stale {
    color: var(--warning, #b86a05);
    border-color: var(--warning, #b86a05);
}
.track-hover-pop-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.track-hover-pop-section-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #52606d);
    margin-bottom: 3px;
}
.track-hover-pop-task {
    color: var(--text, #1f2933);
}
.track-hover-pop-task-id {
    color: var(--accent, #156c8a);
    font-weight: 600;
}
.track-hover-pop-task-type {
    text-transform: capitalize;
}
.track-hover-pop-task-state {
    color: var(--text-muted, #52606d);
    font-size: 11.5px;
}
.track-hover-pop-task-customer {
    color: var(--text-muted, #52606d);
    font-size: 12px;
    margin-top: 2px;
}
.track-hover-pop-kv {
    width: 100%;
    border-collapse: collapse;
}
.track-hover-pop-kv th {
    text-align: left;
    font-weight: 500;
    color: var(--text-muted, #52606d);
    padding: 2px 6px 2px 0;
    white-space: nowrap;
    vertical-align: top;
    width: 80px;
}
.track-hover-pop-kv td {
    color: var(--text, #1f2933);
    padding: 2px 0;
}
.track-hover-pop-tz {
    color: var(--text-muted, #52606d);
    font-size: 11px;
}
.track-hover-pop-empty,
.track-hover-pop-empty-line {
    color: var(--text-muted, #52606d);
    font-style: italic;
}

/* SCHED_AUTO_CARD_THEME_1 (2026-06-13) — Automation tab count cards.
   Pre-fix, the cards used hard-coded #fff background + #1f2937 / #b91c1c
   foreground. In dark theme the background fell through to
   --app-surface-strong (#16202c) but the label (#374151) and the muted
   digits (#1f2937) stayed dark, so the numbers were nearly invisible.
   Now the cards use semantic theme tokens; light theme keeps the same
   look via fallbacks. */
.sched-auto-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #fff);
    color: var(--text, #1f2937);
    cursor: pointer;
    min-height: 60px;
    font-family: inherit;
    transition: border-color .15s ease, transform .12s ease;
}
.sched-auto-card:hover,
.sched-auto-card:focus-visible {
    border-color: var(--accent, #1d4ed8);
    outline: none;
}
.sched-auto-card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #1f2937);
    line-height: 1.1;
}
.sched-auto-card-label {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
    text-align: center;
}
.sched-auto-card--blocker   .sched-auto-card-value { color: var(--danger,  #b91c1c); }
.sched-auto-card--warning   .sched-auto-card-value { color: var(--warning, #b45309); }
.sched-auto-card--ok        .sched-auto-card-value { color: var(--success, #166534); }
.sched-auto-card--active    .sched-auto-card-value { color: var(--accent,  #1d4ed8); }
.sched-auto-card--cancelled .sched-auto-card-value { color: var(--text-muted, #6b7280); }

/* SCHED_ETA_CHIP_THEME_1 (2026-06-18) — ETA / Tracking tab chips.
   Pre-fix the stat cards used hard-coded #fff bg + #1f2937 digits +
   #374151 labels, all dark; in dark theme the bg fell through to
   --app-surface-strong (#16202c) and the digits + labels disappeared.
   Toolbar badges (mode label, confidence badge) were hard-coded #eef /
   #f1f5f9 light blocks — glaring in dark mode. Both now token-driven. */
.sched-eta-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 8px;
    border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #fff);
    color: var(--text, #1f2937);
    min-height: 56px;
}
.sched-eta-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #1f2937);
    line-height: 1.15;
}
.sched-eta-stat-label {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.sched-eta-stat--danger   .sched-eta-stat-value { color: var(--danger,  #b91c1c); }
.sched-eta-stat--warning  .sched-eta-stat-value { color: var(--warning, #b45309); }
.sched-eta-stat--ok       .sched-eta-stat-value { color: var(--success, #166534); }
.sched-eta-stat--muted    .sched-eta-stat-value { color: var(--text-muted, #6b7280); }
.sched-eta-stat--accent   .sched-eta-stat-value { color: var(--accent,  #1d4ed8); }

.sched-eta-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    background: var(--app-info-bg, #eef);
    color: var(--app-info-text, #03306b);
    border: 1px solid var(--app-info-border, transparent);
}
.sched-eta-badge--neutral {
    background: var(--surface-2, #f1f5f9);
    color: var(--text, #1f2937);
    border-color: var(--border, transparent);
}
.sched-eta-badge--sim {
    background: var(--app-danger-bg, #fee);
    color: var(--app-danger-text, #900);
    border-color: var(--app-danger-border, transparent);
}
.sched-eta-badge-strong { font-weight: 600; }
.sched-eta-badge-value--good    { color: var(--success, #16a34a); font-weight: 600; }
.sched-eta-badge-value--fair    { color: var(--warning, #d97706); font-weight: 600; }
.sched-eta-badge-value--poor    { color: var(--danger,  #b91c1c); font-weight: 600; }
.sched-eta-badge-value--unknown { color: var(--text-muted, #6b7280); font-weight: 600; }

.sched-eta-variant {
    margin-bottom: 4px;
    color: var(--text, #1f2937);
}
.sched-eta-variant--unavailable {
    color: var(--text-muted, #9ca3af);
}
.sched-eta-variant-note {
    color: var(--text-muted, #6b7280);
}
.sched-eta-data-quality {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}