: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"] {
    --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;
}

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

        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;
            touch-action: manipulation;
            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;
        }
        /* 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;
        }
        /* 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);
            }
        }

        /* 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{
            transform: translateX(var(--global-drawer-x, 0px));
            transition: transform 0.22s ease;
        }
        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;
        }
        /* SHAKE — when the drawer is collapsed AND tracking is on, the
           tracking button shakes continuously so the driver remembers
           GPS is active even when they can't see the full drawer. The
           shake is applied to the tracking button (not the whole
           drawer) so the mic button stays still. */
        @keyframes appTrackingPeekShake {
            0%, 100% { transform: skewY(-7deg) translate(0, 0); }
            15%      { transform: skewY(-7deg) translate(-3px, 1px); }
            30%      { transform: skewY(-7deg) translate(3px, -1px); }
            45%      { transform: skewY(-7deg) translate(-2px, 1px); }
            60%      { transform: skewY(-7deg) translate(2px, -1px); }
            75%      { transform: skewY(-7deg) translate(-1px, 0); }
            90%      { transform: skewY(-7deg) translate(1px, 0); }
        }
        body .app-global-drawer.is-collapsed.tracking-on .app-tracking-btn{
            animation: appTrackingPeekShake 1.2s ease-in-out infinite;
        }

        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);
    /* 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);
    /* 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: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-text, #0f172a);
}

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;
    margin: 4px 0 8px 0;
    padding: 0;
}

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

/* Wide viewport — sticky left rail. */
@media (min-width: 980px) {
    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;
    }
}

/* Narrow viewport — rail flows inline at top, accordion groups. */
@media (max-width: 979px) {
    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);
}

/* ====================================================================
   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. */
@media (min-width: 980px) {
    body.page-settings.settings-rail-ready {
        padding-left: clamp(240px, 18vw, 268px);
    }
    body.page-settings .settings-rail {
        width: clamp(220px, calc(18vw - 12px), 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: "";
}

/* ----- mobile / narrow ------------------------------------------- */
@media (max-width: 979px) {
    body.page-settings.settings-rail-ready {
        padding-left: 0;
    }
    body.page-settings .settings-rail {
        position: static;
        width: auto;
        max-height: none;
        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;
}