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

:root {
    /* Core palette - industrial slate + warm amber */
    --slate-950: #0C111D;
    --slate-900: #131825;
    --slate-800: #1E2433;
    --slate-700: #3E4453;  /* Quiet Card reskin 2026-07-22: was #2D3548 */
    --slate-600: #404759;
    --slate-500: #5A6175;
    --slate-400: #8891A5;
    --slate-300: #B4BCCC;
    --slate-200: #DFE3EB;  /* Quiet Card reskin 2026-07-22: was #D8DCE6 */
    --slate-100: #F1F3F7;  /* Quiet Card reskin 2026-07-22: was #EBEEF5 */
    --slate-50: #F5F7FA;

    /* Accent colors */
    --amber-500: #F59E0B;
    --amber-600: #D97706;  /* Quiet Card reskin: same value as --primary-dark below */
    --amber-400: #FBBF24;
    --amber-300: #FCD34D;
    --amber-tint: #FDF3E1;

    /* Quiet Card reskin — surface + ink tokens (see docs/reskin/DESIGN.md) */
    --ink: #232735;
    --panel: #FFFFFF;
    --bg: #F5F6FA;
    --blue: #3568A8;
    --blue-tint: #E8EFF8;
    --green: #2E7D52;
    --green-tint: #E6F2EB;
    --red: #C8412B;
    --red-tint: #FAEAE6;

    /* Delivery/Collection semantic colors (job-detail dark theme) */
    --delivery-bg: #1E3A5F;
    --delivery-border: #3B82F6;
    --delivery-text: #93C5FD;

    --collection-bg: #422006;
    --collection-border: #D97706;
    --collection-text: #FCD34D;

    /* Status colors (job-detail dark theme) */
    --status-pending: #5A6175;
    --status-booked: #0D9488;
    --status-completed: #059669;

    /* Spacing - border radius */
    --radius-sm: 8px;   /* Quiet Card reskin: was 3px */
    --radius-md: 9px;   /* Quiet Card reskin: was 4px */
    --radius-lg: 12px;  /* Quiet Card reskin: was 6px */
    --radius-xl: 8px;
    --radius-2xl: 10px;
    --radius-3xl: 12px;
    --radius-pill: 99px;

    /* Typography */
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;  /* was DM Sans */

    /* Input sizes */
    --input-border: 1px solid var(--slate-200);
    --input-focus-color: var(--amber-500);
    --input-focus-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);

    /* Legacy compatibility - map old vars to new */
    --primary: var(--amber-500);
    --primary-dark: var(--amber-600);
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --gray-100: var(--slate-100);
    --gray-200: var(--slate-200);
    --gray-300: var(--slate-300);
    --gray-600: var(--slate-600);
    --gray-800: var(--slate-800);
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Header — graceful minimal restyle of the OLD markup (job.html, settings.html,
   login.html, furniture-whereabouts.html, notes.html still use this structure
   until their Phase 2 conversion). White surface, slate text, no gradient.
   table.html/calendar.html use the NEW `.appbar` system below instead. */
header {
    background: var(--panel);
    color: var(--ink);
    border-bottom: 1px solid var(--slate-200);
    padding-top: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 64px;
    max-width: 1400px;
    margin: 0 auto;
}

.header-left-side {
    display: flex;
    align-items: center;
    gap: 1rem;
}

header h1 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--amber-500);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
}

.today-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    color: var(--slate-500);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.user-info .username {
    color: var(--slate-500);
    font-weight: 500;
}

.user-info .role-badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    background: var(--amber-tint);
    color: var(--amber-600);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-logout {
    padding: 0.5rem 0.875rem;
    background: var(--panel);
    border: 1px solid var(--slate-200);
    color: var(--slate-500);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-md);
}

.btn-logout:hover {
    background: var(--slate-100);
    border-color: var(--slate-400);
    color: var(--ink);
}

/* Navigation strip */
.view-nav {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: var(--panel);
    border-bottom: 1px solid var(--slate-200);
    max-width: 1400px;
    margin: 0 auto;
}

.view-nav .btn,
.view-nav a {
    padding: 0.625rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate-500);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
    background: transparent;
}

.view-nav .btn:hover,
.view-nav a:hover {
    color: var(--ink);
    background: var(--slate-100);
    border-color: var(--slate-200);
}

.view-nav .btn-primary,
.view-nav a.btn-primary {
    color: var(--ink);
    background: var(--slate-100);
    border-color: var(--slate-200);
}

.view-nav .btn-secondary {
    color: var(--slate-500);
    background: transparent;
}

/* ============================================
   APP BAR (Quiet Card reskin) — table.html + calendar.html only.
   Replaces header/.header-content/.view-nav on those two pages with a single
   56px white bar. Other pages keep the old markup restyled minimally above.
   ============================================ */
header.appbar {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 56px;
    padding: 0 26px;
    background: var(--panel);
    border-bottom: 1px solid var(--slate-200);
    position: sticky;
    top: 0;
    z-index: 100;
}
.appbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
}
.appbar-mark {
    width: 12px;
    height: 12px;
    background: var(--amber-500);
    border-radius: 3px;
    transform: rotate(45deg);
    flex-shrink: 0;
}
.appbar-nav {
    display: flex;
    gap: 4px;
    height: 100%;
}
.appbar-nav a {
    display: flex;
    align-items: center;
    padding: 0 13px;
    font-weight: 600;
    font-size: 13px;
    color: var(--slate-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.appbar-nav a:hover {
    color: var(--ink);
}
.appbar-nav a.active {
    color: var(--ink);
    border-bottom-color: var(--amber-500);
}
.appbar-spacer {
    flex: 1;
}
.appbar-today {
    font-size: 12.5px;
    color: var(--slate-400);
    white-space: nowrap;
}
.appbar-userchip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate-500);
    background: var(--slate-100);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    white-space: nowrap;
}
.appbar-userchip #currentRole {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--amber-600);
}
.appbar-quiet-btn {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate-500);
    background: none;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.appbar-quiet-btn:hover {
    border-color: var(--slate-400);
    color: var(--ink);
    background: none;
}

/* Main */
main {
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Buttons */
.btn {
    padding: 0.625rem 1rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-primary {
    background: var(--amber-500);
    color: #fff;
    box-shadow: 0 1px 2px rgba(120, 80, 0, 0.25);
}

.btn-primary:hover {
    background: var(--amber-600);
}

.btn-primary:active {
    background: var(--amber-600);
}

.btn-secondary {
    background: var(--panel);
    color: var(--slate-500);
    border: 1px solid var(--slate-200);
}

.btn-secondary:hover {
    border-color: var(--slate-400);
    color: var(--ink);
    background: var(--panel);
}

.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-full {
    width: 100%;
}

.btn-danger {
    background: var(--red);
    color: #fff;
}

.btn-danger:hover {
    background: #A6371F;
}

.btn-success {
    background: #25d366;
    color: white;
}

.btn-success:hover {
    background: #1da851;
    transform: translateY(-1px);
}

.btn-success.btn-outline {
    background: transparent;
    color: #25d366;
    border: 1px solid #25d366;
}

.btn-success.btn-outline:hover {
    background: #25d366;
    color: white;
}

/* Weather Indicators */
.weather-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.weather-indicator.wet {
    color: #3B82F6;
}

.weather-indicator.dry {
    color: var(--amber-500);
}

.weather-indicator.windy {
    background: #e0e7ff;
    color: #4338ca;
}

.weather-indicator.wet.windy {
    background: #c7d2fe;
    color: #3730a3;
}

.weather-icon {
    font-size: 0.9rem;
}

/* Base chip class - shared pill styling for type/status/role/source badges.
   .badge-delivery/.badge-collection/.badge-pending/.badge-booked/.badge-completed
   are JS-interpolated (badge-${mov.job_type}, badge-${mov.status}) — restyled
   in place, never renamed (DESIGN.md invariant #2). */
.badge {
    font-family: var(--font-sans);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

/* Badge type modifiers (type chips) */
.badge-delivery {
    background: var(--amber-tint);
    color: var(--amber-600);
}

.badge-collection {
    background: var(--blue-tint);
    color: var(--blue);
}

/* Badge status modifiers — tinted pill + leading dot (::before circle) */
.badge-pending,
.badge-booked,
.badge-completed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.badge-pending::before,
.badge-booked::before,
.badge-completed::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.badge-pending {
    background: var(--amber-tint);
    color: var(--amber-600);
}
.badge-pending::before {
    background: var(--amber-500);
}

.badge-booked {
    background: var(--blue-tint);
    color: var(--blue);
}
.badge-booked::before {
    background: var(--blue);
}

.badge-completed {
    background: var(--green-tint);
    color: var(--green);
}
.badge-completed::before {
    background: var(--green);
}

/* Badge role modifiers */
.badge-admin {
    background: var(--amber-500);
    color: #fff;
}

.badge-basic {
    background: var(--slate-100);
    color: var(--slate-500);
}

/* Badge source modifier — manually created job (not synced from Current-RMS).
   Same chip for "Manual" and "Sale" labels; table.js picks the text. Mini chip
   sizing per DESIGN.md §5 (smaller, non-uppercase, on a neutral tint). */
.badge-manual {
    background: var(--slate-100);
    color: var(--slate-500);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────────────────────────
   Direct site-to-site pair + chain UI
   ─ chain-chip:    "↔ direct" or "↔ chain N/M" next to type badge
   ─ aging-pill:    "Nd off depot" when chain has been off-depot ≥ 14d
   ─ validity-pill: "⚠ review" / "⚠ date mismatch" when pair_validity ≠ ok
   ─ miles-paired:  paired collection-side mileage placeholder
   ─ dest-pair-sub: "↳ direct to/from <venue>" under destination
   ────────────────────────────────────────────────────────────── */
.chain-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    margin-left: 4px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--blue-tint);
    color: var(--blue);
    border: none;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}
.aging-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    margin-left: 4px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--red-tint);
    color: var(--red);
    border: none;
    white-space: nowrap;
    vertical-align: middle;
}

/* Closed (archived) jobs: read-only history rows, shown muted and non-interactive */
.closed-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    margin-left: 4px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--slate-100);
    color: var(--slate-400);
    border: none;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}
#jobsTable tbody tr.closed-row {
    opacity: 0.55;
    background: var(--panel);
}
#jobsTable tbody tr.closed-row:hover td {
    background: #FAFBFD;
}

/* Read-only drawer mode for closed (archived) jobs: keep the display fields
   (haulier, mileage, budget, notes, dates, status) visible but hide every
   write action. ID-level specificity + !important beats the admin display rules. */
.closed-banner {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--slate-100);
    color: var(--slate-500);
    border: 1px solid var(--slate-200);
    font-size: 0.8rem;
    font-weight: 600;
}
#jobModal.readonly #viewFullJobLink,
#jobModal.readonly #updateDatesBtn,
#jobModal.readonly #movementDatesSection,
#jobModal.readonly #furnitureAllocSection,
#jobModal.readonly #pairSection,
#jobModal.readonly #calcDistanceBtn,
#jobModal.readonly #deleteJobSection,
#jobModal.readonly #jobForm button[type="submit"] {
    display: none !important;
}
/* Reveal the deliver/collect dates (normally an inline-hidden edit box) so closed
   jobs show both dates; inputs are disabled and the "update CRMS" button is hidden. */
#jobModal.readonly #dateEditSection {
    display: block !important;
}
.validity-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    margin-left: 4px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    vertical-align: middle;
    border: none;
}
.validity-pill.review {
    background: var(--amber-tint);
    color: var(--amber-600);
}
.validity-pill.ok {
    background: var(--green-tint);
    color: var(--green);
}
.miles-paired {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--slate-400);
    font-weight: 500;
}
.miles-paired .label {
    display: block;
    font-size: 0.58rem;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--amber-600);
}
.dest-pair-sub {
    margin-top: 3px;
    font-size: 0.75rem;
    color: var(--slate-500);
}
.dest-pair-sub .arrow {
    color: var(--amber-600);
    font-weight: 600;
}
.dest-pair-sub .pair-event {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
tr.paired-row {
    background: var(--amber-tint);
}
tr.paired-row:hover td {
    background: #FCEFD6;
}

/* Pair summary section inside #jobModal (paired-movement state) */
.pair-summary {
    background: var(--amber-tint);
    border: 1px solid #F5DDA8;
    border-radius: var(--radius-md);
    padding: 12px;
}
.pair-summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.pair-summary-partner {
    font-size: 0.85rem;
    color: var(--slate-700);
    margin: 4px 0 10px;
}
.pair-summary-partner .arrow {
    color: var(--amber-600);
    font-weight: 600;
}
.pair-summary-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pair-summary-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    padding: 6px 10px;
}

/* Pair-as-direct modal body */
.pair-source-card {
    background: #FAFBFD;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}
.pair-source-title {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
    font-size: 0.9rem;
}
.pair-source-meta {
    font-size: 0.75rem;
    color: var(--slate-500);
}
.pair-section {
    margin-bottom: 14px;
}
.pair-section-label {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--slate-400);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
}
.pair-candidates {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}
.pair-candidate {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--panel);
    align-items: center;
}
.pair-candidate:hover { background: #FAFBFD; }
.pair-candidate.selected {
    border-color: var(--amber-500);
    background: var(--amber-tint);
}
.pair-candidate input[type=radio] {
    flex-shrink: 0;
    margin: 0;
}
.pair-candidate-copy { flex: 1; min-width: 0; }
.pair-candidate-title {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pair-candidate-meta {
    font-size: 0.7rem;
    color: var(--slate-500);
    margin-top: 2px;
}

/* Customer-arranged transport — equipment prep only, no haulier assignment */
.badge-self-arranged {
    background: var(--amber-tint);
    color: var(--amber-600);
}

.unassigned-badge {
    font-size: 0.8rem;
    color: var(--slate-400);
    font-style: italic;
}

.transport-info {
    font-size: 0.8rem;
    color: var(--slate-500);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.transport-icon {
    font-size: 1rem;
}

.loading, .no-jobs {
    text-align: center;
    padding: 2rem;
    color: var(--slate-500);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 17, 29, 0.5);
    z-index: 200;
    overflow-y: auto;
    padding: 1rem;
}

.modal.open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal-content {
    background: var(--panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-200);
    width: 100%;
    max-width: 500px;
    margin-top: 2rem;
    box-shadow: 0 12px 40px rgba(12, 17, 29, 0.18);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--slate-200);
}

.modal-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--slate-400);
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease;
}

.close-btn:hover {
    color: var(--ink);
    background: var(--slate-100);
}

.modal-body {
    padding: 1rem;
}

/* ─── Drawer variant (.modal.drawer) ─────────────────────────
   A right-side slide-in panel built on top of the modal primitives.
   Used by the job-detail panels on cards and calendar so they share
   the table view's "list + detail" feel without destroying the
   existing modal markup. */
.modal.drawer {
    background: rgba(12, 17, 29, 0.25);
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
}
.modal.drawer.open {
    display: flex;
}
.modal.drawer .modal-content {
    margin: 0;
    max-width: 470px;
    width: 100%;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--slate-200);
    box-shadow: -16px 0 48px rgba(18, 20, 28, 0.28);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.modal.drawer.open .modal-content {
    transform: translateX(0);
}
.modal.drawer .modal-header {
    padding: 16px 20px;
    flex-shrink: 0;
}
.modal.drawer .modal-body {
    padding: 18px 20px 20px;
    overflow-y: auto;
    flex: 1;
}
/* Promote the final Save button inside the drawer form into a sticky
   footer bar so long forms don't push it off-screen. Must re-assert the
   amber fill: this selector out-specifies .btn-primary, so a neutral
   background here renders the white button text invisible. */
.modal.drawer .modal-body form > button[type="submit"]:last-child {
    position: sticky;
    bottom: -20px;
    margin-top: 20px;
    margin-bottom: -20px;
    padding: 14px;
    background: var(--amber-500);
    color: #fff;
    justify-content: center;
    border-top: 1px solid var(--slate-200);
    z-index: 2;
    box-shadow: 0 -6px 12px rgba(12, 17, 29, 0.08);
    border-radius: 0;
}
.modal.drawer .modal-body form > button[type="submit"]:last-child:hover {
    background: var(--amber-600);
}

@media (max-width: 640px) {
    .modal.drawer .modal-content {
        max-width: none;
        border-radius: 0;
    }
}

/* ─── Job drawer structure (DESIGN.md §8) — #jobModal only ─────────────── */
.drawer-head {
    margin-bottom: 4px;
}
.drawer-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.drawer-typechip {
    display: inline-block;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-500);
    background: var(--slate-100);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* populateJobModal sets the modifier from mov.job_type */
.drawer-typechip--delivery {
    color: var(--amber-600);
    background: var(--amber-tint);
}
.drawer-typechip--collection {
    color: var(--blue);
    background: var(--blue-tint);
}
.drawer-spacer {
    flex: 1;
}
.drawer-title {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.25;
}
.drawer-sub {
    font-size: 13px;
    color: var(--slate-500);
    margin-top: 3px;
}
.drawer-sub .view-full-job-link {
    margin-bottom: 0;
}

/* Status stepper card */
.stepper {
    background: #FAFBFD;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 16px 18px 14px;
}

/* Facts: label/value definition grid */
.facts {
    margin: 18px 0 0;
    display: grid;
    grid-template-columns: 96px 1fr;
    row-gap: 11px;
    column-gap: 16px;
    font-size: 13.5px;
}
.facts dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--slate-400);
    padding-top: 2px;
}
.facts dd {
    color: var(--ink);
    font-weight: 500;
}

.drawer-rule {
    border: none;
    border-top: 1px solid var(--slate-200);
    margin: 20px 0;
}

.drawer-section {
    margin-top: 18px;
}

.drawer-aux {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.drawer-aux-item {
    flex: 1;
    margin-bottom: 0;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--slate-500);
}

/* Base input styles - shared across all forms */
.form-group input,
.form-group select,
.form-group textarea,
.add-user-form input,
.add-user-form select,
.table-filters select,
.table-filters input[type="date"],
.table-filters input[type="search"] {
    border: var(--input-border);
    font-family: var(--font-sans);
    background: var(--panel);
    color: var(--ink);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.add-user-form input:focus,
.add-user-form select:focus,
.table-filters select:focus,
.table-filters input[type="date"]:focus,
.table-filters input[type="search"]:focus {
    outline: none;
    border-color: var(--input-focus-color);
    box-shadow: var(--input-focus-shadow);
}

/* Default form inputs - larger size */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.form-group input[readonly] {
    background: var(--slate-100);
    color: var(--slate-500);
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

.input-with-btn {
    display: flex;
    gap: 0.5rem;
}

.input-with-btn input {
    flex: 1;
}

/* Job info in modal */
.job-info {
    background: var(--slate-50);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--slate-200);
}

.job-info p {
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--slate-700);
}

.stock-conflict-strip { display: flex; flex-direction: column; gap: 0.3rem; }
.stock-conflict-strip:empty { display: none; }

.stock-conflict-line {
    padding: 0.3rem 0.5rem;
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Hauliers list */
.hauliers-list {
    list-style: none;
    margin-top: 1rem;
}

.hauliers-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--slate-200);
    gap: 0.75rem;
}

.hauliers-list li:last-child {
    border-bottom: none;
}

.haulier-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.haulier-phone-input {
    width: 140px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-family: var(--font-mono);
}

.haulier-color-picker {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-shrink: 0;
}

input.haulier-name {
    flex: 1;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.375rem 0.5rem;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    background: transparent;
}

input.haulier-name:hover {
    border-color: var(--slate-300);
}

input.haulier-name:focus {
    outline: none;
    border-color: var(--input-focus-color);
    box-shadow: var(--input-focus-shadow);
    background: var(--panel);
}

/* Haulier add row */
.haulier-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.haulier-add-row input[type="color"] {
    width: 40px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    flex-shrink: 0;
}

.haulier-add-row input[type="text"] {
    flex: 1;
}

.haulier-add-row input[type="tel"] {
    width: 160px;
    flex-shrink: 0;
}

/* Haulier badge (colored) — read-only chip variant, used for non-admins and
   closed rows. Same chip look as .haulier-pill-select, minus the caret.
   --hc is set inline by table.js renderHaulierCell (the haulier's own
   colour); the dot is rendered from it via radial-gradient. */
.haulier-badge {
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    padding: 4px 10px 4px 24px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate-700);
    background-color: var(--panel);
    background-image: radial-gradient(circle 4.5px at 14px 50%, var(--hc, var(--slate-300)) 98%, transparent);
    background-repeat: no-repeat;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Haulier pill select — the table's click-and-assign haulier cell. A real
   <select> styled as a white chip with a coloured dot (--hc, set inline by
   table.js renderHaulierCell) plus a caret. .unset = no haulier assigned yet
   (dashed border, no dot colour). */
.haulier-pill-select {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    max-width: 150px;
    padding: 5px 26px 5px 24px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    line-height: inherit;
    color: var(--slate-700);
    cursor: pointer;
    background-color: var(--panel);
    background-image:
        radial-gradient(circle 4.5px at 14px 50%, var(--hc, var(--slate-300)) 98%, transparent),
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238891A5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right 0.55rem center;
    background-size: auto, 9px;
}
.haulier-pill-select:hover {
    border-color: var(--slate-400);
}
.haulier-pill-select.unset {
    color: var(--slate-400);
    font-weight: 500;
    padding-left: 12px;
    background-color: transparent;
    border: 1px dashed var(--slate-300);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238891A5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 9px;
}
.haulier-pill-select:disabled {
    opacity: 0.6;
    cursor: wait;
}
/* The native option list must stay readable regardless of the pill's
   chip styling (some browsers inherit select styles into it). */
.haulier-pill-select option {
    color: #1f2937;
    background: #fff;
}

/* Drawer haulier <select> (#jobHaulier) — same chip aesthetic (pill radius,
   border, caret) as .haulier-pill-select. No colour dot here: unlike the
   table cell, populateHaulierSelect doesn't attach a per-haulier colour to
   this control, so there's no --hc to render one from. */
#jobHaulier {
    appearance: none;
    -webkit-appearance: none;
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.75rem 0.5rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate-700);
    background-color: var(--panel);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238891A5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 9px;
}

/* Haulier chip — subtle pill with a coloured dot.
   Preferred over .haulier-badge for list views (the dot carries the haulier
   colour, the rest stays neutral so the card doesn't get visually noisy). */
.haulier-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 6px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate-700);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.haulier-chip .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--slate-400);
}
.haulier-chip.unassigned {
    color: var(--slate-500);
    font-style: italic;
    font-weight: 500;
    border-style: dashed;
}
.haulier-chip.unassigned .dot {
    background: repeating-linear-gradient(45deg, var(--slate-200) 0 3px, transparent 3px 6px);
    border: 1px dashed var(--slate-300);
}

/* Sync result */
.sync-result {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
}

.sync-result.success {
    background: var(--green-tint);
    color: var(--green);
}

.sync-result.error {
    background: var(--red-tint);
    color: var(--red);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.pagination #pageInfo {
    font-size: 0.8rem;
    color: var(--slate-400);
}

.pagination .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Job date display */
/* Movement count indicator badge */
.movement-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: var(--slate-100);
    color: var(--slate-500);
    font-size: 0.7rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Login page */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding: 1rem;
}

.login-box {
    background: var(--panel);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-200);
    box-shadow: 0 8px 24px rgba(12, 17, 29, 0.08);
    width: 100%;
    max-width: 360px;
}

.login-box h2 {
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--ink);
    font-weight: 700;
}

.error-message {
    color: var(--red);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
}

/* Users list (admin) */
.users-list {
    list-style: none;
    margin-top: 1rem;
}

.users-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--slate-200);
    gap: 0.75rem;
}

.users-list li:last-child {
    border-bottom: none;
}

.user-item-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.user-item-name {
    font-weight: 600;
    color: var(--ink);
}

/* Haulier this user is scoped to (haulier-role accounts only) */
.user-item-haulier {
    font-size: 0.78rem;
    color: var(--slate-500);
}

/* User role badge - extends base badge styling */
.user-item-role {
    font-family: var(--font-mono);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--slate-200);
    color: var(--slate-600);
}

.user-item-role.admin,
.user-item-role.badge-admin {
    background: var(--amber-500);
    color: var(--slate-950);
}

.user-actions {
    display: flex;
    gap: 0.375rem;
}

/* Add user form */
.add-user-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.add-user-form .form-row {
    display: flex;
    gap: 0.5rem;
}

/* Compact inputs for add user form */
.add-user-form input,
.add-user-form select {
    flex: 1;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* Admin-only features. Hidden by default; revealed for admins at every width.
   Must stay above .hidden below — both are (0,2,1), so source order lets
   .hidden win the tie and keep force-hidden elements hidden. */
.admin-desktop-only {
    display: none !important;
}

body.is-admin .admin-desktop-only {
    display: block !important;
}

/* Utility: force-hide regardless of other rules (must beat body.is-admin .admin-desktop-only) */
.hidden,
body.is-admin .hidden {
    display: none !important;
}

/* Hide admin-only card/modal elements for basic users */
body:not(.is-admin) .admin-card-info {
    display: none !important;
}

body:not(.is-admin) .admin-only {
    display: none !important;
}

/* Responsive */
@media (max-width: 640px) {
    .header-content {
        padding: 0 1rem;
    }

    header h1 {
        font-size: 1rem;
    }

    .brand-mark {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .today-date {
        display: none;
    }
}

/* ============================================
   TABLE VIEW STYLES
   ============================================ */

/* Table view body */
body.table-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

body.table-view main.table-layout {
    flex: 1;
    display: flex;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ============================================
   FURNITURE WHEREABOUTS REPORT
   ============================================ */

.whereabouts-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem;
}

.whereabouts-heading {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.25rem;
}

.whereabouts-eyebrow {
    margin: 0 0 0.25rem;
    color: var(--slate-400);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.whereabouts-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.65rem;
}

.whereabouts-heading p:not(.whereabouts-eyebrow) {
    max-width: 680px;
    margin: 0.35rem 0 0;
    color: var(--slate-500);
}

.whereabouts-date-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.whereabouts-date-control label {
    color: var(--slate-600);
    font-size: 0.8rem;
    font-weight: 600;
}

.whereabouts-date-control input,
.whereabouts-toolbar input,
.whereabouts-toolbar select {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: var(--panel);
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
}

.whereabouts-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.whereabouts-stat {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--slate-200);
    border-left: 4px solid var(--slate-400);
    background: var(--panel);
    color: var(--slate-600);
    font-size: 0.8rem;
}

.whereabouts-stat span {
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.35rem;
    font-weight: 600;
}

.whereabouts-stat.yard { border-left-color: var(--slate-500); position: relative; cursor: default; }

/* Per-type breakdown popover — shown on hover or keyboard focus of the tile */
.yard-breakdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 30;
    min-width: 240px;
    padding: 0.6rem 0.75rem;
    background: var(--panel);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(12, 17, 29, 0.16);
}
.whereabouts-stat.yard:hover .yard-breakdown,
.whereabouts-stat.yard:focus-within .yard-breakdown,
.whereabouts-stat.yard:focus .yard-breakdown { display: block; }
.yard-breakdown-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-400);
    margin-bottom: 0.35rem;
}
.yard-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0;
    font-size: 0.85rem;
    color: var(--slate-700);
}
.yard-breakdown-qty {
    white-space: nowrap;
}
/* The tile's big-number rule (.whereabouts-stat span) hits every span in the
   popover — neutralise it here (later in the file at equal specificity), then
   re-apply mono to the quantities only. */
.yard-breakdown span {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.yard-breakdown span.yard-breakdown-qty {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}
.yard-breakdown-qty em {
    font-style: normal;
    color: var(--slate-400);
    font-weight: 400;
}
.whereabouts-stat.out { border-left-color: var(--amber-500); }
.whereabouts-stat.transfer { border-left-color: var(--blue); }
.whereabouts-stat.return { border-left-color: var(--green); }
.whereabouts-stat.attention { border-left-color: var(--red); }

.whereabouts-panel {
    overflow: hidden;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    background: var(--panel);
}

.whereabouts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--slate-200);
    background: #FAFBFD;
}

.whereabouts-info,
.whereabouts-muted,
.whereabouts-postcode,
.whereabouts-return-state {
    color: var(--slate-500);
    font-size: 0.75rem;
}

.whereabouts-table-wrap { overflow-x: auto; }

.whereabouts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.whereabouts-table th {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--slate-200);
    background: #FAFBFD;
    color: var(--slate-400);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.whereabouts-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #EDF0F5;
    color: var(--slate-700);
    vertical-align: top;
}

.whereabouts-table tbody tr:hover { background: #FAFBFD; }

.whereabouts-quantity {
    color: var(--ink) !important;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.whereabouts-state,
.whereabouts-direct {
    display: inline-block;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
}

.whereabouts-state { padding: 0.35rem 0.5rem; }
.whereabouts-state.out { background: var(--amber-tint); color: var(--amber-600); }
.whereabouts-state.transfer { background: var(--blue-tint); color: var(--blue); }
.whereabouts-direct { margin-left: 0.35rem; padding: 0.25rem 0.35rem; background: var(--slate-100); color: var(--slate-500); }
.whereabouts-event { color: var(--ink); font-weight: 600; text-decoration: none; }
.whereabouts-event:hover { color: var(--amber-600); text-decoration: underline; }
.whereabouts-transfer-route { color: var(--slate-700); }
.whereabouts-transfer-route span { color: var(--blue); font-weight: 700; }

.whereabouts-exceptions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--slate-200);
    background: #FAFBFD;
}

.whereabouts-exception {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--red-tint);
    color: var(--red);
    font-size: 0.75rem;
}

.whereabouts-exception-action {
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--red);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.whereabouts-exception-action:hover { background: rgba(200, 65, 43, 0.12); }

.whereabouts-exception-action.armed {
    background: var(--red);
    border-color: var(--red);
    color: white;
}

.whereabouts-exception-action.armed:hover { background: #A6371F; }

.whereabouts-exception-toggle {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--slate-600);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.whereabouts-exception-toggle:hover { background: var(--slate-100); }

.whereabouts-clear { color: var(--green); font-size: 0.8rem; }

@media (max-width: 800px) {
    .whereabouts-main { padding: 1rem; }
    .whereabouts-heading,
    .whereabouts-toolbar { align-items: flex-start; flex-direction: column; }
    .whereabouts-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stock availability panel (below the whereabouts report) */

.availability-shortages {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--slate-200);
}

.availability-shortages p { margin: 0; font-size: 0.85rem; }

.availability-shortage-line {
    padding: 0.35rem 0.6rem;
    border-left: 3px solid var(--red);
    border-radius: var(--radius-sm);
    background: var(--red-tint);
    color: var(--red);
    font-weight: 600;
}

.availability-clear { color: var(--green); }

.availability-onboarding,
.availability-unconfigured { color: var(--slate-500); }

.availability-onboarding a,
.availability-unconfigured a { margin-left: 0.25rem; color: var(--amber-600); font-weight: 600; }

.availability-table { border-collapse: collapse; table-layout: fixed; font-size: 0.7rem; }

.availability-labelcol { width: 240px; }
.availability-daycolel { width: 16px; }

.availability-rowlabel {
    position: sticky;
    left: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--slate-100);
    border-right: 1px solid var(--slate-200);
    background: var(--panel);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.availability-row-qty,
.availability-row-unconfigured {
    margin-left: 0.35rem;
    color: var(--slate-500);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
}

.availability-daycol {
    position: relative;
    height: 22px;
    padding: 0 0 0 2px;
    border: 1px solid var(--slate-100);
    color: var(--slate-500);
    font-size: 0.62rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
}

.availability-cell {
    width: 16px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--slate-100);
}

.availability-idle { background: transparent; }
.availability-inuse { background: rgba(53, 104, 168, 0.18); }
.availability-tight { background: rgba(245, 158, 11, 0.35); }
.availability-over { background: var(--red); }
.availability-neutral { background: var(--slate-600); }

.availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--slate-200);
    background: #FAFBFD;
    color: var(--slate-600);
    font-size: 0.78rem;
}

.availability-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }

.availability-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
}

.table-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
}

/* Toolbar */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 26px 12px;
    background: var(--bg);
    border-bottom: none;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Small inputs for filter rows (table, cards, calendar) */
.table-filters select,
.table-filters input[type="date"],
.table-filters input[type="search"],
.date-filter input[type="date"] {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--slate-700);
}

.table-filters input[type="search"] {
    width: 200px;
}

.table-filters input[type="date"]:disabled {
    opacity: 0.45;
}

.date-filter {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.status-filter {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    background: var(--panel);
}

.status-filter-option {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--slate-700);
}

.status-filter-option input {
    margin: 0;
}

.date-separator {
    color: var(--slate-400);
    font-size: 0.8rem;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

/* Table container — the "sheet": white radius-lg card on the --bg page
   background, per DESIGN.md §7. Stays the scroll container (flex:1/overflow:
   auto) that table.js relies on for scroll-position preservation. */
.table-container {
    flex: 1;
    overflow: auto;
    margin: 4px 26px 16px;
    background: var(--panel);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
}

#jobsTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

#jobsTable thead {
    position: sticky;
    top: 0;
    background: #FAFBFD;
    z-index: 10;
}

#jobsTable th {
    padding: 11px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-400);
    border-bottom: 1px solid var(--slate-200);
    background: #FAFBFD;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

#jobsTable th:hover {
    background: var(--slate-100);
}

#jobsTable td {
    padding: 11px 14px;
    border-bottom: 1px solid #EDF0F5;
    vertical-align: middle;
}

#jobsTable tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

#jobsTable tbody tr:last-child td {
    border-bottom: none;
}

#jobsTable tbody tr:hover td {
    background: #FAFBFD;
}

#jobsTable tbody tr.selected {
    box-shadow: inset 3px 0 0 var(--amber-500);
}

#jobsTable tbody tr.selected td {
    background: #FDFAF2;
}

#jobsTable td.event-name {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

#jobsTable td.event-name .event-text {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

#jobsTable td.destination {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#jobsTable td.destination .postcode {
    font-family: var(--font-mono);
    color: var(--slate-400);
    font-size: 0.75rem;
}

#jobsTable td.number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Date is always the first column (no wrapping span in the markup) */
#jobsTable tbody tr:not(.week-separator) > td:first-child {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#jobsTable td .unassigned {
    color: var(--slate-400);
}

#jobsTable td .movement-count {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 1px 6px;
    background: var(--slate-100);
    color: var(--slate-400);
    font-size: 10.5px;
    border-radius: 5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#jobsTable td.transport-cell {
    white-space: nowrap;
}

#jobsTable td.furniture-cell {
    max-width: 18rem;
    font-size: 12.5px;
    line-height: 1.3;
}

#jobsTable td.furniture-cell .furniture-text {
    color: var(--slate-700);
}

.furniture-badge {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.1rem;
    border-radius: 999px;
    vertical-align: middle;
    cursor: help;
}

.furniture-badge-override {
    background: var(--amber-tint);
    color: var(--amber-600);
}

.furniture-badge-overflow {
    background: var(--red-tint);
    color: var(--red);
}

.furniture-alloc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.furniture-alloc-header label {
    margin: 0;
}

.furniture-alloc-row {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--slate-50);
}

.furniture-alloc-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: 0.4rem;
}

.furniture-alloc-cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.4rem 0.75rem;
}

.furniture-alloc-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.furniture-alloc-cell label {
    flex: 1;
    font-size: 0.75rem;
    color: var(--slate-600);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.furniture-alloc-input {
    width: 4rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.capacities-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
}

.capacities-table th,
.capacities-table td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--slate-200);
}

.capacities-table th {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--slate-400);
    letter-spacing: 0.06em;
}

.capacities-table input[type="text"],
.capacities-table input[type="number"] {
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.capacities-table input[type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.furniture-capacities-help {
    margin-bottom: 0.75rem;
}

.furniture-capacities-help code {
    background: var(--slate-100);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.8em;
}

/* Week separator rows */
/* Week separator rows — small-caps slate band, DESIGN.md §7 */
#jobsTable tr.week-separator {
    cursor: default;
}
#jobsTable tr.week-separator td {
    padding: 6px 14px;
    border-bottom: 1px solid var(--slate-200);
    height: auto;
    position: relative;
    background: var(--slate-100);
}
#jobsTable tr.week-separator:hover td {
    background: var(--slate-100);
}

#jobsTable tr.week-separator td .week-line {
    display: none;
}

#jobsTable tr.week-separator td .week-label {
    position: static;
    transform: none;
    background: none;
    padding: 0;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--slate-400);
    white-space: nowrap;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Table footer */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 26px 20px;
    background: var(--bg);
    border-top: none;
    font-size: 12px;
    color: var(--slate-400);
    font-weight: 500;
}

.table-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-pagination .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.table-pagination .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Table loading state */
#jobsTable td.loading {
    text-align: center;
    padding: 2rem;
    color: var(--slate-400);
}

/* Responsive for table view */
@media (max-width: 768px) {
    main {
        padding: 1rem;
    }
}

/* ============================================
   CALENDAR VIEW STYLES
   ============================================ */

body.calendar-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

body.calendar-view main.calendar-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 16px 26px 26px;
    background: var(--bg);
    overflow: hidden;
}

/* Calendar toolbar */
.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calendar-nav h2 {
    font-size: 1.15rem;
    font-weight: 700;
    min-width: 180px;
    text-align: center;
    color: var(--ink);
}

.calendar-actions {
    display: flex;
    gap: 0.5rem;
}

/* Calendar grid — white sheet on the --bg page background, same language as
   the table's .table-container card (DESIGN.md: "apply the same tokens/
   spirit" since there's no calendar mockup). */
.calendar-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-200);
    overflow: hidden;
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #FAFBFD;
    border-bottom: 1px solid var(--slate-200);
}

.calendar-day-header {
    padding: 0.75rem;
    text-align: center;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-400);
}

.calendar-day-header.weekend {
    color: var(--slate-300);
}

.calendar-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
    min-height: 120px;
}

.calendar-cell {
    border-right: 1px solid #EDF0F5;
    border-bottom: 1px solid #EDF0F5;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    cursor: pointer;
    background: var(--panel);
    transition: background 0.1s;
}

.calendar-cell:nth-child(7) {
    border-right: none;
}

.calendar-cell:hover {
    background: #FAFBFD;
}

.calendar-cell.today {
    background: var(--amber-tint);
}

.calendar-cell.today:hover {
    background: #FCEFD6;
}

.calendar-cell.other-month {
    background: var(--slate-100);
}

.calendar-cell.other-month .cell-date {
    color: var(--slate-400);
}

.calendar-cell.weekend {
    background: var(--bg);
}

.cell-date {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* Day-of-week label inside each cell. Hidden on desktop (the calendar-header
   row supplies those labels across the top) and revealed on mobile where
   the grid collapses to a single column and no header is shown. */
.cell-day-name {
    display: none;
}

.calendar-cell.today .cell-date {
    background: var(--amber-500);
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-movements {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* Movement mini-cards — tinted per type, amber reserved for "today" only */
.calendar-movement {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    background: var(--slate-100);
    border-left: 3px solid var(--slate-400);
    border-radius: 2px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.1s;
    overflow: hidden;
    white-space: nowrap;
}

.calendar-movement:hover {
    background: var(--slate-200);
}

.calendar-movement.delivery {
    background: var(--amber-tint);
    border-left-color: var(--amber-600);
}

.calendar-movement.delivery:hover {
    background: #FCEFD6;
}

.calendar-movement.collection {
    background: var(--blue-tint);
    border-left-color: var(--blue);
}

.calendar-movement.collection:hover {
    background: #DCE7F3;
}

.movement-type {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.6rem;
    color: var(--slate-500);
    flex-shrink: 0;
    text-transform: uppercase;
}

.movement-title {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--slate-700);
}

.calendar-more {
    font-size: 0.65rem;
    color: var(--slate-400);
    padding: 2px 4px;
    font-weight: 500;
}

/* Calendar legend */
.calendar-legend {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--slate-400);
    font-weight: 500;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-dot.delivery {
    background: var(--amber-tint);
    border-left: 3px solid var(--amber-600);
}

.legend-dot.collection {
    background: var(--blue-tint);
    border-left: 3px solid var(--blue);
}

.legend-dot.unassigned {
    background: var(--slate-100);
    border-left: 3px solid var(--slate-400);
}

/* Responsive calendar */
@media (max-width: 900px) {
    .calendar-nav h2 {
        font-size: 1rem;
        min-width: 140px;
    }

    .calendar-cell {
        min-height: 80px;
    }

    .calendar-movement {
        font-size: 0.65rem;
    }

    .movement-type {
        display: none;
    }
}

/* Desktop: .movement-haulier is rendered for all movements but only visible on
   mobile — desktop cells are too cramped and use the left-border colour instead. */
.movement-haulier {
    display: none;
}

/* Desktop-only: cap cell to 5 visible movements; the rest are rendered but
   hidden, with a "+N more" indicator telling the user they exist. */
@media (min-width: 641px) {
    .calendar-movement-overflow {
        display: none;
    }
}

/* ─── Mobile calendar: day-list view ─────────────────────────
   The 7-column grid is unreadable on phones. Flip the layout into a
   vertical list of "day cards", one per day that actually has movements
   (empty days hide, other-month days hide). The month nav header stays;
   day-of-week labels move inside each cell so users still see Mon/Tue. */
@media (max-width: 640px) {
    .calendar-header { display: none; }

    .calendar-body {
        gap: 10px;
        padding: 12px;
        background: var(--slate-50);
    }
    /* Flatten .calendar-week so cells flow as direct siblings of .calendar-body */
    .calendar-week {
        display: contents;
    }

    .calendar-cell {
        min-height: 0;
        background: #fff;
        border: 1px solid var(--slate-200);
        border-right: 1px solid var(--slate-200);
        border-bottom: 1px solid var(--slate-200);
        border-radius: 12px;
        padding: 12px 14px;
        gap: 8px;
    }
    .calendar-cell.weekend { background: #fff; }

    /* Hide days with no jobs and days outside the current month */
    .calendar-cell.empty-day:not(.today) { display: none; }
    .calendar-cell.other-month { display: none; }

    /* Day header: Mon · 15 */
    .cell-date {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 0 4px 0;
        font-family: inherit;
        font-size: 0.85rem;
    }
    .cell-day-name {
        display: inline;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.7rem;
        color: var(--slate-500);
    }
    .cell-day-num {
        font-size: 1rem;
        font-weight: 700;
        color: var(--slate-900);
        font-family: inherit;
    }
    /* "Today" gets a pill on the date number, not the whole cell */
    .calendar-cell.today { background: #fff; box-shadow: 0 0 0 2px var(--amber-500) inset; }
    .calendar-cell.today .cell-day-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 10px;
        background: var(--amber-500);
        color: var(--slate-950);
        border-radius: 999px;
        font-size: 0.95rem;
        line-height: 1;
    }
    /* Placeholder text for today when it has no jobs */
    .calendar-cell.today.empty-day .cell-movements::after {
        content: 'No jobs scheduled for today';
        color: var(--slate-400);
        font-size: 0.85rem;
        font-style: italic;
    }

    /* Movements become full-width readable rows.
       We also have to undo the desktop overflow: hidden + white-space: nowrap
       rules on both the movement row AND the title, otherwise wrapped content
       (the haulier row pinned to width:100%) gets clipped. */
    .cell-movements {
        gap: 6px;
        flex: none;
        overflow: visible;
    }
    .calendar-movement {
        font-size: 0.85rem;
        padding: 8px 10px;
        border-radius: 8px;
        white-space: normal;
        line-height: 1.35;
        flex-wrap: wrap;
        overflow: visible;
    }
    .calendar-movement .movement-type {
        display: inline-block;
        font-size: 0.65rem;
        padding: 1px 6px;
        border-radius: 4px;
        background: rgba(0,0,0,0.06);
        margin-right: 6px;
    }
    .calendar-movement .movement-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Haulier row: new line below the title, coloured dot + name */
    .calendar-movement .movement-haulier {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        margin-top: 4px;
        font-size: 0.78rem;
        color: var(--slate-600);
    }
    .movement-haulier-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--slate-400);
    }
    .calendar-movement .movement-haulier.unassigned {
        color: var(--slate-400);
        font-style: italic;
    }
    .calendar-movement .movement-haulier.unassigned .movement-haulier-dot {
        background: repeating-linear-gradient(45deg, var(--slate-200) 0 3px, transparent 3px 6px);
        border: 1px dashed var(--slate-300);
    }

    /* Mobile shows all movements directly; the "+N more" indicator is redundant */
    .calendar-movement-overflow { display: flex; }
    .calendar-more { display: none; }
}

/* ============================================
   ROUTE MAP MODAL STYLES
   ============================================ */

/* Wide modal variant for route map */
.modal-content-wide {
    max-width: 600px;
}

/* Route map container */
.route-map {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-200);
    background: var(--slate-100);
    margin-bottom: 1rem;
}

/* Loading state for map */
.route-map.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-400);
}

/* Route info section */
.route-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: #FAFBFD;
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-200);
    margin-bottom: 1rem;
    gap: 1rem;
}

.route-endpoints {
    flex: 1;
}

.route-endpoints p {
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--ink);
}

.route-endpoints p:last-child {
    margin-bottom: 0;
}

.route-distance {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    background: var(--panel);
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-200);
    font-variant-numeric: tabular-nums;
}

/* Button with outline style */
.btn-outline {
    background: var(--panel);
    border: 1px solid var(--slate-200);
    color: var(--slate-500);
}

.btn-outline:hover {
    background: var(--slate-100);
    border-color: var(--slate-400);
    color: var(--ink);
}

/* Button icon */
.btn-icon {
    margin-right: 0.375rem;
}

/* External link icon */
.external-link-icon {
    margin-left: 0.375rem;
    font-size: 0.9em;
}

/* Leaflet popup customization */
.leaflet-popup-content {
    font-size: 0.85rem;
    margin: 0.75rem 1rem;
}

.leaflet-popup-content strong {
    display: block;
    margin-bottom: 0.25rem;
}

/* Custom marker styles */
.route-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--amber-500);
    color: var(--slate-950);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    font-weight: 700;
    font-size: 0.75rem;
}

.route-marker-icon span {
    transform: rotate(45deg);
}

.route-marker-icon.origin {
    background: var(--success);
    color: white;
}

.route-marker-icon.destination {
    background: var(--danger);
    color: white;
}

/* ============================================
   SETTINGS PAGE STYLES
   ============================================ */

.settings-main {
    padding: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.settings-container {
    background: var(--panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-200);
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(12, 17, 29, 0.04);
}

.settings-container h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}

.settings-description {
    color: var(--slate-600);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.settings-form {
    margin-bottom: 2rem;
}

.settings-form h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--slate-200);
    color: var(--ink);
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--slate-500);
    margin-top: 0.25rem;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--slate-200);
}

.save-result {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.save-result.success {
    background: var(--green-tint);
    color: var(--green);
}

.save-result.error {
    background: var(--red-tint);
    color: var(--red);
}

.save-result:empty {
    display: none;
}

/* Settings info table */
.settings-info {
    background: #FAFBFD;
    border: 1px solid var(--slate-200);
    padding: 1rem;
    border-radius: var(--radius-sm);
}

.settings-info h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--slate-700);
}

.info-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.info-table th,
.info-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--slate-200);
}

.info-table th {
    font-weight: 600;
    color: var(--slate-600);
}

.info-table td {
    color: var(--slate-700);
}

.info-table tr:last-child td {
    border-bottom: none;
}

/* Access denied message */
.access-denied {
    text-align: center;
    padding: 3rem 1rem;
}

.access-denied h3 {
    color: var(--red);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.access-denied p {
    color: var(--slate-600);
    margin-bottom: 1.5rem;
}

/* ============================================
   DATE UPDATE CONFIRMATION MODAL
   ============================================ */

.date-comparison {
    background: #FAFBFD;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 1rem 0;
}

.date-compare-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.date-compare-row:last-child {
    margin-bottom: 0;
}

.date-compare-label {
    font-weight: 500;
    color: var(--slate-500);
    width: 110px;
    flex-shrink: 0;
}

.date-compare-before {
    font-family: var(--font-mono);
    padding: 0.375rem 0.625rem;
    background: var(--red-tint);
    color: var(--red);
    border-radius: var(--radius-md);
    font-weight: 500;
    min-width: 100px;
    text-align: center;
}

.date-compare-arrow {
    color: var(--slate-400);
    font-size: 1.25rem;
}

.date-compare-after {
    font-family: var(--font-mono);
    padding: 0.375rem 0.625rem;
    background: var(--green-tint);
    color: var(--green);
    border-radius: var(--radius-md);
    font-weight: 500;
    min-width: 100px;
    text-align: center;
}

.date-compare-before.unchanged,
.date-compare-after.unchanged {
    background: var(--slate-100);
    color: var(--slate-500);
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--slate-200);
}

/* Date edit section (#dateEditSection lives inside the drawer's "Dates"
   section per DESIGN.md §8 — a plain section, not a highlighted box).
   #updateDatesBtn keeps its own .btn.btn-secondary styling (quiet, per the
   drawer-c-card.html mockup's .quietbtn) — no id-level override needed. */
#dateEditSection > label:first-child {
    display: block;
    margin-bottom: 0.75rem;
}

#dateEditSection .form-row {
    margin-bottom: 0.75rem;
}

#dateEditSection .form-group {
    margin-bottom: 0;
}

/* Audit Log Styles */
.audit-log-content {
    max-height: 60vh;
    overflow-y: auto;
}

.audit-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.audit-log-table th,
.audit-log-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--slate-200);
}

.audit-log-table th {
    background: #FAFBFD;
    color: var(--slate-400);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}

.audit-log-table tbody tr:hover {
    background: #FAFBFD;
}

.audit-time {
    white-space: nowrap;
    color: var(--slate-500);
    font-size: 0.85rem;
}

.audit-user {
    font-weight: 600;
    color: var(--ink);
}

.audit-action {
    color: var(--amber-600);
    font-weight: 500;
}

.audit-details {
    font-size: 0.85rem;
}

.audit-change {
    color: var(--slate-600);
}

.no-logs {
    text-align: center;
    color: var(--slate-500);
    padding: 2rem;
}

#auditLogPagination {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--slate-200);
}

/* ============================================
   DESKTOP OPTIMIZATIONS (min-width queries)
   ============================================ */

/* Medium desktop: 1024px+ */
@media (min-width: 1024px) {
    /* Expand header content width */
    .header-content {
        max-width: 1600px;
    }
    
    .view-nav {
        max-width: 1600px;
    }
    
    /* Pages with a plain main (job detail, furniture whereabouts) */
    main:not(.table-layout):not(.calendar-main):not(.settings-main):not(.login-container) {
        max-width: 1200px;
    }
}

/* Large desktop: 1200px+ */
@media (min-width: 1200px) {
    /* Calendar view improvements */
    body.calendar-view main.calendar-main {
        max-width: 1600px;
        margin: 0 auto;
    }
    
    .calendar-toolbar {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .calendar-cell {
        min-height: 140px;
    }
    
    .calendar-movement {
        font-size: 0.8rem;
        padding: 4px 6px;
    }
    
    .movement-type {
        font-size: 0.65rem;
    }
    
    .calendar-legend {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Extra large desktop: 1400px+ */
@media (min-width: 1400px) {
    /* Pages with a plain main (job detail, furniture whereabouts) */
    main:not(.table-layout):not(.calendar-main):not(.settings-main):not(.login-container) {
        max-width: 1600px;
    }
    
    /* Calendar cells even taller */
    .calendar-cell {
        min-height: 160px;
    }
}

/* ============================================ */
/* Job Detail Page                              */
/* ============================================ */

/* Dark background for the detail view body */
body.job-detail-view {
    background: var(--bg);
    color: var(--ink);
}

.job-detail-main {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* Back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--slate-400);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
    padding: 6px 0;
    transition: color 0.15s;
}

.back-link svg {
    flex-shrink: 0;
}

.back-link:hover {
    color: var(--ink);
}

/* Error state — quiet card, centred on the page background */
.job-error {
    text-align: center;
    max-width: 420px;
    margin: 40px auto;
    padding: 48px 24px;
    background: var(--panel);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    color: var(--slate-500);
}

.job-error-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--red-tint);
    color: var(--red);
    font-weight: 700;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.job-error h2 {
    color: var(--ink);
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.job-error p {
    margin-bottom: 20px;
}

/* ---- Hero header — quiet white card ---- */
.jd-hero {
    background: var(--panel);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

.jd-hero-inner {
    padding: 24px 28px 22px;
}

.jd-hero-top {
    margin-bottom: 10px;
}

.jd-hero-badges {
    display: flex;
    gap: 8px;
}

.jd-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 8px;
}

.jd-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Current-RMS reference link, right-aligned in the hero meta row.
   Kept subtle — this is a "go to source" admin utility, not a primary action. */
.jd-hero-crms {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    background: var(--slate-100);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--slate-500);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.jd-hero-crms:hover {
    background: var(--amber-tint);
    border-color: var(--amber-500);
    color: var(--amber-600);
}
.jd-hero-crms svg { flex-shrink: 0; }

.jd-hero-date {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--slate-400);
    font-weight: 500;
}

/* ---- Info cards row ---- */
.jd-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}

.jd-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--panel);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: border-color 0.15s;
}

.jd-info-card:hover {
    border-color: var(--slate-300);
}

.jd-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slate-100);
    border-radius: var(--radius-md);
    color: var(--slate-500);
}

.jd-info-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.jd-info-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--slate-400);
    font-weight: 700;
}

.jd-info-value {
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jd-info-sub {
    font-size: 0.8rem;
    color: var(--slate-500);
}

.jd-info-sub a {
    color: var(--blue);
    text-decoration: none;
    transition: color 0.15s;
}

.jd-info-sub a:hover {
    text-decoration: underline;
}

/* ---- Sections ---- */
.jd-section {
    margin-bottom: 24px;
}

.jd-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.jd-section-header h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-400);
}

/* Horizontal rule after section title */
.jd-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--slate-200);
}

/* ---- Route map ---- */
.job-route-map {
    height: 280px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--slate-200);
    overflow: hidden;
}

.jd-route-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel);
    border: 1px solid var(--slate-200);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 10px 16px;
    font-size: 0.82rem;
    color: var(--slate-700);
}

.jd-route-endpoint strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.7rem;
    margin-right: 6px;
    vertical-align: middle;
}

.jd-route-endpoint:first-child strong {
    background: var(--amber-500);
    color: var(--slate-950);
}

.jd-route-endpoint:last-child strong {
    background: var(--delivery-border);
    color: white;
}

.jd-route-distance {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ink);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Furniture list ---- */
.jd-furniture-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jd-furniture-list li {
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    color: var(--slate-700);
    font-weight: 600;
}

/* ---- Job group (delivery / collection sub-sections) ---- */
.jd-job-group {
    margin-bottom: 28px;
}

.jd-job-group:last-child {
    margin-bottom: 0;
}

.jd-job-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    border: 1px solid var(--slate-200);
    background: var(--panel);
}

.jd-job-group-header.delivery {
    background: var(--amber-tint);
}

.jd-job-group-header.collection {
    background: var(--blue-tint);
}

.jd-job-group-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
}

.jd-job-group-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--slate-500);
    font-weight: 500;
}

.jd-job-group-meta .badge {
    font-size: 0.7rem;
    padding: 2px 8px;
}

/* ---- Movement cards ---- */
.movements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.movement-card {
    background: var(--panel);
    border: 1px solid var(--slate-200);
    border-left: 4px solid var(--slate-300);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    transition: border-color 0.15s;
}

.movement-card:hover {
    border-color: var(--slate-300);
    border-left-color: inherit;
}

.movement-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.movement-card-header .transport-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 600;
}

.movement-card-header .transport-icon {
    font-size: 1.15rem;
}

/* .movement-badge's base rule (mini slate-100 chip) already matches the
   Quiet Card look here — no dark-theme override needed. */

.movement-card-body .form-group {
    margin-bottom: 12px;
}

.movement-card-body label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-500);
    margin-bottom: 5px;
}

/* select/textarea inherit the base .form-group input styling (white,
   slate-200 border, amber focus ring) — movement-card-body fields are
   always wrapped in .form-group in job.js, so no override is needed here
   beyond this textarea-specific sizing. */
.movement-card-body textarea {
    resize: vertical;
    min-height: 52px;
}

.movement-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* ---- Notes section ---- */
.jd-notes-text {
    color: var(--slate-700);
    font-size: 0.9rem;
    white-space: pre-wrap;
    line-height: 1.6;
    background: var(--panel);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    min-height: 48px;
}

/* ---- "Manage Loads" link, drawer sub-line ---- */
.view-full-job-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.15s;
}

.view-full-job-link:hover {
    text-decoration: underline;
}

/* ---- Mobile responsive ---- */
@media (max-width: 640px) {
    .jd-info-row {
        grid-template-columns: 1fr;
    }

    .jd-hero-inner {
        padding: 20px 18px 18px;
    }

    .jd-hero-title {
        font-size: 1.25rem;
    }

    .movement-card {
        padding: 14px 16px;
    }

    .movement-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .jd-job-group-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .job-detail-main {
        padding: 16px 14px 40px;
    }
}

/* ─── Status stepper (DESIGN.md §9) ───────────────────────────
   #jobStatus keeps its JS contract: container [data-value], child
   <button data-value> elements, .active toggled by setStatusValue (never
   re-rendered after the initial renderStatusProgress call). The "done"
   (before the active step) vs "future" (after it) look, and the amber fill
   on the connecting line, are pure CSS — driven by :has()/sibling selectors
   off .active, not by extra JS-set classes, so every status change (not
   just re-opens) stays visually correct. */
.status-progress {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    width: 100%;
    max-width: none;
    background: none;
    padding: 0;
    gap: 0;
}
/* Connecting line: full-width track, amber fill up to the active step */
.status-progress::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background: var(--slate-200);
}
.status-progress::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 16.66%;
    height: 2px;
    width: 0;
    background: var(--amber-500);
    transition: width .15s ease;
}
.status-progress:has(button[data-value="booked"].active)::after { width: 33.3%; }
.status-progress:has(button[data-value="completed"].active)::after { width: 66.6%; }

.status-progress .step {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.status-progress .step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--panel);
    border: 2px solid var(--slate-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--slate-400);
}
.status-progress .step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-400);
}
.status-progress .step:hover:not(:disabled) .step-label {
    color: var(--ink);
}
/* Current step */
.status-progress .step.active .step-dot {
    background: var(--panel);
    border-color: var(--amber-500);
    color: var(--amber-600);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.13);
}
.status-progress .step.active .step-label {
    color: var(--ink);
}
/* Done steps: any step that has a later sibling which is the active one */
.status-progress .step:has(~ .step.active) .step-dot {
    background: var(--amber-500);
    border-color: var(--amber-500);
    color: #fff;
}
.status-progress .step:has(~ .step.active) .step-label {
    color: var(--ink);
}
.status-progress .step:disabled {
    cursor: wait;
    opacity: 0.6;
}

.stepper-hint {
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--slate-400);
    text-align: center;
}
.stepper-hint b {
    color: var(--slate-500);
    font-weight: 600;
}

/* ─── Toasts (success / error notifications) ─── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--slate-950, #0C111D);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(12,17,29,0.25);
    max-width: 360px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: auto;
}
.toast-in {
    opacity: 1;
    transform: translateY(0);
}
.toast-out {
    opacity: 0;
    transform: translateY(10px);
}
.toast-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.toast-success .toast-icon { background: #10B981; color: #fff; }
.toast-error   .toast-icon { background: #EF4444; color: #fff; }

@media (max-width: 640px) {
    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
    .toast { max-width: none; }
}

/* ─── Per-load dates editor (table detail panel) ─── */
.movement-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.movement-date-label {
    flex: 1 1 100%;
    font-size: 0.8rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.movement-date-input {
    flex: 1 1 auto;
    min-width: 130px;
}
.movement-date-reset {
    flex: 0 0 auto;
}
#movementDatesSection .hint {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}