/* ==========================================================
   Design tokens
   ----------------------------------------------------------
   A small, deliberate palette for a premium airport/car-service
   brand: deep navy for every brand action (buttons, links, focus,
   the signature CTA), a warm gold used ONLY as a sparing accent
   (the active sidebar indicator), and green reserved strictly for
   genuine "success/positive" states (Completed, Available, a
   confirmation banner) rather than doubling as the button color
   too — keeping "click this" and "this worked" visually distinct
   is what makes a dashboard read as professional instead of
   improvised.

   --theme-* custom properties are set separately, per request, in
   includes/sidebar.php from Settings > Theme (company branding an
   admin/fleet manager can customize) — those are untouched here;
   this block only adds the NEW tokens the rest of this file draws
   on for everything Settings > Theme doesn't cover.
   ========================================================== */
:root {
    /* Brand (buttons, links, focus rings, primary CTAs) */
    --color-primary: #163a5f;
    --color-primary-hover: #0e2b48;
    --color-primary-light: #eaf1f8;
    --color-primary-focus: rgba(22, 58, 95, .16);

    /* Accent — used sparingly (sidebar active-nav indicator and a
       small number of premium touches), never for buttons or body text */
    --color-accent: #c9973f;
    --color-accent-hover: #b5842f;

    /* Semantic status colors — kept distinct from the brand color above */
    --color-success: #2e7d32;
    --color-success-hover: #276b2b;
    --color-success-bg: #e8f5e9;
    --color-danger: #d33c3c;
    --color-danger-hover: #b32e2e;
    --color-danger-bg: #fbebea;
    --color-warning: #b06a00;
    --color-warning-bg: #fdf1e0;

    /* Neutrals */
    --color-bg: var(--theme-bg, #f4f5f7);
    --color-surface: #ffffff;
    --color-text: #1a1d29;
    --color-text-muted: #667085;
    --color-text-faint: #98a1ae;
    --color-border: #dde1e8;
    --color-border-soft: #eceef2;

    /* Radius scale */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Elevation scale — a little more lift than a near-invisible
       1px hairline, still subtle/flat rather than "floating" */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, .09);
    --shadow-lg: 0 10px 34px rgba(16, 24, 40, .14);
}

/* ==========================================================
   Base
   ========================================================== */
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    /* Safety net: if any child ever overflows its own box (a row of buttons
       that doesn't wrap, a table that isn't in its own scroll container),
       this stops it from dragging the WHOLE page into horizontal scroll and
       throwing off the layout — intentional horizontal scrollers like the
       bookings table (.table-scroll) keep working since they scroll inside
       their own box regardless of what the page itself does. */
    overflow-x: hidden;
}
a { color: var(--color-primary); }

/* ==========================================================
   Login page
   ========================================================== */
.login-body { display:flex; align-items:center; justify-content:center; height:100vh; background: linear-gradient(160deg, #f4f6f9 0%, #eef1f6 100%); }
.login-box { background:#fff; padding:40px; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:340px; border-top:3px solid var(--color-primary); }
.login-box h1 { font-size:20px; margin:0 0 20px; color:var(--color-text); }
.login-box label { display:block; margin:14px 0 6px; font-size:13px; font-weight:600; color:#555; }
.login-box input { width:100%; padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:14px; }
.login-box input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-focus); }
.login-box button { margin-top:22px; width:100%; padding:11px; background:var(--color-primary); color:#fff; border:none; border-radius:var(--radius-md); cursor:pointer; font-weight:600; font-size:14px; transition:background .12s ease; }
.login-box button:hover { background:var(--color-primary-hover); }
.login-box label.login-remember-me { display:flex; align-items:center; gap:8px; font-weight:400; color:#555; margin:16px 0 0; cursor:pointer; }
.login-box label.login-remember-me input[type=checkbox] { width:auto; margin:0; cursor:pointer; }
.alert-error { background:var(--color-danger-bg); color:var(--color-danger-hover); padding:10px 12px; border-radius:var(--radius-md); font-size:13px; margin-bottom:6px; }

.lang-switcher { display:flex; gap:8px; justify-content:center; margin-bottom:18px; flex-wrap:wrap; }
.lang-switcher a {
    font-size:12.5px; padding:5px 11px; border-radius:var(--radius-pill); text-decoration:none;
    color:#455a64; background:#f0f1f3; border:1px solid transparent; transition:background .12s ease;
}
.lang-switcher a.lang-active { background:var(--color-primary); color:#fff; font-weight:700; }
.lang-switcher a:hover:not(.lang-active) { background:#e2e4e8; }

.gps-status {
    display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
    border-radius:var(--radius-pill); font-size:13px; font-weight:600; margin-bottom:16px;
}
.gps-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.gps-status-pending { background:#f0f1f3; color:#666; }
.gps-status-pending .gps-dot { background:#9aa0aa; }
.gps-status-on { background:var(--color-success-bg); color:var(--color-success); }
.gps-status-on .gps-dot { background:var(--color-success); animation: gps-pulse 1.6s ease-in-out infinite; }
.gps-status-off { background:var(--color-danger-bg); color:var(--color-danger-hover); }
.gps-status-off .gps-dot { background:var(--color-danger); }
@keyframes gps-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.dispatch-map-wrap { margin-bottom:20px; }
.dispatch-map { height:420px; width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); z-index:1; }
.dispatch-map-meta { font-size:12.5px; color:var(--color-text-muted); margin-top:6px; }

.work-actions { display:flex; }

.cns-section-desc { font-size:13px; color:var(--color-text-muted); margin:-6px 0 14px; line-height:1.5; }

.cns-evidence-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:14px; }
.cns-evidence-item { display:block; text-decoration:none; color:#455a64; text-align:center; }
.cns-evidence-item img {
    width:100%; height:110px; object-fit:cover; border-radius:var(--radius-md); border:1px solid var(--color-border);
    margin-bottom:6px; display:block; transition:border-color .12s ease;
}
.cns-evidence-item span { font-size:12px; font-weight:600; }
.cns-evidence-item:hover img { border-color:var(--color-primary); }

/* ==========================================================
   App shell / sidebar
   ========================================================== */
.app-shell { display:flex; min-height:100vh; }

/* The sidebar is "position:fixed" (not "sticky") so it always stays pinned
   to the browser window itself, top to bottom, no matter how tall the page
   content gets (a long table, for example). "sticky" only holds an element
   in place within ITS OWN parent box — once you scroll near the very end of
   a tall page, a sticky sidebar detaches and starts sliding away with the
   rest of the page, which is what was showing up as the sidebar "breaking"
   near the bottom of long lists like Bookings. Fixed positioning has no such
   edge case — .content below gets a matching margin-left so it never sits
   underneath the sidebar. */
.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--theme-sidebar-bg, #16213a);
    color: #a9b0c2;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 10;
}
.sidebar .brand { color:#fff; font-weight:700; font-size:17px; padding:0 20px 22px; letter-spacing:.01em; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:8px; }
.brand-logo { max-height:32px; max-width:150px; border-radius:var(--radius-sm); object-fit:contain; }
.brand-emoji { font-size:20px; line-height:1; }
.brand-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar a { color:#a9b0c2; text-decoration:none; padding:11px 20px; font-size:14px; border-left:3px solid transparent; transition:background .12s ease, color .12s ease; }
.sidebar a.active { background:rgba(255,255,255,.06); color:#fff; border-left-color:var(--color-accent); font-weight:600; }
.sidebar a:hover:not(.active) { background:rgba(255,255,255,.04); color:#fff; }

/* Collapsible nav group (e.g. "Reports" > Overall/Fleet/Driver/Performance) */
.nav-group-toggle {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; background:none; border:none; border-left:3px solid transparent;
    color:#a9b0c2; font-family:inherit; text-align:left; cursor:pointer;
    padding:11px 20px; font-size:14px; transition:background .12s ease, color .12s ease;
}
.nav-group-toggle:hover:not(.active) { background:rgba(255,255,255,.04); color:#fff; }
.nav-group-toggle.active { background:rgba(255,255,255,.06); color:#fff; border-left-color:var(--color-accent); font-weight:600; }
.nav-chevron { font-size:10px; transition:transform .15s ease; display:inline-block; }
.nav-chevron.open { transform:rotate(180deg); }
.nav-submenu { display:none; flex-direction:column; background:rgba(0,0,0,.15); }
.nav-submenu.open { display:flex; }
.nav-submenu a { padding:9px 20px 9px 38px; font-size:13px; }
.sidebar-spacer { flex:1; }
.sidebar-user { padding:10px 20px; font-size:12px; color:#7a8195; border-top:1px solid rgba(255,255,255,.08); margin-top:8px; }

.content { flex:1; padding:32px 36px; min-width:0; margin-left:220px; }
.content h1 { margin:0 0 22px; font-size:24px; font-weight:700; color: var(--theme-heading-color, var(--color-text)); }

/* Page header row — page title + language dropdown side by side (e.g. the
   top right corner of bookings.php). h1 loses its own bottom margin here
   since the row itself carries it instead. */
.page-header-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 22px; }
.page-header-row h1 { margin:0; }
.lang-dropdown {
    padding:7px 30px 7px 12px; border:1px solid var(--color-border); border-radius:var(--radius-md);
    font-size:13px; background:#fff; color:#3a3f47; cursor:pointer;
}

/* ==========================================================
   Alerts
   ========================================================== */
.alert-success { background:var(--color-success-bg); color:var(--color-success); padding:12px 16px; border-radius:var(--radius-md); margin-bottom:18px; font-size:14px; font-weight:500; border:1px solid rgba(46,125,50,.16); }
.alert-error-box { background:var(--color-danger-bg); color:var(--color-danger-hover); padding:12px 16px; border-radius:var(--radius-md); margin-bottom:18px; font-size:14px; border:1px solid rgba(211,60,60,.18); }
.alert-error-box ul { margin:0; padding-left:18px; }

/* ==========================================================
   Filter bar + table (bookings list)
   ========================================================== */
.filter-bar {
    display:flex; gap:16px; align-items:end; flex-wrap:wrap;
    background:#fff; padding:18px 20px; border-radius:var(--radius-lg); margin-bottom:20px;
    box-shadow: var(--shadow-sm); border:1px solid var(--color-border-soft);
}
.filter-bar label { font-size:12px; font-weight:600; color:#666; display:flex; flex-direction:column; gap:5px; }
.filter-bar input, .filter-bar select { padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:14px; }
.filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-focus); }
.filter-bar button { padding:9px 16px; border:none; border-radius:var(--radius-sm); background:#455a64; color:#fff; cursor:pointer; font-size:14px; font-weight:600; transition:background .12s ease; }
.filter-bar button:hover { background:#37474f; }
.btn-primary { padding:9px 16px; border-radius:var(--radius-sm); background:var(--color-primary); color:#fff; text-decoration:none; margin-left:auto; font-size:14px; font-weight:600; white-space:nowrap; transition:background .12s ease; }
.btn-primary:hover { background:var(--color-primary-hover); }

/* Two-tier filter/toolbar card (Bookings page) */
.filter-toolbar-card {
    background:#fff; border-radius:var(--radius-lg); padding:18px 20px 16px; margin-bottom:20px;
    box-shadow: var(--shadow-sm); border:1px solid var(--color-border-soft);
}
.filter-toolbar-card .filter-bar {
    background:none; padding:0; margin-bottom:0; box-shadow:none; border-radius:0; border:none;
}
.btn-search { padding:9px 18px; border:none; border-radius:var(--radius-sm); background:var(--color-primary); color:#fff; cursor:pointer; font-size:14px; font-weight:700; transition:background .12s ease; }
.btn-search:hover { background:var(--color-primary-hover); }

.toolbar-actions {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding-top:14px; margin-top:14px; border-top:1px solid var(--color-border-soft);
}
.toolbar-actions .spacer { flex:1; }
.toolbar-divider { width:1px; align-self:stretch; background:#e8e9ec; margin:0 2px; }

.dropdown-wrap { position:relative; display:inline-block; }
.dropdown-menu {
    display:none; position:absolute; top:calc(100% + 6px); left:0;
    background:#fff; border:1px solid var(--color-border-soft); border-radius:var(--radius-md);
    box-shadow:var(--shadow-md); min-width:120px; z-index:50; overflow:hidden;
}
.dropdown-menu.open { display:block; }
.dropdown-menu a { display:block; padding:10px 16px; font-size:13.5px; color:#333; text-decoration:none; font-weight:500; }
.dropdown-menu a:hover { background:#f4f5f7; }

.list-meta { font-size:13px; color:var(--color-text-muted); margin-bottom:10px; }

.bulk-bar {
    /* flex-wrap is the actual fix: without it, a narrow browser window (or a
       Cowork/side-panel squeezing the page) forced this whole row of selects
       and buttons to stay on one line and spill past the edge of the page
       instead of dropping onto a second line like the filter bar above it
       already does. */
    display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; background:var(--color-primary-light);
    border:1px solid #cfdcea; border-radius:var(--radius-md); padding:12px 16px; margin-bottom:14px;
    font-size:14px;
}
.bulk-bar select { padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:14px; }
.bulk-bar .btn-submit, .bulk-bar .btn-secondary, .bulk-bar .btn-danger { padding:8px 16px; font-size:13px; }
.bulk-bar-divider { width:1px; align-self:stretch; background:#c3d0e0; margin:0 4px; }
.btn-danger { background:var(--color-danger); color:#fff; border:none; border-radius:var(--radius-md); cursor:pointer; font-weight:700; transition:background .12s ease; }
.btn-danger:hover { background:var(--color-danger-hover); }
.btn-delete-link { color:var(--color-danger) !important; }
.row-checkbox, #select-all-checkbox { width:16px; height:16px; cursor:pointer; accent-color:var(--color-primary); }

/* "Approaching pickup" auto-highlight (bookings.php only — see
   js/urgent-highlight.js, which toggles .row-urgent on a <tr> once its
   pickup time is within 1 hour and removes it again once pickup has
   passed or the booking is completed/cancelled). Falls back to a soft
   pink if no color has been set in Settings > Theme. Declared BEFORE
   .row-selected below on purpose: both rules use !important at equal
   specificity, so when a row is both checked AND approaching pickup, the
   deliberate manual selection (.row-selected, declared later) wins the
   tie rather than being silently overridden by the passive time-based one. */
.bookings-table tbody tr.row-urgent td { background: var(--theme-urgent-color, #ffb6c1) !important; }

/* Multi-select highlight (bookings.php only — see js/batch-actions.js,
   which toggles .row-selected on a <tr> as its checkbox is checked/
   unchecked). Falls back to a soft yellow if no highlight color has been
   set in Settings > Theme. !important so it still wins over the plain
   row-hover background just below (.bookings-table tr:hover td). */
.bookings-table tbody tr.row-selected td { background: var(--theme-highlight-color, #fff9c4) !important; }

.airport-select {
    padding:6px 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm);
    font-size:13px; width:100%; background:#fff; cursor:pointer;
}
.airport-select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-focus); }

.driver-payment-input {
    padding:6px 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm);
    font-size:13px; width:80px; max-width:100%; background:#fff;
}
.driver-payment-input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-focus); }

.color-select {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    border:none; border-radius:8px; padding:9px 30px 9px 12px;
    font-size:13px; cursor:pointer; width:100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right 12px center;
}

/* "Status" multi-select checkbox dropdown (Overall / Fleet / Driver Report) */
.status-filter-dropdown { position:relative; display:inline-block; }
.status-filter-toggle {
    padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:14px;
    background:#fff; cursor:pointer; display:flex; align-items:center; gap:6px;
    font-family:inherit; color:var(--color-text);
}
.status-filter-toggle:hover { border-color:#9aa0aa; }
.status-filter-menu {
    display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:60;
    background:#fff; border:1px solid var(--color-border-soft); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
    min-width:210px; max-height:280px; overflow-y:auto; padding:8px;
}
.status-filter-menu.open { display:block; }
.status-filter-option { display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:13.5px; border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; }
.status-filter-option:hover { background:#f4f5f7; }
.status-filter-option input { width:auto; margin:0; cursor:pointer; }

.pagination { display:flex; align-items:center; gap:6px; margin-top:16px; flex-wrap:wrap; }
.pagination a {
    padding:7px 12px; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--color-border-soft);
    color:#333; text-decoration:none; font-size:13px; font-weight:600; transition:background .12s ease;
}
.pagination a:hover:not(.disabled):not(.current) { background:#f4f5f7; }
.pagination a.current { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.pagination a.disabled { color:#c4c7cc; pointer-events:none; }
.pagination .page-info { margin-left:10px; font-size:13px; color:var(--color-text-muted); }

.table-wrap { background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--color-border-soft); }
.table-scroll { overflow-x:auto; overflow-anchor:none; }
.wide-table { min-width:1400px; table-layout:fixed; }

/* A thin duplicate horizontal scrollbar pinned above the Bookings table
   (js/table-top-scroll.js keeps its scroll position in sync with the real
   table underneath), so the scrollbar is reachable without scrolling all
   the way down past the rows first. Hidden automatically when the table
   isn't actually wider than its container (nothing to scroll). */
.table-scroll-top { overflow-x:auto; overflow-y:hidden; margin-bottom:8px; }
.table-scroll-top-inner { height:1px; }
.table-scroll-top::-webkit-scrollbar { height:10px; }
.table-scroll-top::-webkit-scrollbar-track { background:#f4f5f7; }
.table-scroll-top::-webkit-scrollbar-thumb { background:#c4c7cc; border-radius:6px; }
.table-scroll-top::-webkit-scrollbar-thumb:hover { background:#9aa0aa; }
.bookings-table td.wrap-cell { white-space:normal; word-break:break-word; line-height:1.4; }
.bookings-table th { position:relative; }

/* Bookings table: contained vertical scroll with a pinned header, so the
   column headers stay visible instead of scrolling away with the page. */
.bookings-table-wrap { max-height:65vh; overflow-y:auto; }
.bookings-table-wrap::-webkit-scrollbar { width:10px; height:10px; }
.bookings-table-wrap::-webkit-scrollbar-track { background:#f4f5f7; }
.bookings-table-wrap::-webkit-scrollbar-thumb { background:#c4c7cc; border-radius:6px; }
.bookings-table-wrap::-webkit-scrollbar-thumb:hover { background:#9aa0aa; }
/* !important is required here: js/resize-columns.js sets an inline
   style="position:relative" on every <th> (for the column-resize handle's
   positioning context) at page load, and inline styles beat any external
   stylesheet rule regardless of selector specificity. Sticky elements are
   still a valid positioning context for that handle, so this doesn't break
   column resizing. */
#bookings-table thead th { position:sticky !important; top:0; z-index:3; }
/* border-collapse:collapse leaves a faint seam where the sticky header
   overlaps scrolled rows — use separate borders with zero spacing on this
   table only, visually identical since cells only set border-bottom (no
   border-top to double up against it). */
#bookings-table { border-collapse:separate; border-spacing:0; }

.sort-link { color:var(--color-text-muted); text-decoration:none; display:block; }
.sort-link:hover { color:#333; }
.sort-link.active-sort { color:var(--color-text); font-weight:800; }

.draggable-col { cursor:grab; }
.draggable-col:active { cursor:grabbing; }
.dragging-col { opacity:0.4; }
.drop-target-col { box-shadow: inset 3px 0 0 var(--color-primary); background:var(--color-primary-light); }
.col-resizer {
    position:absolute; top:0; right:0; width:6px; height:100%;
    cursor:col-resize; user-select:none; touch-action:none;
}
.col-resizer:hover, body.col-resizing .col-resizer { background:var(--color-primary); opacity:.5; }
body.col-resizing { cursor:col-resize; user-select:none; }
.bookings-table { width:100%; border-collapse:collapse; }
.bookings-table th { text-align:left; background:#fafbfc; padding:12px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); border-bottom:1px solid var(--color-border-soft); font-weight:700; }
.bookings-table td { padding:13px 14px; border-bottom:1px solid #f1f2f4; font-size:14px; vertical-align:middle; }
.bookings-table tr:last-child td { border-bottom:none; }
.bookings-table tfoot tr td { border-top:2px solid var(--color-border); border-bottom:none; }

.amount-positive { color:#1b5e20; font-weight:700; }
.amount-negative { color:var(--color-danger); font-weight:700; }
/* Subtle zebra striping so a long, wide table stays easy to scan across —
   placed before the hover rule below so hover always wins the tie (same
   specificity, later source order). */
.bookings-table tbody tr:nth-child(even) td { background:#fafbfc; }
.bookings-table tr:hover td { background:#eef2f7; }
.empty-row { text-align:center; color:#999; padding:36px !important; }

.status-pill { padding:4px 11px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; color:#fff; display:inline-block; text-transform:capitalize; }
.status-new { background:#dd9426; }
.status-confirmed { background:#1d70c2; }
.status-contacted { background:#5e35b1; }
.status-assigned { background:#00897b; }
.status-on_the_way { background:#3949ab; }
.status-en_route { background:#ea7f00; }
.status-in_progress { background:#b8860b; }
.status-picked_up { background:#689f38; }
.status-dropped_off { background:#26a69a; }
.status-out { background:#0097a7; }
.status-completed { background:var(--color-success); }
.status-cancelled { background:var(--color-danger); }
.status-dns { background:#ad1457; }
.status-cns { background:#6d4c41; }

.driver-status-available { background:var(--color-success); }
.driver-status-on_trip { background:#ea7f00; }
.driver-status-off_duty { background:#78909c; }

.flight-status-landed { background:var(--color-success); }
.flight-status-on_the_way { background:#1d70c2; }
.flight-status-delay { background:#ea7f00; }
.flight-status-cancel { background:var(--color-danger); }
.flight-status-routed { background:#00897b; }
.flight-status-none { background:#b0b6bf; }

.status-pill.pill-paid { background:var(--color-success); }
.status-pill.pill-pending { background:var(--color-warning); }
.status-pill.pill-unpaid { background:#8a8f98; }
.status-pill.pill-refunded { background:var(--color-danger); }
.status-pill.pill-sent { background:var(--color-success); }
.status-pill.pill-not-sent { background:#e4e6ea; color:#6b7280; }

/* .form-group (Web Booking's settings forms) — a bare <label> is inline by
   default, which lets it collapse against a tall multi-line input/textarea
   instead of stacking above it. Force block stacking, same look as .field
   label elsewhere on the page. Scoped to .form-group > label only — checkbox
   rows already set their own inline flex style, which still wins (inline
   style beats a stylesheet rule), so this doesn't affect those. */
.form-group > label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:#4a4f59; }

.flight-status-cell { display:flex; align-items:center; gap:5px; }
.flight-refresh-btn {
    background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-sm);
    width:26px; height:26px; cursor:pointer; font-size:14px; color:#455a64;
    flex-shrink:0; line-height:1; padding:0; transition:background .12s ease;
}
.flight-refresh-btn:hover { background:#f4f5f7; }
.flight-refresh-btn.loading { animation: flight-spin 0.9s linear infinite; color:var(--color-primary); }
@keyframes flight-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

.status-select {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    border:none; border-radius:var(--radius-pill); padding:5px 26px 5px 12px;
    font-size:12px; font-weight:700; cursor:pointer;
    color:#fff !important; -webkit-text-fill-color:#fff;
    background-repeat:no-repeat; background-position: right 10px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white'/%3E%3C/svg%3E");
}
/* status-new / status-in_progress use a gold/amber background that's still
   too light for reliable white-text contrast — dark text + a dark arrow
   fill instead, same treatment as before, just re-tuned to the new tones. */
.status-select.status-new,
.status-select.status-in_progress {
    color:#3a2600 !important; -webkit-text-fill-color:#3a2600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233a2600'/%3E%3C/svg%3E");
}
.status-select:hover { filter:brightness(0.92); }
.status-select:focus { outline:2px solid rgba(0,0,0,.15); outline-offset:1px; }

.btn-assign { background:var(--color-primary-light); color:var(--color-primary); border:1px solid #cfdcea; padding:6px 11px; border-radius:var(--radius-sm); cursor:pointer; font-size:12.5px; font-weight:600; transition:background .12s ease; }
.btn-assign:hover { background:#dde8f2; }
.btn-link { background:none; border:none; color:var(--color-primary); cursor:pointer; font-size:12.5px; margin-left:8px; text-decoration:underline; padding:0; }
.driver-assigned { font-weight:600; }
.row-actions { display:flex; gap:10px; align-items:center; }
.row-actions a { font-size:12.5px; text-decoration:underline; }
.btn-row-edit { padding:5px 12px !important; font-size:12px !important; text-decoration:none !important; white-space:nowrap; }

/* ==========================================================
   Modal (assign driver)
   ========================================================== */
.modal-overlay { position:fixed; inset:0; background:rgba(14,16,24,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-box { background:#fff; width:100%; max-width:520px; max-height:80vh; overflow-y:auto; border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-lg); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.modal-header h2 { margin:0; font-size:18px; }
.modal-header button { background:none; border:none; font-size:22px; cursor:pointer; color:#888; line-height:1; }

.driver-row { display:flex; justify-content:space-between; align-items:center; padding:14px; border:1px solid var(--color-border-soft); border-radius:var(--radius-md); margin-bottom:10px; gap:12px; }
.driver-row.best-match { border-color:var(--color-success); background:#f4fbf4; }
.driver-row.has-conflict { border-color:var(--color-warning); background:var(--color-warning-bg); }
.badge { background:var(--color-success); color:#fff; font-size:10.5px; padding:2px 8px; border-radius:var(--radius-pill); margin-left:8px; font-weight:700; }
.driver-meta { font-size:12px; color:#777; margin-top:4px; }
.driver-reasons { font-size:12px; color:#999; margin-top:2px; }
.driver-reasons-warning { color:var(--color-warning); font-weight:600; }

/* Click-to-copy phone numbers on Bookings/Dispatch (js/copy-phone.js) —
   a dotted underline hints it's clickable; briefly turns green with a
   checkmark to confirm the copy without permanently altering the cell. */
.copyable-phone { cursor:pointer; border-bottom:1px dotted var(--color-accent); }
.copyable-phone:hover { color:var(--color-accent); }
.copyable-phone.copied { color:var(--color-success); border-bottom-color:var(--color-success); font-weight:600; }
.driver-score { text-align:right; display:flex; flex-direction:column; align-items:end; gap:6px; flex-shrink:0; }
.btn-assign-confirm { background:var(--color-primary); color:#fff; border:none; padding:7px 14px; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap; transition:background .12s ease; }
.btn-assign-confirm:hover { background:var(--color-primary-hover); }

/* ==========================================================
   Forms (new / edit booking)
   ========================================================== */
.form-card {
    background:#fff; border-radius:var(--radius-lg); padding:28px 30px; max-width:920px;
    box-shadow: var(--shadow-sm); border:1px solid var(--color-border-soft);
}
.form-section { margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid var(--color-border-soft); }
.form-section:last-of-type { border-bottom:none; margin-bottom:20px; padding-bottom:0; }
.form-section h3 {
    margin:0 0 16px; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--color-text-muted); font-weight:700;
}

.form-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px 20px;
}
.form-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size:12.5px; font-weight:600; color:#4a4f59; }
.field .hint { font-size:11.5px; color:var(--color-text-faint); font-weight:400; }

.field input[type=text], .field input[type=email], .field input[type=date],
.field input[type=time], .field input[type=number], .field select, .field textarea {
    padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:14px;
    font-family:inherit; background:#fff; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-focus);
}
.field textarea { resize:vertical; min-height:70px; }

.checkbox-field { flex-direction:row !important; align-items:center; gap:8px !important; padding-top:22px; }
.checkbox-field input { width:auto; accent-color:var(--color-primary); }

.reveal-btn {
    background:none; border:1px solid var(--color-border); color:var(--color-primary); cursor:pointer;
    font-size:11px; padding:2px 8px; border-radius:var(--radius-sm); margin-left:6px;
}
.reveal-btn:hover { background:var(--color-primary-light); }
.revealed-value {
    font-weight:700; color:var(--color-danger-hover); margin-left:8px; font-family:monospace;
    background:var(--color-danger-bg); padding:2px 8px; border-radius:var(--radius-sm);
}

.driver-code {
    font-family:monospace; font-weight:700; color:#455a64;
    background:#eceff1; padding:3px 9px; border-radius:var(--radius-sm); font-size:13px;
}

.expiry-alert {
    color:var(--color-danger); font-weight:900; margin-left:6px; font-size:15px;
    cursor:help; display:inline-block;
}

/* Driver read-only profile view */
.profile-header { display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.profile-avatar {
    width:64px; height:64px; border-radius:50%; background:var(--color-primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:22px;
    font-weight:800; flex-shrink:0; letter-spacing:.02em;
}
.profile-badges { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.profile-card {
    background:#fff; border-radius:var(--radius-lg); padding:24px 26px; margin-bottom:18px;
    max-width:640px; box-shadow: var(--shadow-sm); border:1px solid var(--color-border-soft);
}
.profile-card h3 {
    margin:0 0 16px; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--color-text-muted); font-weight:700;
}
.profile-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px 24px; }
.profile-row { display:flex; flex-direction:column; gap:4px; padding-bottom:12px; border-bottom:1px solid #f2f3f5; }
.profile-row.wide { grid-column: 1 / -1; }
.profile-row:last-child, .profile-grid .profile-row:nth-last-child(-n+2) { border-bottom:none; }
.profile-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-faint); font-weight:700; }
.profile-value { font-size:15px; color:var(--color-text); font-weight:600; }

/* Public shareable trip link page */
.share-page-wrap { max-width:600px; margin:0 auto; padding:40px 20px 60px; }
.share-header { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.share-company-name { font-weight:800; font-size:17px; color:var(--color-text); }
.share-title { margin:0 0 4px; font-size:22px; }
.share-subtitle { color:var(--color-text-muted); font-size:13.5px; margin:0 0 20px; }
.share-trip-card { max-width:100%; }
.share-trip-id {
    font-family:monospace; font-weight:800; font-size:15px; color:var(--color-primary);
    background:var(--color-primary-light); display:inline-block; padding:5px 12px; border-radius:var(--radius-md);
    margin-bottom:16px;
}
.checkbox-field label { font-weight:500; }

.form-actions { display:flex; gap:12px; justify-content:flex-end; padding-top:6px; }
.btn-secondary { padding:10px 20px; border-radius:var(--radius-md); background:#eef0f2; color:#333; text-decoration:none; font-size:14px; font-weight:600; border:none; cursor:pointer; transition:background .12s ease; }
.btn-secondary:hover { background:#e2e4e8; }
.btn-submit { padding:10px 22px; border-radius:var(--radius-md); background:var(--color-primary); color:#fff; border:none; cursor:pointer; font-weight:700; font-size:14px; transition:background .12s ease; }
.btn-submit:hover { background:var(--color-primary-hover); }

/* ==========================================================
   Driver messaging
   ========================================================== */
.badge-alert { background:var(--color-danger-hover); color:#fff; font-size:10.5px; padding:2px 7px; border-radius:var(--radius-pill); margin-left:6px; font-weight:700; min-width:16px; text-align:center; display:inline-block; }

/* Bookings table — small "M" badge next to the reference number for a
   booking currently sitting in the Market (see includes/bookings_data.php's
   render_booking_cell()). Amber rather than red/green so it doesn't read as
   an alert or a status — it's just a location marker. */
.market-badge {
    background:var(--color-accent); color:#fff; font-size:10px; font-weight:800; line-height:1;
    padding:2.5px 5px; border-radius:var(--radius-sm); display:inline-block; vertical-align:middle;
}

.toast-stack { position:fixed; top:16px; right:16px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:340px; }
#urgent-msg-overlay { z-index:400; } /* must sit above the toast stack — it's meant to block everything */
.toast { background:#1a2036; color:#fff; border-radius:var(--radius-lg); padding:12px 14px; box-shadow:var(--shadow-lg); font-size:13.5px; line-height:1.5; cursor:pointer; animation:toast-in .18s ease-out; position:relative; }
.toast strong { display:block; font-size:11px; color:var(--color-accent); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.toast .toast-close { position:absolute; top:8px; right:10px; background:none; border:none; color:rgba(255,255,255,.55); font-size:16px; cursor:pointer; line-height:1; padding:2px; }
.toast .toast-close:hover { color:#fff; }
@keyframes toast-in { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

.urgent-modal-box { background:#fff; width:100%; max-width:440px; border-radius:var(--radius-lg); padding:26px; text-align:center; border-top:6px solid var(--color-danger-hover); box-shadow:var(--shadow-lg); }
.urgent-modal-box .urgent-flag { display:inline-block; background:var(--color-danger-hover); color:#fff; font-size:11px; font-weight:800; padding:3px 10px; border-radius:var(--radius-md); letter-spacing:.4px; margin-bottom:10px; }
.urgent-modal-box h2 { color:#20242c; font-size:17px; margin-bottom:6px; }
.urgent-modal-box .urgent-message-text { font-size:14.5px; line-height:1.6; color:#333; margin:10px 0 16px; text-align:left; white-space:pre-wrap; }
.urgent-modal-box textarea { width:100%; margin-bottom:12px; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:8px 10px; font-family:inherit; font-size:13.5px; resize:vertical; min-height:56px; }
.urgent-modal-box .urgent-actions { display:flex; gap:10px; }
.urgent-modal-box .urgent-actions button { flex:1; }

.msg-thread { display:flex; flex-direction:column; gap:10px; max-height:440px; overflow-y:auto; padding:4px 2px; }
.msg-bubble { max-width:80%; padding:9px 12px; border-radius:var(--radius-lg); font-size:13.5px; line-height:1.5; white-space:pre-wrap; }
.msg-out { align-self:flex-end; background:var(--color-primary); color:#fff; border-bottom-right-radius:3px; }
.msg-in { align-self:flex-start; background:#eceff1; color:#263238; border-bottom-left-radius:3px; }
.msg-urgent-tag { display:inline-block; background:var(--color-danger-hover); color:#fff; font-size:9.5px; font-weight:800; padding:1px 7px; border-radius:var(--radius-sm); margin-bottom:5px; letter-spacing:.4px; }
.msg-sender { font-size:10.5px; font-weight:700; opacity:.75; margin-bottom:2px; }
.msg-meta { font-size:10px; opacity:.65; margin-top:4px; }

.driver-pick-list { max-height:280px; overflow-y:auto; border:1px solid var(--color-border-soft); border-radius:var(--radius-md); padding:6px; }
.driver-pick-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--radius-sm); font-size:13.5px; }
.driver-pick-row:hover { background:#f4f6f8; }
.driver-pick-row input[type=checkbox] { width:auto; }
.driver-pick-row .driver-pick-name { cursor:pointer; flex:1; }
.driver-pick-row .driver-pick-name:hover { color:var(--color-primary); text-decoration:underline; }

.messages-layout { display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start; }
@media (max-width: 900px) {
    .messages-layout { grid-template-columns:1fr; }
}

/* ==========================================================
   Driver app — work_detail.php (single-booking screen)
   ========================================================== */
.wd-content { max-width:480px; margin:0 auto; padding-left:16px; padding-right:16px; }

.wd-topbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.wd-back {
    flex:none; width:34px; height:34px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center; text-decoration:none;
    color:var(--color-text); font-size:17px; box-shadow:var(--shadow-sm);
}
.wd-topbar-ref { flex:1; font-weight:800; font-size:15px; }

.wd-map { height:190px; width:100%; border-radius:var(--radius-lg); margin-bottom:14px; box-shadow:var(--shadow-sm); z-index:1; }
.wd-map-placeholder {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background:#eceff1; color:#78909c; font-size:12.5px; text-align:center; padding:0 20px;
}
.wd-map-placeholder-icon { font-size:26px; }

.wd-card { background:#fff; border-radius:var(--radius-lg); padding:16px; margin-bottom:12px; box-shadow:var(--shadow-xs); border:1px solid var(--color-border-soft); }

.wd-datetime-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.wd-datetime { font-size:20px; font-weight:800; letter-spacing:-.01em; }
.wd-time { font-size:20px; font-weight:800; margin-left:8px; }
.wd-pax-chip {
    flex:none; display:inline-flex; align-items:center; gap:5px; background:#eef2f7; color:#37474f;
    font-weight:700; font-size:13px; padding:5px 10px; border-radius:var(--radius-pill);
}
.wd-vehicle-line { font-size:13.5px; color:#546e7a; display:flex; align-items:center; gap:7px; }

.wd-flight-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px; }
.wd-flight-icon { font-size:15px; }
.wd-flight-number { font-weight:700; font-size:13.5px; }
.wd-airport-chip {
    margin-left:auto; background:#eceff1; color:#455a64; font-weight:700; font-size:11.5px;
    padding:4px 9px; border-radius:var(--radius-sm); letter-spacing:.03em;
}

.wd-route-row { display:flex; gap:12px; align-items:flex-start; }
.wd-route-dot { flex:none; width:12px; height:12px; border-radius:50%; margin-top:4px; border:2px solid #fff; box-shadow:0 0 0 2px currentColor; }
.wd-route-dot-pickup { background:var(--color-success); color:var(--color-success); }
.wd-route-dot-dropoff { background:var(--color-danger-hover); color:var(--color-danger-hover); }
.wd-route-line { width:2px; height:20px; background:#dfe3e8; margin:2px 0 2px 5px; }
.wd-route-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-faint); margin-bottom:2px; }
.wd-route-address { font-size:13.5px; line-height:1.4; }

.wd-section-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-faint); margin-bottom:10px; }
.wd-detail-row { display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #f1f2f4; font-size:13.5px; }
.wd-detail-row:last-child { border-bottom:none; padding-bottom:0; }
.wd-detail-label { color:var(--color-text-muted); flex:none; }
.wd-detail-value { text-align:right; font-weight:600; }
.wd-detail-value a { color:var(--color-primary); font-weight:700; text-decoration:none; }
.wd-detail-value-strong { font-size:15px; font-weight:800; color:var(--color-primary); }
.wd-detail-row-notes { flex-direction:column; align-items:flex-start; gap:4px; }
.wd-detail-row-notes .wd-detail-value { text-align:left; font-weight:500; }

.wd-noshow-row { display:flex; gap:10px; margin-bottom:12px; }
.wd-noshow-btn {
    flex:1; text-align:center; padding:11px 8px; border-radius:var(--radius-lg); border:none; cursor:pointer;
    font-weight:800; font-size:12.5px; letter-spacing:.02em; text-decoration:none; display:block;
}
.wd-noshow-driver { background:var(--color-danger-bg); color:var(--color-danger-hover); }
.wd-noshow-customer { background:var(--color-warning-bg); color:var(--color-warning); }

.wd-return-market-row { margin-bottom:12px; }
.wd-return-market-btn {
    width:100%; padding:10px; border-radius:var(--radius-lg); border:1px solid #e0b0b0; background:#fff;
    color:#b71c1c; font-weight:700; font-size:12.5px; cursor:pointer;
}

.wd-terminal-banner {
    text-align:center; padding:14px; border-radius:var(--radius-lg); font-weight:800; font-size:14px;
    background:#eceff1; color:#455a64;
}
.wd-terminal-completed { background:var(--color-success-bg); color:var(--color-success); }
.wd-terminal-cancelled { background:var(--color-danger-bg); color:var(--color-danger-hover); }
.wd-terminal-dns { background:#fce4ec; color:#ad1457; }
.wd-terminal-cns { background:var(--color-warning-bg); color:var(--color-warning); }

.wd-progress-bar { background:#fff; border-radius:var(--radius-lg); padding:18px 14px 16px; box-shadow:var(--shadow-sm); }
.wd-progress-track { display:flex; align-items:flex-start; margin-bottom:16px; }
.wd-step { display:flex; flex-direction:column; align-items:center; gap:6px; width:56px; flex:none; }
.wd-step-dot {
    width:26px; height:26px; border-radius:50%; background:#eceff1; color:#9aa0aa;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
    border:2px solid #eceff1;
}
.wd-step-label { font-size:9.5px; font-weight:700; text-align:center; color:var(--color-text-faint); line-height:1.2; text-transform:uppercase; letter-spacing:.02em; }
.wd-step-done .wd-step-dot { background:var(--color-success); border-color:var(--color-success); color:#fff; }
.wd-step-done .wd-step-label { color:var(--color-success); }
.wd-step-next .wd-step-dot { border-color:var(--color-primary); color:var(--color-primary); background:#fff; }
.wd-step-next .wd-step-label { color:var(--color-text); }
.wd-step-connector { flex:1; height:2px; background:#eceff1; margin-top:13px; }
.wd-step-connector-done { background:var(--color-success); }
.wd-progress-cta {
    width:100%; padding:14px; border:none; border-radius:var(--radius-lg); background:var(--color-primary); color:#fff;
    font-weight:800; font-size:14px; letter-spacing:.02em; cursor:pointer; transition:background .12s ease;
}
.wd-progress-cta:disabled { opacity:.6; }
.wd-progress-cta:hover:not(:disabled) { background:var(--color-primary-hover); }

/* ==========================================================
   Tracking (tracking.php, tracking_detail.php)
   ========================================================== */
.tk-timeline { display:flex; flex-direction:column; }
.tk-timeline-row { display:flex; gap:12px; padding-bottom:18px; position:relative; }
.tk-timeline-row:not(:last-child)::before {
    content:''; position:absolute; left:5px; top:16px; bottom:0; width:2px; background:#eceff1;
}
.tk-timeline-dot {
    width:12px; height:12px; border-radius:50%; margin-top:3px; flex-shrink:0;
    box-shadow:0 0 0 3px #fff; z-index:1;
}
.tk-timeline-body { flex:1; min-width:0; }
.tk-timeline-status { font-weight:700; font-size:14px; color:var(--color-text); }
.tk-timeline-time { font-size:12.5px; color:var(--color-text-muted); margin-top:1px; }
.tk-timeline-location { font-size:13px; color:#4a4f57; margin-top:3px; }
.tk-map-tooltip {
    font-size:11px !important; font-weight:700; padding:3px 7px !important;
    border-radius:6px !important; box-shadow:0 1px 4px rgba(0,0,0,.2) !important;
}

/* ==========================================================
   Driver app — mobile bottom tab bar
   Hidden by default (desktop); swaps in for .sidebar.driver-role at the
   mobile breakpoint below. See includes/sidebar.php for the markup.
   ========================================================== */
.driver-tabbar { display:none; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 820px) {
    .app-shell { flex-direction:column; }
    .sidebar { width:100%; height:auto; position:relative; flex-direction:row; flex-wrap:wrap; padding:12px; align-items:center; overflow-y:visible; }
    .sidebar .brand { padding:6px 10px; width:100%; }
    .sidebar a { padding:8px 12px; border-left:none; border-radius:6px; }
    .sidebar a.active { border-left:none; }
    .sidebar-spacer { display:none; }
    .sidebar-user { display:none; }
    .content { padding:20px; margin-left:0; }
    .form-card { padding:20px; }

    /* Nav group needs its own full-width row here — the sidebar itself is a
       wrapping row of links at this width, and a dropdown group can't sit
       inline in the middle of that the way a single link can. */
    .nav-group { width:100%; }
    .nav-group-toggle { padding:8px 12px; border-left:none; border-radius:6px; }
    .nav-group-toggle.active { border-left:none; }
    .nav-submenu { background:none; }
    .nav-submenu a { padding:8px 12px 8px 28px; border-radius:6px; }

    /* A driver on a phone gets a proper app-style bottom tab bar instead of
       the desktop sidebar (which would otherwise wrap into a messy row of
       text links at this width — fine for admin/manager, not for a driver
       who lives in this app all day on their phone). */
    .sidebar.driver-role { display:none; }
    .driver-tabbar {
        display:flex;
        position:fixed; left:0; right:0; bottom:0; z-index:40;
        background:#16213a;
        border-top:1px solid rgba(255,255,255,.08);
        padding:6px 2px calc(6px + env(safe-area-inset-bottom));
        justify-content:space-around;
        box-shadow:0 -2px 10px rgba(0,0,0,.12);
    }
    .driver-tab {
        flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
        color:#8891a6; text-decoration:none; font-size:10.5px; font-weight:700;
        padding:5px 2px 4px; border-radius:var(--radius-md); max-width:88px; margin:0 auto;
    }
    .driver-tab-icon { font-size:19px; line-height:1; position:relative; display:inline-block; }
    .driver-tab.active { color:#fff; background:rgba(255,255,255,.08); }
    .badge-alert-tab {
        position:absolute; top:-7px; right:-11px; background:var(--color-danger); color:#fff;
        font-size:9px; font-weight:800; min-width:15px; height:15px; border-radius:var(--radius-md);
        align-items:center; justify-content:center; padding:0 3px; line-height:1;
    }
    /* Keep page content from being hidden behind the fixed tab bar. */
    body:has(.driver-tabbar) .content { padding-bottom: 84px; }
}