/* POD System Shared Styles - Mobile First */

:root {
    --bg: #f5f5f5;
    --text: #333;
    --text-primary: #333;
    --text-secondary: #666;
    --card-bg: white;
    --border: #eee;
    --input-border: #ddd;
    --input-bg: white;
    --accent: #046604;
    --accent-hover: #035003;
    --shadow: rgba(0,0,0,0.1);
    --success: #157347; /* AA: white-on-green + green-as-text now >=4.5:1 (was #28a745 ~2.9:1) */
    --danger: #dc3545;
    --warning: #ffc107;
    /* 5f6b76, not 6c757d (F-0272). The old value measured 4.28:1 against the
       driver page background #f1f5f9 -- under the 4.5:1 AA floor -- while passing
       on white, so it looked fine on cards and failed on the page. */
    --muted: #5f6b76;
    /* Link colour for text-on-surface. NOT --accent: that is also used as a
       BUTTON BACKGROUND, so brightening it for dark-theme legibility would push
       white button labels the other way. --accent's dark value #068a06 measures
       4.13:1 on the dark page and 3.49:1 on the dark card; both fail. */
    --link-accessible: #046604;
    --partial: #fd7e14;
    --refused-color: #e91e63;
    --info: #17a2b8;
}

[data-theme="dark"] {
    --bg: #0c1222;
    --text: #e2e8f0;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --muted: #8b95a1;          /* 6.14:1 on the dark page, 5.20:1 on the dark card - passes */
    --link-accessible: #12a512; /* 5.70:1 / 4.82:1 - the dark-theme link green (F-0272) */
    --card-bg: #1a2332;
    --border: #2d3a4a;
    --input-border: #3d4a5a;
    --input-bg: #1a2332;
    --accent: #068a06;
    --accent-hover: #046604;
    --shadow: rgba(0,0,0,0.4);
    --hover-bg: #243040;
    --partial: #fd7e14;
    --refused-color: #e91e63;
    --info: #29b6f6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Outfit', 'DM Sans', -apple-system, sans-serif; }

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
}

/* Screens */
.screen { display: none; }
.screen.active { display: block; }

/* PIN Pad */
h1 { text-align: center; margin-bottom: 20px; font-size: 1.5rem; color: var(--text); }
h2 { margin-bottom: 15px; font-size: 1.2rem; color: var(--text); }

.pin-display {
    text-align: center;
    /* Fluid so six placeholders always fit the phone in hand. At a fixed 2rem +
       12px tracking the string measures 364px, which overflows a 288px box on a
       320px-wide phone (iPhone SE) and even a 390px one by a few px — and with
       overflow visible the dashes ran off the screen edge. Measured, not guessed. */
    font-size: clamp(1.25rem, 6.5vw, 2rem);
    letter-spacing: clamp(4px, 2.5vw, 12px);
    white-space: nowrap;
    /* letter-spacing is applied AFTER the last glyph too, so the string is one
       full step wider than it looks. Pull that back so centring is true. */
    text-indent: clamp(4px, 2.5vw, 12px);
    padding: 20px 8px;
    margin-bottom: 20px;
    color: var(--text);
    font-family: monospace;
    /* Last resort: if a future PIN length still overruns, scroll inside the box
       rather than pushing the layout sideways. */
    max-width: 100%;
    overflow-x: auto;
}

.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 300px;
    margin: 0 auto 20px;
}

.pin-btn {
    padding: 20px;
    font-size: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.1s;
}

.pin-btn:active { background: var(--accent); color: white; }
.pin-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-btn-empty { visibility: hidden; }
.pin-btn-clear { font-size: 1.2rem; padding: 20px; min-height: 44px; }
.pin-btn-go { background: var(--accent); color: #fff; font-size: 0.95rem; font-weight: 600; }
.pin-btn-go:disabled { opacity: 0.45; cursor: not-allowed; }

/* Buttons */
.btn-primary {
    padding: 10px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    min-height: 44px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary.full-width { width: 100%; }

.btn-submit {
    width: 100%;
    padding: 16px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
}

.btn-submit:hover:not(:disabled) { filter: brightness(1.1); }
.btn-submit:focus-visible { outline: 2px solid var(--success); outline-offset: 2px; }
.btn-submit:disabled { background: var(--muted); cursor: not-allowed; opacity: 0.6; }

.btn-back {
    background: none;
    border: none;
    /* F-0272: was var(--accent), a fill green that fails as text on a light
       surface. This rule governs admin.html; the driver page overrides it via
       body.driver-page .btn-back and resolves --text-secondary instead. */
    color: var(--link-accessible);
    font-size: 1rem;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 10px;
}

.user-info {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-right: 8px;
}
.btn-logout {
    padding: 6px 14px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: border-color 0.2s, color 0.2s;
}
.btn-logout:hover { border-color: var(--danger); color: var(--danger); }
.btn-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-toggle-notes {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.2s, background 0.2s;
}
.btn-toggle-notes:hover { border-color: var(--accent); background: rgba(0,102,204,0.05); }
.btn-toggle-notes:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.theme-toggle {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Status buttons - big touch targets */
.status-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.status-btn {
    padding: 20px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.status-btn.delivered { border-color: var(--success); }
.status-btn.refused { border-color: var(--danger); }
.status-btn.partial { border-color: var(--warning); }
.status-btn.no-sign { border-color: var(--muted); }

.status-btn.missed { border-color: #fd7e14; }

.status-btn.selected.delivered { background: var(--success); color: white; }
.status-btn.selected.refused { background: var(--danger); color: white; }
.status-btn.selected.partial { background: var(--warning); color: #333; }
.status-btn.selected.no-sign { background: var(--muted); color: white; }
.status-btn.selected.missed { background: #fd7e14; color: white; }
.status-btn:hover { border-color: var(--accent); }
.status-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Form elements */
.form-group { margin-bottom: 12px; }

input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="time"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 12px;
    min-height: 44px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(4, 102, 4, 0.2);
}

textarea { resize: vertical; min-height: 80px; }

/* Ticket chips */
.ticket-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.ticket-chip {
    padding: 12px 18px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.ticket-chip:active { transform: scale(0.95); }
.ticket-chip.done { border-color: var(--success); background: rgba(40, 167, 69, 0.15); opacity: 1; }
.ticket-chip.done::after { content: ' \2713'; color: var(--success); }
.ticket-chip.missed { border-color: #fd7e14; background: rgba(253, 126, 20, 0.15); opacity: 1; }
.ticket-chip.missed::after { content: ' !'; color: #fd7e14; font-weight: bold; }
.ticket-chip.flagged { border-color: var(--danger); background: rgba(220, 53, 69, 0.15); opacity: 1; }
.ticket-chip.multi-selected { border-color: var(--accent); background: rgba(0,102,204,0.1); box-shadow: 0 0 0 2px var(--accent); }
/* Local-vendor pickup chips — purple accent to distinguish from deliveries */
.ticket-chip.pickup { border-color: #6a1b9a; border-style: dashed; }
.ticket-chip.pickup.done { border-style: solid; border-color: var(--success); background: rgba(40, 167, 69, 0.15); }
.chip-pu-tag { display: inline-block; font-size: 0.6rem; font-weight: 700; background: #6a1b9a; color: #fff; padding: 1px 5px; border-radius: 6px; margin-right: 2px; vertical-align: middle; }
.multi-check { font-size: 1.1em; }
.multi-stop-actions { margin-top: 10px; text-align: center; }

/* Manual entry */
.manual-entry {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.manual-entry input { flex: 1; }

/* Photo capture */
.photo-btn-row {
    display: flex;
    gap: 8px;
}
.photo-btn {
    display: block;
    flex: 1;
    padding: 14px;
    background: var(--card-bg);
    border: 2px dashed var(--border);
    border-radius: 10px;
    text-align: center;
    font-size: 1rem;
    color: var(--accent);
    cursor: pointer;
}

.photo-previews {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.photo-previews img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

/* Driver header */
.driver-header, .dash-header, .admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}

/* Page navigation links (cross-page) */
.page-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.nav-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: background 0.2s;
}

.nav-link:hover { background: rgba(4, 102, 4, 0.08); }
.nav-link.active { background: var(--accent); color: white; border-color: var(--accent); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Admin top row (nav + title + actions) */
.admin-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.admin-top-row h1 { margin-bottom: 0; }

/* Tabs */
.admin-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tab {
    padding: 8px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
}

.tab:hover { background: rgba(0,102,204,0.08); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Bulk loader */
#bulkInput {
    width: 100%;
    min-height: 200px;
    font-family: monospace;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

/* Stats cards */
.stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 1px 4px var(--shadow);
    border-left: 3px solid var(--border);
    transition: transform 0.15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card.delivered { border-left-color: var(--success); }
.stat-card.pending { border-left-color: var(--warning); }
.stat-card.missed { border-left-color: var(--danger); }
.stat-card.refused { border-left-color: #e91e63; }
.stat-card.complete { border-left-color: var(--accent); }

.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.stat-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.stat-card.delivered .stat-value { color: var(--success); }
.stat-card.pending .stat-value { color: var(--warning); }
.stat-card.missed .stat-value { color: var(--danger); }
.stat-card.refused .stat-value { color: #e91e63; }
.stat-card.complete .stat-value { color: var(--accent); }

/* Progress bar inside complete card */
.progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.5s ease;
    width: 0%;
}

/* Status breakdown bar */
.status-breakdown {
    margin-bottom: 15px;
    background: var(--card-bg);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 1px 4px var(--shadow);
}
.breakdown-bar {
    display: flex;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--border);
}
.breakdown-bar > div {
    transition: width 0.5s ease;
    min-width: 0;
}
.breakdown-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.breakdown-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Dashboard insights panels */
.dashboard-insights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
}
.insight-panel {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 4px var(--shadow);
}
.insight-panel h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-align: left;
}

/* Driver summary mini-table */
.driver-summary { font-size: 0.8rem; }
.driver-summary .driver-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.driver-summary .driver-row:last-child { border-bottom: none; }
.driver-summary .driver-name { flex: 1; font-weight: 500; }
.driver-summary .driver-bar {
    flex: 1;
    height: 14px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}
.driver-summary .driver-bar-fill {
    height: 100%;
    transition: width 0.4s ease;
}
.driver-summary .driver-count {
    min-width: 50px;
    text-align: right;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Hourly activity chart */
.hourly-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    padding-top: 10px;
}
.hourly-chart .hour-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.hourly-chart .hour-fill {
    width: 100%;
    min-height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    transition: height 0.4s ease;
    position: relative;
}
.hourly-chart .hour-fill:hover { opacity: 0.8; }
.hourly-chart .hour-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 3px;
}

/* Filter bar */
.filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filter-bar input, .filter-bar select, .filter-bar button {
    padding: 8px 10px;
    min-height: 44px;
    font-size: 0.8rem;
}

.filter-bar input[type="text"] { flex: 1; min-width: 150px; }
.filter-bar select { max-width: 160px; }
.filter-bar input[type="date"] { max-width: 150px; }

/* Table / Card */
.card {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 1px 4px var(--shadow);
    padding: 12px;
    overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid var(--border); }
th { font-weight: 600; color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; }

/* Status badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-delivered { background: var(--success); color: white; }
.badge-pending { background: var(--warning); color: #333; }
.badge-refused { background: var(--danger); color: white; }
.badge-partial { background: #fd7e14; color: white; }
.badge-no_sign { background: var(--muted); color: white; }
.badge-missed { background: #fd7e14; color: white; }
.badge-gps-flag { background: var(--danger); color: white; font-size: 0.7rem; }
.badge-sub {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: none;
    opacity: 0.9;
    background: rgba(255,255,255,0.2);
    padding: 0 4px;
    border-radius: 2px;
    vertical-align: middle;
}
.missed-sub {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
}
.missed-sub span {
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Small edit button for table rows */
.btn-edit-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.btn-edit-sm:hover { background: var(--accent-hover); }
.btn-edit-sm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-undo-sm {
    padding: 6px 12px; font-size: 0.75rem; background: var(--warning, #ffc107);
    color: #333; border: none; border-radius: 4px; cursor: pointer; margin-left: 4px;
}
.btn-undo-sm:hover { opacity: 0.85; }

/* Messages */
.error-msg {
    color: var(--danger);
    text-align: center;
    padding: 8px;
    font-size: 0.9rem;
}

.success-msg {
    color: var(--success);
    text-align: center;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 600;
}

.loading-msg {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
}

.loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}

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

/* Parse preview */
.parse-preview {
    margin: 15px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.parse-group {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.parse-group:last-child { border-bottom: none; }
.parse-group h3 { font-size: 0.9rem; margin-bottom: 4px; color: var(--accent); }
.parse-group .tickets { font-size: 0.85rem; color: var(--text-secondary); }

/* Modal */
/*
 * DEFAULT IS `none`, NOT `flex` (F-0161, 2026-08-04). This rule used to say
 * `display: flex`, which meant every modal was visible BY DEFAULT and stayed
 * hidden only because of an inline `style="display:none"` in the markup.
 *
 * That made the inline attribute load-bearing for correctness, not just for
 * convenience — and CSP drops the WHOLE style attribute, not one property. So if
 * `style-src 'unsafe-inline'` were ever tightened, all 19 static modals across
 * driver/dashboard/admin would have rendered as full-screen overlays. The worst
 * of them, pod/driver.html:72, sits outside every `.screen` wrapper, so it would
 * have covered the driver LOGIN screen from first paint.
 *
 * SAFE FOR EVERY EXISTING CALLER, verified rather than assumed: all 19 static
 * modals carry inline `display:none` and are opened with `style.display='flex'`
 * (inline beats this rule), and the 3 JS-built ones set their own inline flex —
 * admin-app.js:4489, admin-app.js:6459 and dashboard-app.js:1189 (the latter two
 * via style.cssText). NOTHING relied on this rule's default to be visible.
 *
 * The flex centering below still applies, because it only takes effect once a
 * caller sets display:flex inline.
 *
 * The inline `style="display:none"` attributes are deliberately LEFT IN PLACE:
 * driver-app.js:891 reads `mm.style.display !== 'none'` to decide whether the
 * missed-reason modal is open, and stripping the attribute makes that read `''`,
 * which is `!== 'none'` — so Escape would be swallowed on every key press. This
 * change makes the markup redundant rather than load-bearing, which is the point.
 */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 15px;
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content h3 {
    text-align: center;
    margin-bottom: 15px;
    color: var(--text);
}

.missed-reason-btn {
    display: block;
    width: 100%;
    padding: 16px;
    margin-bottom: 10px;
    border: 2px solid #fd7e14;
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.missed-reason-btn:active {
    background: #fd7e14;
    color: white;
}
.missed-reason-btn:focus-visible { outline: 2px solid #fd7e14; outline-offset: 2px; }

/* Unassigned warning banner */
.unassigned-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, #c62828, #e53935);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(198, 40, 40, 0.25);
    font-size: 0.9rem;
    font-weight: 500;
}
.unassigned-banner .unassigned-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.unassigned-banner span:nth-child(2) {
    flex: 1;
}
.unassigned-banner .btn {
    padding: 4px 12px;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
@media (max-width: 600px) {
    .unassigned-banner { flex-wrap: wrap; font-size: 0.85rem; }
}

/* Alert Panel */
.alert-panel {
    background: var(--card-bg);
    border: 1px solid #fd7e14;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.alert-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.alert-panel-header h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-badge {
    background: var(--danger);
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.alert-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
}
.alert-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 0.85rem;
    border-left: 3px solid #fd7e14;
}
.alert-card.warning { border-left-color: #fd7e14; }
.alert-card.info { border-left-color: var(--accent); }
.alert-card .alert-type {
    font-weight: 600;
    min-width: 100px;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.alert-card .alert-msg {
    flex: 1;
}
.alert-card .alert-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Missed Panel */
.missed-panel {
    background: var(--card-bg);
    border: 1px solid var(--danger);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.missed-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.missed-panel-header h3 {
    margin: 0;
    color: var(--danger);
    font-size: 1rem;
}
.missed-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.missed-panel-actions label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.missed-panel-actions input[type="date"] {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.85rem;
}
.missed-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}
.missed-ticket-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 0.85rem;
}
.missed-ticket-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
}
.missed-ticket-row .ticket-num {
    font-weight: 600;
    min-width: 80px;
}
.missed-ticket-row .customer {
    color: var(--text-secondary);
    flex: 1;
}
.missed-ticket-row .driver {
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.missed-ticket-row .reschedule-badge {
    background: var(--danger);
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
}
.missed-ticket-row .reason-badge {
    background: rgba(253,126,20,0.15);
    color: #fd7e14;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 6px;
}

.btn-cancel {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.btn-cancel:hover { border-color: var(--text-secondary); background: rgba(0,0,0,0.03); }
.btn-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* PDF Upload */
.pdf-upload-area {
    display: block;
    width: 100%;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer;
    transition: border-color 0.2s;
    background: none;
    font: inherit;
    color: inherit;
}

.pdf-upload-area:hover { border-color: var(--accent); }
.pdf-upload-area.dragover { border-color: var(--accent); background: rgba(0,102,204,0.05); }

.import-preview { margin: 15px 0; overflow-x: auto; }
.import-preview table { font-size: 0.82rem; min-width: 900px; border-collapse: collapse; }
.import-preview thead th { position: sticky; top: 0; background: var(--card-bg); z-index: 2; border-bottom: 2px solid var(--border); padding: 8px 6px; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-secondary); }
.import-preview tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
[data-theme="dark"] .import-preview tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.import-preview .error-row { background: rgba(220,53,69,0.1); }
.import-preview .existing-row { background: rgba(255,193,7,0.1); }

/* Import sticky action bar */
.import-action-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 2px 6px var(--shadow);
}
.import-action-bar .count-badge {
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.import-action-bar .count-badge strong {
    color: var(--text);
    font-weight: 700;
}

/* Editable import preview inputs */
.edit-input {
    width: 100%;
    padding: 4px 6px;
    font-size: 0.8rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text);
}
.edit-input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(4, 102, 4, 0.2);
}
.edit-input-sm { width: 80px; }
.edit-input-xs { width: 40px; text-transform: uppercase; }
.import-preview td { vertical-align: middle; padding: 6px 8px; }

/* Import error/fixed rows */
.import-preview .import-error-row { background: rgba(255,152,0,0.15); }
.import-preview .import-error-row td { border-bottom-color: rgba(255,152,0,0.3); }
.import-preview .import-fixed-row { background: rgba(40,167,69,0.12); }
.import-preview .import-fixed-row td { border-bottom-color: rgba(40,167,69,0.3); }

/* Review button in table */
.review-btn {
    background: none;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--accent);
    white-space: nowrap;
}
.review-btn:hover { background: rgba(0,102,204,0.1); }
.review-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* PDF Page Review Modal */
.review-modal-content {
    max-width: 98vw;
    width: 1400px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.review-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.review-modal-header h3 { margin: 0; }
.review-modal-header .btn-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.review-modal-header .btn-close:hover { color: var(--text); background: var(--hover-bg, rgba(128,128,128,0.12)); }
@media (max-width: 768px) {
    .review-modal-header .btn-close { width: 44px; height: 44px; flex: 0 0 44px; font-size: 1.4rem; }
}
.review-modal-body {
    display: flex;
    gap: 16px;
    flex: 1;
    overflow: hidden;
}
.review-image-container {
    flex: 3;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #f0f0f0;
    min-height: 300px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
[data-theme="dark"] .review-image-container { background: #1a1a1a; }
.review-image-container img {
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
}
.review-image-container img.zoomed {
    max-width: none;
    cursor: zoom-out;
}
.review-form-container {
    flex: 2;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 300px;
    max-width: 100%;
}
.review-form-container input,
.review-form-container select,
.review-form-container button {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .review-modal-body { flex-direction: column; }
    .review-image-container { max-height: 40vh; flex: none; }
    .review-form-container { min-width: unset; }
}

/* Danger button */
.btn-danger {
    padding: 8px 16px;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-danger:hover { background: #c82333; }
[data-theme="dark"] .btn-danger:hover { background: #a71d2a; }
.btn-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

/* Error badge */
.error-badge {
    background: var(--danger);
    color: white;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Unresolved errors table */
.error-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.error-list-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
}
.error-list-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.error-list-table tr:hover { background: rgba(0,0,0,0.03); }
.error-list-table .btn-sm {
    padding: 3px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}
.btn-fix {
    background: var(--accent);
    color: white;
}
.btn-fix:hover { opacity: 0.85; }
.btn-dismiss {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border) !important;
}
.btn-dismiss:hover { background: rgba(0,0,0,0.05); }

/* KPI Cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
}

.kpi-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 1px 4px var(--shadow);
}

.kpi-card h4 { margin-bottom: 8px; }
.kpi-card .kpi-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.85rem; }
.kpi-card .kpi-value { font-weight: 600; }
.kpi-flag { color: var(--danger); font-weight: 600; }

/* Edit Modal form labels */
.modal-content label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 3px; }
.modal-content .form-group { margin-bottom: 10px; }

/* ============================================================
   Kanban Board
   ============================================================ */
.kanban-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    min-height: 400px;
    align-items: flex-start;
}

.kanban-column {
    flex: 1 1 260px;
    min-width: 240px;
    max-width: 100%;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 1px 4px var(--shadow);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.kanban-column.route-complete { opacity: 0.6; }
.kanban-column.route-complete .kanban-column-header { background: var(--success); color: white; border-radius: 10px 10px 0 0; }

.kanban-column-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--card-bg);
    border-radius: 10px 10px 0 0;
    z-index: 1;
}

.kanban-column-header h3 { font-size: 0.9rem; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; text-overflow: ellipsis; }
.kanban-column-header .kanban-stats { font-size: 0.75rem; color: var(--text-secondary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-column-header select { font-size: 0.8rem; padding: 4px 6px; margin-top: 4px; width: 100%; }

.kanban-complete-btn {
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
.kanban-complete-btn:hover { opacity: 0.9; }

.kanban-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.kanban-actions button {
    flex: 1;
    padding: 4px 6px;
    font-size: 0.7rem;
}
.kanban-optimize-btn {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.kanban-optimize-btn:hover { opacity: 0.9; }

.kanban-count {
    background: var(--border);
    border-radius: 10px;
    padding: 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.kanban-cards {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 60px;
    transition: background 0.15s;
}

.kanban-cards.drag-over {
    background: rgba(4, 102, 4, 0.05);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    border-radius: 0 0 10px 10px;
}

.kanban-card {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.kanban-card:hover { box-shadow: 0 2px 6px var(--shadow); }
.kanban-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(4, 102, 4, 0.3); }
.kanban-card.dragging { opacity: 0.3; }

.kanban-card-grip {
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: grab;
    flex-shrink: 0;
    padding-top: 2px;
    line-height: 1;
}

.kanban-card-body { flex: 1; min-width: 0; }
.kanban-card-body strong { font-size: 0.85rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-customer { display: block; font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-card .badge { margin-top: 3px; font-size: 0.65rem; }

/* Geocode status icons */
.geo-icon { font-size: 0.7rem; margin-left: 4px; }
.geo-ok { color: var(--success); }
.geo-none { color: var(--text-secondary); opacity: 0.5; }

/* Secondary button style */
.btn-secondary {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
    padding: 10px 16px;
}
.btn-secondary:hover { background: var(--border); }
.btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kanban-drop-indicator {
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin: 2px 0;
}

/* Context menu */
.context-menu {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    z-index: 2000;
    padding: 4px 0;
    min-width: 160px;
}

.context-menu button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text);
}

.context-menu button:hover { background: var(--border); }
.context-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Status history in edit modal */
.status-history-item {
    font-size: 0.78rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.status-history-item:last-child { border-bottom: none; }
.history-arrow { color: var(--accent); font-weight: 600; }

/* Ticket address card (driver delivery screen) */
.ticket-address {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text);
}

/* Signature pad */
.signature-section { margin-bottom: 12px; }
.signature-canvas {
    width: 100%;
    height: 170px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}
[data-theme="dark"] .signature-canvas { background: #1a1a1a; }

/* Photo delete button */
.photo-thumb-wrapper {
    position: relative;
    display: inline-block;
}

.photo-thumb-wrapper img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.photo-delete-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    border: 2px solid var(--card-bg);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Pull-to-refresh */
.ptr-indicator {
    text-align: center;
    height: 0;
    overflow: hidden;
    transition: height 0.2s;
    color: var(--muted);
    font-size: 0.8rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ptr-indicator.active { height: 40px; }
.ptr-indicator .ptr-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Offline indicator bar */
.offline-bar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--partial, #e65100);
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.offline-badge {
    background: var(--danger, #dc3545);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-left: 6px;
}

/* PWA install banner — matches Checker style */
.install-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    margin: 8px;
    background: #046604;
    color: white;
    border-radius: 10px;
    font-size: 0.85rem;
}

.install-banner-text {
    flex: 1;
}

.install-banner-text strong {
    display: block;
    font-size: 0.9rem;
}

.install-banner-text span {
    opacity: 0.85;
    font-size: 0.75rem;
}

.install-btn {
    padding: 6px 16px;
    background: white;
    color: #046604;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.install-dismiss {
    background: none;
    border: none;
    color: white;
    opacity: 0.7;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.install-dismiss:hover {
    opacity: 1;
}

/* GPS permission banner */
.gps-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--warning, #e65100);
    color: white;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 500;
}
.gps-banner button {
    background: none;
    border: none;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px;
}

.pagination button {
    padding: 6px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.85rem;
}

.pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .page-info { font-size: 0.85rem; color: var(--text-secondary); }

/* Auto-refresh toggle */
.toggle-btn {
    padding: 6px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
}

.toggle-btn:hover { border-color: var(--accent); }
.toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

/* Leaflet map container */
.map-container {
    height: 400px;
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
}

.map-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.map-controls select {
    padding: 4px 8px;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
}
.map-controls button.active {
    background: var(--accent, #046604);
    color: #fff;
    border-color: var(--accent, #046604);
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.2s, background 0.15s;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}
.legend-item:hover { background: var(--border); }
.legend-item.legend-hidden { opacity: 0.4; text-decoration: line-through; }
.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.map-popup { font-size: 0.85rem; line-height: 1.4; }
.map-popup b { font-size: 0.9rem; }
.map-popup small { color: var(--text-secondary); }
.map-popup-assign { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }

/* Role reference card */
.role-reference {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.role-reference summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.role-reference table {
    width: 100%;
    font-size: 0.8rem;
}

.role-reference th { background: var(--bg); }
.role-reference td { white-space: normal; }

/* Settings section */
.settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.settings-row:last-child { border-bottom: none; }
/* Fixed-width label column so every control lines up at the same left edge
   (was justify-content:space-between, which floated controls to a ragged right). */
.settings-row label { font-weight: 500; font-size: 0.9rem; flex: 0 0 190px; }

.settings-row select,
.settings-row input[type="text"],
.settings-row input[type="number"] {
    padding: 6px 10px;
    font-size: 0.85rem;
    min-height: 0;               /* override the global select/textarea min-height:44px */
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
    box-sizing: border-box;
    width: auto;                 /* override the global select/textarea width:100% */
    flex: 0 1 320px;             /* sit inline beside the 190px label, up to 320px */
    max-width: 320px;
}
.settings-row input[type="text"] { min-width: 240px; }
.settings-row input[type="number"] { flex: 0 0 90px; max-width: 90px; }
/* small grey hint after a field (e.g. "comma-separate for multiple") */
.settings-hint { font-size: 12px; color: #999; }

/* Safe area padding for notched devices */
body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Desktop: let admin/dashboard use full width */
@media (min-width: 768px) {
    .container.wide { max-width: 1400px; padding: 20px 30px; }
}

/* Responsive */
@media (max-width: 768px) {
    .kanban-column { flex: 1 1 100%; max-height: none; }
    .admin-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .admin-nav .tab { flex-shrink: 0; }
}

@media (max-width: 900px) {
    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .dash-header { flex-wrap: wrap; }
    .dash-header h1 { width: 100%; text-align: center; order: -1; }
    .page-nav { flex: 1; }
    .header-actions { flex: 0 0 auto; }
}

/* Mobile card view for submissions */
.mobile-cards { display: none; }
.driver-ticket-cards { display: none; }

/* Driver ticket mini-cards (inside By Driver view) */
.driver-ticket-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.driver-ticket-item:last-child { border-bottom: none; }
.driver-ticket-status {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.driver-ticket-status.st-delivered { background: var(--success); }
.driver-ticket-status.st-pending { background: var(--warning); }
.driver-ticket-status.st-missed { background: var(--danger); }
.driver-ticket-status.st-refused { background: var(--refused-color); }
.driver-ticket-info { flex: 1; min-width: 0; }
.driver-ticket-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.driver-ticket-num { font-weight: 600; color: var(--text); }
.driver-ticket-eta {
    font-size: 0.75rem;
    color: var(--muted);
}
.driver-ticket-customer {
    font-size: 0.75rem;
    color: var(--text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pod-card {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 1px 4px var(--shadow);
    padding: 12px;
    margin-bottom: 8px;
    border-left: 3px solid var(--border);
}
.pod-card.status-delivered { border-left-color: var(--success); }
.pod-card.status-pending { border-left-color: var(--warning); }
.pod-card.status-missed { border-left-color: var(--danger); }
.pod-card.status-refused { border-left-color: var(--refused-color); }
.pod-card.status-partial { border-left-color: var(--partial); }
.pod-card.status-no_sign { border-left-color: var(--muted); }

.pod-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 8px;
}
.pod-card-ticket {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}
.pod-card-time {
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.pod-card-body {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 4px 12px;
    font-size: 0.82rem;
}
.pod-card-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pod-card-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}
.pod-card-value {
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.pod-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    gap: 6px;
}
.pod-card-photos {
    display: flex;
    gap: 4px;
    align-items: center;
    cursor: pointer;
}
.pod-card-photos img {
    width: 36px; height: 36px;
    border-radius: 4px;
    object-fit: cover;
}
.pod-card-actions {
    display: flex;
    gap: 6px;
}

/* Routes view grid */
.routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 8px 0;
    min-height: 80px;
}

.routes-driver-card {
    min-width: 0; /* prevent overflow */
}

/* Routes detail popup */
.route-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.route-detail-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    max-height: 90vh;
    overflow-y: auto;
}

/* Hamburger menu button (mobile only) */
.hamburger-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1.3rem;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text);
    line-height: 1;
}

/* Filter toggle button (mobile only) */
.filter-toggle-btn {
    display: none;
    width: 100%;
    padding: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    margin-bottom: 8px;
    text-align: center;
}

@media (max-width: 768px) {
    .container { padding: 10px; overflow-x: hidden; }
    .container.wide { max-width: 100%; overflow-x: hidden; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .dashboard-insights { grid-template-columns: 1fr; }
    .routes-grid { grid-template-columns: 1fr; }
    .filter-toggle-btn { display: block; }
    .filter-bar.collapsed { display: none; }
    /* Mobile filters: two-column grid */
    .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .filter-bar input[type="text"] { grid-column: 1 / -1; min-width: unset; }
    .filter-bar select, .filter-bar input[type="date"] { max-width: unset; }
    .filter-bar .toggle-btn, .filter-bar .btn-secondary { font-size: 0.75rem; padding: 6px 8px; min-width: 0; }
    .filter-bar select { font-size: 0.78rem; }
    .missed-panel-actions { gap: 6px; }
    .missed-panel-actions label { font-size: 0.75rem; }
    .missed-panel-actions select, .missed-panel-actions input[type="date"] { max-width: 140px; font-size: 0.78rem; }
    .bulk-action-bar { gap: 6px; font-size: 0.78rem; padding: 8px 10px; }
    .bulk-action-bar select { max-width: 130px; font-size: 0.78rem; }
    .view-toggle { flex-wrap: wrap; }
    .admin-nav { width: 100%; justify-content: flex-start; }
    .admin-header { flex-direction: column; gap: 10px; }
    .admin-top-row { flex-direction: column; gap: 8px; }
    .dash-header { flex-direction: column; align-items: stretch; gap: 6px; }
    /* Hamburger nav menu */
    .hamburger-btn { display: block; }
    .page-nav { display: none; flex-direction: column; gap: 4px; width: 100%; }
    .page-nav.open { display: flex; }
    .page-nav .nav-link { text-align: center; padding: 8px; }
    .map-container { height: 280px; }
    .map-legend { font-size: 0.75rem; gap: 4px 8px; }
    /* Switch table to cards on mobile */
    .desktop-table { display: none !important; }
    .mobile-cards { display: block !important; }
    /* Edit modal: single column on mobile */
    #editPodModal .modal-content { max-width: 95vw; }
    #editPodModal .modal-content > div[style*="grid"] { display: flex !important; flex-direction: column; gap: 8px; }
    /* Touch targets: 44px minimum on mobile */
    .pagination button { min-height: 44px; min-width: 44px; padding: 8px 14px; }
    .btn-back, .btn-logout, .btn-toggle-notes, .btn-cancel, .btn-sm,
    .toggle-btn, .missed-reason-btn, .photo-btn { min-height: 44px; }
    .btn-edit-sm, .kanban-complete-btn, .kanban-actions button { min-height: 44px; min-width: 44px; }
    .filter-bar input, .filter-bar select, .filter-bar button { min-height: 44px; }
    .nav-link { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    /* Stat card values readable on small screens */
    .stat-value { font-size: 1.2rem; }
    .stat-label { font-size: 0.7rem; }
    .stats-row { gap: 6px; }
    .stat-card { padding: 8px; }
    /* Lightbox mobile adjustments */
    .lightbox-img-wrap { padding: 10px 10px 90px; }
    .lightbox-nav {
        width: 48px; height: 48px;
        font-size: 2rem;
        border-radius: 50% !important;
        bottom: 100px; top: auto;
        transform: none;
        background: rgba(255,255,255,0.15);
    }
    .lightbox-prev { left: 20px; }
    .lightbox-next { right: 20px; }
    .lightbox-close {
        top: 8px; right: 8px;
        width: 48px; height: 48px;
        font-size: 2.2rem;
        background: rgba(0,0,0,0.5);
    }
    .lightbox-img { cursor: default; }
    .lightbox-img.zoomed { transform: none; }
    .lightbox-footer { padding: 8px 12px 12px; }
    .lightbox-thumb { width: 40px; height: 40px; }
    /* Driver card tickets: stacked on mobile */
    .driver-ticket-table { display: none !important; }
    .driver-ticket-cards { display: block !important; }
}

/* Fleet Map */
.fleet-legend { text-align:center; padding:8px; font-size:0.85rem; color:var(--text-secondary); }
.truck-icon { background:none !important; border:none !important; }
/* Theme Leaflet popups so light text isn't shown on a white default popup in
   dark mode (e.g. "Van 21" was light grey on white). */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { background: var(--card-bg); color: var(--text); }
.leaflet-popup-content { color: var(--text); }
.leaflet-popup-content b { color:var(--text, #333); }
.leaflet-popup-content em { color:var(--text-secondary, #999); }
.leaflet-popup-content a { color: var(--accent, #046604); }
a.leaflet-popup-close-button { color: var(--text-secondary); }

/* Activity Log */
.activity-filters { margin-bottom: 15px; }
.activity-filters .filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.activity-filters select, .activity-filters input[type="text"], .activity-filters input[type="date"] {
    padding: 6px 10px; border: 1px solid var(--border, #ccc); border-radius: 4px; font-size: 0.85rem;
}
.activity-filters input[type="text"] { min-width: 180px; }
.source-badge { display:inline-block; padding:2px 8px; border-radius:10px; color:#fff; font-size:0.75rem; font-weight:600; }
.badge-sm { display:inline-block; padding:1px 6px; border-radius:8px; background:var(--border); color:var(--text-secondary); font-size:0.7rem; }
.detail-tag { display:inline-block; padding:1px 6px; margin:1px; background:var(--border); border-radius:4px; font-size:0.75rem; color:var(--text-secondary); }
.details-cell { max-width: 350px; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
.pagination { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.page-info { font-size: 0.85rem; color: var(--text-secondary, #666); }
.btn-sm { padding: 4px 12px; font-size: 0.8rem; border: 1px solid var(--border, #ccc); background: var(--card-bg); border-radius: 4px; cursor: pointer; color: var(--text); }
.btn-sm:hover { background: var(--border); }
.btn-sm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    width: calc(100% - 32px);
}
.toast {
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    animation: toastIn 0.3s ease;
    cursor: pointer;
}
.toast.toast-success { background: var(--success); }
.toast.toast-error { background: var(--danger); }
.toast.toast-warning { background: var(--partial, #e67e00); }
.toast.toast-info { background: var(--accent); }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.toast-msg { flex: 1; }
.toast.removing { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

/* ETA Badges */
.badge-eta {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 4px;
}
.badge-eta.at-risk {
    background: #ffebee;
    color: #c62828;
    animation: pulse-risk 2s ease-in-out infinite;
}
@keyframes pulse-risk {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.at-risk-text { color: var(--danger); font-weight: 600; }

/* Time Window Badges */
.badge-window {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    background: #f3e5f5;
    color: #7b1fa2;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 4px;
}
.badge-window.at-risk {
    background: #ffebee;
    color: #c62828;
}

/* Driver App: ETA chip badges */
.chip-eta {
    display: inline-block;
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(21,101,192,0.15);
    color: #1565c0;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}
.chip-eta.at-risk {
    background: rgba(198,40,40,0.15);
    color: #c62828;
}
.chip-window {
    display: inline-block;
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(123,31,162,0.15);
    color: #7b1fa2;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 3px;
    vertical-align: middle;
}

/* Auto-Suggest */
.suggest-group {
    padding: 8px;
    margin-bottom: 6px;
    background: var(--bg);
    border-radius: 6px;
    border: 1px solid var(--border);
}
.suggest-group strong { display: block; margin-bottom: 4px; }
.suggest-tickets { display: flex; flex-wrap: wrap; gap: 4px; }
.suggest-tooltip { font-size: 0.8rem; font-weight: 600; }

[data-theme="dark"] .badge-eta { background: rgba(21,101,192,0.2); color: #64b5f6; }
[data-theme="dark"] .badge-eta.at-risk { background: rgba(198,40,40,0.2); color: #ef9a9a; }
[data-theme="dark"] .badge-window { background: rgba(123,31,162,0.2); color: #ce93d8; }
[data-theme="dark"] .badge-window.at-risk { background: rgba(198,40,40,0.2); color: #ef9a9a; }
[data-theme="dark"] .chip-eta { background: rgba(100,181,246,0.15); color: #64b5f6; }
[data-theme="dark"] .chip-eta.at-risk { background: rgba(239,154,154,0.15); color: #ef9a9a; }
[data-theme="dark"] .chip-window { background: rgba(206,147,216,0.15); color: #ce93d8; }

/* ============================================================
   UX Batch 3: Focus, transitions, touch targets, dark mode
   ============================================================ */

/* Missing focus-visible styles */
.photo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pagination button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.kanban-complete-btn:focus-visible { outline: 2px solid var(--success); outline-offset: 2px; }
.kanban-optimize-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-toggle-notes:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-fix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Missing transitions */
.btn-danger { transition: background 0.15s; }
.btn-dismiss { transition: background 0.15s; }
.btn-sm { transition: background 0.15s; }
.legend-item { transition: opacity 0.2s, background 0.15s; }
.error-list-table tr { transition: background 0.15s; }
.kanban-complete-btn { transition: opacity 0.15s; }
.kanban-optimize-btn { transition: opacity 0.15s; }
.nav-link { transition: background 0.15s; }
.tab { transition: background 0.15s, color 0.15s; }

/* Touch target minimums — ensure 44px height for mobile-interactive elements */
.btn-edit-sm { min-height: 36px; min-width: 44px; }
.kanban-complete-btn { min-height: 36px; }
.kanban-actions button { min-height: 36px; }
.map-controls select { min-height: 36px; }
.legend-item { min-height: 32px; }
.photo-delete-btn { width: 40px; height: 40px; }

/* Missing hover states */
.photo-btn:hover { border-color: var(--accent); }
.map-controls select:hover { border-color: var(--accent); }

/* Additional dark mode overrides */
[data-theme="dark"] .kanban-cards.drag-over { background: rgba(41,121,255,0.08); }
[data-theme="dark"] .kanban-card.selected { box-shadow: 0 0 0 2px rgba(41,121,255,0.4); }
[data-theme="dark"] .error-list-table tr:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .btn-dismiss:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .review-btn:hover { background: rgba(41,121,255,0.15); }
[data-theme="dark"] .tab:hover { background: rgba(41,121,255,0.12); }
[data-theme="dark"] .nav-link:hover { background: rgba(41,121,255,0.12); }
[data-theme="dark"] .pdf-upload-area.dragover { background: rgba(41,121,255,0.08); }
[data-theme="dark"] .source-badge { color: #fff; }
[data-theme="dark"] .toast { color: #fff; }

/* Analytics Page */
.analytics-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}
.analytics-controls select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.9rem;
}
.analytics-section {
    margin-bottom: 24px;
}
.analytics-section h2 {
    font-size: 1.1rem;
    margin: 0 0 12px;
}
.leaderboard-table {
    overflow-x: auto;
}
.leaderboard-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.leaderboard-table th,
.leaderboard-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.leaderboard-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
}
.leaderboard-table tr:hover {
    background: rgba(0,0,0,0.02);
}
.leaderboard-table .rank-1 { font-weight: 700; }
.leaderboard-table .completion-bar {
    display: inline-block;
    height: 8px;
    border-radius: 4px;
    background: var(--accent);
    vertical-align: middle;
    margin-right: 6px;
}
.scorecard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.scorecard {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.scorecard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.scorecard-header h3 {
    margin: 0;
    font-size: 1rem;
}
.scorecard-header .trend {
    font-size: 0.85rem;
    font-weight: 600;
}
.scorecard-header .trend.up { color: var(--success); }
.scorecard-header .trend.down { color: var(--danger); }
.scorecard-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 0.85rem;
}
.scorecard-stats .stat {
    display: flex;
    justify-content: space-between;
}
.scorecard-stats .stat-label {
    color: var(--text-secondary);
}
.scorecard-stats .stat-val {
    font-weight: 600;
}
.scorecard-bar {
    margin-top: 12px;
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
}
.scorecard-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}
[data-theme="dark"] .leaderboard-table tr:hover { background: rgba(255,255,255,0.04); }

/* Confirm dialog */
.confirm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 15px;
    animation: fadeIn 0.15s ease;
}
.confirm-dialog {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 360px;
}
.confirm-message {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 20px;
    text-align: center;
}
.confirm-actions {
    display: flex;
    gap: 10px;
}
.confirm-actions button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.confirm-actions .btn-cancel {
    background: var(--bg);
    color: var(--text);
}
.confirm-actions .btn-confirm {
    background: var(--accent);
    color: #fff;
}
.confirm-actions .btn-danger {
    background: var(--danger, #dc3545);
    color: #fff;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--bg);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}
.spinner-lg { width: 32px; height: 32px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center { display: flex; justify-content: center; align-items: center; padding: 40px; }
.loading-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; gap: 12px;
}
.loading-overlay .spinner-lg { border-color: rgba(255,255,255,0.3); border-top-color: #fff; width: 40px; height: 40px; }
.loading-overlay-text { color: #fff; font-size: 0.9rem; font-weight: 500; }

/* Utility classes */
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-muted { color: var(--text-secondary); }
.hint-center { text-align: center; padding: 20px; color: var(--text-secondary); }

/* Quick note templates */
.note-templates {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.note-template-chip {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--card-bg); color: var(--text-secondary); font-size: 0.8rem;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
}
.note-template-chip:hover, .note-template-chip:active {
    border-color: var(--accent); background: rgba(0,102,204,0.08); color: var(--text);
}

/* Bulk action bar */
.bulk-action-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 8px;
    background: var(--card-bg); border: 2px solid var(--accent);
    border-radius: 8px; font-size: 0.85rem;
}
.bulk-action-bar #bulkSelectedCount { font-weight: 600; color: var(--accent); }
.pod-row-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
#selectAllCheck { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

/* Time window alert badges */
.badge-overdue { background: var(--danger); color: #fff; font-size: 0.65rem; padding: 1px 5px; border-radius: 6px; font-weight: 700; }
.badge-at-risk { background: #e67e22; color: #fff; font-size: 0.65rem; padding: 1px 5px; border-radius: 6px; font-weight: 700; }
.badge-late { background: var(--partial, #fd7e14); color: #fff; font-size: 0.65rem; padding: 1px 5px; border-radius: 6px; font-weight: 700; }
[data-theme="dark"] .badge-at-risk { background: #e67e22; color: #fff; }

/* Undo toast bar */
.undo-toast {
    position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%);
    background: var(--card-bg, #333); color: var(--text, #fff);
    border: 1px solid var(--border, #555); border-radius: 12px;
    padding: 12px 16px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 10000;
    transition: bottom 0.3s ease; max-width: 95vw; width: auto;
    font-size: 0.9rem;
}
.undo-toast.visible { bottom: 24px; }
.undo-toast-msg { flex: 1; white-space: nowrap; }
.undo-toast-timer { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 0.85rem; min-width: 36px; text-align: center; }
.undo-toast-btn {
    background: var(--primary, #007bff); color: #fff; border: none;
    border-radius: 8px; padding: 8px 18px; font-weight: 600;
    cursor: pointer; font-size: 0.9rem; min-height: 44px;
}
.undo-toast-btn:active { opacity: 0.8; }
.undo-toast-dismiss {
    background: none; border: none; color: var(--text-muted, #999);
    font-size: 1.3rem; cursor: pointer; padding: 4px 8px; line-height: 1;
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}

/* Analytics charts */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.analytics-panel {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px; min-height: 250px;
}
.analytics-panel h4 { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-secondary); }
@media (max-width: 768px) {
    .analytics-grid { grid-template-columns: 1fr; }
    .analytics-panel { grid-column: auto !important; }
}

/* Responsive table wrapper */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   DRIVER PAGE — Clean Pro Redesign
   Scoped to body.driver-page so dashboard/admin are unaffected
   ============================================================ */

body.driver-page {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f1f5f9;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
[data-theme="dark"] body.driver-page,
body.driver-page[data-theme="dark"] { background: #0c1222; }

/* Driver color overrides */
body.driver-page {
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --text: #0f172a;
    /* 5f6b76, not 64748b (F-0272). body.driver-page .btn-back resolves THIS,
       not the --link-accessible on the base .btn-back rule, because (0,2,1)
       beats (0,1,0). Measured 4.34:1 on this block's --bg. */
    --text-secondary: #5f6b76;
    --border: #e2e8f0;
    --input-border: #cbd5e1;
    --input-bg: #ffffff;
    --shadow: rgba(15, 23, 42, 0.06);
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;
    /* 5f6b76, not 64748b (F-0272). THIS is the token the driver login footer
       resolves — body.driver-page redefines --muted at higher specificity than
       :root, so fixing the global token did nothing here. #64748b measured
       4.34:1 against this page's own --bg (#f1f5f9), under the 4.5:1 AA floor. */
    --muted: #5f6b76;
    --partial: #ea580c;
    --refused-color: #e11d48;
}
[data-theme="dark"] body.driver-page {
    /* --muted was ABSENT from this block, so dark mode inherited the light
       value (#64748b) onto a #0c1222 background: 3.92:1. Every other token here
       has a dark counterpart; this one was simply missed. (F-0272) */
    --muted: #94a3b8;
    --bg: #0c1222;
    --card-bg: #1a2332;
    --text: #e2e8f0;
    --text-secondary: #94a3b8;
    --border: #2d3a4a;
    --input-border: #3d4a5a;
    --input-bg: #1a2332;
    --shadow: rgba(0, 0, 0, 0.2);
}

/* Branded header bar */
.app-header {
    background: #046604;
    color: #fff;
    padding: 0 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(4, 102, 4, 0.25);
}
.app-header-brand {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-header-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}
.app-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.app-header-driver {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: 500;
}
.app-header-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    min-width: 44px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.app-header-btn:hover { background: rgba(255,255,255,0.25); }

/* Driver container tweaks */
body.driver-page .container {
    max-width: 480px;
    padding: 16px;
}

/* Driver headings */
body.driver-page h1,
body.driver-page h2 {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

/* Ticket address card */
body.driver-page .ticket-address {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px var(--shadow);
    border-left: 4px solid #046604;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Status buttons redesign */
body.driver-page .status-buttons {
    gap: 10px;
    margin-bottom: 16px;
}
body.driver-page .status-btn {
    padding: 14px 12px;
    border-radius: 12px;
    border-width: 2px;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
    box-shadow: 0 1px 2px var(--shadow);
    transition: all 0.15s ease;
}
body.driver-page .status-btn .status-icon {
    font-size: 1.1rem;
    line-height: 1;
}
body.driver-page .status-btn.partial .status-icon {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}
body.driver-page .status-btn.delivered { border-color: var(--success); color: var(--success); background: var(--card-bg); }
body.driver-page .status-btn.refused { border-color: var(--refused-color); color: var(--refused-color); background: var(--card-bg); }
body.driver-page .status-btn.partial { border-color: var(--partial); color: var(--partial); background: var(--card-bg); }
body.driver-page .status-btn.no-sign { border-color: var(--muted); color: var(--muted); background: var(--card-bg); }
body.driver-page .status-btn.missed { border-color: var(--warning); color: #b45309; background: var(--card-bg); }
[data-theme="dark"] body.driver-page .status-btn.missed { color: var(--warning); }
body.driver-page .status-btn:hover { border-color: currentColor; }
body.driver-page .status-btn:active { transform: scale(0.97); }

/* Selected status glow */
@keyframes statusPop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
body.driver-page .status-btn.selected { animation: statusPop 0.3s ease; }
body.driver-page .status-btn.selected.delivered { background: var(--success); color: #fff; box-shadow: 0 2px 12px rgba(22, 163, 74, 0.35); }
body.driver-page .status-btn.selected.refused { background: var(--refused-color); color: #fff; border-color: var(--refused-color); box-shadow: 0 2px 12px rgba(225, 29, 72, 0.35); }
body.driver-page .status-btn.selected.partial { background: var(--partial); color: #fff; border-color: var(--partial); box-shadow: 0 2px 12px rgba(234, 88, 12, 0.35); }
body.driver-page .status-btn.selected.no-sign { background: var(--muted); color: #fff; box-shadow: 0 2px 12px rgba(100, 116, 139, 0.35); }
body.driver-page .status-btn.selected.missed { background: var(--warning); color: #fff; box-shadow: 0 2px 12px rgba(245, 158, 11, 0.35); }

/* Form sections as cards */
body.driver-page .form-group {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px var(--shadow);
}

/* Signature section card */
body.driver-page .signature-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px var(--shadow);
}
body.driver-page .signature-canvas {
    border: 2px solid var(--border);
    border-radius: 8px;
}

/* Photo buttons stacked with icons */
body.driver-page .photo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    border: 2px solid var(--border);
    border-radius: 12px;
    min-height: 72px;
    background: var(--card-bg);
    box-shadow: 0 1px 3px var(--shadow);
    transition: all 0.15s ease;
}
body.driver-page .photo-btn:hover,
body.driver-page .photo-btn:active {
    border-color: var(--accent);
    background: rgba(4, 102, 4, 0.04);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
body.driver-page .photo-btn-icon {
    font-size: 1.5rem;
    line-height: 1;
}
body.driver-page .photo-btn-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Photo previews */
@keyframes thumbIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
body.driver-page .photo-previews img {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    animation: thumbIn 0.3s ease;
}
body.driver-page .photo-delete-btn {
    min-width: 40px;
    min-height: 40px;
}

/* Back button */
body.driver-page .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.15s;
}
body.driver-page .btn-back:hover { color: var(--text); }
body.driver-page .btn-back svg { width: 18px; height: 18px; }

/* Submit button */
body.driver-page .btn-submit {
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
    transition: all 0.15s;
}
body.driver-page .btn-submit:hover:not(:disabled) {
    background: #15803d;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
    filter: none;
}
body.driver-page .btn-submit:active:not(:disabled) {
    transform: scale(0.98);
}
/* Submit loading spinner */
@keyframes btnSpin { to { transform: rotate(360deg); } }
body.driver-page .btn-submit.loading {
    position: relative;
    color: rgba(255,255,255,0.7);
    pointer-events: none;
}
body.driver-page .btn-submit.loading::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin 0.6s linear infinite;
}

/* Success message */
body.driver-page .success-msg {
    animation: fadeIn 0.3s ease;
}

/* Signature canvas */
body.driver-page .signature-canvas {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}
body.driver-page .signature-canvas:focus,
body.driver-page .signature-canvas:active {
    box-shadow: 0 0 0 3px rgba(4,102,4,0.15), 0 1px 4px rgba(0,0,0,0.08);
}

/* Form input focus */
body.driver-page input:focus,
body.driver-page select:focus,
body.driver-page textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(4,102,4,0.12);
    background: var(--card-bg);
}

/* Day-start info bar */
/* Fix datetime-local AM/PM wrapping */
body.driver-page input[type="datetime-local"] {
    white-space: nowrap;
    min-width: 0;
}

body.driver-page .day-start-info {
    transition: background 0.15s;
}
body.driver-page .day-start-info:hover,
body.driver-page .day-start-info:active {
    background: rgba(4,102,4,0.04);
}
/* Driver location pulse on route map */
@keyframes driverPulse {
    0% { box-shadow: 0 0 0 4px rgba(37,99,235,0.3), 0 2px 4px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(37,99,235,0.15), 0 2px 4px rgba(0,0,0,0.3); }
    100% { box-shadow: 0 0 0 4px rgba(37,99,235,0.3), 0 2px 4px rgba(0,0,0,0.3); }
}
body.driver-page .leaflet-marker-icon div[style*="background:#2563eb"] {
    animation: driverPulse 2s ease-in-out infinite;
}

body.driver-page .day-start-info::after {
    content: '\203A';
    font-size: 1.4rem;
    color: var(--text-secondary);
    margin-left: auto;
    padding-left: 8px;
}
body.driver-page .btn-submit:active:not(:disabled) { transform: scale(0.98); }

/* Notes toggle */
body.driver-page .btn-toggle-notes {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 500;
    width: 100%;
    transition: all 0.15s;
}

/* Ticket chips */
body.driver-page .ticket-chip {
    border-radius: 10px;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.2s;
}
body.driver-page .ticket-chip:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
body.driver-page .ticket-chip:active {
    transform: scale(0.97);
}
body.driver-page .ticket-chip.done {
    border-color: var(--success);
    background: rgba(40, 167, 69, 0.15);
    opacity: 1;
}
body.driver-page .ticket-chip.done::after {
    content: ' \2713';
    color: var(--success);
    font-weight: 700;
    font-size: 1.1rem;
}
body.driver-page .ticket-chip.missed {
    position: relative;
}
body.driver-page .ticket-chip.missed::before {
    content: '!';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--warning);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ===== SSE Status Indicator ===== */
.sse-indicator {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
    transition: background 0.3s;
}
.sse-indicator.connected {
    background: var(--success);
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.5);
}
.sse-indicator.error {
    background: var(--danger);
}

/* ===== Live Feed Panel ===== */
.live-feed-panel {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 1px 4px var(--shadow);
    margin-bottom: 15px;
    overflow: hidden;
    border-left: 3px solid var(--success);
}
.live-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.live-feed-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-feed-title h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(40,167,69,0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(40,167,69,0); }
}
.live-feed-list {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.live-feed-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    animation: feedSlideIn 0.3s ease;
}
.live-feed-item:last-child { border-bottom: none; }
@keyframes feedSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.feed-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.feed-status-dot.delivered { background: var(--success); }
.feed-status-dot.missed { background: var(--danger); }
.feed-status-dot.refused { background: var(--refused-color); }
.feed-status-dot.partial { background: var(--partial); }
.feed-status-dot.pending { background: var(--warning); }
.feed-status-dot.no_sign { background: var(--muted); }
.feed-content { flex: 1; min-width: 0; }
.feed-driver { font-weight: 600; color: var(--text); }
.feed-detail { color: var(--text-secondary); }
.feed-time {
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.feed-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ===== Photo Lightbox ===== */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 2000;
    cursor: pointer;
}
.lightbox-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.lightbox-close {
    position: absolute;
    top: 12px; right: 16px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 2rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); color: #fff; }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 3rem;
    width: 56px; height: 80px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.15); color: #fff; }
.lightbox-prev { left: 0; border-radius: 0 8px 8px 0; }
.lightbox-next { right: 0; border-radius: 8px 0 0 8px; }
.lightbox-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    padding: 60px 70px 80px;
}
.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    transition: transform 0.25s ease;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
}
.lightbox-img.zoomed {
    transform: scale(2);
    cursor: zoom-out;
}
.lightbox-footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.lightbox-thumbstrip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    max-width: 90vw;
    scrollbar-width: none;
}
.lightbox-thumbstrip::-webkit-scrollbar { display: none; }
.lightbox-thumb {
    width: 48px; height: 48px;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: opacity 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.lightbox-thumb:hover { opacity: 0.8; }
.lightbox-thumb.active {
    border-color: #fff;
    opacity: 1;
}
.lightbox-counter {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
}

/* Toggle buttons */
body.driver-page .toggle-btn {
    border-radius: 8px;
}

/* Input fields */
body.driver-page input[type="text"],
body.driver-page textarea {
    border-radius: 8px;
    border-width: 1.5px;
    padding: 14px 16px;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.driver-page input[type="text"]:focus-visible,
body.driver-page textarea:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* PIN pad refinement */
body.driver-page .pin-btn {
    border-radius: 12px;
    font-size: 1.5rem;
    transition: all 0.1s;
}

/* Missed modal */
body.driver-page .modal-content {
    border-radius: 16px;
}
body.driver-page .missed-reason-btn {
    border-radius: 10px;
}

/* Focus visible */
body.driver-page *:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Animations */
@keyframes driverFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
body.driver-page .screen.active {
    animation: driverFadeUp 0.3s ease both;
}

/* ============================================================
   Login Card Overlay (Dashboard + Admin)
   ============================================================ */
.login-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.login-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    padding: 40px;
    width: 100%;
    max-width: 360px;
}
.login-card h2 {
    text-align: center;
    margin-bottom: 24px;
    color: var(--text);
}
.login-card input {
    border-width: 2px;
}
.login-footer {
    margin-top: 20px;
    text-align: center;
    /* F-0272: #888 measured 3.24:1 on the driver page background. This footer
       carries the Privacy Policy and Terms links, on an app used one-handed in a
       cab, frequently in direct sunlight. */
    color: var(--muted);
    font-size: 0.8rem;
}
.login-footer a { color: var(--muted); text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

/* ============================================================
   Driver Page: Green button overrides + Go disabled state
   ============================================================ */
body.driver-page .pin-btn:active {
    background: var(--success);
    color: white;
}
body.driver-page .pin-btn-go {
    background: var(--success);
    color: #fff;
}
body.driver-page .pin-btn-go:disabled {
    background: var(--success);
    opacity: 0.3;
    cursor: not-allowed;
}
body.driver-page .pin-btn-go:not(:disabled):active {
    background: #1e7e34;
}
body.driver-page .btn-primary {
    background: var(--success);
}
body.driver-page .btn-primary:hover {
    background: #1e7e34;
}

/* Quick Search */
.quick-search-wrap {
    position: relative;
    margin: 8px 0 4px;
}
.quick-search-input-wrap {
    position: relative;
    max-width: 320px;
}
.quick-search-input-wrap input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--card-bg, #fff);
    color: var(--text, #333);
    box-sizing: border-box;
}
.quick-search-input-wrap input:focus {
    outline: none;
    border-color: var(--accent, #046604);
    box-shadow: 0 0 0 2px rgba(4,102,4,0.15);
}
.quick-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary, #888);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.quick-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 480px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 1000;
}
.qs-result {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border, #eee);
    font-size: 0.85rem;
    transition: background 0.1s;
    align-items: center;
}
.qs-result:last-child { border-bottom: none; }
.qs-result:hover, .qs-result:focus { background: var(--hover-bg, #f0f7ff); }
.qs-result-ticket { font-weight: 700; grid-row: 1; grid-column: 1; white-space: nowrap; }
.qs-result-info { grid-row: 1; grid-column: 2; min-width: 0; display: flex; flex-direction: column; }
.qs-result-customer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.qs-result-shipto { font-size: 0.73rem; color: var(--text-secondary, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.qs-result-meta { grid-row: 1; grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 0.75rem; white-space: nowrap; }
.qs-result-driver { color: var(--text-secondary, #888); font-size: 0.7rem; }
.qs-no-results { padding: 16px; text-align: center; color: var(--text-secondary, #888); font-size: 0.85rem; }

/* Ticket Detail Modal */
.ticket-detail-modal {
    max-width: 600px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
}
.ticket-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #eee);
}
.ticket-detail-number {
    font-size: 1.3rem;
    font-weight: 700;
    margin-right: 10px;
}
.ticket-detail-body {
    padding: 16px 20px;
}
.ticket-detail-body h4 {
    margin: 16px 0 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-secondary, #888);
    letter-spacing: 0.5px;
}
.ticket-detail-body h4:first-child { margin-top: 0; }
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}
.detail-field label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary, #888);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.detail-field span {
    font-size: 0.9rem;
    color: var(--text, #333);
}
.detail-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.detail-photos img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--border, #ddd);
    transition: transform 0.15s;
}
.detail-photos img:hover { transform: scale(1.05); }
.detail-signature img {
    max-height: 80px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: #fff;
}
.detail-map {
    height: 180px;
    border-radius: 8px;
    margin-top: 8px;
    border: 1px solid var(--border, #ddd);
}
.detail-pod-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.detail-pod-tab {
    padding: 6px 14px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.detail-pod-tab.active {
    background: var(--accent, #046604);
    color: #fff;
    border-color: var(--accent, #046604);
}
.detail-notes {
    background: var(--hover-bg, #f8f9fa);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-top: 8px;
    white-space: pre-wrap;
}
.ticket-detail-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border, #eee);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Photo Lightbox */
.photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.photo-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 4px;
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .quick-search-wrap {
        position: static;
    }
    .quick-search-input-wrap { max-width: 100%; }
    .quick-search-dropdown {
        position: fixed;
        top: auto;
        left: 8px;
        right: 8px;
        max-width: none;
        max-height: 60vh;
        border-radius: 8px;
        z-index: 1001;
    }
    .qs-result {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        padding: 10px 12px;
        gap: 3px 8px;
    }
    .qs-result-ticket {
        grid-row: 1;
        grid-column: 1;
        font-size: 0.88rem;
    }
    .qs-result-meta {
        grid-row: 1;
        grid-column: 2;
        flex-direction: row;
        gap: 6px;
        align-items: center;
    }
    .qs-result-info {
        grid-row: 2;
        grid-column: 1 / -1;
    }
    .qs-result-customer {
        font-size: 0.78rem;
    }
    .qs-result-shipto {
        font-size: 0.7rem;
    }
    .qs-result-driver {
        font-size: 0.68rem;
    }
    .ticket-detail-modal { width: 100vw; max-width: 100vw; border-radius: 12px 12px 0 0; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-map { height: 150px; }
}

/* Skip to content link - visible on focus */
.skip-to-content:focus {
    position: fixed !important;
    left: 10px !important;
    top: 10px !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border-radius: 4px;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Fix #1: Generic close button touch targets */
.btn-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.btn-close:hover { color: var(--text); }
.btn-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fix #15: Modal body scroll on mobile */
.modal-body { max-height: 80vh; overflow-y: auto; }
.modal-body::after {
    content: '';
    position: sticky;
    bottom: 0;
    display: block;
    height: 20px;
    margin-top: -20px;
    background: linear-gradient(transparent, var(--card-bg));
    pointer-events: none;
}
.confirm-dialog { max-height: 80vh; overflow-y: auto; }

/* Fix #19: Sticky table headers */
.dash-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--card-bg);
    box-shadow: 0 1px 0 var(--border);
}

/* Outbound Freight: mobile card view (table -> stacked cards using td[data-label]) */
@media (max-width: 768px) {
    .freight-table-wrap { overflow-x: visible; }
    .freight-table-wrap .data-table thead { display: none; }
    .freight-table-wrap .data-table,
    .freight-table-wrap .data-table tbody,
    .freight-table-wrap .data-table tr,
    .freight-table-wrap .data-table td { display: block; width: 100%; }
    .freight-table-wrap .data-table tr {
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 6px 12px;
        background: var(--card-bg);
    }
    .freight-table-wrap .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 5px 0;
        border: none;
        text-align: right;
    }
    .freight-table-wrap .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        text-align: left;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        flex: 0 0 auto;
    }
    .freight-table-wrap .data-table td[data-label=""] {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        text-align: left;
        padding-top: 8px;
    }
    .freight-table-wrap .data-table td[data-label=""]::before { content: none; }
}

/* M20 a11y: keep the Users table's Edit/Delete actions reachable on narrow screens
   by letting the table scroll horizontally instead of clipping the action column. */
#usersList { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#usersList table { min-width: 640px; }

/* ---------------------------------------------------------------------------
 * Touch targets (WCAG 2.5.5) — mobile Playwright audit, 2026-07-30 (iPhone 13).
 *
 * These are phone-first apps — drivers use them one-handed in a truck — so the
 * 44px floor matters more here than anywhere else on the estate. The audit
 * found the sign-in fields at 360x40, the Sign In button at 360x38, the footer
 * policy links at 15-17px tall and the PWA install dismiss at 24x19.
 *
 * Gated on `pointer: coarse` so desktop dispatcher views keep their density.
 * ------------------------------------------------------------------------- */
@media (pointer: coarse) {
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    button {
        min-height: 44px;
    }

    /* 16px floor on text fields also suppresses iOS Safari focus-zoom on focus. */
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 22px;
        min-height: 22px;
    }

    /* Footer policy links measured 83x17. Legal links are rarely urgent, but at
       17px they are effectively un-tappable. */
    footer a,
    .footer-links a,
    .legal-links a,
    .login-card a,
    .login-footer a,
    .header-links a,
    .back-link,
    .nav-links a,
    /* The POD tracker's policy links sit in an unclassed div, so match them by
       destination rather than inventing a class in the markup. */
    a[href*="privacy"],
    a[href*="terms"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Icon-only controls: the glyph keeps its size, the hit area grows. */
    .install-dismiss,
    .theme-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Driver stats report table.
 *
 * 12 columns (Driver, Assigned, Done, Missed, Rate, Miles, POD Loc, Stops/Hr,
 * GPS Flags, Active, First POD, Last POD) is ~821px — inherently wider than a
 * phone, and it is a scan-ACROSS comparison table, so stacking it into cards
 * would destroy the thing it is for. Give it its own horizontal scroll region
 * instead, so it neither pushes the page sideways nor gets clipped by an
 * ancestor (its wrapper div is unclassed and overflow-x:visible).
 *
 * Found by the authenticated mobile audit, 2026-07-31 — invisible until then
 * because /pod/reports is behind login.
 */
.report-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.report-table th,
.report-table td {
    white-space: nowrap;   /* wrapping 12 narrow columns is worse than scrolling */
}

/* ---------------------------------------------------------------------------
   iOS focus-zoom floor (F-0020)

   Mobile Safari magnifies the whole viewport when a focused text control
   renders below 16px, and it does NOT zoom back out on blur. On the dispatch
   dashboard that means every filter change leaves the operator pinching a
   magnified page. The POD apps are phone-first PWAs, so this is a daily tax.

   Scoped to `pointer: coarse` so desktop keeps its compact control sizing —
   a mouse-driven browser has no focus-zoom behaviour to guard against.

   `!important` is deliberate: the sizes being overridden live in a dozen
   component rules (.filter-bar select, .bulk-action-bar select,
   .missed-panel-actions input, .activity-filters, .quick-search-input-wrap,
   .kanban-column-header select, .map-controls select, .edit-input …). Matching
   each one by specificity would silently miss the next control someone adds;
   a floor cannot drift.

   Buttons, checkboxes, radios, ranges and colour pickers are excluded — they
   are not text entry, so they never trigger the zoom, and forcing 16px on them
   would resize controls whose size is purely visual.

   MEASURED, not assumed (390px viewport, live staging dispatch dashboard):
   the mobile filter bar is `grid-template-columns: 1fr 1fr`, which resolves to
   fixed 182px tracks. scrollWidth/clientWidth stayed 370/370 at both 12.48px
   and 16px, and stayed 370/370 with a 30-character option injected into every
   select (longer than any real driver, route or salesman name). No clipping,
   no new horizontal overflow — which mattered because `.container` is
   `overflow-x: hidden`, so an overflow here would CLIP rather than scroll.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}