/* ─────────────────────────────────────────────
   AutoDrive Web App — Stylesheet
   ───────────────────────────────────────────── */

/* ── Login ─────────────────────────────────── */

.online-login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--ad-canvas, #F5F1E8);
    position: relative;
    overflow: hidden;
}

.online-login-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(242, 163, 51, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 60% at 80% 20%, rgba(51, 133, 224, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.online-login-card {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: 100%;
    margin: 24px;
}

.online-login-card-inner {
    background: var(--ad-surface-solid);
    padding: 40px 36px;
    border-radius: var(--ad-radius-xl);
    box-shadow: var(--ad-shadow-lg);
    border: 1px solid var(--ad-border);
}

.online-login-card-inner img { display: block; margin: 0 auto 24px; height: 40px; width: auto; }

/* Script "Fleet" wordmark — overlaps the bottom half of the AutoDrive
   logo on fleet hosts. Renders only when .online-login-logo.is-fleet
   is on the wrapper. Same treatment in the welcome wizard via
   .adw-logo-wrap.is-fleet below. Uses Pacifico — bold round-stroke
   cursive — loaded from Google Fonts in ad_header(). */
.online-login-logo,
.adw-logo-wrap {
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto 24px;
}
.adw-logo-wrap { margin-bottom: 20px; }
.online-login-logo img,
.adw-logo-wrap img {
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: middle;
    /* Bumped so the AutoDrive wordmark stays the dominant element with
       the script "Fleet" reading as a subordinate tag underneath. */
    height: 64px !important;
}
.online-login-logo-fleet,
.adw-logo-fleet {
    position: absolute;
    left: 55%;
    /* Offset down from the logo and a touch to the right of center so the
       script reads as a signature-style tag rather than a perfectly
       centered subtitle. Sized smaller than the wordmark so the logo stays
       the dominant element. */
    bottom: -0.5rem;
    transform: translateX(-25%) rotate(-6deg);
    font-family: "Pacifico", "Lobster", "Snell Roundhand", "Brush Script MT", cursive;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    color: #1a1a1a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    pointer-events: none;
    white-space: nowrap;
}

/* About page — centered content sitting directly on the page
   background (no cards). Mirrors the macOS About-window feel.
   The double-class selector wins against `.online-page { display: block }`
   which is declared later in this file. */
.online-page.online-about {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px 64px;
}
.online-about-inner {
    max-width: 560px;
    width: 100%;
    text-align: center;
}
.online-about-logo {
    display: block;
    height: 72px;
    width: auto;
    margin: 0 auto 18px;
}
.online-about-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ad-text-dark);
}
.online-about-version {
    margin: 0 0 18px;
    color: var(--ad-text-secondary);
    font-variant-numeric: tabular-nums;
}
.online-about-tagline {
    color: var(--ad-text-secondary);
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 460px;
}
.online-about-stores {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto 28px;
    max-width: 360px;
}
.online-about-store {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--ad-border);
    background: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    color: var(--ad-text-dark);
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.online-about-store:hover {
    border-color: var(--ad-orange);
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}
.online-about-store i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--ad-orange);
}
.online-about-store-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}
.online-about-store-meta small {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ad-text-tertiary);
}
.online-about-store-meta strong {
    font-size: 1rem;
    font-weight: 600;
}
.online-about-store-meta em {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--ad-text-secondary);
    margin-top: 2px;
}
.online-about-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    color: var(--ad-text-tertiary);
    font-size: 0.85rem;
    margin-bottom: 22px;
}
.online-about-links a {
    color: var(--ad-text-secondary);
    text-decoration: none;
}
.online-about-links a:hover { color: var(--ad-orange); }
.online-about-copy {
    color: var(--ad-text-tertiary);
    font-size: 0.78rem;
    margin: 0;
    line-height: 1.5;
}

.online-login-card-inner h2 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 4px;
    color: var(--ad-text-dark);
}

.online-login-card-inner > p {
    color: var(--ad-text-secondary);
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 28px;
}

.online-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ad-red-light);
    color: var(--ad-red);
    padding: 10px 14px;
    border-radius: var(--ad-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 16px;
    border: 1px solid rgba(230, 71, 61, 0.15);
}

.online-error i { width: 22px; height: 22px; flex: 0 0 auto; flex-shrink: 0; }

.online-success {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ad-green-light);
    color: var(--ad-green);
    padding: 10px 14px;
    border-radius: var(--ad-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 16px;
    border: 1px solid rgba(77, 192, 102, 0.15);
}

.online-auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
    font-size: 0.8125rem;
}

.online-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ad-text-secondary);
    cursor: pointer;
}

.online-remember input[type="checkbox"] { accent-color: var(--ad-orange); }

.online-auth-options a {
    color: var(--ad-orange);
    text-decoration: none;
    font-weight: 500;
}

.online-auth-options a:hover { text-decoration: underline; }

.online-auth-submit {
    width: 100%;
    margin-top: 4px;
    padding: 12px;
}

.online-auth-divider {
    text-align: center;
    position: relative;
    margin: 20px 0;
}

.online-auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ad-border);
}

.online-auth-divider span {
    background: var(--ad-surface-solid);
    padding: 0 12px;
    position: relative;
    font-size: 0.75rem;
    color: var(--ad-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.online-auth-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.online-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border-radius: var(--ad-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--ad-surface-solid);
    border: 1px solid var(--ad-border-strong);
    color: var(--ad-text-primary);
    cursor: pointer;
    transition: all var(--ad-transition-fast);
}

.online-social-btn:hover { background: var(--ad-surface-hover); }
.online-social-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.online-social-btn i { width: 22px; height: 22px; flex: 0 0 auto; }

.online-auth-links {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8125rem;
    color: var(--ad-text-secondary);
}

.online-auth-links a {
    color: var(--ad-orange);
    text-decoration: none;
    font-weight: 600;
}

.online-auth-links a:hover { text-decoration: underline; }

.ad-password-wrap {
    position: relative;
}

.ad-password-wrap .ad-input { padding-right: 56px; }

.ad-password-wrap .ad-btn-text {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ad-orange);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
}

/* ── Form Groups ──────────────────────────────── */

.ad-form-group {
    margin-bottom: 14px;
}

.ad-form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ad-text-primary);
    margin-bottom: 6px;
}

.ad-form-group select.ad-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6L0 0h10L5 6z' fill='%23808085'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* iOS Safari zooms the viewport on focus when a form control's
 * computed font-size is below 16px. That double-whammy (zoom +
 * native picker) made the category picker feel misaligned. Force
 * 16px on mobile for selects + text inputs in form groups. */
@media (max-width: 720px) {
    .ad-form-group .ad-input,
    .ad-form-group select.ad-input,
    .ad-form-group textarea.ad-input { font-size: 16px; }
}

/* ── Mobile select bottom-sheet ────────────────
 * See online/js/mselect.js. Selects marked with
 * data-ad-mobile-sheet are paired with an .ad-mselect-trigger
 * button; on mobile the native select is visually hidden and the
 * trigger opens a bottom sheet of options. On desktop the
 * trigger is hidden and the native <select> renders normally.
 * ──────────────────────────────────────────────── */

.ad-mselect-trigger { display: none; }
.ad-mselect-source { /* native select visible on desktop */ }

@media (max-width: 720px) {
    select.ad-mselect-source {
        /* Hide the native select without taking it out of the
         * form — keeping it focusable-by-script and letting
         * validation (required, setCustomValidity, etc.) still
         * work against it. */
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        border: 0;
        opacity: 0;
        pointer-events: none;
    }
    .ad-mselect-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        cursor: pointer;
        background-image: none;
        padding-right: 14px;
    }
    .ad-mselect-trigger-label {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--ad-text-primary);
        font-size: 16px;
    }
    .ad-mselect-trigger-label.is-placeholder { color: var(--ad-text-tertiary); }
    .ad-mselect-trigger-chevron {
        color: var(--ad-text-tertiary);
        font-size: 16px;
        margin-left: 8px;
    }
}

.ad-mselect-sheet-wrap {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.ad-mselect-sheet-wrap[hidden] { display: none; }
.ad-mselect-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.ad-mselect-sheet-wrap.is-open .ad-mselect-sheet-backdrop { opacity: 1; }
.ad-mselect-sheet {
    position: relative;
    background: var(--ad-surface-solid, #fff);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.24);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.ad-mselect-sheet-wrap.is-open .ad-mselect-sheet { transform: translateY(0); }
.ad-mselect-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ad-border);
}
.ad-mselect-sheet-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ad-text-dark);
}
.ad-mselect-sheet-close {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--ad-text-tertiary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--ad-radius-sm);
}
.ad-mselect-sheet-close:hover { background: var(--ad-cream-dark); color: var(--ad-text-dark); }
.ad-mselect-sheet-list {
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}
.ad-mselect-sheet-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 14px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    color: var(--ad-text-primary);
    border-radius: var(--ad-radius-sm);
}
.ad-mselect-sheet-item:hover { background: var(--ad-cream-dark); }
.ad-mselect-sheet-item.is-active {
    background: rgba(242,163,51,0.12);
    color: var(--ad-orange-dark, var(--ad-orange));
    font-weight: 600;
}
.ad-mselect-sheet-item:disabled { opacity: 0.5; cursor: not-allowed; }

body.ad-mselect-lock { overflow: hidden; }

/* ── Nav Style Toggle ──────────────────────────
   The SPA renders the sidebar AND the menu bar together; the body
   class (`nav-sidebar` | `nav-menubar`) decides which is visible.
   Set by app.js from currentUser.nav_style; defaults to `nav-menubar`
   so a fresh page load matches the default pref. */

body.nav-menubar .online-sidebar,
body.nav-menubar .online-sidebar-backdrop,
body.nav-menubar .online-topbar .online-topbar-menu { display: none !important; }

body.nav-sidebar .online-menubar { display: none !important; }

/* Default before app.js flips the class — keep the menu bar visible
   and the sidebar hidden so there's no sidebar flash on first paint. */
body:not(.nav-sidebar):not(.nav-menubar) .online-sidebar,
body:not(.nav-sidebar):not(.nav-menubar) .online-sidebar-backdrop { display: none; }

/* New Tab chromeless mode — hide sidebar, menubar, topbar, and
   any sidebar backdrop so fresh tabs show only the quick-action
   cards. Scoped to `body.newtab-mode`, which app.js toggles on
   showPage('newtab') and strips on any other page.  */
body.newtab-mode .online-sidebar,
body.newtab-mode .online-sidebar-backdrop,
body.newtab-mode .online-menubar,
body.newtab-mode .online-topbar { display: none !important; }
body.newtab-mode .online-main { margin-left: 0 !important; padding-top: 0 !important; }

/* Mobile: pills scroll horizontally on one row (no wrap, no clipping
   — dropdowns escape the scroll container by going position: fixed
   below the bar, spanning full width so menus never run off-screen
   on narrow viewports). */
@media (max-width: 768px) {
    body.nav-menubar .online-menubar { padding: 0 8px; }
    body.nav-menubar .online-menubar-items {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
    }
    body.nav-menubar .online-menubar-items::-webkit-scrollbar { display: none; }
    body.nav-menubar .online-menubar-trigger { padding: 8px 14px; }
    body.nav-menubar .online-menubar-dropdown {
        position: fixed;
        top: 52px;
        left: 8px;
        right: 8px;
        min-width: 0;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    body.nav-menubar .online-menubar-dropdown a {
        justify-content: center;
        padding: 12px 14px;
    }
}

/* When the menu bar is active, the topbar starts at x=0 (no sidebar
   offset) and sits below the menu bar. Main content loses its
   sidebar margin. */
body.nav-menubar .online-topbar { left: 0; top: 52px; }
body.nav-menubar .online-main {
    margin-left: 0;
    width: 100%;
    padding-top: calc(52px + 56px + 32px); /* menu bar + topbar + gap */
}

/* ── Menu Bar (macOS-style horizontal nav) ───── */

.online-menubar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: var(--ad-header-dark);
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 60;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.online-menubar-logo {
    display: flex;
    align-items: center;
    padding: 0 12px 0 4px;
    margin-right: 6px;
}
.online-menubar-logo img { height: 36px; width: auto; display: block; }

.online-menubar-items {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
    min-width: 0;
    flex-wrap: wrap;
}

.online-menubar-item { position: relative; flex-shrink: 0; }

.online-menubar-trigger {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--ad-transition-fast), color var(--ad-transition-fast);
}
.online-menubar-trigger:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.online-menubar-trigger i { width: 14px; height: 14px; opacity: 0.85; }
/* Custom inline-SVG caret. Lucide's chevron-down at 14px reads as
   chunky against the 13px label — a 10px hand-drawn V on 1.75px
   stroke matches the type weight better and rotates 180° when the
   menu is open, so the open/closed affordance is clearer than the
   prior static chevron. */
.online-menubar-caret {
    opacity: 0.7;
    transition: transform 0.18s ease, opacity 0.18s ease;
    flex-shrink: 0;
    margin-left: 2px;
}
.online-menubar-trigger:hover .online-menubar-caret { opacity: 1; }
.online-menubar-item.open .online-menubar-caret { transform: rotate(180deg); }

.online-menubar-item.open .online-menubar-trigger,
.online-menubar-item.has-active .online-menubar-trigger {
    background: var(--ad-orange);
    color: #fff;
}

.online-menubar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--ad-surface-solid, #fff);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-md);
    padding: 6px;
    box-shadow: var(--ad-shadow-lg);
    z-index: 70;
}
.online-menubar-item.open .online-menubar-dropdown { display: flex; flex-direction: column; }

.online-menubar-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--ad-radius-sm);
    color: var(--ad-text-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.online-menubar-dropdown a:hover { background: rgba(0, 0, 0, 0.05); }
.online-menubar-dropdown a.active { background: rgba(242, 163, 51, 0.12); color: var(--ad-text-dark); }
.online-menubar-dropdown a i { width: 15px; height: 15px; color: var(--ad-text-secondary); }
.online-menubar-dropdown a i:last-child { width: 11px; height: 11px; margin-left: auto; flex-shrink: 0; }
.online-menubar-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 4px 8px;
}
/* Dividers exist in the data model but are only rendered visually in the
   horizontal menubar dropdown — the vertical sidebar already has its own
   section labels separating groups, so we hide them there. */
.online-nav-divider { display: none; }

/* ── Nested submenu (e.g. Account → Data Management) ──
   Flyout that opens to the right of its parent dropdown row. */
.online-menubar-subitem { position: relative; }
.online-menubar-subtrigger { cursor: pointer; }
.online-menubar-subcaret {
    margin-left: auto;
    transition: transform 0.15s ease;
    opacity: 0.7;
}
.online-menubar-subitem.open .online-menubar-subcaret { transform: rotate(90deg); opacity: 1; }
.online-menubar-submenu {
    display: none;
    position: absolute;
    top: -6px;
    left: calc(100% + 4px);
    min-width: 200px;
    background: var(--ad-surface-solid, #fff);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-md);
    padding: 6px;
    box-shadow: var(--ad-shadow-lg);
    z-index: 71;
}
.online-menubar-subitem.open .online-menubar-submenu,
.online-menubar-subitem:hover .online-menubar-submenu { display: flex; flex-direction: column; }
.online-menubar-subitem:hover .online-menubar-subcaret { transform: rotate(90deg); opacity: 1; }
.online-menubar-submenu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--ad-radius-sm);
    color: var(--ad-text-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.online-menubar-submenu a:hover { background: rgba(0, 0, 0, 0.05); }
.online-menubar-submenu a.active { background: rgba(242, 163, 51, 0.12); color: var(--ad-text-dark); }
.online-menubar-submenu a i { width: 15px; height: 15px; color: var(--ad-text-secondary); }

/* ── Layout ────────────────────────────────────── */

.online-sidebar {
    width: 240px;
    background: var(--ad-header-dark);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: width var(--ad-transition);
}

/* ── Collapsed sidebar ────────────────────── */

.online-sidebar.collapsed { width: 64px; overflow: hidden; }
.online-sidebar.collapsed .online-sidebar-logo span,
.online-sidebar.collapsed .online-sidebar-search input,
.online-sidebar.collapsed .online-sidebar-collapse,
.online-sidebar.collapsed .online-nav-label,
.online-sidebar.collapsed .online-sidebar-nav a span { display: none; }
.online-sidebar.collapsed .online-sidebar-header { justify-content: center; padding: 16px 0 0; }
.online-sidebar.collapsed .online-sidebar-logo { justify-content: center; }
.online-sidebar.collapsed .online-sidebar-search { justify-content: center; padding: 8px; margin: 12px 4px 4px; }
.online-sidebar.collapsed .online-sidebar-nav a { justify-content: center; padding: 10px; margin: 1px 4px; }

.online-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 0;
}

.online-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ad-text-light);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.online-sidebar-logo img {
    height: 22px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

.online-sidebar-collapse {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all var(--ad-transition-fast);
}

.online-sidebar-collapse:hover { color: rgba(255, 255, 255, 0.7); }

.online-sidebar-collapse i { width: 22px; height: 22px; flex: 0 0 auto; }

/* Sidebar search */
.online-sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 12px 8px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--ad-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all var(--ad-transition-fast);
}

.online-sidebar-search:focus-within {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.online-sidebar-search i {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.online-sidebar-search input {
    background: none;
    border: none;
    color: var(--ad-text-light);
    font-size: 0.8125rem;
    width: 100%;
    outline: none;
}

.online-sidebar-search input::placeholder { color: rgba(255, 255, 255, 0.3); }

/* Sidebar nav */
.online-sidebar-nav {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.online-sidebar-nav::-webkit-scrollbar { width: 6px; }
.online-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.online-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
.online-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.online-nav-section {
    margin-bottom: 4px;
}

.online-nav-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.25);
    transition: color 120ms ease;
}
.online-nav-label:hover { color: rgba(255, 255, 255, 0.45); }
.online-nav-label > span { flex: 1; }
.online-nav-label-caret {
    width: 12px;
    height: 12px;
    margin-left: 6px;
    opacity: 0.6;
    transition: transform 160ms ease;
}
.online-nav-section.collapsed .online-nav-label-caret {
    transform: rotate(-90deg);
}
.online-nav-section.collapsed > *:not(.online-nav-label) {
    display: none !important;
}
/* Collapsed sidebar (icon-only) hides labels entirely, so the collapsible
   section UI is irrelevant — disable it to keep all icons visible. */
.online-sidebar.collapsed .online-nav-section.collapsed > *:not(.online-nav-label) {
    display: revert !important;
}

.online-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 1px 8px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--ad-transition-fast);
    border-radius: var(--ad-radius-sm);
}

.online-sidebar-nav a i { width: 18px; height: 18px; flex-shrink: 0; }
.online-sidebar-nav a i:last-child { width: 12px; height: 12px; margin-left: auto; }

.online-sidebar-nav a:hover {
    color: var(--ad-text-light);
    background: rgba(255, 255, 255, 0.06);
}

.online-sidebar-nav a.active {
    color: var(--ad-text-light);
    background: rgba(255, 255, 255, 0.1);
}

/* Expandable parent in the sidebar (e.g. Data Management).
   Children stay hidden until the parent has `.open`. */
.online-nav-group-caret {
    margin-left: auto;
    transition: transform 0.15s ease;
}
.online-nav-group.open .online-nav-group-caret { transform: rotate(180deg); }
.online-nav-group-children { display: none; }
.online-nav-group.open .online-nav-group-children { display: block; }
.online-nav-group-children a { padding-left: 36px; }
.online-sidebar.collapsed .online-nav-group-children a { padding-left: 12px; }

/* Sidebar footer */
.online-sidebar-footer {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.online-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--ad-radius-sm);
    transition: all var(--ad-transition-fast);
    margin-bottom: 4px;
}

.online-sidebar-user:hover { background: rgba(255, 255, 255, 0.06); }

.online-sidebar-user .ad-avatar {
    background: var(--ad-orange);
    font-size: 0.6875rem;
}

.online-sidebar-signout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    font-size: 0.8125rem;
    border-radius: var(--ad-radius-sm);
    transition: all var(--ad-transition-fast);
}

.online-sidebar-signout i { width: 22px; height: 22px; flex: 0 0 auto; }

.online-sidebar-signout:hover { color: var(--ad-red); background: rgba(230, 71, 61, 0.08); }

/* ── Top Header Bar ──────────────────────────── */

.online-topbar {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    height: 56px;
    background: var(--ad-surface-solid);
    border-bottom: 1px solid var(--ad-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 40;
    transition: left var(--ad-transition);
}

.online-sidebar.collapsed ~ .online-topbar { left: 64px; }
.online-sidebar.collapsed ~ .online-topbar .online-topbar-menu { display: flex; }

.online-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.online-topbar-menu {
    display: none;
    background: none;
    border: none;
    color: var(--ad-text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--ad-radius-sm);
    transition: all var(--ad-transition-fast);
}

.online-topbar-menu:hover { background: var(--ad-cream-dark); color: var(--ad-text-dark); }
.online-topbar-menu i { width: 18px; height: 18px; }

.online-topbar-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ad-text-dark);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.online-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
    margin: 0 16px;
}

.online-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.online-topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: var(--ad-radius-full);
    transition: all var(--ad-transition-fast);
    color: var(--ad-text-primary);
}

/* ──────────────────────────────────────────────
 * Date-range switcher
 * Sits to the left of the group switcher. Pill-shaped trigger shows
 * the active preset (or 'YYYY-MM-DD → YYYY-MM-DD' for custom);
 * clicking opens a preset list with a custom-range option at the end.
 * ────────────────────────────────────────────── */

.online-date-range-switcher {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.online-date-range-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--ad-cream-dark, #efe8d7);
    color: var(--ad-text-primary);
    border: 1px solid transparent;
    border-radius: var(--ad-radius-full);
    cursor: pointer;
    font: inherit;
    transition: all var(--ad-transition-fast);
    max-width: 260px;
}
.online-date-range-trigger:hover { border-color: var(--ad-orange); }
.online-date-range-trigger i     { width: 14px; height: 14px; }

.online-date-range-label {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-date-range-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--ad-cream-dark);
    border-radius: var(--ad-radius-md, 10px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 1000;
}
.online-date-range-menu[hidden] { display: none; }

.online-date-range-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    border-radius: var(--ad-radius-sm);
    color: var(--ad-text-primary);
}
.online-date-range-item:hover     { background: var(--ad-cream-dark); }
.online-date-range-item.is-active { background: rgba(242,163,51,0.12); font-weight: 600; }

/* ──────────────────────────────────────────────
 * Account-group switcher (Phase 7a)
 * Sits between the page-actions area and the profile button. Pill-
 * shaped trigger with name + type, dropdown opens below.
 * ────────────────────────────────────────────── */

.online-group-switcher {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.online-group-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--ad-cream-dark, #efe8d7);
    color: var(--ad-text-primary);
    border: 1px solid transparent;
    border-radius: var(--ad-radius-full);
    cursor: pointer;
    font: inherit;
    transition: all var(--ad-transition-fast);
    max-width: 220px;
}
.online-group-trigger:hover   { border-color: var(--ad-orange); }
.online-group-trigger i       { width: 14px; height: 14px; }

/* Users icon shown only on mobile (inside .online-group-trigger).
 * Keep the desktop trigger text-only; the icon takes over below
 * 720px where the group name is hidden. */
.online-group-icon { display: none; }

.online-group-name {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.online-group-type {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--ad-text-tertiary);
    padding: 2px 6px;
    border-radius: var(--ad-radius-sm);
    background: rgba(242,163,51,0.15);
}

.online-group-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--ad-cream-dark);
    border-radius: var(--ad-radius-md, 10px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 1000;
}
.online-group-menu[hidden] { display: none; }

.online-group-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    border-radius: var(--ad-radius-sm);
    color: var(--ad-text-primary);
}
.online-group-menu-item:hover     { background: var(--ad-cream-dark); }
.online-group-menu-item.is-active { background: rgba(242,163,51,0.12); font-weight: 600; }

.online-group-menu-name { font-size: 0.875rem; }
.online-group-menu-type { font-size: 0.6875rem; color: var(--ad-text-tertiary); }

.online-group-menu-sep  { height: 1px; background: var(--ad-cream-dark); margin: 6px 4px; }

.online-group-menu-manage {
    display: block; width: 100%;
    background: none; border: 0; cursor: pointer; font: inherit;
    text-align: left;
    padding: 10px 12px;
    font-size: 0.8125rem;
    color: var(--ad-orange);
    border-radius: var(--ad-radius-sm);
}
.online-group-menu-manage:hover { background: var(--ad-cream-dark); }

.online-topbar-user:hover { background: var(--ad-cream-dark); }

.online-topbar-user .ad-avatar {
    background: var(--ad-orange);
    font-size: 0.625rem;
}

.online-topbar-username {
    font-size: 0.8125rem;
    font-weight: 600;
}

.online-topbar-signout {
    background: none;
    border: none;
    color: var(--ad-text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--ad-radius-sm);
    transition: all var(--ad-transition-fast);
}

.online-topbar-signout:hover { color: var(--ad-red); background: var(--ad-red-light); }
.online-topbar-signout i { width: 22px; height: 22px; flex: 0 0 auto; }

/* ── Main Content ────────────────────────────── */

.online-main {
    margin-left: 240px;
    width: calc(100% - 240px);
    padding: 24px 36px;
    padding-top: calc(56px + 40px); /* topbar height + breathing room */
    background: var(--ad-cream);
    min-height: 100vh;
    transition: margin-left var(--ad-transition), width var(--ad-transition);
    box-sizing: border-box;
}

.online-sidebar.collapsed ~ .online-main { margin-left: 64px; width: calc(100% - 64px); }

.online-page { display: block; }

/* ── Page Header (action buttons row below topbar) ──── */

.ad-page-header {
    margin-bottom: 28px;
}

/* Filter-style page header (gas, traffic) */
.ad-page-header[style*="flex-wrap"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--ad-space-md);
    gap: 12px;
    flex-wrap: wrap;
}

.ad-page-header h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ad-text-dark);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.ad-page-header p {
    color: var(--ad-text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

/* Primary action buttons inside page-header are duplicated in topbar — hide them */
.ad-page-header > .ad-btn-primary {
    display: none;
}

/* Bare <h1> inside a page (e.g., dashboard) gets the same admin-style treatment */
.online-page > h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ad-text-dark);
    margin: 0 0 22px 0;
    letter-spacing: -0.02em;
}

/* ── Vehicle / Driver Cards ───────────────── */

.vehicle-card, .driver-card {
    background: var(--ad-surface);
    border-radius: var(--ad-radius);
    padding: 20px;
    box-shadow: var(--ad-shadow-xs);
    border: 1px solid var(--ad-border);
    position: relative;
    transition: all var(--ad-transition);
}

.vehicle-card:hover, .driver-card:hover {
    box-shadow: var(--ad-shadow-sm);
}

.vehicle-card h3, .driver-card h3 {
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--ad-text-dark);
}

.vehicle-card .vehicle-subtitle, .driver-card .vehicle-subtitle {
    color: var(--ad-text-secondary);
    font-size: 0.8125rem;
    margin-bottom: 12px;
}

.vehicle-card .vehicle-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--ad-text-secondary);
}

.vehicle-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--ad-transition-fast);
}

.vehicle-card:hover .vehicle-card-actions,
.driver-card:hover .vehicle-card-actions { opacity: 1; }

/* ── Icon Buttons ─────────────────────────── */

.ad-btn-icon {
    background: var(--ad-surface-solid);
    border: 1px solid var(--ad-border-strong);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: var(--ad-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ad-transition-fast);
}

.ad-btn-icon i { width: 14px; height: 14px; }

.ad-btn-icon:hover { background: var(--ad-cream-dark); color: var(--ad-text-dark); box-shadow: var(--ad-shadow-xs); }

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

/* ── Table Actions Column ─────────────────── */

.ad-table-actions {
    text-align: right;
    white-space: nowrap;
}

.ad-table-actions .ad-btn-icon { border: none; }

.ad-empty {
    text-align: center;
    color: var(--ad-text-secondary);
    padding: 24px !important;
}

/* ── Modal ────────────────────────────────── */

.ad-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 24px;
}

.ad-modal {
    background: var(--ad-surface-solid);
    border-radius: var(--ad-radius-lg);
    box-shadow: var(--ad-shadow-lg);
    border: none;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: ad-modal-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

@keyframes ad-modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.ad-modal.ad-modal-sm { max-width: 400px; }

.ad-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--ad-header-dark);
}

.ad-modal-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ad-text-light);
    margin: 0;
}

.ad-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all var(--ad-transition-fast);
}

.ad-modal-close:hover { color: var(--ad-text-light); background: rgba(255, 255, 255, 0.1); }

.ad-modal-close i { width: 18px; height: 18px; }

.ad-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.ad-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--ad-border);
}

.ad-modal-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ad-red-light);
    color: var(--ad-red);
    padding: 10px 14px;
    border-radius: var(--ad-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 16px;
    border: 1px solid rgba(230, 71, 61, 0.15);
}

/* ── Pill selector (role / type toggles in modals) ── */

.ad-pill-select {
    display: flex;
    gap: 6px;
}

.ad-pill-option {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--ad-border-strong);
    border-radius: var(--ad-radius-sm);
    background: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ad-text-primary);
    transition: border-color var(--ad-transition-fast), background var(--ad-transition-fast), color var(--ad-transition-fast);
    text-align: center;
}

.ad-pill-option:hover {
    border-color: var(--ad-orange);
    color: var(--ad-orange-dark);
}

.ad-pill-option.active {
    border-color: var(--ad-orange);
    background: var(--ad-orange-light);
    color: var(--ad-orange-dark);
}

/* ── Form Layout ──────────────────────────── */

.ad-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.ad-form-row > * { flex: 1; min-width: 0; }

/* ── Dashboard (widget grid) ────────────────
   See online/js/dashboard.js — every tile renders into this
   grid. Tile sizes: sm (1 col), md (2 col). Tall tiles (charts +
   tables) reserve a 280px min-height so they don't jump when
   Chart.js lands async. Drag-and-drop uses HTML5 dataTransfer;
   .dash-drop-before/after highlight the insertion point. */

.dash-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.dash-page-header > div:first-child { flex: 1 1 50%; max-width: 50%; min-width: 0; }
.dash-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 4px;
}

.dash-tile {
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    box-shadow: var(--ad-shadow-xs);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    transition: box-shadow 0.15s, transform 0.15s;
    position: relative;
}

.dash-tile-sm { grid-column: span 1; }
.dash-tile-md { grid-column: span 2; }
.dash-tile-tall { min-height: 280px; }

.dash-tile:hover { box-shadow: var(--ad-shadow-sm); }
.dash-tile-dragging { opacity: 0.4; }
/* Floating clone that follows the cursor during a drag. Positioned
   fixed by dashboard.js; the box-shadow + slight tilt sells the lift. */
.dash-tile-ghost {
    box-shadow: var(--ad-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.18));
    transform: rotate(1.5deg) scale(1.02);
    opacity: 0.95;
    cursor: grabbing;
}
.dash-tile.dash-drop-before { box-shadow: -3px 0 0 0 var(--ad-orange); }
.dash-tile.dash-drop-after  { box-shadow:  3px 0 0 0 var(--ad-orange); }

.dash-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: grab;
}
.dash-tile-head:active { cursor: grabbing; }

.dash-tile-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ad-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 0;
}
.dash-tile-icon { color: var(--ad-orange); flex-shrink: 0; }
.dash-tile-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-tile-actions { display: flex; align-items: center; gap: 2px; }
.dash-tile-btn,
.dash-tile-grip {
    background: transparent;
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--ad-text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    font-size: 16px;
    line-height: 1;
}
.dash-tile-grip { cursor: grab; letter-spacing: -3px; }
.dash-tile-grip:active { cursor: grabbing; }
/* Head is the drag handle (pointer-based DnD in dashboard.js). The
   hide × button inside it keeps its default cursor via its own rule. */
.dash-tile-head { cursor: grab; }
.dash-tile-head:active { cursor: grabbing; }
.dash-tile:hover .dash-tile-btn,
.dash-tile:hover .dash-tile-grip { opacity: 1; }
/* Tour spotlight: the click blocker stops the user from hovering the
   tile, so the hide × and grip stay invisible during the
   "Rearrange and remove" step. Reveal them whenever the head (or
   the tile itself) is the tour target. */
.dash-tile-head.ad-tour-highlight .dash-tile-btn,
.dash-tile-head.ad-tour-highlight .dash-tile-grip,
.dash-tile.ad-tour-highlight .dash-tile-btn,
.dash-tile.ad-tour-highlight .dash-tile-grip { opacity: 1; }
.dash-tile-btn:hover { background: var(--ad-surface-hover, var(--ad-cream-dark)); color: var(--ad-red, #c62828); }

.dash-tile-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* KPI body */
.dash-kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ad-text-dark);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.dash-kpi-value.pos { color: var(--ad-green, #1F7A46); }
.dash-kpi-unit { font-size: 0.875rem; font-weight: 500; color: var(--ad-text-secondary); }
.dash-kpi-sub {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--ad-text-secondary);
}

/* Chart body */
.dash-chart-wrap { flex: 1; min-height: 200px; position: relative; }
.dash-chart-wrap canvas { max-width: 100%; }

/* Tables in tiles */
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.dash-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ad-text-secondary);
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--ad-border);
}
.dash-table td {
    padding: 8px 8px 8px 0;
    border-bottom: 1px solid var(--ad-border);
    vertical-align: middle;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-empty-row {
    text-align: center;
    color: var(--ad-text-secondary);
    padding: 24px 8px !important;
    font-style: italic;
}
.dash-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 120px;
    color: var(--ad-text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
}

/* Records widget body */
.dash-records {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 4px;
}
.dash-record { min-width: 0; }
.dash-record-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ad-text-tertiary);
    margin-bottom: 4px;
}
.dash-record-value {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--ad-text-dark);
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-record-sub {
    font-size: 0.6875rem;
    color: var(--ad-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add-widget modal */
.dash-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 21, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    z-index: 1000;
    overflow-y: auto;
    animation: dash-fade-in 0.12s ease-out;
}
.dash-modal-overlay[hidden] { display: none; }
body.dash-modal-open { overflow: hidden; }

/* Themed prompts (adAlert / adConfirm / adPrompt) must overlay
 * every other modal — they're often raised *from* an open modal
 * (e.g. "Add purpose" from inside Edit Drive). The base
 * .dash-modal-overlay sits at z-index 1000, while .ad-modal-overlay
 * sits at 10000, so without this override the prompt would render
 * behind the modal that opened it. Center vertically too — the
 * default flex-start alignment looks wrong when the parent modal
 * is centered. */
.ad-prompt-overlay {
    z-index: 20000;
    align-items: center;
    padding: 24px;
}

.dash-modal {
    background: var(--ad-surface);
    border-radius: var(--ad-radius);
    box-shadow: 0 20px 48px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    animation: dash-pop-in 0.14s ease-out;
}
@keyframes dash-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dash-pop-in  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.dash-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--ad-border);
}
.dash-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ad-text-dark);
    margin: 0;
    letter-spacing: -0.01em;
}
.dash-modal-sub {
    font-size: 0.8125rem;
    color: var(--ad-text-secondary);
    margin: 4px 0 0;
}
.dash-modal-close {
    background: transparent;
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--ad-text-secondary);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.dash-modal-close:hover { background: var(--ad-cream-dark, var(--ad-border)); color: var(--ad-text-dark); }

.dash-modal-body {
    padding: 20px 24px 24px;
    overflow-y: auto;
}

.dash-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--ad-border);
}

.dash-picker-empty {
    text-align: center;
    color: var(--ad-text-secondary);
    font-style: italic;
    padding: 24px 8px;
}

.dash-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.dash-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-sm, 6px);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
    font: inherit;
    color: inherit;
}
.dash-picker-item:hover {
    border-color: var(--ad-orange);
    box-shadow: 0 2px 6px rgba(242,163,51,0.15);
}
.dash-picker-item:active { transform: translateY(1px); }
/* Free-plan gate: the picker still lists premium widgets so users can
   see what they'd unlock. Dim them and route clicks to the upgrade
   modal (see dashBindControls in js/dashboard.js). */
.dash-picker-item-locked { opacity: 0.6; }
.dash-picker-item-locked:hover {
    border-color: var(--ad-border);
    box-shadow: none;
}
.dash-picker-item-locked .dash-picker-plus {
    color: var(--ad-text-secondary);
}
.dash-picker-icon {
    color: var(--ad-orange);
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    min-width: 18px;
    text-align: center;
}
.dash-picker-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-picker-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ad-text-dark);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-picker-desc {
    font-size: 0.75rem;
    color: var(--ad-text-secondary);
    line-height: 1.35;
}
.dash-picker-category {
    font-size: 0.625rem;
    color: var(--ad-text-tertiary, var(--ad-text-secondary));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.dash-picker-plus {
    color: var(--ad-text-secondary);
    font-size: 16px;
    font-weight: 700;
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 1280px) {
    .dash-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .dash-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-tile-md { grid-column: span 2; }
    .dash-records { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-tile-sm, .dash-tile-md { grid-column: span 1; }
    .dash-page-header { flex-direction: column; align-items: flex-start; }
    .dash-page-header > div:first-child { max-width: 100%; flex: 1 1 auto; }
}

/* Welcome greeting */
.online-welcome {
    margin-bottom: var(--ad-space-lg);
}

.online-welcome h1 {
    margin-bottom: 4px;
}

.online-welcome p {
    color: var(--ad-text-secondary);
    font-size: 0.9375rem;
}

/* Quick actions */
.online-quick-actions {
    display: flex;
    gap: 12px;
    margin-bottom: var(--ad-space-lg);
}

.online-quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    cursor: pointer;
    transition: all var(--ad-transition);
    text-decoration: none;
    color: var(--ad-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.online-quick-action:hover {
    box-shadow: var(--ad-shadow-sm);
    transform: translateY(-1px);
}

.online-quick-action i { width: 18px; height: 18px; color: var(--ad-orange); }

/* ── Drive Detail ─────────────────────────── */

.dd-map-card {
    background: var(--ad-surface);
    border-radius: var(--ad-radius);
    box-shadow: var(--ad-shadow-sm);
    border: 1px solid var(--ad-border);
    overflow: hidden;
    margin-bottom: 20px;
}

#dd-map { width: 100%; height: 380px; }

/* ── Leaflet stacking context ──────────────────
 * Leaflet's .leaflet-pane defaults to z-index 400 and .leaflet-top /
 * .leaflet-control to 1000, which sits above the mobile sidebar
 * (z-index 200) and backdrop (199), so map tiles and zoom controls
 * bleed over the slide-in menu. Containing them in an isolated
 * stacking context keeps leaflet's internal layering while
 * guaranteeing nothing inside the map paints above the sidebar.
 * ──────────────────────────────────────────────── */
#dd-map,
#drive-map,
#traffic-map,
#gas-map,
#ev-map {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.dd-map-empty {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ad-text-secondary);
    font-size: 0.875rem;
}

/* Leaflet markers */
.dd-marker { position: relative; }
.dd-marker-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dd-marker-start .dd-marker-dot { background: var(--ad-green); }
.dd-marker-end .dd-marker-dot { background: var(--ad-red); }
.dd-marker-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
}

/* Info grid */
.dd-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.dd-card {
    background: var(--ad-surface);
    border-radius: var(--ad-radius);
    box-shadow: var(--ad-shadow-xs);
    border: 1px solid var(--ad-border);
    padding: 20px;
}

.dd-card-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ad-text-secondary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ad-border);
}

/* Route visualization */
.dd-route { display: flex; flex-direction: column; gap: 0; }
.dd-route-point { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; }
.dd-route-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.dd-route-dot-start { background: var(--ad-green); }
.dd-route-dot-end { background: var(--ad-red); }
.dd-route-line { width: 2px; height: 24px; background: var(--ad-divider); margin-left: 6px; }
.dd-route-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ad-text-secondary); }
.dd-route-address { font-size: 0.9375rem; font-weight: 500; color: var(--ad-text-dark); margin-top: 2px; }

/* Detail rows */
.dd-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ad-border); }
.dd-detail-row:last-child { border-bottom: none; }
.dd-detail-label { font-size: 0.8125rem; color: var(--ad-text-secondary); font-weight: 500; }
.dd-detail-value { font-size: 0.875rem; color: var(--ad-text-dark); font-weight: 600; text-align: right; }

/* Stats row */
.dd-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.dd-stat { background: var(--ad-surface); border-radius: var(--ad-radius); box-shadow: var(--ad-shadow-xs); border: 1px solid var(--ad-border); padding: 16px; text-align: center; }
.dd-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--ad-text-dark); line-height: 1.2; letter-spacing: -0.02em; }
.dd-stat-unit { font-size: 0.875rem; font-weight: 500; color: var(--ad-text-secondary); }
.dd-stat-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ad-text-tertiary); margin-top: 6px; }

/* ── Account ──────────────────────────────── */

.ad-account-card {
    background: var(--ad-surface);
    border-radius: var(--ad-radius);
    box-shadow: var(--ad-shadow-sm);
    border: 1px solid var(--ad-border);
    padding: 32px;
    max-width: 500px;
}

.ad-account-card h2 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    color: var(--ad-text-dark);
}

/* ── Toolbar (search + filters + export) ──── */

.ad-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ad-toolbar-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.ad-toolbar-right {
    display: flex;
    gap: 8px;
}

/* ── Pagination ───────────────────────────── */

.ad-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0;
}

.ad-pagination-info {
    font-size: 0.8125rem;
    color: var(--ad-text-secondary);
    margin: 0 8px;
}

/* ── Vehicle Cards v2 ─────────────────────── */

.ad-vehicles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.vehicle-card-v2 {
    background: var(--ad-surface);
    border-radius: var(--ad-radius);
    box-shadow: var(--ad-shadow-xs);
    border: 1px solid var(--ad-border);
    overflow: hidden;
    transition: all var(--ad-transition);
}

.vehicle-card-v2:hover { box-shadow: var(--ad-shadow-sm); }

.vehicle-card-v2-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 8px;
}

.vehicle-card-v2-header h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ad-text-dark);
    margin: 0;
}

.vehicle-card-v2-ymmt {
    font-size: 0.8125rem;
    color: var(--ad-text-secondary);
    margin-top: 2px;
}

.vehicle-card-v2-actions {
    display: flex;
    gap: 4px;
}

.vehicle-card-v2-body { padding: 0 16px 16px; }

.vehicle-card-v2-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

.vehicle-card-v2-field { font-size: 0.8125rem; }

.vehicle-card-v2-field .label {
    color: var(--ad-text-tertiary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    display: block;
}

.vehicle-card-v2-field .value {
    color: var(--ad-text-dark);
    font-weight: 600;
}

/* ── Driver Cards v2 ──────────────────────── */

.ad-drivers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.driver-card-v2 {
    background: #fff;
    border-radius: var(--ad-radius);
    box-shadow: var(--ad-shadow-xs);
    border: 1px solid var(--ad-border);
    padding: 16px;
    transition: all var(--ad-transition);
}

.driver-card-v2:hover { box-shadow: var(--ad-shadow-sm); }

.driver-card-v2-header { display: flex; align-items: center; gap: 12px; }

.driver-card-v2-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ad-header-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.driver-card-v2-info { flex: 1; min-width: 0; }
.driver-card-v2-info h3 { font-size: 1rem; font-weight: 650; color: #2D2D32; margin: 0; }
.driver-card-v2-email { font-size: 0.8125rem; color: #6E6E78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Always show action buttons on driver cards */
.driver-card-v2 .vehicle-card-v2-actions { opacity: 1; }

.driver-card-v2-vehicle {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ad-border);
    font-size: 0.8125rem;
    color: #2D2D32;
}

.driver-card-v2-vehicle .label {
    color: var(--ad-text-tertiary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

.driver-card-v2-details {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.driver-card-v2-detail {
    font-size: 0.8125rem;
    color: #2D2D32;
    line-height: 1.35;
    word-break: break-word;
}

.driver-card-v2-detail .label {
    color: var(--ad-text-tertiary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    margin-right: 4px;
}

/* ── Tag Pills ────────────────────────────── */

.ad-tag-input-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-height: 4px; }
.ad-tag-input-wrap:empty { margin-top: 0; }

.ad-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ad-orange);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--ad-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
}

.ad-tag-pill button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.ad-tag-pill button:hover { color: #fff; }
.ad-tag-input { font-size: 0.875rem; }
.ad-tag-hint { font-size: 0.6875rem; color: var(--ad-text-secondary); margin-top: 4px; }

/* ── Drive Classification Picker ────────────────────────── */

.ad-classification-picker {
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    background: #fff;
    overflow: hidden;
}
.ad-classification-tabs {
    display: flex;
    border-bottom: 1px solid var(--ad-border);
}
.ad-classification-tab {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    color: var(--ad-text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
}
.ad-classification-tab.is-active {
    color: var(--ad-text-primary);
    border-bottom-color: var(--ad-orange);
}
.ad-purpose-list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
}
.ad-purpose-row {
    text-align: left;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    border-bottom: 1px solid var(--ad-border);
    font-size: 0.875rem;
    color: var(--ad-text-primary);
    cursor: pointer;
}
.ad-purpose-row:last-child { border-bottom: 0; }
.ad-purpose-row:hover { background: rgba(0,0,0,0.03); }
.ad-purpose-row.is-selected {
    background: rgba(242, 163, 51, 0.12);
    color: var(--ad-text-primary);
    font-weight: 600;
}
.ad-purpose-badge {
    color: var(--ad-orange);
    font-weight: 600;
    margin-left: 4px;
}
.ad-purpose-empty {
    padding: 14px;
    text-align: center;
    color: var(--ad-text-secondary);
    font-size: 0.8125rem;
}
.ad-purpose-add {
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ad-border);
    color: var(--ad-orange);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.875rem;
}
.ad-purpose-add:hover { background: rgba(242, 163, 51, 0.06); }

/* ── Clickable Rows ───────────────────────── */

.ad-clickable-row { cursor: pointer; transition: background var(--ad-transition-fast); }
.ad-clickable-row:hover { background: rgba(0,0,0,0.02); }

/* ── Loading State ────────────────────────── */

.ad-loading {
    text-align: center;
    padding: 32px;
    color: var(--ad-text-secondary);
    font-size: 0.875rem;
}

/* ── Drive Map ────────────────────────────── */

.ad-drive-map {
    width: 100%;
    height: 200px;
    border-radius: var(--ad-radius-sm);
    margin-bottom: 16px;
    background: var(--ad-cream-dark);
    overflow: hidden;
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 768px) {
    .online-sidebar {
        width: 64px;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .online-sidebar.mobile-open { transform: translateX(0); }
    .online-sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 199;
    }
    .online-sidebar.mobile-open ~ .online-sidebar-backdrop { display: block; }
    .online-sidebar-logo span,
    .online-sidebar-nav a span:not([data-lucide]),
    .online-sidebar-search input,
    .online-sidebar-collapse,
    .online-nav-label { display: none; }
    .online-sidebar-nav a { justify-content: center; padding: 10px; margin: 1px 4px; }
    .online-sidebar-search { justify-content: center; padding: 8px; margin: 12px 4px 4px; }
    .online-topbar { left: 0; }
    .online-topbar-menu { display: flex; }
    .online-topbar-username { display: none; }
    .online-main {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
        padding: 16px;
        padding-top: calc(56px + 28px);
        /* Trap any overflow (wide tables, long unbroken strings, etc.)
         * inside the page so the whole viewport never scrolls
         * horizontally — individual cards (.ad-table) opt in to
         * horizontal scroll themselves via overflow-x: auto. */
        overflow-x: hidden;
    }
    .dash-section,
    .ad-header-stats { max-width: 100%; }
    .ad-page-header { flex-wrap: wrap; gap: 12px; }
    .ad-form-row { flex-direction: column; gap: 8px; }
    /* minmax(0, 1fr) not 1fr: a grid track defined as 1fr resolves
     * to minmax(auto, 1fr), and `auto` resolves to the child's
     * min-content width. The Recent Drives / Top Vehicles tables
     * carry min-width: 640px, which inflated the track past the
     * viewport and pushed the right half of every card off-screen
     * (the parent .online-main's overflow-x: hidden was clipping
     * the overflow instead of preventing it). */
    .ad-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    /* Switch the horizontal metrics strip to a grid on mobile — with
     * 5 metrics crammed into one row, values like "31.63 mph" and
     * avg-distance chars get truncated. A 3-col grid gives each
     * metric room without forcing a tiny font. */
    .dash-section-metrics {
        display: grid;
        /* minmax(0, 1fr) so columns can shrink below min-content —
         * otherwise values like "72.3 mph" expand the track and the
         * whole card blows past viewport width. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 8px;
        padding: 14px 12px;
    }
    .dash-metric-divider { display: none; }
    .dash-metric { min-width: 0; }
    .dash-metric-value { font-size: 1.125rem; white-space: normal; }
    .ad-vehicles-grid { grid-template-columns: 1fr; }
    .ad-drivers-grid { grid-template-columns: 1fr; }
    .dd-info-grid { grid-template-columns: 1fr; }
    .dd-stats { grid-template-columns: repeat(3, 1fr); }
    #dd-map { height: 260px; }
    /* Mobile toolbar layout: the search input gets its own row,
     * then the vehicle dropdown sits below it. Previous attempt to
     * inline search + dropdown on one line collapsed the search
     * when the mselect trigger button (which is wider than the
     * native select it replaces) joined the row. Export CSV still
     * wraps to a third row via .ad-toolbar's flex-wrap. */
    .ad-toolbar-left {
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }
    /* Search input (text type) → full row. */
    .ad-toolbar-left > input.ad-input-sm[type="text"] { flex: 1 0 100%; min-width: 0; }
    /* Everything else (native select, mselect trigger button) →
     * second row, grow to fill. */
    .ad-toolbar-left > select.ad-input-sm,
    .ad-toolbar-left > .ad-mselect-trigger { flex: 1 1 auto; min-width: 0; }
    .ad-input-sm { max-width: 100%; }
    .ad-modal { max-width: 100%; border-radius: var(--ad-radius); }
    .vehicle-card-actions { opacity: 1; }
    .vehicle-card-v2-actions { opacity: 1; }
    .online-quick-actions { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .online-login-card-inner { padding: 28px 24px; }
    .online-auth-social { flex-direction: column; }
}

@media (max-width: 420px) {
    .dash-section-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mobile topbar compaction ──────────────────
 * The topbar gets crowded on mobile once a page injects an "Add X"
 * action button: title + action + date-range + group switcher +
 * profile + signout can't all fit. Below ~720px we compact each
 * segment (icon-only action, hide date-range label, hide group
 * name/type) so the signout + profile stay visible on every page.
 * ──────────────────────────────────────────────── */
@media (max-width: 720px) {
    .online-topbar { padding: 0 10px; }
    .online-topbar-title { font-size: 1rem; max-width: 120px; }
    .online-topbar-actions { margin: 0 6px; gap: 4px; }
    .online-topbar-actions .ad-btn .lucide,
    .online-topbar-actions .ad-btn i { margin-right: 0; }
    .online-topbar-actions .ad-btn { padding: 6px 10px; font-size: 0.75rem; }
    .online-date-range-switcher,
    .online-group-switcher { margin-right: 4px; }
    .online-date-range-trigger,
    .online-group-trigger { padding: 6px 8px; max-width: none; }
    .online-date-range-label { display: none; }
    .online-date-range-trigger > i:last-child,
    .online-group-trigger > i:last-child { display: none; }
    /* Mobile: swap the group name/type pills for the users-round
     * icon. The icon sits inside the trigger button so the dropdown
     * hit target stays in place; the text was getting ellipsized to
     * 2–3 chars anyway and reading worse than just "group icon". */
    .online-group-icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; }
    .online-group-name,
    .online-group-type { display: none; }
    .online-topbar-user { padding: 2px; }
    .online-topbar-right { gap: 2px; }
}

@media (max-width: 520px) {
    .online-topbar-title { display: none; }
    .online-topbar-actions .ad-btn {
        padding: 0;
        width: 32px; height: 32px;
        justify-content: center;
        font-size: 0;
        gap: 0;
    }
    .online-topbar-actions .ad-btn i,
    .online-topbar-actions .ad-btn svg { font-size: 1rem; width: 22px; height: 22px; flex: 0 0 auto; }
    .online-group-name { max-width: 56px; }
}

/* ── Help Center (inline) ─────────────────── */

.help-search-wrap {
    position: relative;
    max-width: 480px;
    margin-bottom: 24px;
}

.help-search-inner { position: relative; display: flex; align-items: center; }
.help-search-inner > i,
.help-search-inner > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; flex: 0 0 auto; color: var(--ad-text-tertiary); pointer-events: none; }
.help-search-inner .ad-input { padding-left: 38px; }

.help-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ad-surface-solid);
    border-radius: 0 0 var(--ad-radius) var(--ad-radius);
    box-shadow: var(--ad-shadow-lg);
    display: none;
    z-index: 10;
    border: 1px solid var(--ad-border);
    border-top: none;
    max-height: 360px;
    overflow-y: auto;
}

.help-search-results.show { display: block; }

.help-search-result {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ad-border);
    text-decoration: none;
    transition: background var(--ad-transition-fast);
}

.help-search-result:last-child { border-bottom: none; }
.help-search-result:hover { background: var(--ad-cream); }
.help-search-result-title { font-size: 0.875rem; font-weight: 600; color: var(--ad-text-dark); }
.help-search-result-summary { font-size: 0.8125rem; color: var(--ad-text-secondary); margin-top: 2px; }
.help-search-empty { padding: 20px; text-align: center; color: var(--ad-text-secondary); font-size: 0.875rem; }

/* Category pills */
.help-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.help-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--ad-radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--ad-border-strong);
    background: var(--ad-surface);
    color: var(--ad-text-primary);
    cursor: pointer;
    transition: all var(--ad-transition-fast);
}

.help-cat-pill:hover { box-shadow: var(--ad-shadow-xs); border-color: var(--ad-orange); }
.help-cat-pill.active { background: var(--ad-orange); color: #fff; border-color: var(--ad-orange); }
.help-cat-pill.active .help-pill-count { background: rgba(255, 255, 255, 0.25); color: #fff; }

.help-pill-count {
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--ad-cream-dark);
    padding: 1px 7px;
    border-radius: var(--ad-radius-full);
    color: var(--ad-text-tertiary);
}

/* Article cards */
.help-article-list { display: grid; gap: 8px; }

.help-article-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    padding: 16px 18px;
    text-decoration: none;
    transition: all var(--ad-transition);
}

.help-article-card:hover { transform: translateY(-1px); box-shadow: var(--ad-shadow-sm); border-color: var(--ad-border-strong); }

.help-article-icon { font-size: 1.25rem; flex-shrink: 0; }
.help-article-info { flex: 1; min-width: 0; }
.help-article-title { font-size: 0.875rem; font-weight: 600; color: var(--ad-text-dark); }
.help-article-summary { font-size: 0.8125rem; color: var(--ad-text-secondary); margin-top: 2px; line-height: 1.35; }
.help-article-arrow { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ad-text-tertiary); flex-shrink: 0; }

/* Back link */
.help-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--ad-orange);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 20px;
}

.help-back-link:hover { text-decoration: underline; }
.help-back-link i { width: 14px; height: 14px; }

/* Article detail */
.help-article-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ad-orange-dark);
    background: var(--ad-orange-light);
    padding: 4px 12px;
    border-radius: var(--ad-radius-full);
    margin-bottom: 12px;
}

.help-article-detail-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ad-text-dark);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.help-article-detail-summary {
    font-size: 1rem;
    color: var(--ad-text-secondary);
    margin-bottom: 28px;
    line-height: 1.6;
}

.help-article-content { font-size: 0.9375rem; line-height: 1.75; color: var(--ad-text-primary); max-width: 720px; }
.help-article-content p { margin-bottom: 16px; }
.help-article-content ul { padding-left: 20px; margin-bottom: 16px; }
.help-article-content li { margin-bottom: 6px; }
.help-article-content strong { color: var(--ad-text-dark); font-weight: 650; }

/* Related articles */
.help-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ad-border); max-width: 720px; }
.help-related h3 { font-size: 1rem; margin-bottom: 16px; color: var(--ad-text-dark); font-weight: 700; }
.help-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.help-related-card {
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    padding: 16px 18px;
    text-decoration: none;
    transition: all var(--ad-transition);
}

.help-related-card:hover { transform: translateY(-2px); box-shadow: var(--ad-shadow-sm); border-color: var(--ad-border-strong); }
.help-related-title { font-size: 0.875rem; font-weight: 600; color: var(--ad-text-dark); }
.help-related-cat { font-size: 0.75rem; color: var(--ad-text-secondary); margin-top: 4px; }

.help-helpful { margin-top: 40px; padding: 28px; background: var(--ad-cream-dark); border-radius: var(--ad-radius); text-align: center; max-width: 720px; }
.help-helpful h4 { margin-bottom: 14px; font-size: 1rem; font-weight: 700; }
.help-helpful-btns { display: flex; gap: 8px; justify-content: center; }
.help-helpful-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border: 1px solid var(--ad-border-strong); border-radius: var(--ad-radius-sm); background: var(--ad-surface); cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--ad-text-primary); transition: all var(--ad-transition-fast); }
.help-helpful-btn:hover { border-color: var(--ad-orange); color: var(--ad-orange); box-shadow: var(--ad-shadow-xs); }
.help-helpful-btn i { width: 22px; height: 22px; flex: 0 0 auto; }

@media (max-width: 768px) {
    .help-cat-pills { gap: 4px; }
    .help-cat-pill { padding: 6px 10px; font-size: 0.75rem; }
    .help-article-detail-title { font-size: 1.25rem; }
    .help-related-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   Report Builder
   ══════════════════════════════════════════════ */

/* ── Page Container ──────────────────────────── */

#page-reports {
    display: flex;
    flex-direction: column;
    /* 56px topbar + 24px top padding + 24px bottom padding */
    height: calc(100vh - 56px - 24px - 24px);
    overflow: hidden;
}

/* ── Config Bar ──────────────────────────────── */

.rb-config {
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.rb-config-fields {
    display: flex;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.rb-config-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px;
}

.rb-config-field-sm { max-width: 180px; }

/* Stacks two rb-config-fields vertically in one row-slot, used to
   align the Filename format picker directly under Report Title. */
.rb-config-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 2;
    min-width: 220px;
}
.rb-config-stack .rb-config-field {
    flex: none;
    min-width: 0;
}
/* Narrower stack for the date + vehicle / date + driver columns.
   Same stacking behavior as .rb-config-stack but only flex:1 (vs
   the title stack's flex:2) and a tighter min-width. */
.rb-config-stack-sm {
    flex: 1;
    min-width: 160px;
}
/* Template column. Pinned to match the Report Blocks palette
   width (320px) so the two card edges line up vertically. */
.rb-config-field-template {
    flex: 0 0 420px;
    max-width: 420px;
    min-width: 420px;
}
/* Toggle sitting inside the title / filename stack instead of the
   old footer row. Looser vertical rhythm separates it from the
   inputs above. */
.rb-config-toggle-inline {
    margin-top: 4px;
    margin-right: 20px;
}
.rb-filename-preview {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--ad-text-secondary, #727681);
    margin-top: 4px;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

/* Delete-template modal rows — name on the left, trash button on
   the right. Matches the rest of the themed modal chrome. */
.rb-delete-template-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--ad-divider, #ece4d2);
}
.rb-delete-template-row:last-child { border-bottom: 0; }
.rb-delete-template-row-text { flex: 1; min-width: 0; }
.rb-delete-template-row-name { font-size: 16px; font-weight: 600; color: var(--ad-text-primary, #434850); }
.rb-delete-template-row-meta { font-size: 12px; color: var(--ad-text-secondary, #727681); margin-top: 2px; }
.rb-delete-template-row-btn { color: var(--ad-red, #c0392b); }
.rb-delete-template-row-btn:hover { background: #fdecea; }

/* Report-wide footer row — toggles on the left, action buttons
   (Reset / Preview / Generate) on the right, so all post-setup
   controls live on one line on desktop. */
.rb-config-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 2px 2px 0;
}
.rb-config-footer .rb-config-actions { margin-left: auto; flex-wrap: wrap; }

.rb-config-toggles {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ad-text-secondary, #727681);
}
.rb-config-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.rb-config-toggle input[type="checkbox"] { accent-color: var(--ad-orange, #f2a333); }

/* Template picker + Save / Delete buttons share one row inside the field. */
.rb-template-control { display: flex; gap: 6px; align-items: stretch; }
.rb-template-control .ad-btn { flex-shrink: 0; padding: 0 10px; }

/* Custom template picker — replaces a native <select> so we can group by
   Default / IRS / My Templates and provide an inline search box. */
.rb-template-picker { position: relative; flex: 1; min-width: 0; }

.rb-template-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 12px;
    height: 38px;
    background: var(--ad-surface, #fff);
    color: var(--ad-text-primary, #434850);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.rb-template-trigger:hover { background: var(--ad-cream, #fdf8f0); }
.rb-template-trigger-icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ad-orange, #f2a333); flex-shrink: 0; }
.rb-template-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rb-template-trigger-chev { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ad-text-tertiary, #a2a5a6); flex-shrink: 0; }
.rb-template-trigger[aria-expanded="true"] { border-color: var(--ad-orange, #f2a333); box-shadow: 0 0 0 3px rgba(242,163,51,.15); }

.rb-template-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    z-index: 2000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
}
.rb-template-menu[hidden] { display: none; }

.rb-template-menu-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ad-divider, #ece4d2);
    background: var(--ad-cream, #fdf8f0);
}
.rb-template-menu-search i { width: 14px; height: 14px; color: var(--ad-text-tertiary, #a2a5a6); }
.rb-template-menu-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--ad-text-primary, #434850);
    font-family: inherit;
    font-size: 13px;
    padding: 2px 0;
}
.rb-template-menu-input::placeholder { color: var(--ad-text-tertiary, #a2a5a6); }

.rb-template-menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.rb-template-group {
    padding: 10px 14px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rb-template-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ad-text-tertiary, #a2a5a6);
}

.rb-template-menu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--ad-text-primary, #434850);
}
.rb-template-menu-row:hover,
.rb-template-menu-row:focus-visible {
    background: var(--ad-cream, #fdf8f0);
    outline: none;
}
.rb-template-menu-row.is-active {
    background: rgba(242,163,51,0.12);
}
.rb-template-menu-row-icon {
    width: 18px; height: 18px;
    color: var(--ad-orange, #f2a333);
    flex-shrink: 0;
}
.rb-template-menu-row-text {
    flex: 1;
    min-width: 0;
}
.rb-template-menu-row-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}
.rb-template-menu-row-desc {
    font-size: 12px;
    color: var(--ad-text-secondary, #727681);
    margin-top: 2px;
    line-height: 1.3;
}
.rb-template-menu-row-check {
    width: 22px; height: 22px; flex: 0 0 auto;
    color: var(--ad-orange, #f2a333);
    flex-shrink: 0;
}
.rb-template-empty {
    padding: 18px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--ad-text-secondary, #727681);
}

/* ── Remembered logins (login card) ────────────────────────────
   Click-to-prefill chips shown above the email field when the user
   has checked "Remember me" on at least one prior successful login.
   Each chip shows avatar initials + name/email and an × that removes
   just that entry. Account modal has a separate "Clear saved
   sign-ins" button that wipes the whole list. */
.online-remembered { margin: -4px 0 14px; }
.online-remembered-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ad-text-secondary, #727681);
    margin-bottom: 6px;
}
.online-remembered-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.online-remembered-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    background: var(--ad-cream, #fdf8f0);
    border: 1px solid var(--ad-divider, #ece4d2);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ad-text-primary, #434850);
    max-width: 100%;
    transition: background 0.12s, border-color 0.12s;
}
.online-remembered-chip:hover {
    border-color: var(--ad-orange, #f2a333);
    background: #fff;
}
.online-remembered-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ad-orange, #f2a333);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.online-remembered-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}
.online-remembered-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.online-remembered-email {
    font-size: 11px;
    color: var(--ad-text-secondary, #727681);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.online-remembered-remove {
    font-size: 16px;
    line-height: 1;
    color: var(--ad-text-tertiary, #a2a5a6);
    padding: 0 4px;
    border-radius: 4px;
    flex-shrink: 0;
}
.online-remembered-remove:hover { color: var(--ad-red, #c0392b); background: rgba(192,57,43,.08); }

/* ── Data import ────────────────────────────────────────────────
   Page = #page-import. Stepped flow: pick entity → upload file →
   preview → confirm → result. Each step lives in its own .dd-card
   (.imp-step) so the page reads top-to-bottom without tabs. */
.imp-step + .imp-step { margin-top: 16px; }

.imp-entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 4px;
}
.imp-entity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 10px;
    border: 1px solid var(--ad-divider, #ece4d2);
    background: var(--ad-surface, #fff);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    color: var(--ad-text-primary, #434850);
    transition: background 0.12s, border-color 0.12s;
}
.imp-entity-card:hover { background: var(--ad-cream, #fdf8f0); }
.imp-entity-card.is-active {
    border-color: var(--ad-orange, #f2a333);
    background: rgba(242,163,51,0.08);
}
.imp-entity-card-icon { width: 28px; height: 28px; color: var(--ad-orange, #f2a333); }
.imp-entity-card-name { font-weight: 600; font-size: 13px; }

.imp-template-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.imp-file-picker { position: relative; }
.imp-file-picker input[type="file"] { display: none; }
.imp-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 20px;
    border: 2px dashed var(--ad-divider, #ece4d2);
    border-radius: 12px;
    cursor: pointer;
    background: var(--ad-cream, #fdf8f0);
    color: var(--ad-text-secondary, #727681);
    font-weight: 600;
    transition: border-color 0.12s, background 0.12s;
}
.imp-file-label:hover { border-color: var(--ad-orange, #f2a333); background: #fff; }
.imp-file-label i { width: 20px; height: 20px; }

.imp-preview-summary,
.imp-result-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.imp-stat {
    padding: 6px 12px;
    background: var(--ad-cream, #fdf8f0);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ad-text-secondary, #727681);
}
.imp-stat strong { color: var(--ad-text-primary, #434850); font-weight: 700; margin-right: 4px; }
.imp-stat-ok   { background: #e8f5e9; color: #1f5a2a; }
.imp-stat-warn { background: #fdecea; color: #8a2424; }

.imp-preview-table-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--ad-divider, #ece4d2); border-radius: 8px; }
.imp-preview-table th,
.imp-preview-table td { white-space: nowrap; }

.imp-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.imp-errors-head { font-weight: 700; margin: 14px 0 6px; color: #8a2424; font-size: 13px; }
.imp-errors-list {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 12px;
    color: var(--ad-text-secondary, #727681);
    max-height: 240px;
    overflow-y: auto;
}
.imp-errors-list li { margin-bottom: 4px; }
.imp-errors-more { font-style: italic; list-style: none; margin-left: -18px; }

/* AutoDrive Archive (.adarchive) picker — replaces the CSV preview
   table when an archive is loaded. Each row is a labelled checkbox
   for one entity in the archive. */
.imp-archive-picker {
    border: 1px solid var(--ad-divider, #ece4d2);
    border-radius: 8px;
    overflow: hidden;
}
.imp-archive-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--ad-divider, #ece4d2);
    background: var(--ad-surface, #fff);
}
.imp-archive-row:last-child { border-bottom: 0; }
.imp-archive-row:hover { background: var(--ad-cream, #fdf8f0); }
.imp-archive-row.is-empty { opacity: 0.5; cursor: not-allowed; }
.imp-archive-row input[type="checkbox"] { accent-color: var(--ad-orange, #f2a333); width: 16px; height: 16px; }
.imp-archive-label { flex: 1; font-weight: 600; font-size: 13px; }
.imp-archive-count { font-size: 12px; color: var(--ad-text-secondary, #727681); }

/* ── Data export ────────────────────────────────────────────────
   Page = #page-export. Multi-select entities → format → generate.
   Reuses .dd-card framing, .imp-* styles where the visual is
   identical (entity card grid, stat pills). */
.exp-step + .exp-step { margin-top: 16px; }
.exp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.exp-actions { display: flex; gap: 12px; }

.exp-entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 4px;
}
.exp-entity-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 10px;
    border: 1px solid var(--ad-divider, #ece4d2);
    background: var(--ad-surface, #fff);
    border-radius: 12px;
    cursor: pointer;
    color: var(--ad-text-primary, #434850);
    transition: background 0.12s, border-color 0.12s;
}
.exp-entity-card:hover { background: var(--ad-cream, #fdf8f0); }
.exp-entity-card.is-active {
    border-color: var(--ad-orange, #f2a333);
    background: rgba(242,163,51,0.08);
}
.exp-entity-card-icon { width: 28px; height: 28px; color: var(--ad-orange, #f2a333); }
.exp-entity-card-name { font-weight: 600; font-size: 13px; }
.exp-entity-check {
    position: absolute;
    top: 10px;
    right: 10px;
    accent-color: var(--ad-orange, #f2a333);
    width: 16px;
    height: 16px;
}

.exp-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 4px;
}
.exp-format-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--ad-divider, #ece4d2);
    background: var(--ad-surface, #fff);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.exp-format-card:hover { background: var(--ad-cream, #fdf8f0); }
.exp-format-card.is-active {
    border-color: var(--ad-orange, #f2a333);
    background: rgba(242,163,51,0.08);
}
.exp-format-card input[type="radio"] { display: none; }
.exp-format-icon { width: 22px; height: 22px; color: var(--ad-orange, #f2a333); }
.exp-format-name { font-weight: 700; font-size: 14px; }
.exp-format-ext { font-size: 12px; color: var(--ad-text-secondary, #727681); font-family: var(--ad-mono, ui-monospace, monospace); }
.exp-format-hint { font-size: 12px; color: var(--ad-text-secondary, #727681); line-height: 1.4; }

.exp-progress { margin-top: 14px; }
.exp-progress-bar {
    height: 6px;
    background: var(--ad-divider, #ece4d2);
    border-radius: 999px;
    overflow: hidden;
}
.exp-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--ad-orange, #f2a333);
    transition: width 0.2s ease;
}
.exp-progress-text {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ad-text-secondary, #727681);
}

/* ── Shadow-mode banner ─────────────────────────────────────────
   Mounted at <body> (outside the flex-row #online-app) and positioned
   fixed above every other piece of chrome. The body class
   has-shadow-banner pushes the fixed menubar / topbar / sidebar down
   by the banner height so nothing overlaps. */
.online-shadow-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(90deg, var(--ad-orange, #f2a333) 0%, #e28f1d 100%);
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    min-height: 40px;
    box-sizing: border-box;
}
.online-shadow-banner i { width: 22px; height: 22px; flex: 0 0 auto; flex-shrink: 0; }
.online-shadow-banner strong { font-weight: 700; }
.online-shadow-banner code {
    background: rgba(255,255,255,.18);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
}
.online-shadow-banner-text {
    flex: 1;
    min-width: 0;
}
.online-shadow-banner-countdown {
    margin-left: auto;          /* hug the right edge regardless of text length */
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    color: #fff;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
}
/* Under-60s warning state — swaps the gradient to the AutoDrive red
   accent so the admin has a visible "session's almost up" signal
   before the auto-logout fires. */
.online-shadow-banner.is-expiring {
    background: linear-gradient(90deg, #c0392b 0%, #a93226 100%);
}
.online-shadow-banner.is-expiring .online-shadow-banner-countdown {
    background: rgba(0,0,0,.25);
}
/* Shove every fixed piece of chrome below the banner. Each selector
   matches the top value used in its own default rule so the banner's
   40px height slides in above without overlap. */
body.has-shadow-banner .online-menubar { top: 40px; }
body.has-shadow-banner .online-sidebar { top: 40px; }
body.has-shadow-banner .online-topbar  { top: 40px; }
body.nav-menubar.has-shadow-banner .online-topbar { top: calc(52px + 40px); }
/* Content column also needs 40px of extra headroom — the topbar it
   previously cleared is now 40px lower, so the dashboard title and
   action buttons were ending up underneath it. */
body.has-shadow-banner .online-main { padding-top: calc(56px + 40px + 40px); }
body.nav-menubar.has-shadow-banner .online-main { padding-top: calc(52px + 56px + 32px + 40px); }

/* ── Vehicle type icons ─────────────────────────────────────────
   Shared PNG set in /assets/images/vehicle-type/. Same slugs the
   mobile apps bundle, so the web surface matches what iOS / Android
   show for a given body/fuel type. Callers: adVehicleIconHTML(v). */
.ad-vehicle-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: auto;
}
/* Compact variant for table cells / search results — sits inline
   before the vehicle name and shrinks to match the row line-height. */
.ad-vehicle-icon-inline {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 6px;
    display: inline-block;
}
/* Card variant — a little larger so the header has visual weight. */
.vehicle-card-v2-icon { width: 56px; height: 56px; }
.vehicle-card-v2-header-main { display: flex; align-items: center; gap: 14px; }

/* ── Themed <select> (desktop) ──────────────────────────────────
   Generic enhancer. Every <select> inside #online-app gets a
   cream-pill trigger and an anchored menu that mirror the Report
   Builder template picker. Mobile keeps its bottom-sheet (mselect). */
.ad-ts-wrap {
    position: relative;
    display: inline-block;
    /* Default to the width of its own trigger. Form contexts that
       want a full-width select give the wrap a parent constraint
       (e.g. .rb-config-field, .ad-form-group, .dash-modal-body) so
       the trigger's 100% fills. Inline toolbars (gas / ev filters)
       stay content-sized because nothing forces the wrap to grow. */
    vertical-align: middle;
}
.rb-config-field .ad-ts-wrap,
.ad-form-group .ad-ts-wrap,
.ad-form-row .ad-ts-wrap { display: block; }
.ad-ts-native {
    /* Keep in DOM for form semantics, hide visually. Pointer-events
       off so a user can't accidentally focus the native element
       underneath the trigger. Positioned absolute inside the relative
       .ad-ts-wrap so the trigger takes the layout slot.

       No !important — on mobile, mselect.js hides this same element
       via its own .ad-mselect-source rule (scr/clip trick) and we
       want that to win. */
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.ad-ts-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 12px;
    min-height: 38px;
    background: var(--ad-surface, #fff);
    color: var(--ad-text-primary, #434850);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}
.ad-ts-trigger.ad-input-sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
.ad-ts-trigger:hover { background: var(--ad-cream, #fdf8f0); }
.ad-ts-trigger[aria-expanded="true"] {
    border-color: var(--ad-orange, #f2a333);
    box-shadow: 0 0 0 3px rgba(242,163,51,.15);
}
.ad-ts-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.ad-ts-trigger-label.is-placeholder { color: var(--ad-text-tertiary, #a2a5a6); font-weight: 400; }
.ad-ts-trigger-chev { width: 14px; height: 14px; color: var(--ad-text-tertiary, #a2a5a6); flex-shrink: 0; }

.ad-ts-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-width: min(440px, 90vw);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    z-index: 2000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
}
.ad-ts-menu[hidden] { display: none; }
.ad-ts-menu.is-flipped { top: auto; bottom: calc(100% + 6px); }

.ad-ts-menu-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ad-divider, #ece4d2);
    background: var(--ad-cream, #fdf8f0);
}
.ad-ts-menu-search[hidden] { display: none; }
.ad-ts-menu-search i { width: 14px; height: 14px; color: var(--ad-text-tertiary, #a2a5a6); }
.ad-ts-menu-input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    font-family: inherit; font-size: 13px;
    color: var(--ad-text-primary, #434850);
    padding: 2px 0;
}
.ad-ts-menu-input::placeholder { color: var(--ad-text-tertiary, #a2a5a6); }

.ad-ts-menu-body { flex: 1; overflow-y: auto; padding: 4px 0; }

.ad-ts-group {
    padding: 10px 14px 4px;
    display: flex; align-items: center; gap: 8px;
}
.ad-ts-group-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ad-text-tertiary, #a2a5a6);
}

.ad-ts-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--ad-text-primary, #434850);
    font-size: 13px;
}
.ad-ts-row:hover,
.ad-ts-row:focus-visible { background: var(--ad-cream, #fdf8f0); outline: none; }
.ad-ts-row.is-active { background: rgba(242,163,51,0.12); font-weight: 600; }
.ad-ts-row.is-disabled { opacity: .5; cursor: not-allowed; }
.ad-ts-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-ts-row-check { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ad-orange, #f2a333); flex-shrink: 0; }
.ad-ts-empty { padding: 18px 14px; text-align: center; font-size: 13px; color: var(--ad-text-secondary, #727681); }

/* On mobile, mselect.js owns the UX. Hide the themed trigger + menu
   so mselect's own trigger (inserted as a sibling of the native
   select) renders alone. The native select stays hidden via mselect's
   .ad-mselect-source class. */
@media (max-width: 720px) {
    .ad-ts-wrap .ad-ts-trigger,
    .ad-ts-wrap .ad-ts-menu { display: none; }
}

.rb-config-field label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ad-text-secondary);
}

.rb-config-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.rb-config-actions .ad-btn i { width: 14px; height: 14px; }

/* ── Layout ──────────────────────────────────── */

.rb-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Palette (sidebar) ───────────────────────── */

.rb-palette {
    width: 420px;
    flex-shrink: 0;
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rb-palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ad-border);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ad-text-secondary);
}

.rb-palette-toggle { display: none; }
.rb-palette-toggle i { width: 14px; height: 14px; }

.rb-palette-search {
    padding: 10px 12px 6px;
}

.rb-palette-sections {
    overflow-y: auto;
    flex: 1;
    padding: 0 0 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--ad-border) transparent;
}

.rb-palette-sections::-webkit-scrollbar { width: 6px; }
.rb-palette-sections::-webkit-scrollbar-track { background: transparent; }
.rb-palette-sections::-webkit-scrollbar-thumb { background: var(--ad-border); border-radius: 3px; }
.rb-palette-sections::-webkit-scrollbar-thumb:hover { background: var(--ad-border-strong); }

.rb-palette-section { padding: 0 8px; }

.rb-palette-label {
    font-size: 0.5625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ad-text-tertiary);
    padding: 12px 8px 4px;
}

.rb-palette-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--ad-radius-sm);
    cursor: grab;
    transition: all var(--ad-transition-fast);
    border: 1px solid transparent;
    user-select: none;
}

.rb-palette-block:hover {
    background: var(--ad-cream);
    border-color: var(--ad-border);
}

.rb-palette-block:active { cursor: grabbing; }

.rb-palette-block-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ad-cream-dark);
    border-radius: var(--ad-radius-sm);
    flex-shrink: 0;
}

.rb-palette-block-icon i { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ad-text-secondary); }

.rb-palette-block-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ad-text-dark);
    line-height: 1.2;
}

.rb-palette-block-desc {
    font-size: 0.6875rem;
    color: var(--ad-text-tertiary);
    line-height: 1.3;
    margin-top: 1px;
}

.rb-palette-block-info { min-width: 0; }

/* Mobile FAB */
.rb-palette-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ad-orange);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(242, 163, 51, 0.4);
    cursor: pointer;
    z-index: 50;
    align-items: center;
    justify-content: center;
}

.rb-palette-fab i { width: 24px; height: 24px; }

/* ── Canvas ──────────────────────────────────── */

.rb-canvas {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: var(--ad-cream);
    border: 2px dashed var(--ad-border);
    border-radius: var(--ad-radius);
    padding: 16px;
    transition: border-color 0.2s ease, background 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rb-canvas-drag-active {
    border-color: var(--ad-orange);
    background: rgba(242, 163, 51, 0.04);
}

.rb-canvas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 40px 20px;
}

.rb-canvas-empty-icon i { width: 48px; height: 48px; color: var(--ad-border-strong); }
.rb-canvas-empty-title { font-size: 1.125rem; font-weight: 700; color: var(--ad-text-secondary); margin-top: 12px; }
.rb-canvas-empty-desc { font-size: 0.875rem; color: var(--ad-text-tertiary); margin-top: 6px; max-width: 320px; }

.rb-mobile-hint { display: none; }

/* ── Canvas Blocks ───────────────────────────── */

.rb-canvas-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.rb-canvas-block {
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.rb-canvas-block:hover { box-shadow: var(--ad-shadow-xs); }

.rb-canvas-block.rb-dragging { opacity: 0.4; }

.rb-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ad-border);
    background: var(--ad-cream);
}

.rb-block-drag-handle {
    cursor: grab;
    display: flex;
    align-items: center;
    color: var(--ad-text-tertiary);
    padding: 2px;
}

.rb-block-drag-handle:active { cursor: grabbing; }
.rb-block-drag-handle i { width: 14px; height: 14px; }

.rb-block-title {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ad-text-secondary);
}

.rb-block-actions {
    display: flex;
    gap: 2px;
}

.rb-block-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--ad-radius-sm);
    color: var(--ad-text-tertiary);
    transition: all var(--ad-transition-fast);
}

.rb-block-btn:hover { background: var(--ad-border); color: var(--ad-text-dark); }
.rb-block-btn-danger:hover { background: rgba(230, 71, 61, 0.1); color: var(--ad-red); }
.rb-block-btn i { width: 14px; height: 14px; }

.rb-block-content {
    padding: 16px;
    overflow-x: auto;
}

.rb-block-placeholder {
    text-align: center;
    padding: 24px 16px;
    color: var(--ad-text-tertiary);
    font-size: 0.875rem;
}

.rb-block-loading {
    text-align: center;
    padding: 24px 16px;
    color: var(--ad-text-secondary);
    font-size: 0.875rem;
}

.rb-block-error {
    text-align: center;
    padding: 24px 16px;
    color: var(--ad-red);
    font-size: 0.875rem;
}

/* ── Drop Indicator ──────────────────────────── */

.rb-drop-indicator {
    height: 3px;
    background: var(--ad-orange);
    border-radius: 2px;
    margin: 4px 0;
}

/* ── Shared Report Block Styles ──────────────── */

.rb-metrics {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.rb-metric {
    flex: 1;
    text-align: center;
    min-width: 80px;
    padding: 4px 6px;
}

.rb-metric-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ad-text-dark);
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.rb-metric-unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ad-text-secondary);
}

.rb-metric-label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ad-text-tertiary);
    margin-top: 4px;
}

.rb-metric-divider {
    width: 1px;
    height: 32px;
    background: var(--ad-border);
    flex-shrink: 0;
}

/* Bar Charts (report blocks) */
.rb-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
}

.rb-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.rb-bar-value {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--ad-text-secondary);
    margin-bottom: 3px;
    min-height: 12px;
    white-space: nowrap;
}

.rb-bar-track {
    flex: 1;
    width: 100%;
    max-width: 32px;
    background: var(--ad-cream-dark);
    border-radius: 3px 3px 0 0;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.rb-bar-fill {
    width: 100%;
    background: var(--ad-orange);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.4s ease;
}

.rb-bar-label {
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--ad-text-tertiary);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-height: 12px;
    white-space: nowrap;
}

/* Stacked bar / legend */
.rb-stacked-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
}

.rb-stacked-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    min-width: 24px;
}

.rb-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.rb-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--ad-text-secondary);
}

.rb-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Heatmap */
.rb-heatmap {
    display: grid;
    gap: 2px;
}

.rb-heatmap-cell {
    border-radius: 2px;
    aspect-ratio: 1;
    min-height: 14px;
}

.rb-heatmap-label {
    font-size: 0.5625rem;
    color: var(--ad-text-tertiary);
    text-align: center;
    font-weight: 600;
}

/* Empty state */
.rb-empty {
    color: var(--ad-text-tertiary);
    font-size: 0.875rem;
    padding: 20px;
    text-align: center;
}

/* Report tables */
.rb-block-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.rb-block-content th {
    text-align: left;
    font-weight: 700;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ad-text-secondary);
    padding: 8px 12px;
    border-bottom: 2px solid var(--ad-border);
    white-space: nowrap;
}

.rb-block-content td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ad-border);
    color: var(--ad-text-primary);
}

/* ── Preview Overlay ─────────────────────────── */

.rb-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rb-preview-container {
    background: var(--ad-surface);
    border-radius: var(--ad-radius);
    width: 100%;
    max-width: 900px;
    /* Definite height (not max-height) — the preview content holds an
       iframe with height:100%, which needs a resolved parent height
       to render. max-height alone collapses when the iframe has no
       intrinsic size. */
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rb-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ad-border);
}

.rb-preview-header h2 { font-size: 1rem; margin: 0; }
.rb-preview-header-actions { display: flex; gap: 8px; }
.rb-preview-header-actions .ad-btn i { width: 14px; height: 14px; }

.rb-preview-content {
    overflow: hidden;
    padding: 0;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
}
.rb-preview-content iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* ── Responsive (Tablet) ─────────────────────── */

@media (max-width: 1024px) {
    .rb-palette { width: 260px; }
    .rb-config-field-sm { max-width: 160px; }
    /* Below tablet the palette shrinks to 260px (see .rb-palette
       media query further down); match it here. */
    .rb-config-field-template {
        flex: 0 0 260px;
        max-width: 260px;
        min-width: 260px;
    }
}

/* ── Responsive (Mobile) ─────────────────────── */

@media (max-width: 768px) {
    .rb-config {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }

    .rb-config-fields {
        flex-direction: column;
    }

    .rb-config-field { min-width: 0; }
    .rb-config-field-sm { max-width: none; }

    /* Stack wrappers were sized for the desktop flex row (flex: 2
       on the title stack, flex: 0 0 320px on the Template column).
       When .rb-config-fields flips to column layout those basis
       values become fixed *heights*, so the Template card reserves
       ~300px of empty space below its one field. Reset to auto so
       each card only takes the height of its content. */
    .rb-config-stack,
    .rb-config-stack-sm,
    .rb-config-field-template {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    /* iOS safari gives date / select inputs an intrinsic min-width that
       can outrun the column, pushing the field past the card edge. Force
       them to honor the container and share its box sizing so the card
       stays snug on narrow viewports. */
    .rb-config-field input,
    .rb-config-field select,
    .rb-config-field .ad-input,
    .rb-template-trigger {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .rb-config-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .rb-config-actions .ad-btn { justify-content: center; }

    /* Footer: stack toggles above buttons on narrow viewports so
       neither row is squeezed. Actions already wrap internally. */
    .rb-config-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .rb-config-footer .rb-config-actions {
        margin-left: 0;
        width: 100%;
    }
    .rb-config-footer .rb-config-actions .ad-btn { flex: 1 1 auto; }
    .rb-config-actions .ad-btn:not(.ad-btn-primary) { flex: 1; }
    .rb-config-actions .ad-btn-primary { flex-basis: 100%; }

    .rb-layout {
        flex-direction: column;
        overflow: visible;
    }

    .rb-palette {
        width: 100%;
        max-height: none;
        border-radius: var(--ad-radius);
        flex-shrink: 0;
    }

    .rb-palette-header { display: none; }
    .rb-palette-search { display: none; }

    .rb-palette-sections {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        padding: 8px;
        max-height: none;
        flex: none;
        scrollbar-width: none;
    }
    .rb-palette-sections::-webkit-scrollbar { display: none; }

    .rb-palette-section {
        flex-shrink: 0;
        padding: 0 4px;
    }

    .rb-palette-label {
        font-size: 0.625rem;
        padding: 0 4px 4px;
        white-space: nowrap;
    }

    .rb-palette-block {
        padding: 6px 10px;
        gap: 8px;
        min-width: 140px;
        white-space: nowrap;
    }

    .rb-palette-block-desc { display: none; }
    .rb-palette-block-icon { width: 24px; height: 24px; min-width: 24px; }
    .rb-palette-block-name { font-size: 0.75rem; }

    .rb-palette-fab { display: none; }

    #page-reports {
        height: auto;
        min-height: calc(100vh - 56px - 32px);
        overflow-y: auto;
    }

    .rb-canvas {
        min-height: 300px;
        overflow: visible;
    }

    .rb-canvas-empty { padding: 24px 16px; }
    .rb-desktop-hint { display: none; }
    .rb-mobile-hint { display: inline; }

    .rb-block-content { padding: 12px; }

    .rb-metrics { flex-wrap: wrap; gap: 8px; }
    .rb-metric-divider { display: none; }
    .rb-metric { min-width: 70px; padding: 4px; }
    .rb-metric-value { font-size: 1.1rem; }

    .rb-bar-chart { height: 100px; }

    .rb-heatmap { min-width: 360px !important; }

    .rb-block-content table { font-size: 0.75rem; }
    .rb-block-content th,
    .rb-block-content td { padding: 6px 8px; }

    .rb-preview-overlay { padding: 0; }
    .rb-preview-container { max-width: 100%; max-height: 100vh; border-radius: 0; }
}

/* ── Skeleton Loading Placeholders ────────── */

@keyframes ad-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.ad-skeleton {
    background: linear-gradient(90deg, var(--ad-cream-dark) 25%, #e8e4df 37%, var(--ad-cream-dark) 63%);
    background-size: 800px 100%;
    animation: ad-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

.ad-skeleton * { visibility: hidden; }

/* Skeleton variants */
.ad-skeleton-text {
    display: inline-block;
    height: 1em;
    min-width: 60px;
    vertical-align: middle;
}

.ad-skeleton-stat {
    display: inline-block;
    height: 2rem;
    min-width: 80px;
    vertical-align: middle;
}

.ad-skeleton-row td {
    position: relative;
}

.ad-skeleton-row td::after {
    content: '';
    display: block;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ad-cream-dark) 25%, #e8e4df 37%, var(--ad-cream-dark) 63%);
    background-size: 800px 100%;
    animation: ad-shimmer 1.5s ease-in-out infinite;
}

.ad-skeleton-row td { color: transparent !important; }

/* ── Dashboard Feedback Widget ─────────────────────────
   Rendered inside a .dash-tile — the tile provides the
   background / border / padding, so these rules only cover
   the inner layout (intro, stars, textarea, actions).
   Scoped with .dash-fb-* to avoid colliding with the old
   card styles that used to live here. */

.dash-fb-intro {
    font-size: 0.8125rem;
    color: var(--ad-text-secondary);
    margin: 0 0 8px;
}
.dash-fb-stars {
    font-size: 22px;
    line-height: 1;
    color: var(--ad-text-tertiary, var(--ad-text-secondary));
    margin: 0 0 8px;
    user-select: none;
    letter-spacing: 2px;
}
.dash-fb-star { cursor: pointer; padding: 0 1px; transition: color .12s; }
.dash-fb-star.active,
.dash-fb-star:hover { color: var(--ad-orange, #e48a5b); }
.dash-fb-stars-readonly {
    font-size: 18px;
    color: var(--ad-orange, #e48a5b);
    margin: 0 0 6px;
    letter-spacing: 2px;
}
.dash-fb-comment {
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    border: 1px solid var(--ad-border, #e4ddd3);
    border-radius: 6px;
    font: inherit;
    font-size: 0.8125rem;
    resize: vertical;
    background: var(--ad-cream, #fafaf7);
    box-sizing: border-box;
}
.dash-fb-comment-readonly {
    color: var(--ad-text);
    font-style: italic;
    line-height: 1.35;
    font-size: 0.8125rem;
}
.dash-fb-error {
    margin-top: 4px;
    color: #b94a3a;
    font-size: 0.6875rem;
}
.dash-fb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}
.dash-fb-actions .ad-btn { padding: 5px 10px; font-size: 12px; }
.dash-fb-meta {
    margin-top: 6px;
    font-size: 0.6875rem;
    color: var(--ad-text-secondary);
}
.dash-fb-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ad-orange-soft, #fdece0);
    color: var(--ad-orange, #b55f36);
    font-size: 10px;
    font-weight: 600;
}

/* ──────────────────────────────────────────────
 * Invite Accept Modal (Phase 7b)
 * ────────────────────────────────────────────── */

.online-invite-modal              { max-width: 480px; }

.online-invite-who                { margin: 0 0 6px; color: var(--ad-text-tertiary); font-size: 0.875rem; }
.online-invite-group              { margin: 0 0 14px; font-size: 1.4rem; font-weight: 700; color: var(--ad-text-primary); line-height: 1.2; }
.online-invite-blurb              { margin: 0 0 20px; color: var(--ad-text-secondary); font-size: 0.9375rem; line-height: 1.55; }

.online-invite-driver             { margin: 20px 0; padding: 16px; background: var(--ad-cream-dark); border-radius: var(--ad-radius-md, 10px); }
.online-invite-driver-heading     { margin: 0 0 6px; font-size: 0.875rem; font-weight: 600; color: var(--ad-text-primary); }
.online-invite-driver-name        { margin: 0 0 14px; font-size: 1.0625rem; font-weight: 600; }

.online-invite-actions            { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.online-invite-actions .ad-btn    { width: 100%; justify-content: center; }

.online-invite-loading            { padding: 40px 0; text-align: center; color: var(--ad-text-secondary); }

.online-invite-error              { text-align: center; padding: 12px 0; }
.online-invite-error-title        { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.online-invite-error-msg          { margin: 0 0 20px; color: var(--ad-text-secondary); }

.online-invite-success            { text-align: center; padding: 12px 0; }
.online-invite-success-title      { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; color: var(--ad-orange); }
.online-invite-success p          { margin: 0 0 20px; color: var(--ad-text-secondary); }

/* ──────────────────────────────────────────────
 * Account Groups page (Phase 7c)
 * ────────────────────────────────────────────── */

.ag-section           { margin-bottom: 28px; }
.ag-section-title     { font-size: 0.8125rem; font-weight: 600; color: var(--ad-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px; }
/* Horizontal scroller so a user can own N groups (Personal + multiple
 * Fleets for different companies via separate Paddle subs) without the
 * grid wrapping into a tall block that pushes the manage panel below
 * the fold. Matches the iOS/Android horizontal scroller. */
.ag-groups-grid       { display: flex; gap: 12px; overflow-x: auto; overflow-y: visible; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ag-groups-grid::-webkit-scrollbar { height: 6px; }
.ag-groups-grid::-webkit-scrollbar-thumb { background: var(--ad-cream-dark); border-radius: 3px; }
.ag-card              { flex: 0 0 224px; background: #fff; border: 1px solid var(--ad-cream-dark); border-radius: var(--ad-radius-md, 10px); padding: 16px; cursor: pointer; transition: all var(--ad-transition-fast); scroll-snap-align: start; }
.ag-card:hover        { border-color: var(--ad-orange); }
.ag-card.is-active    { border-color: var(--ad-orange); background: rgba(242,163,51,0.08); }
.ag-card.ag-card-add  { background: rgba(242,163,51,0.04); border-style: dashed; color: var(--ad-orange); }
.ag-card.ag-card-add:hover { background: rgba(242,163,51,0.10); }
.ag-card.ag-card-add .ag-card-name { color: var(--ad-orange); }
.ag-card-name         { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.ag-card-meta         { font-size: 0.8125rem; color: var(--ad-text-tertiary); }

.ag-detail-card       { background: #fff; border: 1px solid var(--ad-cream-dark); border-radius: var(--ad-radius-md, 10px); padding: 20px; }
.ag-detail-head       { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.ag-detail-name       { font-size: 1.25rem; font-weight: 700; }
.ag-detail-type       { font-size: 0.75rem; color: var(--ad-text-tertiary); padding: 4px 10px; border-radius: var(--ad-radius-sm); background: var(--ad-cream-dark); }

.ag-subhead           { font-size: 0.75rem; font-weight: 600; color: var(--ad-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 8px; }

.ag-members-list, .ag-invites-list { display: flex; flex-direction: column; gap: 6px; }

.ag-member-row, .ag-invite-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 10px 12px;
    background: var(--ad-cream);
    border-radius: var(--ad-radius-sm);
    align-items: center;
}
.ag-member-name, .ag-invite-email { font-weight: 600; grid-column: 1; }
.ag-member-meta, .ag-invite-meta  { font-size: 0.75rem; color: var(--ad-text-tertiary); grid-column: 1; }
.ag-remove                         { grid-row: 1 / 3; grid-column: 2; color: #d32f2f; }

.ag-actions-row                    { display: flex; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }

.ag-danger                         { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ad-cream-dark); }
.ad-btn-danger                     { background: #d32f2f; color: #fff; }
.ad-btn-danger:hover               { background: #b71c1c; }

/* Subscription block on Account Groups page (Phase 7d) */
.ag-subscription       { margin-bottom: 18px; padding: 14px 16px; background: var(--ad-cream); border-radius: var(--ad-radius-md, 10px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ag-subscription .ad-btn { margin-left: auto; }
.ag-subscription.is-active { background: rgba(242,163,51,0.10); }
.ag-sub-label          { font-size: 0.75rem; color: var(--ad-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.ag-sub-plan           { font-size: 1rem; font-weight: 700; }
.ag-sub-meta           { font-size: 0.8125rem; color: var(--ad-text-tertiary); margin-left: auto; }
.ag-subscription.is-active .ag-sub-meta { margin-left: 0; }

/* Usage-vs-caps block — sits between subscription card and manage
 * actions. Two rows (Vehicles, Drivers) each with a label, N-of-M
 * count, a thin progress bar, and an upgrade CTA when at-cap. */
.ag-limits                { margin-bottom: 18px; padding: 14px 16px; background: var(--ad-cream); border-radius: var(--ad-radius-md, 10px); }
.ag-limits-head           { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.ag-limits-tier           { font-size: 0.8125rem; color: var(--ad-text-tertiary); margin-left: auto; }
.ag-override-note         { color: var(--ad-orange, #b55f36); font-weight: 600; }
.ag-limit-row             { display: grid; grid-template-columns: 90px auto 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.ag-limit-row + .ag-limit-row { border-top: 1px solid var(--ad-cream-dark, rgba(0,0,0,0.06)); }
.ag-limit-label           { font-size: 0.875rem; font-weight: 600; color: var(--ad-text-primary); }
.ag-limit-count           { font-size: 0.875rem; color: var(--ad-text-secondary); font-variant-numeric: tabular-nums; }
.ag-limit-count strong    { color: var(--ad-text-primary); font-weight: 700; }
.ag-limit-bar             { height: 6px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; }
.ag-limit-bar > span      { display: block; height: 100%; background: var(--ad-orange); transition: width var(--ad-transition); }
.ag-limit-row.is-full .ag-limit-bar > span { background: var(--ad-red, #d32f2f); }
.ag-limit-row.is-full .ag-limit-count strong { color: var(--ad-red, #d32f2f); }
.ag-limit-full            { font-size: 0.75rem; font-weight: 700; color: var(--ad-red, #d32f2f); text-transform: uppercase; letter-spacing: 0.04em; }
.ag-limit-cta             { justify-self: end; }

/* When the same limits block is reused inside the dashboard
 * Subscription tile, drop the bottom margin (the tile already has
 * padding) and lift it off the KPI value. */
.dash-sub-limits          { margin: 14px 0 0; }
.dash-sub-limits .ag-limit-cta { display: none; }

@media (max-width: 560px) {
    .ag-limit-row         { grid-template-columns: auto auto; row-gap: 6px; }
    .ag-limit-bar         { grid-column: 1 / -1; }
    .ag-limit-cta         { grid-column: 1 / -1; justify-self: start; }
}

/* ──────────────────────────────────────────────
 * Billing & Subscriptions pages
 *
 * Platform switcher mirrors the Account Group switcher shape (pill
 * trigger + dropdown menu). The menu supports a disabled state that
 * greys out Apple / Google — they always render but can't be picked
 * on the web. `ad-billing-pill` is shared with the invoice-row
 * Platform column so the same colour carries through.
 * ────────────────────────────────────────────── */

.ad-billing-platform-card        { padding-bottom: 20px; }
.ad-billing-platform-help        {
    font-size: 13px;
    color: var(--ad-text-secondary);
    margin: 4px 0 18px;
    line-height: 1.55;
}
.ad-billing-platform-help a      { color: var(--ad-orange); text-decoration: none; }
.ad-billing-platform-help a:hover{ text-decoration: underline; }

.ad-billing-platform-switcher    { position: relative; display: inline-block; }

.ad-billing-platform-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--ad-cream-dark, #efe8d7);
    color: var(--ad-text-primary);
    border: 1px solid transparent;
    border-radius: var(--ad-radius-full);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: all var(--ad-transition-fast);
    min-width: 220px;
}
.ad-billing-platform-trigger:hover { border-color: var(--ad-orange); }
.ad-billing-platform-trigger i     { width: 22px; height: 22px; flex: 0 0 auto; }

.ad-billing-platform-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid var(--ad-cream-dark);
    border-radius: var(--ad-radius-md, 10px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 1000;
}
.ad-billing-platform-menu[hidden] { display: none; }

.ad-billing-platform-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    border-radius: var(--ad-radius-sm);
    color: var(--ad-text-primary);
}
.ad-billing-platform-menu-item:hover     { background: var(--ad-cream-dark); }
.ad-billing-platform-menu-item.is-active { background: rgba(242,163,51,0.12); }
.ad-billing-platform-menu-item.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ad-billing-platform-menu-item.is-disabled:hover { background: none; }
.ad-billing-platform-menu-item i { width: 14px; height: 14px; color: var(--ad-orange); }

.ad-billing-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ad-radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
}

.ad-billing-notes { margin: 4px 0 0; padding-left: 20px; color: var(--ad-text-secondary); line-height: 1.7; font-size: 16px; }
.ad-billing-notes a { color: var(--ad-orange); text-decoration: none; }
.ad-billing-notes a:hover { text-decoration: underline; }

/* Billing → Add-Ons card. Stepper rows + summary + action buttons. */
.ad-addons-help {
    font-size: 13px;
    color: var(--ad-text-secondary);
    margin: 4px 0 18px;
    line-height: 1.55;
}
.ad-addons-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ad-border);
}
.ad-addons-row:first-of-type { border-top: none; padding-top: 4px; }
.ad-addons-row.is-highlight {
    background: var(--ad-highlight-bg, rgba(255, 176, 64, 0.18));
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    transition: background-color 600ms ease;
}
.ad-addons-row-label { min-width: 0; }
.ad-addons-row-title { font-weight: 600; color: var(--ad-text-primary); }
.ad-addons-row-sub   { font-size: 12px; color: var(--ad-text-tertiary); margin-top: 2px; }
.ad-addons-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ad-addons-stepper .ad-btn {
    min-width: 32px;
    padding: 4px 10px;
}
.ad-addons-qty {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ad-text-primary);
}
.ad-addons-summary {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--ad-surface-alt, rgba(0,0,0,0.03));
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.ad-addons-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Subscription page blocks */
.ad-sub-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ad-sub-page-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ad-text-tertiary); font-weight: 700; }
.ad-sub-page-plan  { font-size: 22px; font-weight: 700; margin-top: 4px; }
.ad-sub-page-meta  { font-size: 13px; color: var(--ad-text-secondary); margin-top: 2px; }
.ad-sub-page-group { font-size: 13px; color: var(--ad-text-tertiary); margin-top: 6px; }

.ad-sub-page-caps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ad-cream-dark);
}
.ad-sub-page-cap {
    background: var(--ad-cream);
    border-radius: var(--ad-radius-md, 10px);
    padding: 14px 16px;
}
.ad-sub-page-cap-label { font-size: 12px; color: var(--ad-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.ad-sub-page-cap-value { font-size: 22px; font-weight: 700; margin-top: 4px; }


/* ── Nav search (topbar) ───────────────────────────────────────── */
.online-topbar-search {
    position: relative;
    display: flex;
    align-items: center;
}
.online-topbar-search-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ad-cream, #fdf8f0);
    border: 0;
    cursor: pointer;
    color: var(--ad-text-primary, #434850);
    align-items: center;
    justify-content: center;
}
.online-topbar-search-toggle:hover { background: var(--ad-cream-dark, #ece4d2); }
.online-topbar-search-toggle i { width: 18px; height: 18px; }
.online-topbar-search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--ad-cream, #fdf8f0);
    border-radius: 999px;
    min-width: 260px;
}
.online-topbar-search-leading { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ad-text-tertiary, #a2a5a6); flex-shrink: 0; }
.online-topbar-search-close {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px;
    color: var(--ad-text-secondary, #727681);
}
.online-topbar-search-close i { width: 22px; height: 22px; flex: 0 0 auto; }

.online-nav-search-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--ad-text-primary, #434850);
    font-size: 13px;
    font-family: inherit;
    padding: 4px 0;
    min-width: 0;
}
.online-nav-search-input::placeholder { color: var(--ad-text-tertiary, #a2a5a6); }

/* Mobile: collapse to icon; expanded state goes full-width with close button. */
@media (max-width: 720px) {
    .online-topbar-search-toggle { display: inline-flex; }
    .online-topbar-search-field { display: none; }
    .online-topbar-search.expanded { position: absolute; inset: 0; padding: 8px 12px; background: var(--ad-surface, #fff); z-index: 1200; display: flex; align-items: center; }
    .online-topbar-search.expanded .online-topbar-search-toggle { display: none; }
    .online-topbar-search.expanded .online-topbar-search-field { display: flex; flex: 1; min-width: 0; }
    .online-topbar-search.expanded .online-topbar-search-close { display: inline-flex; }
    .online-topbar-search.expanded .online-nav-search-results {
        position: fixed;
        top: 64px;
        left: 8px;
        right: 8px;
        max-height: calc(100vh - 80px);
    }
}

.online-nav-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #fff;
    color: var(--ad-text-primary, #434850);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    max-height: 440px;
    overflow-y: auto;
    padding: 6px 0;
    z-index: 5000;
}
.search-section { padding: 6px 0; }
.search-section + .search-section { border-top: 1px solid var(--ad-divider, #ece4d2); }
.search-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ad-text-tertiary, #a2a5a6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.search-section-head i { width: 14px; height: 14px; }
.search-section-count {
    margin-left: auto;
    background: var(--ad-cream, #fdf8f0);
    color: var(--ad-text-secondary, #727681);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0;
    text-transform: none;
}
.search-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: var(--ad-text-primary, #434850);
}
.search-row:hover { background: var(--ad-cream, #fdf8f0); }
.search-row-title { font-size: 13px; font-weight: 600; }
.search-row-sub { font-size: 12px; color: var(--ad-text-secondary, #727681); margin-top: 2px; }
.search-row-more { font-size: 12px; font-weight: 600; color: var(--ad-orange, #f2a333); }
.search-empty-inline { padding: 14px; font-size: 13px; color: var(--ad-text-secondary, #727681); }

/* Full-page results */
.online-search-results .search-section-full {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 10px 0;
    margin-bottom: 14px;
}
.online-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--ad-text-secondary, #727681);
}
.online-empty-state i { width: 42px; height: 42px; color: var(--ad-text-tertiary, #a2a5a6); }
.online-empty-state h3 { margin: 12px 0 6px; font-size: 17px; color: var(--ad-text-primary, #434850); }

/* ──────────────────────────────────────────────
   Global scrollbars — transparent track, translucent thumb
   so the rail doesn't paint a solid bar over cream backgrounds.
   Applies site-wide; per-element rules above still win.
   ────────────────────────────────────────────── */
html { scrollbar-color: rgba(0, 0, 0, 0.25) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.38); }

/* ─────────────────────────────────────────────
   New Tab page — chromeless quick-action landing.
   Centered hero + auto-fit grid of cards (same ag-card aesthetic
   as the group switcher). Only rendered under body.newtab-mode,
   which hides the sidebar/menubar/topbar above.
   ───────────────────────────────────────────── */
#page-newtab { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; box-sizing: border-box; }
.nt-hero { width: 100%; max-width: 880px; text-align: center; }
.nt-title { font-size: 1.75rem; font-weight: 700; margin: 0 0 6px; color: var(--ad-text-primary); }
.nt-subtitle { font-size: 1rem; color: var(--ad-text-secondary); margin: 0 0 28px; }
.nt-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.nt-card {
    background: #fff;
    border: 1px solid var(--ad-cream-dark);
    border-radius: var(--ad-radius-md, 10px);
    padding: 22px 16px;
    cursor: pointer;
    transition: all var(--ad-transition-fast);
    text-align: center;
    font: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.nt-card:hover { border-color: var(--ad-orange); transform: translateY(-1px); }
.nt-card.nt-card-add { background: rgba(242,163,51,0.04); border-style: dashed; }
.nt-card.nt-card-add:hover { background: rgba(242,163,51,0.10); }
.nt-card.nt-card-add .nt-card-name { color: var(--ad-orange); }
.nt-card-icon { color: var(--ad-orange); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.nt-card-icon i { width: 28px; height: 28px; }
.nt-card-name { font-size: 1rem; font-weight: 600; color: var(--ad-text-primary); }
.nt-card-meta { font-size: 0.8125rem; color: var(--ad-text-tertiary); line-height: 1.35; }
.nt-hint { font-size: 0.875rem; font-style: italic; color: var(--ad-text-tertiary); margin: 0; max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ── Settings ───────────────────────────────────
   Side-tab shell. Tabs left, panel right. Stacks
   vertically on narrow viewports so the tab list
   sits above the panel rather than crowding it. */

.settings-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--ad-surface-solid, #fff);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    padding: 8px;
    position: sticky;
    top: 80px;
}
.settings-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--ad-radius-sm, 8px);
    color: var(--ad-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}
.settings-tab i { width: 18px; height: 18px; }
.settings-tab:hover { background: rgba(0,0,0,0.04); color: var(--ad-text-primary); }
.settings-tab.is-active {
    background: rgba(242, 163, 51, 0.12);
    color: var(--ad-text-primary);
    font-weight: 600;
}
.settings-tab.is-active i { color: var(--ad-orange); }

.settings-content { min-width: 0; }
.settings-panel { display: none; }
.settings-panel.is-active { display: block; }

.settings-panel-head { margin-bottom: 16px; }
.settings-panel-head h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    color: var(--ad-text-dark);
}
.settings-panel-head p {
    margin: 0;
    color: var(--ad-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 640px;
}

.settings-purpose-cards {
    display: grid;
    /* Two ~3-of-12 columns side by side, then a fluid spacer so the
       cards stay narrow on wide screens instead of stretching to fill
       the panel. Drops to a single column under 900px so each card
       still has room for its rows. */
    grid-template-columns: minmax(260px, 3fr) minmax(260px, 3fr) 6fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .settings-purpose-cards { grid-template-columns: 1fr; }
}
.settings-purpose-card {
    background: var(--ad-surface-solid, #fff);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-purpose-card-personal { background: rgba(242, 163, 51, 0.06); }
.settings-purpose-card-business { background: rgba(51, 133, 224, 0.06); }
.settings-purpose-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-purpose-card-head h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--ad-text-dark);
}
.settings-purpose-card-personal .settings-purpose-card-head i { color: var(--ad-orange); }
.settings-purpose-card-business .settings-purpose-card-head i { color: var(--ad-blue, #3385E0); }

.settings-purpose-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.settings-purpose-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--ad-border);
    border-radius: 999px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.settings-purpose-row.is-dragging {
    opacity: 0.5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.settings-purpose-row.is-drop-target {
    border-color: var(--ad-orange);
    box-shadow: 0 0 0 2px rgba(242, 163, 51, 0.18);
    transform: translateY(-1px);
}
.settings-purpose-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--ad-text-tertiary);
    cursor: grab;
    flex-shrink: 0;
}
.settings-purpose-handle i { width: 14px; height: 14px; }
.settings-purpose-row.is-dragging .settings-purpose-handle { cursor: grabbing; }
.settings-purpose-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    text-align: left;
}
.settings-purpose-label {
    font-size: 0.875rem;
    color: var(--ad-text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.settings-purpose-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(34, 139, 34, 0.12);
    color: #228B22;
    font-size: 0.75rem;
    font-weight: 700;
}
.settings-purpose-system {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ad-text-tertiary);
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    padding: 2px 6px;
}
.settings-purpose-row-actions { display: flex; gap: 2px; flex-shrink: 0; }
/* Override the global .ad-btn-icon (30px) with a tighter chip-sized
   variant so the actions don't crowd the pill. Border drops too —
   the pill itself is the affordance frame; the icons are secondary. */
.settings-purpose-row-actions .ad-btn-icon {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    border-radius: 4px;
}
.settings-purpose-row-actions .ad-btn-icon i { width: 12px; height: 12px; }
.settings-purpose-row-actions .ad-btn-icon:hover { background: rgba(0,0,0,0.06); box-shadow: none; }
.settings-purpose-row-actions .ad-btn-icon-danger:hover { background: var(--ad-red); color: #fff; }
.settings-purpose-row-actions .ad-btn-icon[disabled] { opacity: 0.35; cursor: not-allowed; }
.settings-purpose-row-actions .ad-btn-icon[disabled]:hover { background: transparent; }

.settings-purpose-empty {
    font-size: 0.875rem;
    color: var(--ad-text-tertiary);
    font-style: italic;
    padding: 8px 4px;
}

.settings-purpose-add { align-self: flex-start; }

.settings-section {
    background: var(--ad-surface-solid, #fff);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    padding: 20px;
    max-width: 640px;
}
.settings-form { display: block; }
.settings-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ad-divider, #ece4d2);
}
.settings-form-status {
    font-size: 0.8125rem;
    color: var(--ad-text-secondary);
}
.settings-form-status.is-success { color: #228B22; }
.settings-form-status.is-error   { color: var(--ad-red, #C92A2A); }

/* From / To pin dots — green = origin, red = destination. Tiny
   inline circle hung off the address text in the My Drives table;
   mirrors the start/end pins on the drive map so the visual
   language stays consistent across surfaces. */
.ad-pin-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 1px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
    flex-shrink: 0;
}
.ad-pin-dot-start { background: #22A06B; }
.ad-pin-dot-end   { background: #C92A2A; }

/* Sign-in tab callout — flags shared/public-computer risk. Keeps
   the same .ad-form-hint type-scale as the surrounding copy but
   adds a warm tinted frame so the user reads it as advisory rather
   than as just more body text. */
.settings-signin-warning {
    background: rgba(242, 163, 51, 0.08);
    border-left: 3px solid var(--ad-orange);
    padding: 10px 12px;
    border-radius: 6px;
}
.settings-signin-warning .ad-form-hint { color: var(--ad-text-primary); }

.ad-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--ad-text-primary);
}
.ad-checkbox-row input[type="checkbox"] { accent-color: var(--ad-orange); }
.ad-form-hint {
    font-size: 0.8125rem;
    color: var(--ad-text-secondary);
    line-height: 1.45;
    margin-top: 6px;
}

@media (max-width: 720px) {
    .settings-shell { grid-template-columns: 1fr; }
    .settings-tabs {
        position: static;
        flex-direction: row;
        overflow-x: auto;
    }
    .settings-tab { white-space: nowrap; }
}

/* ─────────────────────────────────────────────────────
   LiveDrive — Live Map page, badges, banner, modals
   See online/modules/livedrive_map.php and online/js/livedrive.js.
   ───────────────────────────────────────────────────── */

.ld-pulse-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #3aa552;
    box-shadow: 0 0 0 0 rgba(58,165,82,0.6);
    animation: ld-pulse 1.6s ease-out infinite;
    flex-shrink: 0;
}
@keyframes ld-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(58,165,82,0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(58,165,82,0);    }
    100% { box-shadow: 0 0 0 0   rgba(58,165,82,0);    }
}

.ld-map-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 480px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--ad-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    background: #eef2f3;
}
.ld-map { position: absolute; inset: 0; }

/* Full-bleed map page: pin the wrap to the viewport so the page
   never scrolls regardless of map height quirks. Offsets mirror
   the topbar's positioning so it tucks under the topbar (and to
   the right of the sidebar / under the menubar) in every nav mode. */
.ld-map-wrap-full {
    position: fixed;
    top: 56px;
    left: 240px;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    isolation: isolate;
}
.online-sidebar.collapsed ~ .online-main .ld-map-wrap-full { left: 64px; }
body.nav-menubar .ld-map-wrap-full { top: calc(52px + 56px); left: 0; }
body.newtab-mode .ld-map-wrap-full { top: 0; left: 0; }
.ld-header-card {
    position: absolute;
    top: 16px; left: 80px; right: 16px;
    z-index: 1100;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.ld-header-text { flex: 1; min-width: 0; }
.ld-header-text h1 {
    font-size: 1.25rem; font-weight: 800;
    color: var(--ad-text-dark);
    margin: 0 0 2px 0; letter-spacing: -0.02em;
}
.ld-header-text p {
    color: var(--ad-text-secondary);
    font-size: 0.8125rem;
    margin: 0;
}
.ld-header-actions {
    display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
/* Driver card sits below the header card on the full-bleed layout. */
.ld-map-wrap-full .ld-card { top: 96px; }

.ld-card {
    position: absolute;
    top: 16px; left: 16px;
    width: 320px;
    max-height: calc(100% - 32px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}
.ld-card.collapsed .ld-card-body { display: none; }
.ld-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--ad-header-dark, #1f2935);
    color: #fff;
    cursor: move;
    user-select: none;
}
.ld-card-title { font-weight: 600; font-size: 16px; flex: 1; }
.ld-card-count {
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}
.ld-card-collapse {
    background: transparent; border: none; color: #fff; cursor: pointer; padding: 2px;
}
.ld-card-body {
    overflow-y: auto;
    padding: 8px 0;
}
.ld-card-empty {
    padding: 20px 16px;
    text-align: center;
    color: var(--ad-text-secondary, #727681);
    font-size: 13px;
    line-height: 1.5;
}
.ld-card-list { display: flex; flex-direction: column; }
.ld-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ad-divider, #ece4d2);
    cursor: pointer;
}
.ld-row:hover { background: rgba(0,0,0,0.03); }
.ld-row:last-child { border-bottom: none; }
.ld-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.ld-dot-fresh { background: #3aa552; }
.ld-dot-amber { background: #d49b2c; }
.ld-dot-stale { background: #9aa0a6; }
.ld-row-main { flex: 1; min-width: 0; }
.ld-row-name { font-weight: 600; font-size: 13px; }
.ld-row-sub  { font-size: 12px; color: var(--ad-text-secondary, #727681); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-row-meta { text-align: right; flex-shrink: 0; }
.ld-row-spd  { font-size: 12px; font-weight: 600; }
.ld-row-rel  { font-size: 11px; color: var(--ad-text-tertiary, #a2a5a6); }
.ld-arrow    { display: inline-block; font-size: 16px; color: var(--ad-orange, #F2A333); margin-left: 4px; }

.ld-marker-wrap { background: transparent; border: none; }
.ld-marker {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ld-pop {
    min-width: 180px;
    font-size: 13px;
    line-height: 1.35;
}
.ld-pop-name { font-weight: 700; margin-bottom: 4px; }
.ld-pop-row  { display: flex; gap: 6px; font-size: 12px; }
.ld-pop-row span { color: var(--ad-text-secondary, #727681); width: 60px; flex-shrink: 0; }

.ld-lapsed {
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    background: #fff7e6;
    border: 1px solid #f0c36d;
    color: #6c4400;
    border-radius: 8px;
    box-shadow: var(--ad-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
    max-width: 92%;
}
.ld-lapsed-inner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
}

/* Drivers list LIVE badge */
.ld-live-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #3aa552;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 8px;
    text-transform: uppercase;
}
.ld-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: ld-pulse-sm 1.6s ease-out infinite;
}
@keyframes ld-pulse-sm {
    0%   { opacity: 1; }
    50%  { opacity: 0.35; }
    100% { opacity: 1; }
}

/* Drivers list LiveDrive status pills (enabled vs awaiting consent) */
.driver-card-ld-badge {
    display: inline-flex; align-items: center;
    background: #3aa552;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 8px;
    text-transform: uppercase;
    vertical-align: middle;
}
.driver-card-ld-badge.driver-card-ld-pending {
    background: #d99023;
}

/* Self-broadcasting top banner (driver-side) */
/* Pin directly below the topbar with the same offsets as the orange
   consent banner (.ld-consent-banner) so the two strips look like
   stacked sister bars when both ever surfaced at once — and so each
   sits flush against the topbar instead of overlapping the menubar. */
.ld-self-banner {
    position: fixed;
    top: 56px;
    left: 240px;
    right: 0;
    height: 80px;
    z-index: 39;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 24px;
    background: #2c7a3e;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    box-sizing: border-box;
    transition: left var(--ad-transition);
}
body.nav-menubar .ld-self-banner { left: 0; top: calc(52px + 56px); }
.online-sidebar.collapsed ~ .ld-self-banner { left: 64px; }

.ld-self-banner-text { flex: 0 1 auto; line-height: 1.35; }
.ld-self-banner-pause,
.ld-self-banner-dismiss {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
}
.ld-self-banner-dismiss {
    padding: 4px 10px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}
body.has-ld-self-banner .online-main { padding-top: calc(56px + 40px + 80px); }
body.has-ld-self-banner.nav-menubar .online-main {
    padding-top: calc(52px + 56px + 32px + 80px);
}

/* ── Driver-only mode ─────────────────────────────
   Toggled by app.js applyDriverOnlyMode() when the user's only
   account-group membership is `driver`. Every nav element / control
   tagged `data-driver-visible="0"` collapses out of view.
   See driver-role-and-invite-flow.md.
*/
body.driver-only [data-driver-visible="0"] { display: none !important; }
/* Account button (avatar + name) and group switcher stay visible —
   the button doubles as the name display next to logout, and the
   Account modal that opens has subscription/billing trimmed via the
   data-driver-visible="0" tag inside the modal markup. */

/* ── LiveDrive consent banner ────────────────────
   Full-width orange CTA bar directly below the topbar for drivers
   whose admin enabled LiveDrive but who haven't yet accepted consent.
   Click → showLiveDriveConsentModal() in livedrive.js. JS toggles
   the [hidden] attribute based on livedrive.driver.status. */
.ld-consent-banner {
    /* Pin directly below the topbar with the same left/right offsets
       so the bar visually flushes against it. Both the sidebar-mode
       (left: 240px, top: 56px) and menubar-mode (left: 0, top:
       52px+56px) overrides below mirror the .online-topbar rules so
       the two strips stay locked together when the user toggles nav
       styles. */
    position: fixed;
    top: 56px;
    left: 240px;
    right: 0;
    height: 80px;
    z-index: 39;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 24px;
    background: var(--ad-orange, #f2a333);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: background .15s, left var(--ad-transition);
    box-sizing: border-box;
}
.ld-consent-banner:hover { background: var(--ad-orange-dark, #e28f1d); }
.ld-consent-banner[hidden] { display: none !important; }
.ld-consent-banner-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.ld-consent-banner-text { line-height: 1.35; }

/* Menubar mode: full-width below the menu bar + topbar stack. */
body.nav-menubar .ld-consent-banner { left: 0; top: calc(52px + 56px); }
/* Collapsed sidebar mirrors the topbar's adjusted left offset. */
.online-sidebar.collapsed ~ .ld-consent-banner { left: 64px; }

/* When the banner is visible, push the main column down so its first
   row clears the banner. JS adds body.has-ld-consent-banner alongside
   toggling the banner's [hidden] attribute. */
body.has-ld-consent-banner .online-main { padding-top: calc(56px + 40px + 80px); }
body.has-ld-consent-banner.nav-menubar .online-main {
    padding-top: calc(52px + 56px + 32px + 80px);
}