/* =========================================================
   RBD5 - OUTBOUND SCHEDULE (v4)
   Styles

   Screen sizes it's built for:
     1200px and up  desktop / laptop (details panel on the right)
     960 - 1199     small laptops, tablets sideways, Z Fold open
     640 - 959      tablets upright, Z Fold open upright
     up to 639      phones (iPhone 16 Pro Max, Z Flip, etc.)
     up to 380      very narrow screens (Z Fold cover screen)
========================================================= */


/* =========================================================
   BASE
========================================================= */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    background: #f1f4f8;
    color: #172033;
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
}

button,
select,
input {
    font-family: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
.upload-btn:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}


/* =========================================================
   LAYOUT
========================================================= */

.app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.main {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #172033;
    color: #cbd5e1;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.logo-main {
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 1px;
}

.logo-sub {
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: 3px;
}

.navigation {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    background: none;
    border: 0;
    color: #cbd5e1;
    text-align: left;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

.nav-item:hover {
    background: #1e2940;
}

.nav-item.active {
    background: #27324a;
    color: #fff;
}

.section-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 8px;
}

.shift-box,
.cpt-box {
    background: #1e2940;
    border-radius: 9px;
    padding: 14px;
}

.shift-name {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

.shift-cpt-label {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 8px;
}

.shift-cpt {
    color: #fbbf24;
    font-size: 18px;
    font-weight: 700;
}

.shift-range {
    font-size: 11px;
    margin-top: 4px;
}

.cpt-route {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 5px;
    background: #27324a;
    margin-bottom: 5px;
    font: inherit;
    font-size: 12px;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.cpt-route:hover {
    background: #33405e;
}

/* Picked routes (same look as Studio) */
.cpt-route.active {
    background: #fbbf24;
    color: #172033;
    font-weight: 700;
}

.cpt-route.active .row-star {
    color: #172033;
}

.no-data {
    font-size: 12px;
    color: #94a3b8;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.header h1 {
    margin: 0;
    font-size: 22px;
}

.header p {
    margin: 4px 0 0;
    color: #64748b;
}

.header-right {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-shrink: 0;
}

.clock {
    text-align: right;
}

.clock #date {
    font-size: 11px;
    color: #64748b;
}

.clock-time {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
}

.clock strong {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.live {
    color: #16a34a;
    font-size: 10px;
    font-weight: 700;
}

.time-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    color: #64748b;
}

.toggle {
    display: flex;
    border: 1px solid #d5dbe3;
    border-radius: 6px;
    overflow: hidden;
}

.format {
    border: 0;
    background: #fff;
    padding: 6px 10px;
    font-size: 11px;
}

.format.active {
    background: #172033;
    color: #fff;
}


/* =========================================================
   TOOLBAR
========================================================= */

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

.upload-btn {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #172033;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
}

.upload-text strong {
    display: block;
}

.upload-text small {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    white-space: nowrap;
}

/* Schedule is over an hour old */
.upload-text small.stale {
    color: #fbbf24;
    font-weight: 700;
}

.search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    padding: 0 12px;
    min-width: 180px;
    min-height: 44px;
}

.search input {
    border: 0;
    outline: 0;
    padding: 11px 0;
    width: 100%;
    font-size: 13px;
    background: transparent;
}

.toolbar-filters,
.toolbar-toggles {
    display: flex;
    gap: 10px;
}

select,
.my-route-btn {
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    min-height: 44px;
    white-space: nowrap;
}

.my-route-btn.active {
    background: #172033;
    color: #fff;
    border-color: #172033;
}


/* =========================================================
   SUMMARY CARDS
========================================================= */

.summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.summary-card {
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: 9px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.summary-card strong {
    font-size: 20px;
    display: block;
}

.summary-card small {
    color: #64748b;
    white-space: nowrap;
}

.summary-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gray   { background: #94a3b8; }
.yellow { background: #f59e0b; }
.red    { background: #dc2626; }
.late   { background: #e11d48; box-shadow: 0 0 0 3px #ffe4e6; }


/* =========================================================
   NEXT LOAD BAR
========================================================= */

.next-load {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #fff;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 9px;
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    cursor: default;
}

.next-load.clickable {
    cursor: pointer;
}

.next-load.clickable:hover {
    background: #fffbeb;
}

.next-load-star {
    color: #f59e0b;
    font-size: 18px;
}

.next-load-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.next-load-label {
    font-size: 11px;
    color: #64748b;
}

.next-load-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    align-items: baseline;
}

.next-load-info strong {
    font-size: 15px;
}

.next-load-info span {
    color: #475569;
}

.next-load-in {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.next-load-late {
    background: #ffe4e6;
    color: #be123c;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
}


/* =========================================================
   TABLE
========================================================= */

.schedule-card {
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: 10px;
    overflow: hidden;
}

.table-header {
    padding: 14px 18px;
    border-bottom: 1px solid #e1e6ec;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.table-header h2 {
    margin: 0;
    font-size: 15px;
}

.table-header span {
    color: #64748b;
    font-size: 12px;
}

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    font-size: 10px;
    color: #64748b;
    padding: 10px 18px;
    background: #f8fafc;
    white-space: nowrap;
}

td {
    padding: 11px 18px;
    border-top: 1px solid #eef1f5;
    vertical-align: middle;
}

.schedule-row {
    cursor: pointer;
}

.schedule-row:hover {
    background: #f8fafc;
}

.cpt-row {
    background: #fffdf5;
}

.late-row td:first-child {
    box-shadow: inset 3px 0 0 #e11d48;
}

.finished-row {
    opacity: 0.6;
}

.row-star {
    color: #f59e0b;
    margin-right: 5px;
}

.cpt-marker {
    display: inline-block;
    margin-left: 7px;
    padding: 3px 5px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    font-size: 8px;
    font-weight: 800;
    vertical-align: middle;
}

.date-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.date-cell-date {
    font-size: 11px;
    color: #64748b;
}

.date-cell-time {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-scheduled { background: #f1f5f9; color: #475569; }
.status-progress  { background: #fef3c7; color: #92400e; }
.status-finished  { background: #fee2e2; color: #991b1b; }

/* Real trailer status from the CSV */
.status-attached  { background: #e0f2fe; color: #075985; }
.status-ready     { background: #dcfce7; color: #166534; }
.status-paused    { background: #ffedd5; color: #9a3412; }

.until-late {
    color: #be123c;
    font-weight: 700;
}

.until-muted {
    color: #94a3b8;
}

.row-action {
    border: 0;
    background: none;
    font-size: 16px;
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 6px;
}

.row-action:hover {
    background: #eef1f5;
}

.empty {
    text-align: center;
    padding: 40px 16px;
}

.empty-icon {
    font-size: 22px;
    color: #94a3b8;
}

.empty h3 {
    margin: 8px 0 4px;
}

.empty p {
    margin: 0;
    color: #64748b;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    margin-top: auto;
    padding-top: 8px;
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
}


/* =========================================================
   DETAILS PANEL
========================================================= */

.details {
    width: 320px;
    flex-shrink: 0;
    background: #fff;
    border-left: 1px solid #e1e6ec;
    padding: 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.details-header h2 {
    font-size: 15px;
    margin: 0;
}

.details-header button {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: #64748b;
}

.details-header button:hover {
    background: #f1f5f9;
}

.route-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
}

.route-title h2 {
    margin: 0;
    font-size: 20px;
    word-break: break-word;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f5;
}

.detail-row span {
    color: #64748b;
}

.detail-row strong {
    text-align: right;
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.action {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid #e1e6ec;
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: left;
    min-height: 52px;
}

.action:hover {
    background: #f8fafc;
}

.action small {
    display: block;
    color: #64748b;
}

.remove-action strong {
    color: #b91c1c;
}

.details-backdrop {
    display: none;
}


/* =========================================================
   ROUTES PANEL
========================================================= */

.route-selector-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.route-selector {
    width: min(520px, 100%);
    max-height: 85vh;
    max-height: 85dvh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.route-selector-header {
    padding: 18px 20px;
    border-bottom: 1px solid #e1e6ec;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.route-selector-header h2 {
    margin: 0;
    font-size: 17px;
}

.route-selector-header p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
}

.route-selector-header button {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #64748b;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

.route-selector-body {
    padding: 8px 20px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.route-group h3 {
    margin: 14px 0 8px;
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
}

.route-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.route-option {
    border: 1px solid #e1e6ec;
    border-radius: 7px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    background: #fff;
    text-align: left;
    min-height: 44px;
    min-width: 0;
}

.route-option:hover {
    background: #f8fafc;
}

.route-option.starred {
    border-color: #f59e0b;
    background: #fffbeb;
}

.route-star {
    font-size: 16px;
    color: #cbd5e1;
    width: 16px;
}

.route-option.starred .route-star {
    color: #f59e0b;
}

.route-name {
    font-weight: 700;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.route-loads {
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
}

.route-selector-actions {
    padding: 14px 20px;
    border-top: 1px solid #e1e6ec;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.route-selector-actions button {
    border: 1px solid #d5dbe3;
    background: #fff;
    padding: 9px 13px;
    border-radius: 6px;
    font-size: 12px;
    min-height: 40px;
}

.route-selector-actions button:last-child {
    background: #172033;
    color: #fff;
    border-color: #172033;
}

body.routes-open {
    overflow: hidden;
}


/* =========================================================
   SMALL LAPTOPS, TABLETS SIDEWAYS, Z FOLD OPEN
   Details panel slides over the page instead of squeezing it
========================================================= */

@media (max-width: 1199px) {

    .details {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        height: auto;
        width: min(360px, 90vw);
        z-index: 90;
        box-shadow: -10px 0 40px rgba(15, 23, 42, 0.18);
        padding-top: calc(20px + env(safe-area-inset-top));
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        padding-right: calc(20px + env(safe-area-inset-right));
        animation: slide-in-right 0.2s ease-out;
    }

    .details-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 80;
        background: rgba(15, 23, 42, 0.45);
    }

    body.details-open {
        overflow: hidden;
    }

}


/* =========================================================
   TABLETS UPRIGHT (and Z Fold open upright)
   Sidebar becomes a bar across the top
========================================================= */

@media (max-width: 959px) {

    .app {
        flex-direction: column;
    }

    .sidebar {
        width: auto;
        height: auto;
        position: static;
        overflow: visible;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo  nav"
            "shift cpt";
        gap: 14px 16px;
        padding: 16px 20px;
        padding-top: calc(16px + env(safe-area-inset-top));
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
    }

    .logo       { grid-area: logo; align-self: center; }
    .navigation { grid-area: nav; flex-direction: row; justify-content: flex-end; }
    .shift-box  { grid-area: shift; }
    .cpt-box    { grid-area: cpt; min-width: 0; }

    .shift-box,
    .cpt-box {
        padding: 12px 14px;
    }

    .shift-details {
        display: flex;
        align-items: baseline;
        gap: 14px;
        flex-wrap: wrap;
    }

    .shift-cpt-group {
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .shift-cpt-label,
    .shift-range {
        margin-top: 0;
    }

    #cptRoutes {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .cpt-route {
        width: auto;
        margin: 0;
    }

    /* Toolbar: upload + search on top, filters and toggles below */
    .search {
        flex: 1 1 calc(100% - 220px);
    }

    .toolbar-filters,
    .toolbar-toggles {
        flex: 1 1 auto;
    }

    .toolbar-filters > *,
    .toolbar-toggles > * {
        flex: 1;
    }

    .main {
        padding: 20px;
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

}


/* =========================================================
   PHONES (iPhone 16 Pro Max, Z Flip, most phones)
========================================================= */

@media (max-width: 639px) {

    /* iPhone zooms in on inputs smaller than 16px. This stops that. */
    input,
    select {
        font-size: 16px !important;
    }

    /* ---- Top bar ---- */

    .sidebar {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo  nav"
            "shift shift"
            "cpt   cpt";
        gap: 12px;
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top));
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
    }

    .logo-main {
        font-size: 16px;
    }

    .nav-item {
        padding: 8px 10px;
        font-size: 12px;
        gap: 6px;
    }

    .shift-box,
    .cpt-box {
        padding: 10px 12px;
    }

    .shift-name {
        font-size: 18px;
    }

    .shift-cpt {
        font-size: 16px;
    }

    /* CPT routes scroll sideways instead of stacking up */
    #cptRoutes {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -12px;
        padding: 0 12px;
    }

    #cptRoutes::-webkit-scrollbar {
        display: none;
    }

    /* ---- Main area ---- */

    .main {
        padding: 16px;
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        gap: 12px;
    }

    .header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .header h1 {
        font-size: 19px;
    }

    .header p {
        display: none;
    }

    .header-right {
        justify-content: space-between;
        align-items: flex-end;
    }

    .clock {
        text-align: left;
    }

    .clock-time {
        justify-content: flex-start;
    }

    .time-toggle {
        align-items: flex-end;
    }

    .format {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* ---- Toolbar: one row each, easy to tap ---- */

    .toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .upload-btn {
        justify-content: center;
    }

    .search {
        min-width: 0;
    }

    .toolbar-filters,
    .toolbar-toggles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .toolbar-filters select,
    .toolbar-toggles button {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- Summary: 4 small tiles in one row ---- */

    .summary {
        gap: 6px;
    }

    .summary-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px;
    }

    .summary-card strong {
        font-size: 18px;
    }

    .summary-card small {
        font-size: 10px;
    }

    .summary-dot {
        width: 8px;
        height: 8px;
    }

    /* ---- Next load ---- */

    .next-load {
        flex-wrap: wrap;
        padding: 12px;
        gap: 6px 10px;
    }

    .next-load-main {
        flex-basis: calc(100% - 40px);
    }

    .next-load-in {
        margin-left: 28px;
    }

    /* ---- Table turns into cards ---- */

    .table-header {
        padding: 12px 14px;
    }

    thead {
        display: none;
    }

    table,
    tbody {
        display: block;
    }

    .schedule-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "route status"
            "sdt   cpt"
            "until until";
        gap: 10px 12px;
        padding: 14px;
        border-top: 1px solid #eef1f5;
    }

    .schedule-row:first-child {
        border-top: 0;
    }

    .schedule-row td {
        padding: 0;
        border: 0;
        min-width: 0;
    }

    .late-row td:first-child {
        box-shadow: none;
    }

    .late-row {
        box-shadow: inset 4px 0 0 #e11d48;
    }

    .cell-num,
    .cell-action {
        display: none;
    }

    .cell-route {
        grid-area: route;
        font-size: 15px;
        align-self: center;
        word-break: break-word;
    }

    .cell-status {
        grid-area: status;
        justify-self: end;
        align-self: center;
    }

    .cell-sdt { grid-area: sdt; }
    .cell-cpt { grid-area: cpt; }

    .cell-sdt::before,
    .cell-cpt::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
        margin-bottom: 2px;
    }

    .cell-until {
        grid-area: until;
        padding-top: 8px !important;
        border-top: 1px dashed #e5e9ef !important;
        font-weight: 600;
    }

    .empty-row {
        display: block;
    }

    .empty-row td {
        display: block;
        border: 0;
    }

    /* ---- Details: slides up from the bottom ---- */

    .details {
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 88vh;
        max-height: 88dvh;
        border-left: 0;
        border-radius: 16px 16px 0 0;
        padding: 12px 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
        box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.2);
        animation: slide-up 0.22s ease-out;
    }

    /* little grab handle at the top */
    .details::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #d5dbe3;
        margin: 0 auto 8px;
    }

    .route-title {
        margin: 10px 0;
    }

    /* ---- Routes panel: slides up from the bottom ---- */

    .route-selector-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .route-selector {
        width: 100%;
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: 16px 16px 0 0;
        animation: slide-up 0.22s ease-out;
    }

    .route-selector-header,
    .route-selector-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .route-selector-actions {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .route-selector-actions button {
        flex: 1;
        min-height: 44px;
    }

}


/* =========================================================
   VERY NARROW (Z Fold cover screen, small phones)
========================================================= */

@media (max-width: 380px) {

    .summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-card {
        flex-direction: row;
        align-items: center;
    }

    .route-list {
        grid-template-columns: 1fr;
    }

    .header-right {
        flex-wrap: wrap;
    }

    .nav-item span {
        display: none;
    }

    .toolbar-toggles {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .details,
    .route-selector {
        animation: none;
    }
}


/* =========================================================
   PASSWORD SCREEN (shared mode only)
========================================================= */

.lock-screen {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: #172033;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    padding-top: calc(24px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
}

.lock-card {
    width: min(360px, 100%);
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.lock-badge {
    display: inline-block;
    background: #172033;
    color: #fbbf24;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 6px 12px;
    border-radius: 6px;
}

.lock-card h1 {
    margin: 14px 0 6px;
    font-size: 20px;
}

.lock-card p {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 13px;
}

.lock-fields input {
    width: 100%;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 16px; /* 16px stops iPhone from zooming in */
    min-height: 48px;
    margin-bottom: 10px;
}

.lock-fields button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #172033;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.lock-fields button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.lock-error {
    color: #be123c !important;
    font-weight: 600;
    margin: 12px 0 0 !important;
    min-height: 1em;
}

.lock-error:empty {
    display: none;
}

.lock-footer {
    color: #94a3b8;
    font-size: 11px;
}

/* While Firebase checks if this device is already unlocked */
.lock-loading {
    display: none;
}

.lock-screen.checking .lock-loading {
    display: block;
}

.lock-screen.checking .lock-fields {
    display: none;
}

/* Page behind the password screen can't scroll */
body.locked {
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* =========================================================
   SYNC STATUS + LOCK BUTTON
========================================================= */

.live.offline {
    color: #94a3b8;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-lock {
    border: 1px solid #d5dbe3;
    background: #fff;
    color: #64748b;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    min-height: 32px;
}

.footer-lock:hover {
    color: #172033;
}



/* =========================================================
   v3: TOP BAR (related links + login)
========================================================= */

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #64748b;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e6ec;
}

.related-uis {
    display: flex;
    align-items: center;
    gap: 8px;
}

.related-uis a {
    color: #172033;
    text-decoration: none;
    border: 1px solid #d5dbe3;
    background: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    font-weight: 600;
}

.related-uis a:hover {
    border-color: #172033;
}

.user-login {
    color: #2563eb;
    font-weight: 600;
}


/* =========================================================
   v3: SUMMARY "TOTAL" DOT
========================================================= */

.total { background: #172033; }


/* =========================================================
   v3: TABLE HEADER WITH LIST / BOARD SWITCH
========================================================= */

.table-header {
    justify-content: space-between;
    align-items: center;
}

.table-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.view-toggle {
    display: flex;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.view-toggle button {
    border: 0;
    background: #fff;
    padding: 7px 12px;
    font-size: 12px;
    min-height: 36px;
}

.view-toggle button.active {
    background: #172033;
    color: #fff;
}


/* =========================================================
   v3: ROUTE CELL (meta line)
========================================================= */

.route-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.route-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.meta-text {
    font-size: 11px;
    color: #64748b;
}

.carrier-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

.carrier-azng {
    background: #e0ecff;
    color: #1d4ed8;
}

.carrier-3p {
    background: #f3e8ff;
    color: #7e22ce;
}

/* Box trucks */
.carrier-other {
    background: #f1f5f9;
    color: #475569;
}

.location-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    background: #172033;
    color: #fff;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.location-parking {
    background: #e2e8f0;
    color: #334155;
}

/* The location sits in its own column on big screens */
.location-mobile {
    display: none;
}


/* =========================================================
   v3: COPY VR ID
========================================================= */

.detail-copy {
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-btn {
    border: 1px solid #d5dbe3;
    background: #fff;
    border-radius: 6px;
    font-size: 11px;
    padding: 4px 9px;
    min-height: 30px;
    color: #172033;
}

.copy-btn:hover {
    background: #f1f5f9;
}


/* =========================================================
   v3: BOARD VIEW (a column per route)
========================================================= */

.board {
    display: flex;
    gap: 12px;
    padding: 14px;
    overflow-x: auto;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    background: #f8fafc;
}

.board-column {
    flex: 0 0 240px;
    background: #eef2f6;
    border-radius: 10px;
    padding: 10px;
    scroll-snap-align: start;
}

.board-column-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 10px;
    font-size: 14px;
}

.board-count {
    margin-left: auto;
    background: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
}

.board-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.board-card {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.board-card:hover {
    border-color: #94a3b8;
}

.board-card-cpt {
    border-left: 3px solid #f59e0b;
}

.board-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.board-card-time {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.board-card-time strong {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.board-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0 4px;
}

.board-card-until {
    margin-top: 8px;
    font-weight: 600;
}

.board-empty {
    width: 100%;
}


/* =========================================================
   v3: ALERT POP-UPS
========================================================= */

.toast-area {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 250;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, calc(100% - 32px));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: #172033;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
    animation: slide-up 0.2s ease-out;
}

button.toast {
    cursor: pointer;
    border-left: 4px solid #f59e0b;
}


/* =========================================================
   v3: SMALLER SCREENS
========================================================= */

@media (max-width: 639px) {

    .top-bar {
        font-size: 10px;
    }

    /* Location moves next to the route name on phone cards */
    .cell-location {
        display: none;
    }

    .location-mobile {
        display: inline;
    }

    .view-toggle button {
        min-height: 40px;
    }

    .board {
        padding: 12px;
    }

    .board-column {
        flex-basis: 78vw;
    }

    .toolbar-toggles {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .toolbar-toggles button {
        font-size: 11px;
        padding: 10px 6px;
    }

}

@media (max-width: 380px) {

    .toolbar-toggles {
        grid-template-columns: 1fr;
    }

}

/* Board view hides "entries", so the status filter takes the full row */
@media (max-width: 639px) {
    .toolbar-filters:has(#pageSize.hidden) {
        grid-template-columns: 1fr;
    }
}

/* Phone cards: no empty "time until" line once SDT has passed */
@media (max-width: 639px) {
    .cell-until.until-empty {
        display: none;
    }
}



/* =========================================================
   v3: DOOR (attach a load to a door)
========================================================= */

.muted-value {
    color: #94a3b8 !important;
    font-weight: 600;
}

.door-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
    padding: 12px;
    border: 1px solid #e1e6ec;
    border-radius: 10px;
    background: #f8fafc;
}

.door-box-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.door-box-info span {
    font-size: 11px;
    color: #64748b;
}

.door-box-info strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.door-box-info small {
    font-size: 11px;
    color: #64748b;
}

.door-box-info small:empty {
    display: none;
}

.door-box-actions {
    display: flex;
    gap: 8px;
}

.door-action-btn {
    border: 0;
    border-radius: 8px;
    background: #172033;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 14px;
    min-height: 40px;
}

.door-action-btn:hover {
    background: #27324a;
}

.door-detach {
    background: #fff;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.door-detach:hover {
    background: #fef2f2;
}


/* ---------- Door picker ---------- */

.door-picker {
    width: min(620px, 100%);
}

.door-legend {
    display: flex;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid #e1e6ec;
    font-size: 11px;
    color: #64748b;
}

.door-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.door-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid #cbd5e1;
}

.door-key-open    { background: #fff; border-color: #16a34a; }
.door-key-current { background: #172033; border-color: #172033; }
.door-key-taken   { background: #eef1f5; }

.door-group h3 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 16px 0 8px;
    font-size: 12px;
    color: #172033;
}

.door-group h3 span {
    font-size: 11px;
    color: #16a34a;
    font-weight: 700;
}

.door-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
}

.door-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 54px;
    border-radius: 8px;
    border: 1px solid #d5dbe3;
    background: #fff;
    padding: 6px 4px;
    font-variant-numeric: tabular-nums;
}

.door-btn strong {
    font-size: 16px;
}

.door-btn small {
    font-size: 9px;
    color: #64748b;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.door-open {
    border-color: #bbf7d0;
}

.door-open small {
    color: #16a34a;
}

.door-open:hover {
    background: #f0fdf4;
    border-color: #16a34a;
}

.door-current {
    background: #172033;
    border-color: #172033;
    color: #fff;
    cursor: default;
}

.door-current small {
    color: #fbbf24;
}

.door-taken {
    background: #eef1f5;
    border-color: #e1e6ec;
    color: #94a3b8;
    cursor: not-allowed;
}

.door-taken small {
    color: #64748b;
    font-weight: 700;
}

@media (max-width: 639px) {

    .door-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .door-legend {
        padding: 10px 16px;
    }

    .door-box-actions {
        width: 100%;
    }

    .door-action-btn {
        flex: 1;
        min-height: 44px;
    }

}

@media (max-width: 380px) {

    .door-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}



/* =========================================================
   v3: DOOR MAP
========================================================= */

.door-map {
    padding: 14px 18px 18px;
    background: #f8fafc;
}

.door-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}

.door-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.status-key-scheduled { background: #94a3b8; }
.status-key-progress  { background: #f59e0b; }
.status-key-finished  { background: #dc2626; }
.status-key-attached  { background: #0ea5e9; }
.status-key-ready     { background: #16a34a; }
.status-key-paused    { background: #ea580c; }

.door-map-group h3 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin: 16px 0 8px;
    font-size: 13px;
}

.door-map-group h3 span {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.door-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

.door-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 78px;
    padding: 8px 9px 8px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e1e6ec;
    text-align: left;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

/* Status stripe on the left */
.door-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
}

.door-tile-scheduled::before { background: #94a3b8; }
.door-tile-progress::before  { background: #f59e0b; }
.door-tile-finished::before  { background: #dc2626; }
.door-tile-attached::before  { background: #0ea5e9; }
.door-tile-ready::before     { background: #16a34a; }
.door-tile-paused::before    { background: #ea580c; }

button.door-tile:hover {
    border-color: #94a3b8;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.door-tile-number {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

.door-tile-route {
    font-size: 14px;
    line-height: 1.2;
    word-break: break-word;
}

.door-tile-time {
    font-size: 12px;
    color: #475569;
}

.door-tile-3p {
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    background: #f3e8ff;
    color: #7e22ce;
}

/* Empty door */
.door-tile-open {
    background: transparent;
    border: 1.5px dashed #cbd5e1;
    justify-content: center;
    align-items: center;
}

.door-tile-open .door-tile-number {
    font-size: 16px;
    color: #94a3b8;
}

.door-tile-empty {
    font-size: 10px;
    font-weight: 700;
    color: #16a34a;
}

/* Your starred routes stand out */
.door-tile-mine {
    background: #172033;
    border-color: #172033;
    color: #fff;
}

.door-tile-mine .door-tile-number,
.door-tile-mine .door-tile-time {
    color: #cbd5e1;
}

@media (max-width: 639px) {

    .door-map {
        padding: 12px;
    }

    .door-map-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .view-toggle button {
        padding: 7px 10px;
    }

    .table-header {
        flex-wrap: wrap;
        gap: 10px;
    }

}

@media (max-width: 380px) {

    .door-map-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}



/* =========================================================
   v3: ACCESS CODE SCREEN
   (uses the .lock-screen / .lock-card styles above)
========================================================= */

body.code-locked {
    overflow: hidden;
}

/* Hide the schedule behind the code screen */
body.code-locked .app {
    visibility: hidden;
}

#codeInput {
    text-align: center;
    letter-spacing: 4px;
    font-size: 20px !important;
}

.shake {
    animation: shake 0.35s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-6px); }
    80%      { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .shake {
        animation: none;
    }
}


/* =========================================================
   v4: PROGRESS BAR (like the outbound page)
========================================================= */

.progress {
    margin-top: 6px;
    max-width: 280px;
}

.progress-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #e2e8f0;   /* gray = available capacity */
}

.progress-compact .progress-bar {
    height: 6px;
}

.seg {
    display: block;
    height: 100%;
}

.seg-loaded { background: #3f9b3a; }
.seg-staged { background: #2f6fd6; }
.seg-closed { background: #d97a2b; }

.progress-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 4px;
    font-size: 10px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.progress-legend span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dot-loaded    { background: #3f9b3a; }
.dot-staged    { background: #2f6fd6; }
.dot-closed    { background: #d97a2b; }
.dot-available { background: #cbd5e1; }

.progress-fill {
    font-weight: 700;
    color: #172033;
}

.detail-progress .progress {
    max-width: none;
    margin: 14px 0 4px;
}

.detail-progress .progress-bar {
    height: 12px;
}



/* =========================================================
   v4: LOCK SCREENS
========================================================= */

/* Nothing behind the lock screens shows, even for a moment */
body.locked .app,
body.code-locked .app {
    visibility: hidden;
}


/* =========================================================
   v4: ROUTE DETAILS
========================================================= */

.detail-section {
    margin: 18px 0 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Label and value line up in the middle (VR ID used to sit low) */
.detail-row {
    align-items: center;
}

/* Values stay dark; only the left-hand label is gray */
.detail-row .detail-copy,
.detail-row strong span {
    color: #172033;
}

.detail-copy {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.detail-copy strong {
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.fmc-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background: #172033;
    border-color: #172033;
    font-weight: 700;
}

.fmc-link:hover {
    background: #27324a;
}

.detail-progress {
    padding: 4px 0 2px;
}

@media (max-width: 639px) {

    .progress {
        max-width: none;
    }

}

/* Dates never break in the middle ("21-Sep-" / "26") */
.date-cell-date,
.date-cell-time {
    white-space: nowrap;
}


/* =========================================================
   v4: DRAG AND DROP UPLOAD
========================================================= */

.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.6);
    pointer-events: none; /* the drop lands on the window */
}

.drop-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(440px, 100%);
    padding: 40px 28px;
    border: 3px dashed #fbbf24;
    border-radius: 16px;
    background: #172033;
    color: #fff;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.drop-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fbbf24;
    color: #172033;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
}

.drop-box strong {
    font-size: 18px;
}

.drop-box small {
    color: #cbd5e1;
    font-size: 12px;
}


/* =========================================================
   v4: AUTO-UPLOAD (watch Downloads)
========================================================= */

.watch-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    text-align: left;
}

.watch-btn .upload-text small {
    color: #64748b;
}

.watch-btn:hover {
    border-color: #172033;
}

.watch-btn.active {
    border: 1px solid #16a34a;
    background: #f0fdf4;
}

.watch-btn.active .upload-text small {
    color: #15803d;
}

.watch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
    animation: watch-pulse 2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes watch-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .watch-dot {
        animation: none;
    }
}

/* =========================================================
   PICKED ROUTES (tags next to the table title)
========================================================= */

.route-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    align-self: center;
}

.route-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 6px;
    background: #fbbf24;
    color: #172033;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 6px 4px 10px;
}

.route-tag span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(23, 32, 51, 0.12);
    color: inherit;
    font-size: 10px;
}

.route-tag:hover span {
    background: rgba(23, 32, 51, 0.25);
}

.route-tags-clear {
    border: 0;
    background: none;
    padding: 0 2px;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
}

.route-tags-clear:hover {
    color: #172033;
}


/* =========================================================
   NEXT SORT (loads after the shift cutoff)
========================================================= */

.next-sort-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}


/* =========================================================
   DOOR + LOADING PROCESS (details)
========================================================= */

.door-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.detail-row .door-line .location-chip {
    color: #fff;
}

.detail-row .door-line .location-chip.location-parking {
    color: #334155;
}

.process-tag {
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
}

.detail-row .door-line .process-fluid {
    background: #dbeafe;
    color: #1e40af;
}

.detail-row .door-line .process-container {
    background: #fef3c7;
    color: #92400e;
}

.finish-action.undo strong {
    color: #b45309;
}


/* =========================================================
   UPLOADER COMPUTER ONLY
   Upload CSV / Auto-upload show only where "can-upload" is on.
   Everyone else gets the "Schedule · Updated ..." pill.
========================================================= */

body:not(.can-upload) .upload-btn,
body:not(.can-upload) #watchButton {
    display: none !important;
}

body.can-upload .updated-pill {
    display: none;
}

.updated-pill {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    background: #fff;
}

.updated-pill small {
    display: block;
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
}

.updated-pill small.stale {
    color: #b45309;
    font-weight: 700;
}

.updated-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
}

.updated-pill.stale .updated-dot {
    background: #f59e0b;
}

/* Uploader code box */
.up-code-overlay {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .5);
}

.up-code-overlay.hidden {
    display: none;
}

.up-code-box {
    width: min(340px, 100%);
    padding: 22px;
    border-radius: 14px;
    background: #fff;
    color: #172033;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}

.up-code-box h2 {
    margin: 6px 0 2px;
    font-size: 18px;
}

.up-code-box p {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: #64748b;
}

.up-code-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #172033;
    color: #fbbf24;
    font-size: 18px;
    font-weight: 800;
}

.up-code-box input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 4px;
}

.up-code-error {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    font-size: 12px;
    color: #b91c1c;
}

.up-code-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.up-code-actions button {
    flex: 1;
    min-height: 40px;
    border-radius: 8px;
    border: 1px solid #d5dbe3;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}

.up-code-actions button[type="submit"] {
    background: #172033;
    border-color: #172033;
    color: #fff;
}