@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap");

            *,
            *::before,
            *::after {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            :root {
                --bg: #f7f6f2;
                --surface: #ffffff;
                --border: #e2e0d8;
                --border-md: #c8c6bc;
                --text: #1c1b18;
                --muted: #6b6960;
                --hint: #a09e96;
                --blue: #185fa5;
                --blue-bg: #e6f1fb;
                --blue-mid: #b8d6f5;
                --green: #3b6d11;
                --green-bg: #eaf3de;
                --amber: #854f0b;
                --amber-bg: #faeeda;
                --red: #a32d2d;
                --red-bg: #fcebeb;
                --purple: #5c3a8f;
                --purple-bg: #f0eaf9;
                --accent: #378add;
                --radius: 10px;
                --radius-sm: 6px;
                --row-h: 42px;
            }

            body {
                font-family: "DM Sans", sans-serif;
                background: var(--bg);
                color: var(--text);
                min-height: 100vh;
                font-size: 13px;
                line-height: 1.5;
            }

            /* ── LAYOUT ── */
            .app {
                display: flex;
                flex-direction: column;
                height: 100vh;
                overflow: hidden;
            }

            /* ── HEADER ── */
            .header {
                background: var(--surface);
                border-bottom: 1px solid var(--border);
                padding: 0 16px;
                display: flex;
                align-items: center;
                gap: 12px;
                height: 48px;
                flex-shrink: 0;
                z-index: 10;
            }
            .logo-mark {
                display: flex;
                align-items: center;
                gap: 8px;
                text-decoration: none;
                color: inherit;
                flex-shrink: 0;
            }
            .logo-icon {
                width: 28px;
                height: 28px;
                background: var(--text);
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .logo-icon svg {
                width: 16px;
                height: 16px;
                fill: none;
                stroke: white;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
            }
            .logo-text {
                font-size: 14px;
                font-weight: 600;
                letter-spacing: -0.01em;
            }
            .logo-sub {
                font-size: 10px;
                font-family: "DM Mono", monospace;
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: 0.06em;
                margin-top: -1px;
            }

            .nav {
                display: flex;
                gap: 2px;
                margin-left: 8px;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                padding: 3px;
            }
            .nav-btn {
                padding: 4px 13px;
                border-radius: 4px;
                font-size: 12px;
                font-weight: 400;
                font-family: "DM Sans", sans-serif;
                cursor: pointer;
                border: none;
                background: transparent;
                color: var(--muted);
                transition: all 0.1s;
                white-space: nowrap;
            }
            .nav-btn.active {
                background: var(--surface);
                color: var(--text);
                font-weight: 500;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            }
            .nav-btn:not(.active):hover {
                color: var(--text);
            }
            .nav-btn.admin-only,
            .nav-btn.dispatcher-only {
                display: none;
            }

            .header-right {
                margin-left: auto;
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .user-chip {
                font-size: 11px;
                color: var(--muted);
                display: flex;
                align-items: center;
                gap: 5px;
                font-family: "DM Mono", monospace;
            }
            .user-role-badge {
                font-size: 10px;
                padding: 1px 7px;
                border-radius: 99px;
                font-family: "DM Mono", monospace;
                font-weight: 500;
            }
            .role-admin {
                background: var(--purple-bg);
                color: var(--purple);
            }
            .role-dispatcher {
                background: var(--blue-bg);
                color: var(--blue);
            }
            .role-payroll {
                background: var(--amber-bg);
                color: var(--amber);
            }
            .role-viewer {
                background: var(--border);
                color: var(--muted);
            }

            /* ── ACCOUNT MENU ── */
            .account-menu {
                position: relative;
            }
            .account-menu .user-chip {
                background: none;
                border: 1px solid transparent;
                cursor: pointer;
                padding: 3px 6px;
                border-radius: var(--radius-sm);
                transition:
                    background 0.12s,
                    border-color 0.12s;
            }
            .account-menu .user-chip:hover {
                background: var(--bg);
                border-color: var(--border);
            }
            .account-caret {
                font-size: 9px;
                color: var(--hint);
                margin-left: 1px;
            }
            .account-dropdown {
                position: absolute;
                top: calc(100% + 6px);
                right: 0;
                min-width: 230px;
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
                padding: 6px;
                z-index: 50;
                display: none;
            }
            .account-dropdown.open {
                display: block;
            }
            .account-dropdown-head {
                display: flex;
                align-items: center;
                gap: 9px;
                padding: 6px 8px 8px;
            }
            .account-avatar {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: var(--text);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 14px;
                flex-shrink: 0;
                text-transform: uppercase;
            }
            .account-id {
                min-width: 0;
            }
            .account-name {
                font-size: 12px;
                font-weight: 600;
                color: var(--text);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .account-mail {
                font-size: 11px;
                color: var(--muted);
                font-family: "DM Mono", monospace;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .account-dropdown-sep {
                height: 1px;
                background: var(--border);
                margin: 2px 0 4px;
            }
            .account-action {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 100%;
                padding: 7px 8px;
                border: none;
                background: none;
                border-radius: var(--radius-sm);
                font-family: "DM Sans", sans-serif;
                font-size: 12px;
                color: var(--text);
                text-align: left;
                text-decoration: none;
                cursor: pointer;
            }
            .account-action:hover {
                background: var(--bg);
            }
            .account-action-icon {
                width: 16px;
                text-align: center;
                color: var(--muted);
            }

            /* ── AUTH GATE OVERLAY ── */
            .auth-overlay {
                position: fixed;
                inset: 0;
                background: rgba(247, 246, 242, 0.96);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 900;
                padding: 20px;
            }
            .auth-card {
                background: var(--surface);
                border: 1px solid var(--border);
                border-radius: var(--radius);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
                padding: 32px 28px;
                max-width: 420px;
                width: 100%;
                text-align: center;
            }
            .auth-lock {
                font-size: 32px;
                margin-bottom: 10px;
            }
            .auth-title {
                font-size: 17px;
                font-weight: 600;
                margin-bottom: 8px;
            }
            .auth-msg {
                font-size: 13px;
                color: var(--muted);
                line-height: 1.55;
                margin-bottom: 20px;
            }
            .auth-actions {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
                min-height: 44px;
            }
            .btn-google {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                background: var(--surface);
                border: 1px solid var(--border-md);
                color: var(--text);
                font-weight: 500;
                padding: 10px 18px;
            }
            .btn-google:hover {
                background: var(--bg);
            }
            .btn-google .g-logo {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
            }
            .btn-google.disabled {
                opacity: 0.5;
                pointer-events: none;
            }
            .auth-actions .btn {
                text-decoration: none;
            }

            .sync-info {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 11px;
                color: var(--hint);
            }
            .sync-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--green);
                flex-shrink: 0;
            }
            .sync-dot.loading {
                background: var(--amber);
                animation: pulse 1s infinite;
            }
            @keyframes pulse {
                0%,
                100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.3;
                }
            }

            /* ── PANELS ── */
            .panel {
                display: none;
                flex: 1;
                flex-direction: column;
                overflow: hidden;
            }
            .panel.active {
                display: flex;
            }

            /* ── TOOLBAR ── */
            .toolbar {
                padding: 8px 14px;
                display: flex;
                align-items: center;
                gap: 8px;
                background: var(--surface);
                border-bottom: 1px solid var(--border);
                flex-shrink: 0;
                flex-wrap: wrap;
            }
            .tb-label {
                font-size: 11px;
                color: var(--muted);
                font-family: "DM Mono", monospace;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                white-space: nowrap;
            }
            .tb-sep {
                width: 1px;
                height: 20px;
                background: var(--border);
                flex-shrink: 0;
            }
            .tb-spacer {
                flex: 1;
            }

            input[type="text"],
            input[type="date"],
            input[type="number"],
            input:not([type]),
            select,
            textarea {
                font-family: "DM Sans", sans-serif;
                font-size: 13px;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                padding: 5px 9px;
                background: var(--bg);
                color: var(--text);
                outline: none;
                transition: border-color 0.12s;
            }
            input:focus,
            select:focus,
            textarea:focus {
                border-color: var(--accent);
                background: white;
            }
            input[type="date"] {
                font-family: "DM Mono", monospace;
                font-size: 12px;
            }

            .btn {
                font-family: "DM Sans", sans-serif;
                font-size: 12px;
                font-weight: 500;
                padding: 5px 13px;
                border-radius: var(--radius-sm);
                border: 1px solid transparent;
                cursor: pointer;
                transition: all 0.1s;
                white-space: nowrap;
            }
            .btn-primary {
                background: var(--text);
                color: white;
            }
            .btn-primary:hover {
                background: #333;
            }
            .btn-ghost {
                background: transparent;
                border-color: var(--border);
                color: var(--muted);
            }
            .btn-ghost:hover {
                border-color: var(--border-md);
                color: var(--text);
            }
            .btn-danger {
                background: var(--red-bg);
                color: var(--red);
                border-color: transparent;
            }
            .btn-danger:hover {
                background: #f8d7d7;
            }
            .btn-sm {
                padding: 3px 9px;
                font-size: 11px;
            }
            .btn:disabled {
                opacity: 0.45;
                cursor: default;
                pointer-events: none;
            }

            .pill-group {
                display: flex;
                gap: 3px;
            }
            .pill {
                font-size: 11px;
                font-family: "DM Sans", sans-serif;
                padding: 3px 11px;
                border-radius: 99px;
                border: 1px solid var(--border);
                background: transparent;
                color: var(--muted);
                cursor: pointer;
                transition: all 0.1s;
            }
            .pill.active {
                background: var(--text);
                color: white;
                border-color: var(--text);
            }
            .pill:not(.active):hover {
                border-color: var(--border-md);
                color: var(--text);
            }

            /* ── STAT BAR ── */
            .stat-bar {
                display: flex;
                gap: 1px;
                background: var(--border);
                border-bottom: 1px solid var(--border);
                flex-shrink: 0;
                overflow-x: auto;
            }
            .stat-cell {
                background: var(--surface);
                padding: 8px 16px;
                flex: 1;
                min-width: 90px;
                white-space: nowrap;
            }
            .stat-label {
                font-size: 10px;
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: 0.06em;
                font-family: "DM Mono", monospace;
                margin-bottom: 1px;
            }
            .stat-val {
                font-size: 18px;
                font-weight: 500;
                font-family: "DM Mono", monospace;
            }
            .stat-val.green {
                color: var(--green);
            }
            .stat-val.amber {
                color: var(--amber);
            }
            .stat-val.red {
                color: var(--red);
            }
            .stat-val.blue {
                color: var(--blue);
            }
            .stat-val.muted {
                color: var(--hint);
            }

            /* ── DISPATCH BOARD ── */
            #panel-dispatch {
                flex-direction: column;
            }

            .dispatch-layout {
                display: flex;
                flex: 1;
                overflow: hidden;
            }

            /* Table area */
            .dispatch-main {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                position: relative;
            }
            .board-loading {
                position: absolute;
                inset: 0;
                background: rgba(247, 246, 242, 0.7);
                display: none;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: 10px;
                z-index: 5;
            }
            .board-loading.on {
                display: flex;
            }

            .table-wrap {
                flex: 1;
                overflow: auto;
            }

            table.dispatch-table {
                width: 100%;
                min-width: 1620px; /* >= sum of column widths, so columns (e.g. Status) scroll instead of squishing */
                border-collapse: collapse;
                font-size: 12px;
                user-select: none; /* rows are click-to-select; shift-click shouldn't smear a text selection */
            }
            table.dispatch-table input,
            table.dispatch-table textarea {
                user-select: text; /* but editable cells still need text selection */
            }
            table.dispatch-table thead th {
                position: sticky;
                top: 0;
                z-index: 2;
                background: var(--surface);
                border-bottom: 2px solid var(--border);
                padding: 0 10px;
                height: 36px;
                text-align: left;
                font-size: 10px;
                font-weight: 500;
                font-family: "DM Mono", monospace;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--muted);
                white-space: nowrap;
            }
            table.dispatch-table thead th:first-child {
                padding-left: 14px;
            }
            /* Freeze the FO # column while the table scrolls horizontally. */
            table.dispatch-table thead th:first-child {
                z-index: 3;
            }
            table.dispatch-table thead th:first-child,
            table.dispatch-table tbody td:first-child {
                position: sticky;
                left: 0;
            }
            /* border-collapse suppresses box-shadow/border on table cells, so the
               divider is a positioned pseudo-element instead. */
            table.dispatch-table thead th:first-child::after,
            table.dispatch-table tbody td:first-child::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: 1px;
                background: var(--border);
            }
            table.dispatch-table tbody td:first-child {
                z-index: 1;
                background: var(--bg);
                border-bottom: 1px solid var(--border);
            }
            table.dispatch-table tbody tr.fo-grp-1 td:first-child {
                background: #eceae1;
            }
            table.dispatch-table tbody tr.load-hover td:first-child {
                background: #eef1f5;
            }
            table.dispatch-table tbody tr.selected td:first-child {
                background: var(--blue-bg);
            }

            table.dispatch-table tbody tr {
                border-bottom: 1px solid var(--border);
                transition: background 0.08s;
                cursor: pointer;
            }
            /* Alternating shade groups consecutive trips of the same FO. A warm
               neutral, distinct from the white rows and the blue selected row. */
            table.dispatch-table tbody tr.fo-grp-1 {
                background: #eceae1;
            }
            /* Hover is applied to every row of a load by hoverLoad(), not by
               :hover — a merged cell is transparent, so tinting only the row
               under the cursor would light up part of it and not the rest. */
            table.dispatch-table tbody tr.load-hover {
                background: #eef1f5;
            }
            table.dispatch-table tbody tr.selected {
                background: var(--blue-bg);
            }
            table.dispatch-table tbody tr.source-manual td:first-child {
                border-left: 3px solid var(--amber);
            }
            table.dispatch-table tbody tr.source-carryover td:first-child {
                border-left: 3px solid var(--purple);
            }

            table.dispatch-table tbody td {
                padding: 0 10px;
                height: var(--row-h);
                vertical-align: middle;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 180px;
            }
            table.dispatch-table tbody td:first-child {
                padding-left: 14px;
            }
            .col-divider {
                border-left: 1px solid var(--border);
            }

            .td-fo {
                font-family: "DM Mono", monospace;
                font-size: 11px;
                color: var(--muted);
            }

            /* Convoy groups: a cycling palette per group token on the loaded
               day. The tr carries cg-N (stripe on the FO cell) and the badge
               inside the FO cell repeats the color, so groups read together
               even when the FO shading alternates. */
            .cg-0 { --cg-color: #1e88e5; }
            .cg-1 { --cg-color: #43a047; }
            .cg-2 { --cg-color: #e53935; }
            .cg-3 { --cg-color: #8e24aa; }
            .cg-4 { --cg-color: #f4511e; }
            .cg-5 { --cg-color: #00897b; }
            tr[class*="cg-"] .td-crew {
                box-shadow: inset 3px 0 0 var(--cg-color);
            }
            .convoy-badge {
                display: inline-block;
                font-family: "DM Mono", monospace;
                font-size: 9px;
                font-weight: 500;
                padding: 0 5px;
                border-radius: 99px;
                color: #fff;
                background: var(--cg-color);
            }
            /* Billing Cat. column has spare width after its chip — the convoy
               badge sits there instead of taking a column of its own. */
            .billingcat-cell {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 4px;
            }
            /* Color-coded labels (customer group, billing category) — the hue
               is derived from the text (see colorChip/catSwatch in Core.html). */
            .color-chip {
                display: inline-block;
                max-width: 100%;
                font-size: 10px;
                font-weight: 500;
                font-family: "DM Mono", monospace;
                padding: 1px 7px;
                border-radius: 99px;
                border: 1px solid var(--border);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                vertical-align: middle;
            }
            .color-chip.empty {
                background: var(--bg);
                color: var(--hint);
                border-color: var(--border);
            }
            .cat-cell {
                display: flex;
                align-items: center;
                min-width: 0;
            }
            .cat-cell .cell-select,
            .cat-cell .cell-input {
                flex: 1;
                min-width: 0;
            }
            .cat-swatch {
                display: inline-block;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                margin-right: 6px;
                flex-shrink: 0;
            }
            /* Checkbox list (default helper picker) */
            .chk-list {
                display: flex;
                flex-direction: column;
                gap: 2px;
                max-height: 68px;
                overflow-y: auto;
            }
            .chk {
                display: flex;
                align-items: center;
                gap: 5px;
                font-size: 11px;
                cursor: pointer;
                white-space: nowrap;
            }
            .chk input {
                margin: 0;
                cursor: pointer;
            }

            /* Crew rail: a toggled column of draggable crew cards beside the
               dispatch table; table rows are the drop targets. */
            .cb-rail {
                width: 230px;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                background: var(--surface);
                border-left: 1px solid var(--border);
                overflow: hidden;
            }
            .cb-rail-head-actions {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .cb-rail-sort-wrap {
                position: relative;
                width: 14px;
                height: 14px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            .cb-rail-sort-icon {
                font-size: 12px;
                color: var(--muted);
                pointer-events: none;
            }
            .cb-rail-sort {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                padding: 0;
                border: 0;
                opacity: 0;
                cursor: pointer;
            }
            .cb-rail-icon-btn {
                background: none;
                border: none;
                padding: 0;
                font-size: 12px;
                color: var(--muted);
                cursor: pointer;
                line-height: 1;
            }
            .cb-rail-icon-btn:hover {
                color: var(--text);
            }
            .cb-rail-list {
                overflow-y: auto;
                padding: 8px;
                flex: 1;
            }
            .cb-crew-driver {
                font-weight: 500;
            }
            .cb-crew-helpers,
            .cb-crew-default {
                color: var(--muted);
                font-style: italic;
            }
            .cb-empty {
                font-size: 11px;
                color: var(--hint);
                font-style: italic;
                padding: 6px 2px;
            }

            /* Draggable crew cards (rail) — driver/helper on top, plate below */
            .cb-crew-card {
                position: relative;
                border: 1px solid var(--border-md);
                border-radius: var(--radius-sm);
                background: var(--bg);
                padding: 6px 8px;
                margin-bottom: 6px;
                cursor: grab;
            }
            .cb-crew-card:active {
                cursor: grabbing;
            }
            .cb-crew-card.assigned {
                opacity: 0.4;
            }
            /* Count of trips already assigned to this crew today. */
            .cb-crew-badge {
                position: absolute;
                top: -6px;
                right: -6px;
                min-width: 16px;
                height: 16px;
                padding: 0 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 99px;
                background: var(--accent);
                color: #fff;
                font-size: 10px;
                font-weight: 600;
                font-family: "DM Mono", monospace;
            }
            .cb-crew-line {
                font-size: 12px;
            }
            .cb-crew-plate {
                display: flex;
                align-items: center;
                gap: 5px;
                margin-top: 3px;
            }
            .cb-crew-platenum {
                font-family: "DM Mono", monospace;
                font-size: 11px;
                color: var(--muted);
            }
            /* The rows a crew drop will land on, highlighted as one block —
               assignCrew writes the whole load, so cbDragOver marks every row
               of it (same reason hoverLoad does). The frozen FO cell paints
               its own background, so it needs the tint spelled out too.
               No ring: on a multi-row load a per-tr ring boxes each row
               separately, and its left edge is clipped by the sticky FO cell
               anyway — the blue reads clearly enough against the neutral
               hover tint. */
            table.dispatch-table tbody tr.cb-drop-hover,
            table.dispatch-table tbody tr.cb-drop-hover td:first-child {
                background: var(--blue-bg);
            }

            /* Row-reorder drag handle, sits inside the frozen FO cell. One per
               load, on the load's first row; the load's other rows get the
               .spacer variant so their FO #s line up under it. */
            .row-drag-handle {
                display: inline-block;
                width: 11px;
                cursor: grab;
                color: var(--muted);
                margin-right: 4px;
                font-size: 13px;
                line-height: 1;
            }
            .row-drag-handle:active {
                cursor: grabbing;
            }
            .row-drag-handle.spacer {
                visibility: hidden;
            }
            /* Insertion indicator for row-reorder drag-over (drawn inset so it
               doesn't shift row height/layout). Drawn per-cell rather than on
               the tr: the sticky FO cell paints over a tr box-shadow (clipping
               the left) and renders it a hair off from the tr's, giving a
               seam — one shadow per td is uniform across the whole width.
               The classes mark the target LOAD's edges (markRowDropIndicator),
               since that's where the drop lands. A merged cell lives on the
               block's first row and ends at the block's bottom, so the "after"
               line has to be drawn on the first row's rowspan'd cells as well
               as the last row's own — otherwise it stops dead at the Crew
               column. */
            table.dispatch-table tbody tr.drop-before td {
                box-shadow: inset 0 2px 0 0 var(--accent);
            }
            table.dispatch-table tbody tr.drop-after td,
            table.dispatch-table tbody tr.drop-after-merged td[rowspan] {
                box-shadow: inset 0 -2px 0 0 var(--accent);
            }

            /* Reorder feedback: fade the dragged row while it's in flight, and
               flash rows into their new home when the drop lands. */
            table.dispatch-table tbody tr.row-dragging {
                opacity: 0.45;
            }
            @keyframes row-settle {
                from { background: var(--blue-bg); }
            }
            table.dispatch-table tbody tr.just-moved,
            table.dispatch-table tbody tr.just-moved td:first-child {
                animation: row-settle 0.5s ease-out;
            }
            @media (prefers-reduced-motion: reduce) {
                table.dispatch-table tbody tr.just-moved,
                table.dispatch-table tbody tr.just-moved td:first-child {
                    animation: none;
                }
            }

            .selection-count {
                font-size: 11px;
                font-family: "DM Mono", monospace;
                color: var(--muted);
                white-space: nowrap;
            }

            /* Share-to-Drivers cards (screen side; print has its own CSS) */
            .ds-card-row {
                display: flex;
                gap: 6px;
                margin-bottom: 8px;
                align-items: flex-start;
            }
            .ds-card-controls {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }
            .ds-card {
                flex: 1;
                border: 1px solid var(--border-md);
                border-radius: var(--radius-sm);
                padding: 8px 10px;
                background: var(--surface);
            }
            .ds-convoy {
                font-size: 11px;
                font-weight: 600;
                color: var(--purple);
                margin-bottom: 4px;
            }
            .ds-leg {
                display: flex;
                flex-wrap: wrap;
                gap: 4px 10px;
                font-size: 12px;
                font-weight: 500;
            }
            .ds-plate {
                font-family: "DM Mono", monospace;
            }
            .ds-wb {
                font-family: "DM Mono", monospace;
                color: var(--muted);
                font-size: 11px;
                margin-left: auto;
                white-space: nowrap;
            }
            .ds-stops {
                margin-top: 5px;
                border-top: 1px dashed var(--border);
                padding-top: 5px;
            }
            .ds-stop {
                font-size: 12px;
                margin-bottom: 6px;
            }
            .ds-stop-top {
                display: flex;
                align-items: baseline;
                gap: 6px;
            }
            .ds-stop-n {
                font-weight: 600;
            }
            .ds-fo {
                font-family: "DM Mono", monospace;
                font-weight: 600;
                white-space: nowrap;
            }
            .ds-outlet {
                display: flex;
                flex-wrap: wrap;
                align-items: baseline;
                gap: 2px 6px;
                margin-left: 16px;
            }
            .ds-area,
            .ds-qty {
                color: var(--muted);
                font-size: 11px;
                white-space: nowrap;
            }
            .ds-remarks {
                font-size: 11px;
                color: var(--amber);
                margin-left: 16px;
            }
            .ds-address {
                font-size: 11px;
                color: var(--muted);
                margin-left: 16px;
            }
            .td-outlet {
                font-weight: 500;
                max-width: 200px !important;
            }
            .td-address {
                max-width: 220px !important;
                color: var(--muted);
            }
            .td-area {
                color: var(--muted);
                font-size: 11px;
            }
            .td-rdd {
                font-family: "DM Mono", monospace;
                font-size: 11px;
                color: var(--muted);
                white-space: nowrap;
            }
            .td-qty {
                font-family: "DM Mono", monospace;
                text-align: right;
            }
            .td-plate {
                font-family: "DM Mono", monospace;
                font-size: 11px;
            }
            .td-wb {
                font-family: "DM Mono", monospace;
                font-size: 11px;
            }

            /* Inline cell editors (dispatch table) */
            .cell-select,
            .cell-input {
                font-size: 11px;
                padding: 3px 6px;
                width: 100%;
                max-width: 100%;
                background: transparent;
                border: 1px solid transparent;
                border-radius: var(--radius-sm);
            }
            .cell-select:hover,
            .cell-input:hover {
                border-color: var(--border);
                background: var(--bg);
            }
            .cell-select:focus,
            .cell-input:focus {
                border-color: var(--accent);
                background: white;
            }
            .td-crew,
            .td-status,
            .td-remarks {
                max-width: 180px !important;
                white-space: normal;
                overflow: visible;
            }
            .td-crew .crew-cell {
                margin-top: 2px;
            }
            .td-crew .crew-driver {
                margin-right: 4px;
            }
            /* Assigned-crew card inside the dispatch table's Crew column. */
            .crew-card {
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .crew-card.empty {
                min-height: 22px;
            }
            .crew-card-body {
                display: flex;
                flex-direction: column;
                gap: 2px;
                min-width: 0;
                flex: 1;
            }
            .crew-card-top {
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .crew-card-plate {
                font-family: "DM Mono", monospace;
                font-size: 11px;
                font-weight: 500;
            }
            .crew-card-crew {
                font-size: 11px;
            }
            .cb-unassign {
                margin-left: auto;
                border: none;
                background: transparent;
                color: var(--hint);
                cursor: pointer;
                font-size: 11px;
                padding: 0 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                align-self: stretch;
            }
            .cb-unassign:hover {
                color: var(--red);
            }
            .cell-select.sc-scheduled {
                color: var(--blue);
            }
            .cell-select.sc-delivered {
                color: var(--green);
            }
            .cell-select.sc-undelivered,
            .cell-select.sc-fouln,
            .cell-select.sc-foutr {
                color: var(--red);
            }
            .cell-select.sc-redeliver {
                color: var(--purple);
            }
            .cell-select.badge-driver {
                background: transparent;
                color: var(--blue);
            }
            .cell-select.badge-helper {
                background: transparent;
                color: var(--green);
            }
            .cell-select.badge-driver-helper {
                background: transparent;
                color: var(--amber);
            }
            .wb-inline {
                display: flex;
                gap: 3px;
                align-items: center;
            }
            .wb-inline .wb-in {
                width: 80px;
            }
            .row-confirm,
            .row-del {
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: transparent;
                cursor: pointer;
                font-size: 11px;
                padding: 2px 6px;
                color: var(--muted);
                flex-shrink: 0;
            }
            .row-confirm:hover {
                background: var(--green-bg);
                color: var(--green);
                border-color: var(--green);
            }
            .row-del {
                border-color: transparent;
            }
            .row-del:hover {
                background: var(--red-bg);
                color: var(--red);
            }
            /* Remarks input + delete button on one line — the input was
               previously full-width, squeezing the delete button down to a
               sliver that rendered as an ellipsis. */
            .remarks-cell {
                display: flex;
                align-items: center;
                gap: 4px;
            }
            .remarks-cell .remarks-in {
                flex: 1;
                min-width: 0;
            }

            /* Status chips */
            .status-chip {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-size: 10px;
                font-weight: 500;
                font-family: "DM Mono", monospace;
                padding: 2px 8px;
                border-radius: 99px;
                white-space: nowrap;
            }
            .sc-prepping {
                background: var(--border);
                color: var(--muted);
            }
            .sc-backlog {
                background: #ede7f6;
                color: #5e35b1;
            }
            .sc-scheduled {
                background: var(--blue-bg);
                color: var(--blue);
            }
            .sc-preload {
                background: #e0f2f1;
                color: #00695c;
            }
            .sc-delivered {
                background: var(--green-bg);
                color: var(--green);
            }
            .sc-undelivered {
                background: var(--red-bg);
                color: var(--red);
            }
            .sc-fouln {
                background: #fff3e0;
                color: #bf6800;
            }
            .sc-foutr {
                background: var(--amber-bg);
                color: var(--amber);
            }
            .sc-redeliver {
                background: var(--purple-bg);
                color: var(--purple);
            }
            .sc-twoday {
                background: #e8f5e9;
                color: #2e7d32;
            }

            /* Driver cell */
            .crew-cell {
                display: flex;
                flex-direction: column;
                gap: 1px;
            }
            .crew-driver {
                font-size: 12px;
                font-weight: 500;
            }
            .crew-helper {
                font-size: 10px;
                color: var(--muted);
                font-style: italic;
            }
            .crew-empty {
                font-size: 11px;
                color: var(--hint);
                font-style: italic;
            }

            /* Waybill cell */
            .wb-confirmed {
                color: var(--text);
            }
            .wb-suggested {
                color: var(--hint);
                font-style: italic;
            }
            .wb-none {
                color: var(--hint);
            }

            /* Empty state */
            .empty-board {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: var(--hint);
                gap: 8px;
                padding: 48px;
            }
            .empty-board .icon {
                font-size: 36px;
            }
            .empty-board .msg {
                font-size: 14px;
                font-weight: 500;
                color: var(--muted);
            }
            .empty-board .sub {
                font-size: 12px;
                text-align: center;
                max-width: 280px;
            }

            /* ── TRIP DETAIL SIDEBAR ── */
            .trip-sidebar {
                width: 300px;
                flex-shrink: 0;
                border-left: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                background: var(--surface);
                overflow: hidden;
            }
            .sidebar-head {
                padding: 10px 14px;
                border-bottom: 1px solid var(--border);
                display: flex;
                align-items: center;
                gap: 8px;
                flex-shrink: 0;
            }
            .sidebar-head-title {
                font-weight: 600;
                font-size: 13px;
                flex: 1;
            }
            .sidebar-close {
                cursor: pointer;
                color: var(--hint);
                font-size: 16px;
                padding: 2px 6px;
                border-radius: 4px;
                border: none;
                background: transparent;
            }
            .sidebar-close:hover {
                color: var(--text);
                background: var(--bg);
            }
            .sidebar-body {
                flex: 1;
                overflow-y: auto;
                padding: 14px;
            }
            .sidebar-footer {
                padding: 12px 14px;
                border-top: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                gap: 6px;
                flex-shrink: 0;
            }

            .field-group {
                margin-bottom: 14px;
            }
            .field-label {
                font-size: 10px;
                font-family: "DM Mono", monospace;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--hint);
                margin-bottom: 4px;
            }
            .field-value {
                font-size: 13px;
                font-weight: 500;
            }
            .field-value.mono {
                font-family: "DM Mono", monospace;
                font-size: 12px;
                font-weight: 400;
            }
            .field-value.muted {
                color: var(--muted);
                font-weight: 400;
            }

            .wb-confirm-row {
                display: flex;
                gap: 6px;
            }
            .wb-confirm-row input {
                flex: 1;
            }

            .status-select-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 5px;
                margin-top: 4px;
            }
            .status-option {
                padding: 6px 8px;
                border-radius: var(--radius-sm);
                border: 1px solid var(--border);
                font-size: 11px;
                cursor: pointer;
                text-align: center;
                transition: all 0.1s;
                background: var(--bg);
                color: var(--muted);
            }
            .status-option:hover {
                border-color: var(--border-md);
                color: var(--text);
            }
            .status-option.active {
                border-color: transparent;
                font-weight: 500;
            }
            .status-option.active.sc-scheduled {
                background: var(--blue-bg);
                color: var(--blue);
                border-color: var(--blue-mid);
            }
            .status-option.active.sc-delivered {
                background: var(--green-bg);
                color: var(--green);
            }
            .status-option.active.sc-undelivered {
                background: var(--red-bg);
                color: var(--red);
            }
            .status-option.active.sc-fouln {
                background: #fff3e0;
                color: #bf6800;
            }
            .status-option.active.sc-foutr {
                background: var(--amber-bg);
                color: var(--amber);
            }
            .status-option.active.sc-redeliver {
                background: var(--purple-bg);
                color: var(--purple);
            }
            .status-option.active.sc-twoday {
                background: #e8f5e9;
                color: #2e7d32;
            }

            .assign-row {
                display: flex;
                gap: 6px;
                align-items: center;
            }
            .assign-row select {
                flex: 1;
            }

            .remarks-area {
                width: 100%;
                height: 60px;
                resize: none;
                font-size: 12px;
            }

            /* ── IMPORT PANEL ── */
            #panel-import {
                flex-direction: row;
            }

            .import-left {
                width: 280px;
                flex-shrink: 0;
                border-right: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                background: var(--surface);
            }
            .import-main {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .drop-zone {
                margin: 16px;
                border: 2px dashed var(--border-md);
                border-radius: var(--radius);
                padding: 28px 16px;
                text-align: center;
                cursor: pointer;
                transition: all 0.15s;
                background: var(--bg);
            }
            .drop-zone:hover,
            .drop-zone.drag-over {
                border-color: var(--accent);
                background: var(--blue-bg);
            }
            .drop-zone .dz-icon {
                font-size: 28px;
                margin-bottom: 8px;
            }
            .drop-zone .dz-title {
                font-size: 13px;
                font-weight: 500;
                color: var(--text);
            }
            .drop-zone .dz-sub {
                font-size: 11px;
                color: var(--muted);
                margin-top: 4px;
            }
            .drop-zone input[type="file"] {
                display: none;
            }

            .import-config {
                padding: 0 16px 16px;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .import-config .field-label {
                margin-bottom: 3px;
                display: block;
            }
            .import-config select,
            .import-config input[type="date"] {
                width: 100%;
            }

            .import-actions {
                padding: 14px 16px;
                border-top: 1px solid var(--border);
                margin-top: auto;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            .import-actions .btn {
                width: 100%;
                justify-content: center;
                text-align: center;
            }

            .import-preview-toolbar {
                padding: 8px 14px;
                background: var(--surface);
                border-bottom: 1px solid var(--border);
                display: flex;
                align-items: center;
                gap: 8px;
                flex-shrink: 0;
            }
            .preview-count {
                font-size: 12px;
                color: var(--muted);
            }
            .preview-count strong {
                color: var(--text);
            }

            .import-preview-table {
                flex: 1;
                overflow: auto;
            }

            table.preview-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
            }
            table.preview-table thead th {
                position: sticky;
                top: 0;
                z-index: 2;
                background: var(--surface);
                border-bottom: 2px solid var(--border);
                padding: 0 10px;
                height: 30px;
                text-align: left;
                font-size: 10px;
                font-weight: 500;
                font-family: "DM Mono", monospace;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--muted);
                white-space: nowrap;
            }
            table.preview-table tbody tr {
                border-bottom: 1px solid var(--border);
            }
            table.preview-table tbody tr.excluded {
                opacity: 0.4;
                background: var(--bg);
            }
            table.preview-table tbody td {
                padding: 0 10px;
                height: 36px;
                vertical-align: middle;
                white-space: nowrap;
            }

            .row-toggle-btn {
                font-size: 10px;
                padding: 2px 8px;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                cursor: pointer;
                background: transparent;
                color: var(--muted);
                font-family: "DM Sans", sans-serif;
            }
            .row-toggle-btn:hover {
                background: var(--red-bg);
                color: var(--red);
                border-color: var(--red);
            }
            table.preview-table tbody tr.excluded .row-toggle-btn {
                background: var(--green-bg);
                color: var(--green);
                border-color: var(--green);
            }
            table.preview-table tbody tr.excluded .row-toggle-btn:hover {
                background: #d6edbd;
            }

            .empty-import {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--hint);
                flex-direction: column;
                gap: 8px;
                padding: 48px;
            }

            /* ── ROSTER PANEL ── */
            .col-head {
                padding: 8px 12px;
                border-bottom: 1px solid var(--border);
                font-size: 10px;
                font-weight: 500;
                font-family: "DM Mono", monospace;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--muted);
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-shrink: 0;
                height: 36px;
            }
            .col-search {
                padding: 6px 10px;
                border-bottom: 1px solid var(--border);
                flex-shrink: 0;
            }
            .col-search input {
                width: 100%;
            }
            .list-scroll {
                flex: 1;
                overflow-y: auto;
            }

            .list-item {
                padding: 8px 12px;
                font-size: 12px;
                display: flex;
                align-items: center;
                gap: 7px;
                border-bottom: 1px solid var(--border);
                cursor: pointer;
                color: var(--text);
                transition: background 0.07s;
            }
            .list-item:last-child {
                border-bottom: none;
            }
            .list-item:hover {
                background: var(--bg);
            }
            .list-item.selected {
                background: var(--blue-bg);
            }
            .list-item.dimmed {
                opacity: 0.4;
            }
            .item-main {
                font-weight: 500;
                line-height: 1.3;
            }
            .item-sub {
                font-size: 10px;
                color: var(--muted);
                font-family: "DM Mono", monospace;
                margin-top: 1px;
            }
            .status-pip {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                flex-shrink: 0;
            }
            .pip-full {
                background: var(--green);
            }
            .pip-partial {
                background: var(--amber);
            }
            .pip-empty {
                background: var(--border-md);
            }

            .badge {
                font-size: 9px;
                font-weight: 500;
                padding: 1px 6px;
                border-radius: 99px;
                flex-shrink: 0;
                font-family: "DM Mono", monospace;
                text-transform: uppercase;
            }
            .badge-driver {
                background: var(--blue-bg);
                color: var(--blue);
            }
            .badge-helper {
                background: var(--green-bg);
                color: var(--green);
            }
            .badge-driver-helper {
                background: var(--amber-bg);
                color: var(--amber);
            }

            .detail-body {
                padding: 14px;
                flex: 1;
                overflow-y: auto;
            }
            .detail-plate {
                font-family: "DM Mono", monospace;
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 0.04em;
            }
            .detail-type {
                font-size: 11px;
                color: var(--muted);
                margin-top: 3px;
            }
            .section-lbl {
                font-size: 9px;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--hint);
                font-family: "DM Mono", monospace;
                margin-bottom: 5px;
                margin-top: 14px;
            }
            .section-lbl:first-child {
                margin-top: 0;
            }
            .crew-item {
                display: flex;
                align-items: center;
                gap: 7px;
                padding: 7px 9px;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                margin-bottom: 4px;
            }
            .crew-item-name {
                flex: 1;
                font-size: 12px;
                font-weight: 500;
            }
            .remove-btn {
                font-size: 10px;
                padding: 2px 7px;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: transparent;
                color: var(--muted);
                cursor: pointer;
                font-family: "DM Sans", sans-serif;
                transition: all 0.1s;
            }
            .remove-btn:hover {
                background: var(--red-bg);
                color: var(--red);
                border-color: var(--red);
            }
            .assign-bar {
                padding: 10px 12px;
                border-top: 1px solid var(--border);
                background: var(--surface);
                flex-shrink: 0;
            }
            .assign-btn {
                width: 100%;
                padding: 8px 14px;
                font-family: "DM Sans", sans-serif;
                font-size: 12px;
                font-weight: 500;
                border-radius: var(--radius-sm);
                border: none;
                cursor: pointer;
                transition: background 0.12s;
            }
            .assign-btn.primary {
                background: var(--text);
                color: white;
            }
            .assign-btn.primary:hover {
                background: #333;
            }
            .assign-btn.disabled {
                background: var(--border);
                color: var(--hint);
                cursor: default;
            }
            .assign-btn + .assign-btn {
                margin-top: 6px;
            }
            .assign-hint {
                font-size: 10px;
                color: var(--hint);
                text-align: center;
                margin-top: 5px;
            }
            .emp-filter-bar {
                display: flex;
                gap: 3px;
                padding: 6px 10px;
                border-bottom: 1px solid var(--border);
                flex-shrink: 0;
                flex-wrap: wrap;
            }

            table.data-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
            }
            table.data-table thead th {
                position: sticky;
                top: 0;
                z-index: 2;
                background: var(--surface);
                border-bottom: 2px solid var(--border);
                padding: 0 12px;
                height: 32px;
                text-align: left;
                font-size: 10px;
                font-weight: 500;
                font-family: "DM Mono", monospace;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                color: var(--muted);
                white-space: nowrap;
            }
            table.data-table tbody tr {
                border-bottom: 1px solid var(--border);
                transition: background 0.07s;
            }
            table.data-table tbody tr:hover {
                background: #fafaf8;
            }
            table.data-table tbody td {
                padding: 0 12px;
                height: 38px;
                vertical-align: middle;
            }
            .inline-edit {
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .inline-edit input {
                font-size: 12px;
                padding: 3px 7px;
                width: 120px;
            }
            .edit-link {
                font-size: 10px;
                color: var(--accent);
                cursor: pointer;
                text-decoration: underline;
                white-space: nowrap;
            }

            /* ── TRUCK ROSTER PANEL (default crew template) ── */
            .roster-workspace {
                display: flex;
                flex-direction: row;
                flex: 1;
                overflow: hidden;
            }
            .roster-pane {
                display: flex;
                flex-direction: column;
                overflow: hidden;
                background: var(--surface);
                flex: 1;
                min-width: 0;
            }
            .roster-trucks {
                border-right: 1px solid var(--border);
            }
            .roster-emps.drop-hover {
                outline: 2px dashed var(--accent);
                outline-offset: -3px;
            }
            .list-item.draggable-row {
                cursor: grab;
            }
            .list-item.draggable-row:active {
                cursor: grabbing;
            }
            .emp-group-lbl {
                font-size: 9px;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--hint);
                font-family: "DM Mono", monospace;
                padding: 10px 12px 3px;
            }

            /* Truck cards (left rail) — mirrors the dispatch Crew Rail card */
            .roster-truck-card {
                border: 1px solid var(--border-md);
                border-radius: var(--radius-sm);
                background: var(--bg);
                padding: 8px 10px;
                margin: 6px 8px;
            }
            .roster-truck-card.drop-hover {
                background: var(--blue-bg);
                outline: 2px dashed var(--accent);
                outline-offset: -2px;
            }
            .rtc-head {
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .rtc-plate {
                font-family: "DM Mono", monospace;
                font-size: 14px;
                font-weight: 500;
                letter-spacing: 0.03em;
            }
            .rtc-meta {
                font-size: 10px;
                color: var(--muted);
                font-family: "DM Mono", monospace;
                margin-top: 2px;
            }
            .rtc-crew {
                display: flex;
                flex-direction: column;
                gap: 4px;
                margin-top: 7px;
            }
            .rtc-chip {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 4px 7px;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: var(--surface);
                font-size: 12px;
                cursor: grab;
            }
            .rtc-chip:active {
                cursor: grabbing;
            }
            .rtc-chip-name {
                font-weight: 500;
            }
            .rtc-empty {
                font-size: 11px;
                color: var(--hint);
                font-style: italic;
                padding: 2px 0;
            }
            table.data-table tbody tr.row-selected {
                background: var(--blue-bg);
            }

            /* ── ADMIN MASTER-DETAIL PANELS (Outlets, Trucks, Employees, Billing Categories) ── */
            .admin-split {
                display: flex;
                flex-direction: row;
                flex: 1;
                overflow: hidden;
            }
            .admin-list-wrap {
                flex: 1;
                overflow: auto;
            }
            .admin-detail-col {
                width: 300px;
                flex-shrink: 0;
                border-left: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                background: var(--surface);
            }
            .detail-footer {
                padding: 10px 12px;
                border-top: 1px solid var(--border);
                display: flex;
                gap: 6px;
                flex-shrink: 0;
            }
            .detail-footer .btn {
                flex: 1;
            }

            /* ── LOADING OVERLAY ── */
            .loading-overlay {
                position: fixed;
                inset: 0;
                background: rgba(247, 246, 242, 0.85);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 999;
                flex-direction: column;
                gap: 12px;
            }
            .spinner {
                width: 26px;
                height: 26px;
                border: 2px solid var(--border);
                border-top-color: var(--text);
                border-radius: 50%;
                animation: spin 0.65s linear infinite;
            }
            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }
            .loading-text {
                font-size: 12px;
                color: var(--muted);
            }

            /* ── TOAST ── */
            .toast {
                position: fixed;
                bottom: 18px;
                left: 50%;
                transform: translateX(-50%);
                background: var(--text);
                color: white;
                font-size: 12px;
                padding: 9px 16px;
                border-radius: var(--radius);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
                z-index: 1000;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.18s;
                white-space: nowrap;
                font-family: "DM Sans", sans-serif;
                max-width: 90vw;
            }
            .toast.show {
                opacity: 1;
            }
            .toast.error {
                background: var(--red);
            }
            .toast.warning {
                background: var(--amber);
            }
            .toast.success {
                background: var(--green);
            }

            /* ── MODAL ── */
            .modal-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(28, 27, 24, 0.35);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 500;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.15s;
            }
            .modal-backdrop.open {
                opacity: 1;
                pointer-events: all;
            }
            .modal {
                background: var(--surface);
                border-radius: var(--radius);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
                width: 420px;
                max-width: 95vw;
                display: flex;
                flex-direction: column;
                max-height: 90vh;
            }
            .modal-head {
                padding: 14px 18px;
                border-bottom: 1px solid var(--border);
                display: flex;
                align-items: center;
                gap: 8px;
                flex-shrink: 0;
            }
            .modal-head-title {
                font-weight: 600;
                font-size: 14px;
                flex: 1;
            }
            .modal-close {
                cursor: pointer;
                color: var(--hint);
                padding: 3px 7px;
                border-radius: 4px;
                border: none;
                background: transparent;
                font-size: 16px;
            }
            .modal-close:hover {
                color: var(--text);
                background: var(--bg);
            }
            .modal-body {
                padding: 16px 18px;
                flex: 1;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            .modal-footer {
                padding: 12px 18px;
                border-top: 1px solid var(--border);
                display: flex;
                justify-content: flex-end;
                gap: 6px;
                flex-shrink: 0;
            }
            .form-row {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .form-label {
                font-size: 11px;
                font-family: "DM Mono", monospace;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--muted);
            }
            .form-row input,
            .form-row select,
            .form-row textarea {
                width: 100%;
            }
            .form-row textarea {
                height: 70px;
                resize: none;
            }
            .form-hint {
                font-size: 10px;
                color: var(--hint);
            }
            .warning-box {
                background: var(--amber-bg);
                border: 1px solid #f0d9b5;
                border-radius: var(--radius-sm);
                padding: 8px 12px;
                font-size: 12px;
                color: var(--amber);
            }
            .warning-box strong {
                display: block;
                font-weight: 600;
                margin-bottom: 3px;
            }

            /* ── SCROLLBARS ── */
            ::-webkit-scrollbar {
                width: 5px;
                height: 5px;
            }
            ::-webkit-scrollbar-track {
                background: transparent;
            }
            ::-webkit-scrollbar-thumb {
                background: var(--border);
                border-radius: 3px;
            }

            /* ── RESPONSIVE ── */
            @media (max-width: 768px) {
                .trip-sidebar {
                    display: none;
                }
                .roster-workspace {
                    flex-direction: column;
                }
                .roster-trucks {
                    border-right: none;
                    border-bottom: 1px solid var(--border);
                }
                #panel-import {
                    flex-direction: column;
                }
                .import-left {
                    width: 100%;
                    border-right: none;
                    border-bottom: 1px solid var(--border);
                    max-height: 300px;
                    overflow-y: auto;
                }
                .admin-split {
                    flex-direction: column;
                }
                .admin-detail-col {
                    width: 100%;
                    border-left: none;
                    border-top: 1px solid var(--border);
                    max-height: 300px;
                }
            }
            @media (prefers-reduced-motion: reduce) {
                *,
                *::before,
                *::after {
                    animation-duration: 0.01ms !important;
                    transition-duration: 0.01ms !important;
                }
            }

            /* ── WHAT'S NEW ─────────────────────────────────────── */
            .whatsnew-release + .whatsnew-release {
                margin-top: 22px;
                padding-top: 18px;
                border-top: 1px solid var(--border);
            }
            .whatsnew-head {
                display: flex;
                align-items: baseline;
                gap: 8px;
            }
            .whatsnew-version {
                font-family: "DM Mono", monospace;
                font-size: 12px;
                font-weight: 500;
                color: var(--blue);
            }
            .whatsnew-date {
                font-size: 12px;
                color: var(--hint);
            }
            .whatsnew-title {
                margin-top: 2px;
                font-size: 16px;
                font-weight: 600;
            }
            .whatsnew-notes {
                font-size: 13.5px;
                line-height: 1.6;
                color: var(--text);
            }
            .whatsnew-notes h4 {
                margin: 16px 0 6px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: var(--muted);
            }
            .whatsnew-notes p {
                margin: 8px 0;
            }
            .whatsnew-notes ul {
                margin: 8px 0;
                padding-left: 20px;
            }
            .whatsnew-notes li {
                margin: 5px 0;
            }
            .whatsnew-notes code {
                font-family: "DM Mono", monospace;
                font-size: 12.5px;
                background: var(--bg);
                border-radius: 4px;
                padding: 1px 5px;
            }
            .whatsnew-empty {
                color: var(--muted);
                font-size: 13px;
            }