/* ============================================
   AH Tours Control Panel – Modern Dark Theme 2026
   Layout: Top header + Sidebar + Main content
   Font: Inter (load via Google Fonts in HTML)
   ============================================ */

/* ========== Design Tokens ==========
 * Theme system: defaults (`:root`) declare the dark palette so any markup
 * without an explicit `app-theme-*` class still renders correctly. The
 * light palette lives under `body.app-theme-light` and re-declares every
 * variable so a single class swap re-skins the whole panel.
 *
 * We also expose semantic tint variables (`--surface-*`, `--accent-soft-*`,
 * etc.) so the long tail of "rgba(255,255,255,0.0X)" overlays sprinkled
 * through this file can be swapped to dark-on-light overlays in light mode
 * via the override block at the bottom of this file. */
:root {
    --bg-body: #09090b;
    --bg-header: #0c0c0e;
    --bg-sidebar: #0c0c0e;
    --bg-card: #111113;
    --bg-elevated: #18181b;
    --bg-input: rgba(255, 255, 255, 0.04);
    --bg-hover: #27272a;
    --primary: #6366f1;
    --primary-hover: #818cf8;
    --primary-dark: #4f46e5;
    --primary-glow: rgba(99, 102, 241, 0.2);
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --success: #10b981;
    --error: #f43f5e;
    --warning: #f59e0b;
    --modal-backdrop: rgba(9, 9, 11, 0.88);
    --modal-border: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Semantic surface tints — used by the light-theme override block. */
    --surface-1: rgba(255, 255, 255, 0.02);
    --surface-2: rgba(255, 255, 255, 0.04);
    --surface-3: rgba(255, 255, 255, 0.06);
    --surface-hover: rgba(255, 255, 255, 0.07);
    --surface-active: rgba(255, 255, 255, 0.12);
    --accent-soft-bg: rgba(99, 102, 241, 0.12);
    --accent-soft-text: #a5b4fc;
    --accent-softer-text: #c7d2fe;
    --on-primary: #ffffff;
    --scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.14);
}

/* ========== Light Theme Tokens ==========
 * A coherent, modern light palette. Backgrounds are off-white with white
 * cards/headers for clean contrast; accents stay indigo (matching the
 * dark theme) but shift slightly darker so they remain readable on light
 * surfaces. */
body.app-theme-light {
    /* Body sits on a soft slate so the white cards/headers visibly lift
     * off the page. Pure-white-on-light-grey was too low contrast. */
    --bg-body: #e6e9ef;
    --bg-header: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #eef0f4;
    --bg-input: #eef0f4;
    --bg-hover: #dbdfe6;
    --primary: #4f46e5;
    --primary-hover: #6366f1;
    --primary-dark: #4338ca;
    --primary-glow: rgba(79, 70, 229, 0.22);
    --text-primary: #0f172a;          /* slate-900 — slightly cooler & darker than zinc-900 */
    --text-secondary: #475569;        /* slate-600 */
    --text-muted: #64748b;            /* slate-500 */
    --border: rgba(15, 23, 42, 0.14);
    --border-hover: rgba(15, 23, 42, 0.28);
    --success: #047857;               /* emerald-700 — was 600, now reads stronger on tints */
    --error: #b91c1c;                 /* red-700 */
    --warning: #b45309;               /* amber-700 */
    --modal-backdrop: rgba(15, 23, 42, 0.50);
    --modal-border: rgba(15, 23, 42, 0.14);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.18), 0 6px 14px rgba(15, 23, 42, 0.10);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.20);

    --surface-1: rgba(15, 23, 42, 0.04);
    --surface-2: rgba(15, 23, 42, 0.06);
    --surface-3: rgba(15, 23, 42, 0.09);
    --surface-hover: rgba(15, 23, 42, 0.08);
    --surface-active: rgba(15, 23, 42, 0.14);
    --accent-soft-bg: rgba(79, 70, 229, 0.16);
    --accent-soft-text: #3730a3;      /* indigo-800 — readable on the bumped-up tint */
    --accent-softer-text: #312e81;    /* indigo-900 */
    --on-primary: #ffffff;
    --scrollbar-thumb: rgba(15, 23, 42, 0.24);
    --scrollbar-thumb-hover: rgba(15, 23, 42, 0.40);
}

/* ========== Reset & Base ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: rgba(99, 102, 241, 0.35);
    color: #fafafa;
}

/* Light mode: the dark-mode selection (35 % translucent indigo + near-white
 * text) collapses to "white-on-pastel-purple" against the light background
 * and becomes nearly unreadable. Use a solid indigo highlight with pure
 * white text instead — same color as the active sidebar pill / primary
 * button, so selected text reads with full contrast. */
body.app-theme-light ::selection {
    background: var(--primary, #4f46e5);
    color: #ffffff;
}
body.app-theme-light ::-moz-selection {
    background: var(--primary, #4f46e5);
    color: #ffffff;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-body);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

body.control-panel {
    padding: 0;
    overflow-x: hidden;
}

/* ========== Custom Scrollbar ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* ========== App Wrapper ========== */
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ========== Top Header ========== */
.top-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(99, 102, 241, 0.06);
    padding: 0 32px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    color: var(--primary);
    font-size: 1.3rem;
}

.logo-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.header-username {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.btn-header {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    min-height: 36px;
}

.btn-logout {
    background: rgba(244, 63, 94, 0.1);
    color: var(--error);
    border: 1px solid rgba(244, 63, 94, 0.3);
    transition: var(--transition);
    gap: 6px;
}

.btn-logout:hover {
    color: #fff;
    border-color: var(--error);
    background: var(--error);
}

/* Hamburger: hidden on desktop */
.header-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    margin-right: 8px;
}
.hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

/* ========== Mobile Drawer ========== */
.mobile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
body.mobile-drawer-open .mobile-drawer-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer {
    position: fixed;
    left: 0;
    top: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: #0c0c0e;
    border-right: 1px solid var(--border);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
}
body.mobile-drawer-open .mobile-drawer {
    transform: translateX(0);
}
.mobile-drawer-user {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mobile-drawer-nav {
    flex: 1;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-drawer-nav .sidebar-nav-section:not(:first-child) {
    margin-top: 12px;
}
.mobile-drawer-nav .sidebar-nav-section-title {
    padding: 4px 20px 6px;
}
.mobile-drawer-nav .sidebar-link {
    padding: 14px 24px;
    border-radius: 0;
    justify-content: flex-start;
    font-size: 14px;
}
.mobile-drawer-footer {
    padding: 12px 0 24px;
    border-top: 1px solid var(--border);
}
.mobile-drawer-footer .sidebar-link {
    padding: 14px 24px;
    justify-content: flex-start;
    font-size: 14px;
    display: flex;
}
.mobile-drawer-footer .sidebar-link-logout {
    color: var(--error);
}

.mobile-drawer .sidebar-link.active {
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    border-left: 3px solid var(--primary);
}

/* ========== App Body & Footer ========== */
.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.app-footer {
    flex-shrink: 0;
    padding: 16px 24px;
    background: #0c0c0e;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.app-footer-text {
    /* Lets very long copyright strings wrap onto a second line on narrow
       screens without pushing the version pill off-screen. */
    min-width: 0;
}

.app-footer-sep {
    color: var(--text-muted);
    opacity: 0.55;
    user-select: none;
}

/* Small monospace pill so the version number is always easy to read out
   loud during a support call ("you're on v one-zero-three"). Uses the
   panel's primary accent so a fresh deploy is visually obvious. */
.app-footer-version {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary, #818cf8);
    border: 1px solid rgba(99, 102, 241, 0.28);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    cursor: default;
    user-select: text;
}

body.app-theme-light .app-footer-version {
    background: rgba(99, 102, 241, 0.10);
    color: var(--primary, #4f46e5);
    border-color: rgba(99, 102, 241, 0.30);
}

.app-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.app-footer a:hover {
    color: var(--primary);
}

/* ========== Panel update overlay ==========
 * Full-screen BLOCKING modal shown when the panel detects a newer version
 * on the server while the user has the page open. There is intentionally
 * no dismiss / "Later" path: continuing to operate on stale JS while the
 * server has already moved on is a real footgun (cached form handlers
 * calling removed endpoints, UI states the new server doesn't recognise,
 * etc.) so the user is required to refresh before doing anything else.
 *
 * Implementation notes:
 *   - position: fixed; inset: 0 covers the whole viewport, including the
 *     header / sidebar.
 *   - The semi-opaque background + backdrop-filter blur visually demote
 *     the page underneath without hiding it entirely (operators can still
 *     see what they were doing, just can't touch it).
 *   - pointer-events flips from `none` → `auto` on `.show` so the fade-in
 *     animation doesn't intercept clicks before it's fully on-screen.
 *   - A focus trap in the JS keeps Tab pinned to the Refresh button so
 *     keyboard users can't escape behind the modal either.
 */
.panel-update-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;          /* above everything else, including modals */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 8, 11, 0.72);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease-out;
    overflow: auto;          /* if viewport is shorter than the card */
}

body.app-theme-light .panel-update-overlay {
    background: rgba(15, 23, 42, 0.46);
}

.panel-update-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* Lock background scroll so the page underneath can't move while the
   modal is open. Applied to <html> and <body> via JS when the overlay
   mounts; removed on refresh (which is the only way out anyway). */
html.panel-update-locked,
body.panel-update-locked {
    overflow: hidden !important;
    /* Preserve scroll position visually — without this, Safari sometimes
       jumps to the top when overflow: hidden hits <html>. */
    height: 100%;
}

.panel-update-card {
    width: 100%;
    max-width: 480px;
    background: var(--bg-card, #18181b);
    border: 1px solid var(--border, #27272a);
    border-radius: 16px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.35);
    padding: 28px 28px 24px 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 8px 20px;
    color: var(--text-primary, #f4f4f5);
    /* Subtle pop-in: card sits slightly below + scaled-down before .show. */
    transform: translateY(12px) scale(0.97);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.panel-update-overlay.show .panel-update-card {
    transform: translateY(0) scale(1);
}

body.app-theme-light .panel-update-card {
    background: #ffffff;
    border-color: var(--border, #e4e4e7);
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.22),
        0 4px 16px rgba(15, 23, 42, 0.10);
}

.panel-update-icon {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.16);
    color: var(--primary, #818cf8);
    flex-shrink: 0;
    /* Gentle pulse so a slow-glance user notices the prompt without it
       being distracting enough to interrupt typing. */
    animation: panel-update-pulse 2.4s ease-in-out infinite;
}

body.app-theme-light .panel-update-icon {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary, #4f46e5);
}

@keyframes panel-update-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); }
    50%      { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
}

.panel-update-body {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    min-width: 0;
    align-self: center;
}

.panel-update-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary, #f4f4f5);
    letter-spacing: -0.01em;
}

.panel-update-msg {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary, #a1a1aa);
}

.panel-update-versions-line {
    margin: 0;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-muted, #71717a);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, #27272a);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.02em;
    display: inline-block;
}

body.app-theme-light .panel-update-versions-line {
    background: rgba(15, 23, 42, 0.04);
    border-color: var(--border, #e4e4e7);
}

.panel-update-actions {
    grid-row: 2 / span 1;
    grid-column: 1 / span 2;
    display: flex;
    justify-content: stretch;
    margin-top: 18px;
}

.panel-update-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.panel-update-btn:active { transform: translateY(1px); }

.panel-update-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45);
}

.panel-update-btn-primary {
    background: var(--primary, #6366f1);
    color: #ffffff;
    border-color: var(--primary, #6366f1);
    width: 100%;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.panel-update-btn-primary:hover {
    background: var(--primary-hover, #4f46e5);
    border-color: var(--primary-hover, #4f46e5);
}

body.app-theme-light .panel-update-btn-primary {
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.30);
}

/* Mobile: stack the icon above the text and let the card hug the
   viewport edges so the layout stays readable on narrow screens. */
@media (max-width: 520px) {
    .panel-update-overlay {
        padding: 16px;
    }
    .panel-update-card {
        padding: 22px 20px 20px 20px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 14px;
    }
    .panel-update-icon {
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
        margin: 0 auto;
        width: 52px;
        height: 52px;
    }
    .panel-update-body {
        grid-row: 2 / span 1;
        grid-column: 1 / span 1;
        text-align: center;
    }
    .panel-update-versions-line {
        display: block;
    }
    .panel-update-actions {
        grid-row: 3 / span 1;
        grid-column: 1 / span 1;
        margin-top: 4px;
    }
}

/* ========== Sidebar ========== */
.sidebar {
    width: 260px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-nav {
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-nav-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-nav-section:not(:first-child) {
    margin-top: 24px;
}

.sidebar-nav-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 8px 16px 8px;
    margin: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 10px;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}

.sidebar-link.active {
    background: rgba(99,102,241,0.12);
    color: #a5b4fc;
    border-left-color: var(--primary);
    font-weight: 600;
}

.sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    opacity: 0.7;
}
.sidebar-link.active .sidebar-icon {
    opacity: 1;
}
.sidebar-icon .nav-svg {
    width: 100%;
    height: 100%;
}

.sidebar-spacer {
    display: none;
}

.sidebar-link-admin {
    color: var(--warning);
}

.sidebar-link-admin.active {
    color: var(--warning);
}

.sidebar-nav .sidebar-link-logout {
    display: none;
}

.sidebar-link-logout:hover {
    color: var(--error);
}

/* ========== Main Content ========== */
.main-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 32px 40px 32px;
    background: var(--bg-body);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.page-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.page-actions {
    display: flex;
    gap: 12px;
}

.content-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.content-card:last-child {
    margin-bottom: 0;
}

/* ========== Dashboard Global Profile Bar ========== */
.dashboard-global-profile-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 16px 20px;
}

.dashboard-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 14px 20px;
}
.dashboard-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.dashboard-filter-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}
.dashboard-filter-label:hover {
    color: var(--text-primary);
}
.dashboard-filter-search-wrap {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 480px;
}
.dashboard-search-input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    background: var(--bg-elevated, #1a1f2e);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    transition: var(--transition);
}
.dashboard-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}
.dashboard-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dashboard-search-clear:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
}
.dashboard-filter-spacer {
    flex: 1 1 auto;
}
.dashboard-page-size-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}
.dashboard-page-size-select {
    padding: 6px 28px 6px 10px;
    background: var(--bg-elevated, #1a1f2e);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}
.dashboard-page-size-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.dashboard-pagination {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.dashboard-pagination .pagination-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dashboard-pagination .pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
}
.dashboard-pagination .pagination-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.dashboard-pagination .pagination-page-btn {
    min-width: 34px;
    padding: 4px 8px;
}
.dashboard-pagination .pagination-ellipsis {
    color: var(--text-secondary);
    padding: 0 4px;
}

.btn.btn-sm {
    padding: 4px 10px;
    font-size: 12.5px;
    line-height: 1.4;
    border-radius: 4px;
}
.btn.btn-warning {
    background: linear-gradient(180deg, #c08010, #a36608);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn.btn-warning:hover:not(:disabled) {
    background: linear-gradient(180deg, #d99221, #b8780f);
}

/* ============================================================
 * Dashboard list view (compact, one row per driver, scrollable)
 * Replaces the wide table for high-density driver management.
 * ============================================================ */
.dashboard-list-card {
    padding: 0;
    overflow: hidden;
}
.dashboard-list-header,
.dashboard-driver-row {
    display: grid;
    /* All data columns have fixed/bounded widths so header text and data
     * sit in the exact same column box and centered alignment matches
     * visually. Only the Actions column is flexible (1fr) so it absorbs
     * any extra horizontal space on wide screens instead of inflating
     * the Driver Name or Profile columns and pushing everything around. */
    grid-template-columns:
        12px                   /* status dot */
        minmax(140px, 200px)   /* driver name (capped) */
        80px                   /* tour id (room for sort arrow) */
        80px                   /* access (room for sort arrow) */
        170px                  /* api key */
        180px                  /* profile */
        252px                  /* flags (6 cells x 38px + 5 gaps x 4px = 248) */
        minmax(220px, 1fr);    /* actions (absorbs extra space) */
    align-items: center;
    column-gap: 12px;
    padding: 0 14px;
}
.dashboard-list-header {
    height: 44px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: var(--bg-input, rgba(255, 255, 255, 0.02));
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}
.dashboard-list-header > span,
.dashboard-list-header > button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
/* Header alignment: centered headers for short, badge-style data columns
 * (Tour ID, Access, API Key, Profile, Flags) so the header label sits
 * directly above the visual center of the data underneath. The Driver
 * Name column stays left (long text) and Actions stays right.
 * Both header AND its data row use the same alignment strategy per
 * column so they always share the same x-anchor. */
.dashboard-list-header .dashboard-col-name {
    text-align: left;
    justify-content: flex-start;
}
.dashboard-list-header .dashboard-col-tour,
.dashboard-list-header .dashboard-col-access,
.dashboard-list-header .dashboard-col-apikey,
.dashboard-list-header .dashboard-col-profile {
    text-align: center;
    justify-content: center;
}
.dashboard-list-header .dashboard-col-actions {
    text-align: right;
}

/* Sortable column headers — these are <button> elements so the entire
 * header cell behaves as a clickable hit-target with proper keyboard
 * focus. The arrow indicator is hidden by default and revealed only
 * when the column is the active sort, to avoid 11 always-visible
 * arrows fighting for attention. */
.dashboard-sortable {
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    padding: 0 4px;
    /* `flex` (not inline-flex) + min-width:0 so the button stretches to its
     * grid-cell width and shrinks rather than overflowing when the column
     * is tight. Without this, the button sized to its content and the
     * grid cell's overflow:hidden would clip part of short labels like
     * "ACCESS". */
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 4px;
    user-select: none;
    border-radius: 4px;
    transition: background-color 0.12s, color 0.12s;
}
.dashboard-sort-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.dashboard-sortable:hover {
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.04);
}
.dashboard-sortable:focus-visible {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
}
.dashboard-sortable.is-sorted {
    color: var(--primary, #6366f1);
    background: rgba(99, 102, 241, 0.08);
}
.dashboard-sort-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0;
    background: currentColor;
    /* Down-pointing chevron mask (revealed when .is-sorted) */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    transition: transform 0.15s ease, opacity 0.12s;
}
.dashboard-sortable.is-sorted .dashboard-sort-indicator {
    opacity: 1;
}
.dashboard-sortable.is-asc .dashboard-sort-indicator {
    transform: rotate(180deg);
}
.dashboard-sortable.is-desc .dashboard-sort-indicator {
    transform: rotate(0deg);
}
/* Compact flag-header buttons need tighter padding so the 38-px sub-grid
 * cell still snaps to the button column below. */
.dashboard-flag-header-cell.dashboard-sortable {
    padding: 0;
    gap: 2px;
    justify-content: center;
}
.dashboard-flag-header-cell.dashboard-sortable .dashboard-sort-indicator {
    width: 8px;
    height: 8px;
}
/* Flags header: 6-cell sub-grid that aligns each abbreviation to its button
 * below. Buttons are tight (4px gap) so the six toggles fit in the column
 * without crowding the actions column on the right. */
.dashboard-list-header .dashboard-col-flags {
    display: grid;
    grid-template-columns: repeat(6, 38px);
    gap: 4px;
    align-items: center;
    justify-content: start;
    cursor: help;
}
.dashboard-flag-header-cell {
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--text-secondary, rgba(255,255,255,0.65));
}

.dashboard-driver-list {
    display: block;
}
.dashboard-driver-list .empty-state {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
}

.dashboard-driver-row {
    min-height: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background-color 0.12s;
}
.dashboard-driver-row:last-child {
    border-bottom: none;
}
.dashboard-driver-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.dashboard-col-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b7280;
    box-shadow: none;
    justify-self: center;
}
.dashboard-col-status.is-active {
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18);
}
.dashboard-col-status.is-inactive {
    background: #6b7280;
    opacity: 0.5;
}

.dashboard-col-name {
    min-width: 0;
}
.dashboard-driver-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-driver-row .dashboard-col-tour,
.dashboard-driver-row .dashboard-col-access,
.dashboard-driver-row .dashboard-col-apikey,
.dashboard-driver-row .dashboard-col-name,
.dashboard-driver-row .dashboard-col-profile {
    display: flex;
    align-items: center;
    min-width: 0;
}
.dashboard-driver-row .dashboard-col-tour {
    justify-content: center;
    font-size: 12px;
    color: var(--text-secondary);
}
.dashboard-tour-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-driver-row .dashboard-col-access {
    justify-content: center;
    font-size: 12.5px;
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dashboard-driver-row .dashboard-col-apikey {
    gap: 6px;
    justify-content: center;
}
.dashboard-apikey-text {
    flex: 0 1 auto !important;
    max-width: calc(100% - 26px);
}
.dashboard-apikey-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.dashboard-col-apikey .btn-api-view {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-muted, rgba(255,255,255,0.55));
    width: 20px;
    height: 20px;
    min-height: 20px;
    min-width: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}
.dashboard-col-apikey .btn-api-view:hover {
    color: var(--primary);
    background: rgba(99, 102, 241, 0.12);
}
.dashboard-col-apikey .btn-api-view svg {
    width: 12px;
    height: 12px;
}

.dashboard-col-profile {
    min-width: 0;
}
.dashboard-col-profile .dashboard-driver-profile-select {
    width: 100%;
    padding: 4px 24px 4px 8px;
    font-size: 12.5px;
    height: 28px;
    background: var(--bg-elevated, #1a1f2e);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 4px;
    color: var(--text-primary);
}
.dashboard-col-profile .dashboard-driver-profile-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dashboard-driver-row .dashboard-col-flags {
    display: grid;
    grid-template-columns: repeat(6, 38px);
    gap: 4px;
    align-items: center;
    justify-items: stretch;
}
.dashboard-flag-btn {
    appearance: none;
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    width: 100%;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
}
.dashboard-flag-placeholder {
    display: block;
    width: 100%;
    height: 26px;
}
.dashboard-flag-btn:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}
.dashboard-flag-btn.is-disabled,
.dashboard-flag-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.dashboard-flag-btn.is-on {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.45);
}
.dashboard-flag-btn.dashboard-flag-locked.is-on {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
}
.dashboard-flag-btn.dashboard-flag-active.is-on {
    background: rgba(74, 222, 128, 0.18);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.45);
}
/* Geo Coding (auto-geo-fetch) — cyan/teal so it reads as a "location/map"
 * data action distinct from the indigo Ignore and the green Active. */
.dashboard-flag-btn.dashboard-flag-geo.is-on {
    background: rgba(34, 211, 238, 0.18);
    color: #a5f3fc;
    border-color: rgba(34, 211, 238, 0.45);
}
/* Optimization — amber/orange to convey a "compute / processing" action.
 * Distinct from the green Active flag which is purely a state. */
.dashboard-flag-btn.dashboard-flag-opt.is-on {
    background: rgba(251, 146, 60, 0.18);
    color: #fed7aa;
    border-color: rgba(251, 146, 60, 0.45);
}
/* Tracking — violet to evoke "live signal / GPS pulse" without colliding
 * with any of the surrounding flags. */
.dashboard-flag-btn.dashboard-flag-trk.is-on {
    background: rgba(168, 85, 247, 0.18);
    color: #d8b4fe;
    border-color: rgba(168, 85, 247, 0.45);
}

.dashboard-col-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}
/* Compact action buttons on the dashboard rows. We force-override the
 * global .btn min-height (40px desktop, 44px mobile-touch) so the row
 * doesn't bloat — at 30+ drivers the dashboard would otherwise scroll
 * forever. The cell still has enough vertical breathing room because
 * .dashboard-driver-row min-height stays at 44px. */
.dashboard-col-actions .btn,
.dashboard-driver-row .dashboard-col-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.3;
    height: 28px;
    min-height: 28px;
    min-width: 0;
    border-radius: 6px;
    white-space: nowrap;
    font-weight: 600;
}

@media (max-width: 1280px) {
    .dashboard-list-header,
    .dashboard-driver-row {
        grid-template-columns:
            10px
            minmax(130px, 180px)
            72px
            72px
            150px
            160px
            252px
            minmax(200px, 1fr);
        column-gap: 10px;
    }
}
@media (max-width: 1100px) {
    .dashboard-list-header .dashboard-col-access,
    .dashboard-driver-row .dashboard-col-access {
        display: none;
    }
    .dashboard-list-header,
    .dashboard-driver-row {
        grid-template-columns:
            10px
            minmax(130px, 180px)
            72px
            150px
            160px
            252px
            minmax(200px, 1fr);
    }
}
@media (max-width: 900px) {
    .dashboard-list-header {
        display: none;
    }
    .dashboard-driver-row {
        grid-template-columns: 10px 1fr auto;
        grid-auto-rows: minmax(28px, auto);
        gap: 6px 10px;
        padding: 10px 14px;
    }
    .dashboard-driver-row .dashboard-col-status {
        grid-row: 1 / 3;
        align-self: center;
    }
    .dashboard-driver-row .dashboard-col-name {
        grid-column: 2 / 4;
    }
    .dashboard-driver-row .dashboard-col-tour {
        grid-column: 2 / 3;
    }
    .dashboard-driver-row .dashboard-col-access,
    .dashboard-driver-row .dashboard-col-apikey,
    .dashboard-driver-row .dashboard-col-profile,
    .dashboard-driver-row .dashboard-col-flags,
    .dashboard-driver-row .dashboard-col-actions {
        grid-column: 2 / 4;
    }
    .dashboard-col-actions {
        justify-content: flex-start;
    }
}

.modal-content.modal-content-sm {
    max-width: 480px;
}
.modal-body {
    padding: 20px 24px 4px;
}
/* Small modals (Rotate API Key, Delete confirm, etc.) keep their content
 * away from the rounded card edges by giving the action footer the same
 * horizontal padding as the body. Without this, buttons sit flush against
 * the card border. */
.modal-content-sm > .form-actions,
#rotateApiKeyModal .form-actions,
#deleteModal .form-actions,
#deleteSettingModal .form-actions {
    padding: 18px 24px 22px;
    margin: 16px 0 0;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.modal-body p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.modal-body p strong {
    color: var(--text-primary);
}
.optional-label {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.85em;
}
.dashboard-global-profile-bar label {
    color: var(--text-primary);
    font-weight: 500;
    margin: 0;
}
.dashboard-global-profile-bar select,
#global_profile_select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    min-width: 160px;
    cursor: pointer;
    transition: var(--transition);
}
.dashboard-global-profile-bar select:hover,
#global_profile_select:hover {
    border-color: var(--primary);
}
.dashboard-global-profile-bar select:focus,
#global_profile_select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.dashboard-global-profile-bar select:disabled,
#global_profile_select:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.dashboard-global-profile-bar select option,
#global_profile_select option {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}
.dashboard-global-profile-bar select option:checked,
.dashboard-global-profile-bar select option:hover,
#global_profile_select option:checked,
#global_profile_select option:hover {
    background-color: var(--primary);
    color: #fff;
}

.profile-description-display {
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    white-space: pre-wrap;
    word-break: break-word;
    width: 100%;
}
#edit_profile_description.profile-description-display {
    margin-top: 6px;
}

/* Dashboard: per-driver Profile select */
.dashboard-table .dashboard-driver-profile-select {
    width: 100%;
    max-width: 180px;
    min-width: 100px;
    padding: 6px 10px;
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}
.dashboard-table .dashboard-driver-profile-select:hover:not(:disabled) {
    border-color: var(--primary);
}
.dashboard-table .dashboard-driver-profile-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}
.dashboard-table .dashboard-driver-profile-select:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.dashboard-table .dashboard-driver-profile-select option {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}
.dashboard-table .dashboard-driver-profile-select option:checked,
.dashboard-table .dashboard-driver-profile-select option:hover {
    background-color: var(--primary);
    color: #fff;
}
.dashboard-table .col-profile,
.dashboard-table .col-ignore-global {
    vertical-align: middle;
}

.dashboard-table td .checkbox-wrapper-46 {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    vertical-align: middle;
}
.dashboard-table td .checkbox-wrapper-46 .cbx {
    display: inline-flex;
    align-items: center;
}
.dashboard-table td .checkbox-wrapper-46 .cbx span:last-child {
    white-space: nowrap;
}

.dashboard-table td.actions .actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.icon-ignore-global {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--warning);
    cursor: help;
}
.icon-ignore-global svg {
    flex-shrink: 0;
}

/* Profiles table */
.profiles-table .profile-desc-row td {
    padding: 8px 12px 14px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
}
.profiles-table .profile-desc-full {
    border-left: 3px solid var(--primary);
}
.profiles-table tr:not(.profile-desc-row) + .profile-desc-row td {
    padding-top: 6px;
}

/* ========== Tab Content ========== */
.tab-content {
    display: none;
    padding-top: 0;
    margin-top: 0;
}

.tab-content.active {
    display: block;
    min-height: 0;
}

html[data-active-tab] .tab-content {
    display: none !important;
}

html[data-active-tab="dashboard"] #dashboard-tab,
html[data-active-tab="gps"] #gps-tab,
html[data-active-tab="map"] #map-tab,
html[data-active-tab="packageinfo"] #packageinfo-tab,
html[data-active-tab="packagelogs"] #packagelogs-tab,
html[data-active-tab="proofimages"] #proofimages-tab,
html[data-active-tab="settings"] #settings-tab,
html[data-active-tab="billing"] #billing-tab,
html[data-active-tab="profiles"] #profiles-tab,
html[data-active-tab="addresscorrections"] #addresscorrections-tab,
html[data-active-tab="releases"] #releases-tab,
html[data-active-tab="optimizations"] #optimizations-tab,
html[data-active-tab="routelists"] #routelists-tab,
html[data-active-tab="labels"] #labels-tab,
html[data-active-tab="drivermap"] #drivermap-tab,
html[data-active-tab="packagemap"] #packagemap-tab,
html[data-active-tab="auditlogs"] #auditlogs-tab,
html[data-active-tab="admin"] #admin-tab,
html[data-active-tab="livetransfer"] #livetransfer-tab,
html[data-active-tab="packagesearch"] #packagesearch-tab {
    display: block !important;
}

html[data-active-tab="dashboard"] #nav-dashboard,
html[data-active-tab="gps"] #nav-gps,
html[data-active-tab="map"] #nav-map,
html[data-active-tab="packageinfo"] #nav-packageinfo,
html[data-active-tab="packagelogs"] #nav-packagelogs,
html[data-active-tab="proofimages"] #nav-proofimages,
html[data-active-tab="settings"] #nav-settings,
html[data-active-tab="billing"] #nav-billing,
html[data-active-tab="profiles"] #nav-profiles,
html[data-active-tab="addresscorrections"] #nav-addresscorrections,
html[data-active-tab="releases"] #nav-releases,
html[data-active-tab="optimizations"] #nav-optimizations,
html[data-active-tab="routelists"] #nav-routelists,
html[data-active-tab="labels"] #nav-labels,
html[data-active-tab="drivermap"] #nav-drivermap,
html[data-active-tab="packagemap"] #nav-packagemap,
html[data-active-tab="auditlogs"] #nav-auditlogs,
html[data-active-tab="admin"] #nav-admin,
html[data-active-tab="livetransfer"] #nav-livetransfer,
html[data-active-tab="packagesearch"] #nav-packagesearch {
    background: rgba(99,102,241,0.12);
    color: #a5b4fc;
    border-left-color: var(--primary);
    font-weight: 600;
}

html:not([data-active-tab]) .tab-content.active {
    display: block !important;
}

/* ========== Login Page ========== */
body.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-body);
}

.login-page .login-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    height: 64px;
    display: flex;
    align-items: center;
}

.login-page .login-header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-page .login-header .logo-icon {
    color: var(--primary);
    font-size: 1.3rem;
}

.login-page .login-header .logo-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.login-page .login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-wrapper {
    width: 100%;
    max-width: 440px;
}

.login-card {
    background: #111113;
    border: 1px solid var(--border-hover);
    border-radius: 20px;
    padding: 48px 44px;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    position: relative;
}

.login-brand {
    text-align: center;
    margin-bottom: 32px;
}

.login-brand h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.login-brand p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 6px 0 0 0;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
}

.login-form .form-group input[type="text"],
.login-form .form-group input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    min-height: 48px;
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    transition: var(--transition);
}

.login-form .form-group input::placeholder {
    color: var(--text-muted);
}

.login-form .form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.login-error {
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid var(--error);
    color: #fca5a5;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.login-form .btn-block {
    width: 100%;
    margin-top: 8px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    min-height: 50px;
}

.login-footer {
    text-align: center;
    margin-top: 28px;
    font-size: 13px;
    color: var(--text-muted);
}

.btn-block {
    width: 100%;
    margin-top: 8px;
    padding: 14px;
}

.role-badge {
    display: inline-block;
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-hover);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 6px;
}

/* ========== Buttons ========== */
.btn {
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
}
.btn-sm {
    padding: 5px 14px;
    font-size: 12px;
    min-height: 30px;
    border-radius: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border: 1px solid var(--primary-dark);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.3);
}

header .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border: 1px solid var(--primary-dark);
}

header .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
    box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-edit {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 8px 16px;
    font-size: 13px;
    min-height: 36px;
}

.btn-edit:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-delete {
    background: var(--error);
    color: #fff;
    padding: 8px 16px;
    font-size: 13px;
    min-height: 36px;
}

.btn-delete:hover {
    background: #e11d48;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-hover);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--primary);
}

/* ========== Tables ========== */
.table-container {
    overflow-x: auto;
    padding: 24px;
    -webkit-overflow-scrolling: touch;
}

.content-card .table-container {
    padding: 16px 20px;
}

#dashboard-tab .content-card .table-container {
    padding: 16px 20px;
}

#dashboard-tab .content-card .data-table thead th {
    padding: 14px 20px;
    font-size: 11px;
}
#dashboard-tab .content-card .data-table td {
    padding: 16px 20px;
    font-size: 14px;
}
#dashboard-tab .dashboard-table td.actions {
    min-width: 240px;
}

#dashboard-tab .content-card {
    margin-bottom: 14px;
}

.content-card .data-table thead th {
    padding: 14px 20px;
}

.content-card .data-table td {
    padding: 16px 20px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.data-table thead {
    background: rgba(255, 255, 255, 0.02);
}

.data-table th {
    padding: 14px 20px;
    text-align: left;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.data-table td {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 14px;
    color: var(--text-primary);
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

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

.api-key-cell {
    max-width: 280px;
}

.api-key-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-key-text {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-api-view {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.btn-api-view:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--primary);
}

.data-table:not(.dashboard-table) th:last-child,
.data-table:not(.dashboard-table) td:last-child {
    border-right: 1px solid var(--border);
}

.dashboard-table td.actions {
    border-right: none;
    min-width: 260px;
    white-space: nowrap;
}

.dashboard-table .actions .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.dashboard-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dashboard-table tbody td {
    border-bottom: none;
    vertical-align: middle;
}

.dashboard-table tbody tr:last-child {
    border-bottom: none;
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 36px;
    align-items: center;
}

.actions-empty {
    color: var(--text-muted);
    font-size: 14px;
}

/* Settings table: actions column layout */
.settings-table td.actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
    width: 180px;
    min-width: 180px;
}
.settings-table td.actions .btn {
    min-width: 76px;
    justify-content: center;
}

.empty-state {
    text-align: center;
    padding: 56px 24px !important;
    color: var(--text-muted);
    font-size: 14px;
    font-style: italic;
}

.empty-state .btn-retry-inline {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
}

/* Admin table */
.admin-users-table .role-select {
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-input);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    min-width: 100px;
    transition: var(--transition);
    /* color-scheme tells the browser to draw the OPEN dropdown popup with
     * dark UI colors; without it the popup uses the system light theme and
     * becomes unreadable in our dark panel. */
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.admin-users-table .role-select:hover {
    border-color: var(--border-hover, rgba(255, 255, 255, 0.18));
}
.admin-users-table .role-select:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px var(--primary-glow, rgba(99, 102, 241, 0.18));
}
/* Style the dropdown options themselves so they are readable when open.
 * Browsers ignore most styling on <option> but background+color usually work. */
.admin-users-table .role-select option {
    background-color: var(--bg-elevated, #1a1f2e);
    color: var(--text-primary, #fff);
    padding: 6px 10px;
}
.admin-users-table .role-protected {
    color: var(--text-muted);
    font-size: 13px;
}

/* ========== Toggle Switches ========== */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-elevated);
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 28px;
    border: 1px solid var(--border);
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

input:checked + .slider {
    background: var(--primary);
    border-color: var(--primary-hover);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.toggle-locked input:checked + .slider {
    background: var(--error);
    border-color: #e11d48;
}

.toggle-active input:checked + .slider {
    background: var(--success);
    border-color: #059669;
}

#editModal .toggle-switch,
.modal .toggle-switch:not(.toggle-locked) {
    width: 52px !important;
    min-width: 52px !important;
    height: 28px !important;
    min-height: 28px !important;
}

#editModal .toggle-switch .slider,
.modal .toggle-switch:not(.toggle-locked) .slider {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: 28px !important;
}

#editModal .toggle-switch input:checked + .slider,
.modal .toggle-switch:not(.toggle-locked) input:checked + .slider {
    background: var(--success) !important;
    border-color: #059669 !important;
}

#editModal .toggle-switch .slider:before,
.modal .toggle-switch:not(.toggle-locked) .slider:before {
    height: 22px !important;
    width: 22px !important;
    left: 2px !important;
    bottom: 2px !important;
    background: #fff !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: 50% !important;
}

/* ========== Checkbox (wrapper-46) ========== */
.checkbox-wrapper-46 input[type="checkbox"] {
    display: none;
    visibility: hidden;
}
.checkbox-wrapper-46 .cbx {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}
.checkbox-wrapper-46 .cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-46 .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}
.checkbox-wrapper-46 .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-46 .cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary, #506EEC);
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
}
.checkbox-wrapper-46 .cbx span:last-child {
    padding-left: 8px;
    color: var(--text-primary);
}
.checkbox-wrapper-46 .cbx:hover span:first-child {
    border-color: var(--primary, #506EEC);
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
    background: var(--primary, #506EEC);
    border-color: var(--primary, #506EEC);
    animation: wave-46 0.4s ease;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before {
    transform: scale(3.5);
    opacity: 0;
    transition: all 0.6s ease;
}
@keyframes wave-46 {
    50% { transform: scale(0.9); }
}

/* ========== Modals ========== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(9,9,11,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px;
    align-items: center;
    justify-content: center;
}

.modal[style*="display: block"],
.modal[style*="display:block"] {
    display: flex !important;
}

/* When any modal is open, prevent the underlying document from scrolling.
 * The actual scroll container in this layout is `.main-content` (it has
 * `overflow-y: auto`), not <body>, so we lock both — body for any future
 * page that may scroll the document, and .main-content for the current
 * shell. Without this, opening a tall modal (Admin Permissions, Edit
 * Driver) leaves the page behind scrollable, which on desktop creates
 * the impression of a "very long" page extending below all real content.
 * The mobile media query later adds `position: fixed` to also kill the
 * iOS address bar / rubber-band behavior. The scroll position of
 * .main-content is preserved by JS (see updateBodyModalClass). */
body.modal-open {
    overflow: hidden;
}
body.modal-open .main-content {
    overflow: hidden;
}

.modal-content {
    background: #111113;
    margin: auto;
    padding: 0;
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    animation: modalIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255,255,255,0.08);
}

.modal-content[style*="max-width: 500px"],
#deleteModal .modal-content,
#deleteSettingModal .modal-content {
    max-width: 440px;
}

#gpsMapModal .modal-content {
    max-width: min(900px, 95vw);
}

#packageInfoModal .modal-content {
    max-width: min(95vw, 960px);
    max-height: 90vh;
}

#editModal .modal-content {
    max-width: min(96vw, 1280px);
    width: 96vw;
}

/* ============================================================
   Edit User modal — full-page redesign with tabbed navigation
   (Selectors are qualified with #editModal/.edit-modal-content
   so they win against the generic .modal-* rules later in file.)
   ============================================================ */
#editModal .modal-content.edit-modal-content {
    width: 96vw;
    max-width: min(96vw, 1280px);
    height: 92vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

#editModal .modal-header.edit-modal-header {
    flex-shrink: 0;
    padding: 18px 24px;
    border-radius: 20px 20px 0 0;
}

.edit-modal-title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.edit-modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--primary-dark, #4f46e5) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-sans, system-ui);
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.edit-modal-title-text {
    min-width: 0;
}

.edit-modal-title-text h2 {
    margin: 0 0 2px 0;
    font-size: 1.15rem;
    line-height: 1.25;
}

.edit-modal-subtitle {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-weight: 400;
}

.edit-modal-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.015);
    overflow-x: auto;
    scrollbar-width: thin;
}

.edit-modal-tab {
    appearance: none;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    border-radius: 0;
    margin-bottom: -1px;
}

.edit-modal-tab:hover {
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.03);
}

.edit-modal-tab.is-active {
    color: var(--primary, #6366f1);
    border-bottom-color: var(--primary, #6366f1);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 0.05) 100%);
}

.edit-modal-tab svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.edit-modal-tab.is-active svg {
    opacity: 1;
}

#editModal form.edit-modal-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.edit-modal-body {
    flex: 1 1 auto;
    /* See `.admin-perm-body` — without `min-height: 0` a long panel
     * pushes the modal past its 92vh cap and the inner scrollbar never
     * activates. `overflow-anchor: none` keeps Chrome from re-anchoring
     * scroll position when chip / toggle styles change on input. */
    min-height: 0;
    overflow-y: auto;
    overflow-anchor: none;
    padding: 24px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, transparent 60px);
}

.edit-modal-panel {
    display: none;
    animation: editPanelIn 0.18s ease-out;
}

.edit-modal-panel.is-active {
    display: block;
}

@keyframes editPanelIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.edit-modal-panel .settings-section {
    background: var(--bg-elevated, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 0;
    margin-bottom: 18px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.edit-modal-panel .settings-section:last-child {
    margin-bottom: 0;
}

.edit-panel-heading {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.05));
}

.edit-panel-heading h3 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    letter-spacing: 0.01em;
}

.edit-panel-heading p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

#editModal .form-actions.edit-modal-footer {
    flex-shrink: 0;
    margin: 0;
    padding: 16px 24px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(0deg, var(--bg-elevated, #111113) 0%, rgba(17, 17, 19, 0.6) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ============================================================
   Read-only state for individual form-groups inside the Edit
   User modal. Applied via the `.is-readonly` class from JS when
   the current user has SEE permission for a field but lacks the
   matching EDIT permission. The goal is to make it visually
   obvious that the control is locked, so the user doesn't think
   the panel is broken when their clicks have no effect.
   ============================================================ */
#editModal .form-group.is-readonly {
    position: relative;
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 12px 10px 12px;
    margin-bottom: 18px;
}

/* "Read-only" badge in the top-right corner of the field card. The label
 * text comes from a data attribute set by the JS so it stays translated. */
#editModal .form-group.is-readonly::before {
    content: attr(data-readonly-badge);
    position: absolute;
    top: -9px;
    right: 10px;
    background: var(--bg-elevated, #1a1f2e);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 1px 9px 1px 22px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
    z-index: 2;
    /* Tiny inline SVG lock icon as background image so we don't need extra HTML. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12' fill='none'%3E%3Crect x='1' y='5' width='8' height='6' rx='1' stroke='%23a1a1aa' stroke-width='1.2'/%3E%3Cpath d='M3 5V3a2 2 0 0 1 4 0v2' stroke='%23a1a1aa' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 7px center;
    background-size: 10px 12px;
    pointer-events: none;
}

/* Hover tooltip explaining WHY the field is locked. */
#editModal .form-group.is-readonly:hover::after {
    content: attr(data-readonly-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 260px;
    width: max-content;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: editReadonlyTooltipIn 0.12s ease-out;
}
@keyframes editReadonlyTooltipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(2px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dim the field label so it visually matches the badge. */
#editModal .form-group.is-readonly > label {
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

/* Lock down all interactive children visually */
#editModal .form-group.is-readonly input[type="text"],
#editModal .form-group.is-readonly input[type="number"],
#editModal .form-group.is-readonly input[type="time"],
#editModal .form-group.is-readonly input[type="email"],
#editModal .form-group.is-readonly input[type="url"],
#editModal .form-group.is-readonly input[type="password"],
#editModal .form-group.is-readonly select,
#editModal .form-group.is-readonly textarea {
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.015);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.10);
}
#editModal .form-group.is-readonly input:focus,
#editModal .form-group.is-readonly select:focus {
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
}

/* Custom checkbox: clearly locked, no hover color change */
#editModal .form-group.is-readonly .checkbox-wrapper-46 .cbx,
#editModal .form-group.is-readonly .checkbox-wrapper-46 label.cbx {
    cursor: not-allowed;
    opacity: 0.55;
}
#editModal .form-group.is-readonly .checkbox-wrapper-46 .cbx span:last-child {
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
}
#editModal .form-group.is-readonly .checkbox-wrapper-46 .cbx:hover span:first-child {
    border-color: rgba(255, 255, 255, 0.3);
}
#editModal .form-group.is-readonly .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
    background: rgba(99, 102, 241, 0.4);
    border-color: rgba(99, 102, 241, 0.55);
}

/* Chip inputs: dim the chips and the input row */
#editModal .form-group.is-readonly .chip-input-container {
    opacity: 0.7;
    cursor: not-allowed;
}
#editModal .form-group.is-readonly .chip-input {
    cursor: not-allowed;
}

/* Track-days group: dim the entire chip row */
#editModal .form-group.is-readonly .track-days-checkboxes {
    opacity: 0.7;
}

/* ============================================================
   Create User modal — modern, grouped redesign
   ============================================================ */
#createModal .modal-content.create-modal-content {
    max-width: 620px;
    width: 100%;
}

#createModal .modal-header.create-modal-header {
    padding: 20px 24px;
}

.create-modal-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.create-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--primary-dark, #4f46e5) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.create-modal-title h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
}

.create-modal-subtitle {
    margin: 2px 0 0 0;
    font-size: 12.5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-weight: 400;
}

#createModal form.create-modal-form {
    padding: 22px 24px 18px;
}

.create-modal-section {
    background: var(--bg-elevated, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.create-modal-section:last-of-type {
    margin-bottom: 0;
}

.create-modal-section-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.05));
}

.create-modal-section-header h3 {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    display: flex;
    align-items: center;
    gap: 10px;
}

.create-modal-section-header p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-weight: 400;
}

.create-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.create-modal-grid .form-group {
    margin-bottom: 0;
}

#createModal .form-actions.create-modal-actions {
    margin-top: 22px;
    padding-top: 18px;
}

/* Pill badges — used inside the create-modal section headers and reusable elsewhere */
.badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.6;
}

.badge-required {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
}

.badge-optional {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

/* Responsive collapses */
@media (max-width: 900px) {
    #editModal .modal-content.edit-modal-content {
        height: 100vh;
        max-height: 100vh;
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
    }
    #editModal .modal-header.edit-modal-header,
    #editModal .form-actions.edit-modal-footer {
        border-radius: 0;
    }
    .edit-modal-body {
        padding: 16px;
    }
    .edit-modal-panel .settings-section {
        padding: 16px;
    }
    .edit-modal-tab span {
        display: none;
    }
    .edit-modal-tab {
        padding: 12px 14px;
    }
    .create-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* Deploy modal */
.deploy-modal-content {
    max-width: min(95vw, 520px);
}
.deploy-modal-body {
    padding: 28px;
    text-align: center;
}
.deploy-modal-tour {
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.deploy-qr-container {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.deploy-qr-container img,
.deploy-qr-container canvas,
.deploy-qr-container table {
    max-width: 100%;
    height: auto;
}
.deploy-modal-url {
    word-break: break-all;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.deploy-modal-expiry {
    font-size: 12px;
    color: var(--text-muted, #666);
}
.releases-qr-version { margin-bottom: 8px; font-weight: 600; }
.releases-qr-url { word-break: break-all; font-size: 12px; color: var(--text-secondary); margin-top: 12px; }

/* Releases Comment modal */
.releases-comment-modal-content {
    max-width: 480px;
    padding: 24px 28px;
    box-sizing: border-box;
}
.releases-comment-modal-content .close {
    margin: 0 0 8px 0;
    padding: 4px;
}
.releases-comment-modal-title {
    margin: 0 0 6px 0;
    font-size: 1.2rem;
    font-weight: 700;
}
.releases-comment-modal-content .releases-comment-version {
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    font-size: 13px;
}
.releases-comment-input {
    width: 100%;
    min-height: 100px;
    margin: 0 0 20px 0;
    padding: 14px 16px;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: var(--transition);
}
.releases-comment-input::placeholder {
    color: var(--text-muted);
}
.releases-comment-input:hover {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}
.releases-comment-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: rgba(255,255,255,0.04);
}
.releases-comment-input:focus::placeholder {
    color: var(--text-secondary);
}
.releases-comment-actions {
    margin: 0;
    padding-top: 4px;
    gap: 14px;
}

/* ============================================================
   Releases Tab — Modern card-based redesign
   ============================================================ */

.releases-tab-content {
    padding: 24px 28px;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

/* Page header */
.releases-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
    padding: 0 4px;
}
.releases-page-header-text {
    min-width: 0;
}
.releases-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.releases-page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    box-shadow: 0 6px 18px var(--primary-glow);
    flex-shrink: 0;
}
.releases-page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.releases-page-stats {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}
.releases-stat-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    min-width: 84px;
}
.releases-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.releases-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

/* Hero card — latest release */
.releases-hero {
    position: relative;
    margin-bottom: 22px;
    padding: 26px 28px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, rgba(99, 102, 241, 0.10) 0%, rgba(79, 70, 229, 0.04) 100%);
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: var(--shadow-md), var(--shadow-glow);
    overflow: hidden;
}
.releases-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    z-index: 1;
}
.releases-hero-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.20) 0%, transparent 60%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.releases-hero-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1 1 280px;
}
.releases-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 999px;
    color: #a5b4fc;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: fit-content;
}
.releases-hero-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a5b4fc;
    box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.6);
    animation: releases-pulse 2s infinite;
}
@keyframes releases-pulse {
    0% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(165, 180, 252, 0); }
    100% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0); }
}
.releases-hero-version {
    margin: 4px 0 6px 0;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.releases-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}
.releases-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.releases-hero-meta-item svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.releases-hero-meta-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.releases-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.releases-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Section header */
.releases-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 8px 4px 14px;
}
.releases-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.releases-section-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* Card grid */
.releases-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin: 0;
}
.releases-card-grid > .empty-state.releases-empty {
    grid-column: 1 / -1;
    padding: 48px 20px;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: 14px;
    color: var(--text-muted);
}

/* Release card */
.release-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
    overflow: hidden;
}
.release-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
    opacity: 0.5;
    pointer-events: none;
}
.release-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: var(--shadow-md);
}
.release-card.is-latest {
    border-color: rgba(99, 102, 241, 0.4);
    background:
        radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        var(--bg-elevated);
}
.release-card.is-latest::before {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
    opacity: 1;
}

/* Card header */
.release-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.release-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px var(--primary-glow);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.release-version-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.85;
}
.release-version-label {
    opacity: 0.7;
    font-weight: 600;
    font-size: 0.78rem;
}
.release-version-text {
    font-weight: 800;
}
.release-latest-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Card meta info */
.release-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.release-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    min-width: 0;
}
.release-meta-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.release-meta-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.release-meta-sep {
    color: var(--text-muted);
    flex-shrink: 0;
}
.release-meta-size {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Comment block */
.release-card-comment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    min-height: 44px;
}
.release-card-comment.has-comment {
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.06);
}
.release-card-comment.is-empty {
    color: var(--text-muted);
    font-style: italic;
    align-items: center;
}
.release-card-comment-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}
.release-card-comment.has-comment .release-card-comment-icon {
    color: #a5b4fc;
    margin-top: 1px;
}
.release-card-comment-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0;
}
.release-card-comment.has-comment .release-card-comment-text {
    color: var(--text-primary);
}

/* Card actions */
.release-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 12px;
}
.release-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}
.release-action-btn svg {
    flex-shrink: 0;
}
.release-action-primary {
    margin-left: auto;
}
.release-action-delete {
    padding-left: 9px;
    padding-right: 9px;
}
.release-action-delete svg {
    margin: 0;
}

/* Upload card */
.releases-upload-card {
    margin: 0 0 22px 0;
    padding: 22px 24px;
    border-radius: 14px;
}
.releases-upload-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.releases-upload-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.25);
    flex-shrink: 0;
}
.releases-upload-title {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.releases-upload-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.releases-upload-form {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 14px;
    align-items: end;
}
.releases-upload-form .form-group {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.releases-upload-form .releases-version-group > label,
.releases-upload-form .releases-file-group > .form-label {
    display: block;
    margin: 0 0 6px 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0;
}
.releases-upload-form .releases-file-group > .form-label.is-spacer {
    visibility: hidden;
}
.releases-upload-form input[type="text"] {
    height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 14px;
    transition: var(--transition);
    box-sizing: border-box;
}
.releases-upload-form input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Dropzone */
.releases-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
    height: 44px;
    padding: 8px 18px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    box-sizing: border-box;
    margin: 0;
}
.releases-dropzone:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
    color: var(--text-primary);
}
.releases-dropzone.has-file {
    border-style: solid;
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.06);
    color: var(--text-primary);
}
.releases-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}
.releases-dropzone:focus-within {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.releases-dropzone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    opacity: 0.85;
}
.releases-dropzone.has-file .releases-dropzone-icon {
    color: #34d399;
    opacity: 1;
}
.releases-dropzone-text {
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
}

.releases-upload-btn {
    height: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Legacy boxed-file styles still used elsewhere — keep minimal */
.file.is-boxed .file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.btn-loading { opacity: 0.85; cursor: wait; pointer-events: none; }

/* Releases QR modal */
.releases-qr-modal .modal-content.releases-qr-modal-content {
    padding: 24px 28px;
    max-width: 420px;
}
.releases-qr-modal .releases-qr-version { margin-bottom: 12px; }
.releases-qr-modal .deploy-qr-container { margin: 16px 0; }
.releases-qr-modal .releases-qr-url { margin-top: 16px; }

/* Releases Share Download Link modal */
.releases-share-modal-content {
    position: relative;
    max-width: 540px;
    padding: 28px 28px 22px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid rgba(99, 102, 241, 0.25);
    background:
        radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.10) 0%, transparent 55%),
        var(--bg-elevated);
}
.releases-share-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    margin: 0;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}
.releases-share-modal-close:hover {
    color: var(--text-primary);
}
.releases-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 8px auto 16px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.14);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.06);
}
.releases-share-title {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.releases-share-subtitle {
    margin: 0 0 20px 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}
.releases-share-url-block {
    margin: 0 0 20px 0;
    text-align: left;
}
.releases-share-url-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.releases-share-url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.releases-share-url-input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    text-overflow: ellipsis;
    transition: var(--transition);
    box-sizing: border-box;
}
.releases-share-url-input:hover {
    border-color: var(--border-hover, var(--primary));
}
.releases-share-url-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.releases-share-copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    white-space: nowrap;
}
.releases-share-copy-btn.is-copied {
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.4);
}
.releases-share-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding-top: 4px;
}
.releases-share-actions .btn {
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.releases-share-actions .btn svg {
    flex-shrink: 0;
}

/* Releases Delete Confirm modal */
.releases-delete-modal-content {
    position: relative;
    max-width: 440px;
    padding: 28px 28px 22px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid rgba(244, 63, 94, 0.25);
    background:
        radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.10) 0%, transparent 50%),
        var(--bg-elevated);
}
.releases-delete-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    margin: 0;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}
.releases-delete-modal-close:hover {
    color: var(--text-primary);
}
.releases-delete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 8px auto 16px;
    border-radius: 50%;
    background: rgba(244, 63, 94, 0.12);
    color: #f87171;
    border: 1px solid rgba(244, 63, 94, 0.35);
    box-shadow: 0 0 0 6px rgba(244, 63, 94, 0.06);
}
.releases-delete-title {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.releases-delete-warning {
    margin: 0 0 18px 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}
.releases-delete-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 auto 22px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}
.releases-delete-version-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.releases-delete-version-value {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.releases-delete-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding-top: 4px;
}
.releases-delete-actions .btn {
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.releases-delete-actions .btn svg {
    flex-shrink: 0;
}

.deploy-modal-close-btn {
    margin-top: 16px;
}

/* ========== Optimizations ========== */
.optimizations-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 20px;
    margin: 0;
}
.optimization-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}
.optimization-card-list .optimization-card {
    padding: 10px 16px;
    gap: 0;
    min-height: 0;
}
.optimization-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
}
.optimization-card-list .optimization-card-header {
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}
.optimization-card-inline {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}
.optimization-card-meta-inline {
    color: var(--text-muted);
    font-size: 11px;
}
.optimization-pair-mini-table {
    display: inline-flex;
    flex-direction: column;
    margin: 0;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
}
.opt-mini-table-header {
    display: block;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.opt-mini-table-body {
    display: flex;
    flex-direction: row;
}
.opt-mini-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 4px 8px;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    gap: 1px;
}
.opt-mini-cell:last-child {
    border-right: none;
}
.opt-mini-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.opt-mini-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.optimization-card-list .optimization-card-actions {
    margin-left: auto;
    padding: 0;
    border-top: none;
}
.optimization-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
    margin: 0;
}
.optimization-icon-success {
    background: var(--success);
    color: #09090b;
}
.optimization-icon-fail {
    background: var(--error);
    color: #fff;
}
.optimization-card-tour-id {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin: 0;
    padding: 0 4px 0 0;
}
.optimization-card-tour-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 40px;
    padding: 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-radius: 8px;
    margin: 0;
    margin-right: 14px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border);
}
.optimization-card-tour-id-badge--optimized {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--text-primary);
}
.optimization-card-tour-id-badge--failed,
.optimization-card-tour-id-badge--unknown {
    background: rgba(113, 113, 122, 0.15);
    border-color: rgba(113, 113, 122, 0.3);
    color: var(--text-secondary);
}
.optimization-card-tour-id-badge--failed {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.3);
}
.optimization-card-tour-id-badge--running {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
}
.optimization-card-tour-id-badge--pending {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}
.optimization-card-list .optimization-card-tour-id {
    display: none;
}
.optimization-status-tag {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    margin: 0;
}
.optimization-status-unknown {
    background: #71717a;
    color: #e4e4e7;
}
.optimization-status-failed {
    background: var(--error);
    color: #fff;
}
.optimization-status-optimized {
    background: var(--success);
    color: #09090b;
}
.optimization-status-running {
    background: var(--primary);
    color: #fff;
}
.optimization-status-pending {
    background: var(--warning);
    color: #09090b;
}
.optimization-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 0;
}
.optimization-card-list .optimization-card-grid {
    display: none;
}
.optimization-card-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 8px 0;
}
.optimization-pair-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
    padding: 0;
}
.optimization-pair-value {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}
.optimization-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
    padding: 8px 0 0;
}
.optimization-card-list .optimization-card-meta {
    display: none;
}
.optimization-card-meta .optimization-icon {
    width: 18px;
    height: 18px;
    font-size: 10px;
    margin: 0;
}
.optimization-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 0;
    margin: 0;
    border-top: 1px solid var(--border);
}
/* Optimization JSON modal */
.optimization-json-modal-content {
    padding: 24px 28px 28px;
}
.optimization-json-modal-content h2 {
    margin: 0 0 16px;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}
.optimization-json-modal-content .close {
    margin: -4px -4px 0 0;
}
.optimization-json-modal-content pre.optimization-json-codeblock {
    margin: 0;
    padding: 20px 24px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: auto;
    max-height: 60vh;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre;
    color: var(--text-secondary);
}
.optimization-json-modal-content pre.optimization-json-codeblock code {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    padding: 0;
    margin: 0;
    display: block;
}

/* Audit details */
.audit-details-modal-content pre.audit-details-codeblock {
    max-height: 70vh;
    min-height: 120px;
    flex: 1;
}
.audit-details-preview {
    font-size: 0.85em;
    color: var(--text-secondary);
}
.btn-audit-show-more {
    margin-left: 8px;
    margin-top: 4px;
    vertical-align: middle;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(-12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    background: linear-gradient(135deg, var(--bg-elevated) 0%, #111113 100%);
    color: var(--text-primary);
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid var(--border);
    border-left: 4px solid var(--primary);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

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

.modal .close {
    color: var(--text-secondary);
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    margin: -8px -4px -8px 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: var(--transition);
}

.modal .close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Modal form inputs */
.modal .form-group input[type="text"],
.modal .form-group input[type="password"],
.modal .form-group input[type="number"],
.modal .form-group input[type="email"],
.modal .form-group input[type="url"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    min-height: 44px;
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}
.modal .form-group input[type="url"] {
    min-width: 0;
    font-size: 13px;
    word-break: break-all;
}
.modal .form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.modal .form-group input::placeholder {
    color: var(--text-muted);
}

/* Admin Permissions modal — full-page redesign.
 *
 * The wrapping `.modal` is overridden to anchor the dialog at the top of
 * the viewport instead of vertically centering it, and its own scrolling
 * is disabled — only the inner `.admin-perm-body` should scroll. Without
 * this, when the active panel ("Edit Driver Modal" especially) had many
 * rows the outer `.modal` could itself scroll, giving the page an extra
 * multi-screen scroll surface on top of the body's own scrollbar. */
#adminPermissionsModal {
    align-items: flex-start;
    overflow: hidden;
}
#adminPermissionsModal .modal-content.admin-permissions-modal-content {
    max-width: min(96vw, 1200px);
    width: 96vw;
    height: 92vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* Header */
#adminPermissionsModal .modal-header.admin-perm-header {
    flex-shrink: 0;
    padding: 18px 24px;
    border-radius: 20px 20px 0 0;
}
.admin-perm-title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
}
.admin-perm-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.32);
}
.admin-perm-title-text { min-width: 0; flex: 1 1 auto; }
.admin-perm-title-text h2 {
    margin: 0 0 4px 0;
    font-size: 1.15rem;
    line-height: 1.25;
}
.admin-perm-subtitle {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-perm-summary-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.32);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.admin-perm-hint {
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

/* Search bar */
.admin-perm-search-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    background: rgba(255, 255, 255, 0.015);
}
.admin-perm-search-bar svg {
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    flex-shrink: 0;
}
.admin-perm-search-bar input {
    flex: 1 1 auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary, #fff);
    font-size: 13px;
    min-height: 36px;
}
.admin-perm-search-bar input:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px var(--primary-glow, rgba(99, 102, 241, 0.18));
}
.admin-perm-search-clear {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition, all 0.15s);
}
.admin-perm-search-clear:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #fff);
}

/* Tabs — horizontally scrollable, with click-and-drag panning enabled by JS. */
.admin-perm-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.015);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    cursor: grab;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}
.admin-perm-tabs.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}
.admin-perm-tabs::-webkit-scrollbar { height: 6px; }
.admin-perm-tabs::-webkit-scrollbar-track { background: transparent; }
.admin-perm-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}
.admin-perm-tabs::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
.admin-perm-tab {
    scroll-snap-align: start;
}
.admin-perm-tab {
    appearance: none;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    border-radius: 0;
    margin-bottom: -1px;
}
.admin-perm-tab:hover {
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.03);
}
.admin-perm-tab.is-active {
    color: var(--primary, #6366f1);
    border-bottom-color: var(--primary, #6366f1);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 0.05) 100%);
}
.admin-perm-tab svg { flex-shrink: 0; opacity: 0.85; }
.admin-perm-tab.is-active svg { opacity: 1; }
.admin-perm-tab-count {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    margin-left: 2px;
    min-width: 32px;
    justify-content: center;
}
.admin-perm-tab.is-active .admin-perm-tab-count {
    background: rgba(99, 102, 241, 0.22);
    color: #a5b4fc;
}

/* Form / body / footer */
#adminPermissionsModal form.admin-perm-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}
.admin-perm-body {
    flex: 1 1 auto;
    /* Without min-height:0 a flex item refuses to shrink below its content,
     * so a long permissions panel (e.g. "Edit Driver Modal" with 30+ rows)
     * pushes the modal past its 92vh height cap, the modal-content's
     * `overflow:hidden` then clips the bottom, and the body's own
     * `overflow-y:auto` never activates — which is exactly what made the
     * modal feel like a 10-page-tall scrolling page. */
    min-height: 0;
    overflow-y: auto;
    /* Stop the browser's automatic scroll-anchoring from latching onto a
     * row that re-styles itself via `:has(input:checked)` on every click;
     * that re-anchoring was the "I clicked a checkbox and got teleported
     * 2 pages down" behavior. */
    overflow-anchor: none;
    padding: 24px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, transparent 60px);
}
.admin-perm-panel {
    display: none;
    animation: editPanelIn 0.18s ease-out;
}
.admin-perm-panel.is-active { display: block; }
.admin-perm-panel-hint {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    line-height: 1.5;
}
#adminPermissionsModal .form-actions.admin-perm-footer {
    flex-shrink: 0;
    margin: 0;
    padding: 16px 24px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(0deg, var(--bg-elevated, #111113) 0%, rgba(17, 17, 19, 0.6) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* Section card (one per sub-group, or one per top-level group) */
.admin-perm-section {
    background: var(--bg-elevated, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
.admin-perm-section:last-child { margin-bottom: 0; }
.admin-perm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.05));
}
.admin-perm-section-header h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    letter-spacing: 0.01em;
}
.admin-perm-section-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.admin-perm-bulk-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition, all 0.15s);
}
.admin-perm-bulk-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #fff);
    border-color: var(--border-hover, rgba(255, 255, 255, 0.18));
}

/* Single-permission grid (for non-paired permissions) */
.admin-perm-single-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
}
.admin-perm-single {
    /* Positioned so the visually-hidden checkbox below has *this* row as
     * its containing block; otherwise the input falls back to the modal
     * (the next positioned ancestor) and Chrome will scroll the modal
     * body when focus moves to it. */
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
    min-height: 44px;
}
.admin-perm-single .admin-perm-single-check { margin-top: 1px; }
.admin-perm-single-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.admin-perm-single-hint {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    line-height: 1.4;
}
.admin-perm-single:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-hover, rgba(255, 255, 255, 0.16));
}
.admin-perm-single input[type="checkbox"] {
    /* Pin to top-left of the (now `position:relative`) row so the focus
     * rect sits on a visible element. Without explicit top/left a
     * `position:absolute` element keeps its "static" position, and that
     * static rect is what Chrome's scrollIntoView-on-focus pass uses —
     * which is what jumped the user 2 pages down on every click. */
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.admin-perm-single-check {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--border-hover, rgba(255, 255, 255, 0.22));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.12s;
}
.admin-perm-single-check svg {
    width: 14px;
    height: 14px;
}
.admin-perm-single:has(input:checked) {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.45);
}
.admin-perm-single:has(input:checked) .admin-perm-single-check {
    background: var(--primary, #6366f1);
    border-color: var(--primary, #6366f1);
    color: #fff;
}
.admin-perm-single-label {
    font-size: 13px;
    color: var(--text-primary, #fff);
    line-height: 1.35;
    min-width: 0;
    word-break: break-word;
}
.admin-perm-single-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    letter-spacing: -0.01em;
    text-align: right;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}

/* Paired (See / Edit) permissions table */
.admin-perm-pair-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-perm-pair-thead,
.admin-perm-pair-row {
    display: grid;
    grid-template-columns: 1fr 64px 64px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
}
.admin-perm-pair-thead {
    border: none;
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 4px;
}
.admin-perm-pair-col-h {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    font-weight: 700;
    text-align: center;
}
.admin-perm-pair-row {
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.02);
    min-height: 48px;
    transition: background-color 0.12s, border-color 0.12s;
}
.admin-perm-pair-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-hover, rgba(255, 255, 255, 0.16));
}
.admin-perm-pair-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 0; }
.admin-perm-pair-label {
    font-size: 13px;
    color: var(--text-primary, #fff);
    font-weight: 600;
    line-height: 1.3;
}
.admin-perm-pair-hint {
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    line-height: 1.4;
    font-weight: 400;
}
.admin-perm-pair-keys {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    color: var(--text-muted, rgba(255, 255, 255, 0.32));
    letter-spacing: -0.01em;
    word-break: break-all;
    margin-top: 1px;
}

/* Custom toggle (used for the See / Edit checkboxes).
 * Color semantics: GREEN when the permission is granted, RED when it is
 * denied. This makes the wall of permissions skim-able at a glance — at
 * a distance the modal reads as a heat-map of red/green pills. */
.admin-perm-toggle {
    /* See the matching note on `.admin-perm-single` — without this the
     * absolute checkbox below has the modal as its containing block,
     * which lets focus-induced scrolling jump the body. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 auto;
}
.admin-perm-toggle input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.admin-perm-toggle-track {
    width: 38px;
    height: 22px;
    /* Default = denied = soft red track */
    background: rgba(244, 63, 94, 0.18);
    border: 1px solid rgba(244, 63, 94, 0.42);
    border-radius: 999px;
    position: relative;
    transition: background-color 0.18s, border-color 0.18s;
    flex-shrink: 0;
}
.admin-perm-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* Bright thumb in the matching color so the state is unmistakable */
    background: #f43f5e;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s, background-color 0.18s;
}
.admin-perm-toggle:has(input:checked) .admin-perm-toggle-track {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.55);
}
.admin-perm-toggle:has(input:checked) .admin-perm-toggle-thumb {
    transform: translateX(16px);
    background: #22c55e;
}
.admin-perm-toggle:hover .admin-perm-toggle-track {
    filter: brightness(1.15);
}
.admin-perm-toggle:active .admin-perm-toggle-thumb {
    width: 18px;
}

/* Make the entire row reflect the granted/denied state with a subtle tint
 * so even users with a quick glance can tell which permissions are on. */
.admin-perm-pair-row:has(input:checked) {
    border-color: rgba(34, 197, 94, 0.20);
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}
/* Override the indigo single-perm "checked" tint with green */
.admin-perm-single:has(input:checked) {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.40);
}
.admin-perm-single:has(input:checked) .admin-perm-single-check {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}
/* Empty / inactive single perms: subtle red border so the "off" state is
 * visible too without overwhelming the panel. */
.admin-perm-single:has(input:not(:checked)) {
    border-color: rgba(244, 63, 94, 0.22);
    background: rgba(244, 63, 94, 0.04);
}
.admin-perm-single:has(input:not(:checked)) .admin-perm-single-check {
    border-color: rgba(244, 63, 94, 0.55);
}

/* No-results empty state */
.admin-perm-no-results {
    text-align: center;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    padding: 40px 20px;
    font-size: 13.5px;
}

/* Responsive */
@media (max-width: 900px) {
    #adminPermissionsModal .modal-content.admin-permissions-modal-content {
        height: 100vh;
        max-height: 100vh;
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
    }
    #adminPermissionsModal .modal-header.admin-perm-header,
    #adminPermissionsModal .form-actions.admin-perm-footer {
        border-radius: 0;
    }
    .admin-perm-body { padding: 16px; }
    .admin-perm-section { padding: 14px; }
    .admin-perm-tab span:not(.admin-perm-tab-count) { display: none; }
    .admin-perm-single-grid { grid-template-columns: 1fr; }
    .admin-perm-single-key { display: none; }
    .admin-perm-pair-keys { display: none; }
    /* Keep hints visible on mobile - they're the most useful part */
    .admin-perm-single-hint,
    .admin-perm-pair-hint { font-size: 10.5px; }
}

/* === LEGACY admin-permissions-* selectors kept as a fallback for browsers
   without :has() and for any other code still using the flat list. === */
.admin-permissions-hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
}
.admin-permissions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 18px;
    padding: 4px 0;
}
.admin-permission-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 10px;
    min-height: 88px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-elevated);
    text-align: center;
    transition: var(--transition);
}
.admin-permission-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.admin-permission-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.admin-permission-item:has(input:checked) {
    color: var(--success);
    background: rgba(16, 185, 129, 0.12);
    border-color: var(--success);
}
.admin-permission-item:has(input:checked):hover {
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.25);
}
.admin-permission-item:has(input:checked) input[type="checkbox"] {
    accent-color: var(--success);
}
.admin-permission-item:has(input:not(:checked)) {
    color: var(--error);
    background: rgba(244, 63, 94, 0.08);
    border-color: var(--error);
}
.admin-permission-item:has(input:not(:checked)):hover {
    box-shadow: 0 2px 12px rgba(244, 63, 94, 0.2);
}
.admin-permission-item:has(input:not(:checked)) input[type="checkbox"] {
    accent-color: var(--error);
}

/* Modal form areas */
form {
    padding: 28px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
}

.form-group label.toggle-switch {
    display: inline-block;
    margin-bottom: 0;
    margin-top: 8px;
    width: 52px;
    min-width: 52px;
    height: 28px;
    min-height: 28px;
    flex-shrink: 0;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="time"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    min-height: 44px;
    transition: var(--transition);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}
.form-group input[type="url"] {
    min-width: 0;
    font-size: 13px;
    word-break: break-all;
}
.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-group select {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    min-height: 44px;
    cursor: pointer;
    /* color-scheme: dark tells the browser to draw the OPEN native dropdown
     * popup with dark UI colors. Without it, browsers fall back to the
     * system light theme — the popup gets a white background that clashes
     * with our dark modal and makes the option text unreadable until
     * highlighted. */
    color-scheme: dark;
}
/* Option backgrounds — browsers ignore most styling on <option> but
 * background-color + color reliably work in Chromium / Firefox, so we set
 * them here as a belt-and-braces fallback for environments where the
 * color-scheme hint is ignored or overridden by an OS-level high-contrast
 * theme. */
.form-group select option {
    background-color: var(--bg-elevated, #1a1f2e);
    color: var(--text-primary, #fff);
}

.form-group input[readonly],
.readonly-input {
    background: var(--bg-elevated);
    cursor: not-allowed;
    color: var(--text-muted);
}

.track-days-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 6px;
}

.track-day-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
}

.track-day-label input {
    width: auto;
    margin: 0;
}

/* ========== Billing ========== */
.billing-filters {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 28px;
}
.billing-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-end;
}
.billing-filter-group {
    margin-bottom: 0;
}
.billing-filter-group .billing-input {
    width: 100%;
    min-width: 140px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 14px;
    transition: var(--transition);
}
.billing-tour-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.billing-tour-row input[type="number"] {
    width: 100px;
}
.billing-show-all-label,
.billing-all-time-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: 500;
}
.billing-all-time-wrap {
    align-self: center;
}
.billing-warning {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}
.billing-actions {
    margin-top: 16px;
}
.billing-dashboard {
    margin-top: 24px;
}
.billing-summary-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
.billing-summary-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}
.billing-summary-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.billing-summary-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.billing-breakdown {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.billing-breakdown-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    min-width: 0;
    overflow: hidden;
}
.billing-breakdown-section h3 {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.billing-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.billing-table-wrap {
    min-width: 0;
}
.billing-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
}
.billing-table th:nth-child(1),
.billing-table td:nth-child(1) {
    width: 55%;
    min-width: 0;
}
.billing-table th:nth-child(2),
.billing-table td:nth-child(2) {
    width: 28%;
    white-space: nowrap;
}
.billing-table th:nth-child(3),
.billing-table td:nth-child(3) {
    width: 17%;
    white-space: nowrap;
}
.billing-table th,
.billing-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    word-break: normal;
    overflow-wrap: break-word;
}
.billing-table th {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.billing-table td:last-child,
.billing-table th:last-child {
    text-align: right;
}
.billing-table tr:last-child td {
    border-bottom: none;
}
.billing-table .billing-amount {
    font-weight: 600;
    color: var(--text-primary);
}
.billing-table .billing-pct {
    color: var(--text-muted);
    font-size: 13px;
}
.billing-tour-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    min-width: 0;
    overflow: hidden;
}
.billing-tour-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.billing-tour-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.billing-tour-card-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-hover);
}
.billing-tour-card-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.billing-tours-table-wrap {
    margin-bottom: 24px;
}
.billing-tours-table-wrap .billing-table {
    font-size: 14px;
}
.billing-tours-table-wrap .billing-table th:nth-child(1),
.billing-tours-table-wrap .billing-table td:nth-child(1) {
    width: 10%;
}
.billing-tours-table-wrap .billing-table th:nth-child(2),
.billing-tours-table-wrap .billing-table td:nth-child(2) {
    width: 45%;
    white-space: normal;
}
.billing-tours-table-wrap .billing-table th:nth-child(3),
.billing-tours-table-wrap .billing-table td:nth-child(3) {
    width: 22%;
    white-space: nowrap;
}
.billing-tours-table-wrap .billing-table th:nth-child(4),
.billing-tours-table-wrap .billing-table td:nth-child(4) {
    width: 23%;
    white-space: nowrap;
}
.billing-tour-card-title .billing-tour-name {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.9em;
}
.billing-tour-card-title .billing-tour-name::before {
    content: ' · ';
    color: var(--text-muted);
}
.billing-no-data {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}
@media (max-width: 768px) {
    .billing-tours-table-wrap .billing-table thead {
        display: none;
    }
    .billing-tours-table-wrap .billing-table tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 14px;
        background: var(--bg-elevated);
    }
    .billing-tours-table-wrap .billing-table tbody td {
        display: block;
        width: 100%;
        border: none;
        padding: 6px 0;
        white-space: normal;
    }
    .billing-tours-table-wrap .billing-table tbody td:nth-child(1)::before {
        content: "Tour: ";
        font-weight: 700;
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
    }
    .billing-tours-table-wrap .billing-table tbody td:nth-child(2)::before {
        content: "Name: ";
        font-weight: 700;
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
    }
    .billing-tours-table-wrap .billing-table tbody td:nth-child(3)::before {
        content: "Total: ";
        font-weight: 700;
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
    }
    .billing-tours-table-wrap .billing-table tbody td:nth-child(4)::before {
        content: "Share: ";
        font-weight: 700;
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
    }
    .billing-tours-table-wrap .billing-table tbody td:nth-child(3),
    .billing-tours-table-wrap .billing-table tbody td:nth-child(4) {
        text-align: left;
    }
}
@media (max-width: 640px) {
    .billing-summary-stat-value {
        font-size: 24px;
    }
}

.readonly-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
}

.api-key-modal-body {
    padding: 28px;
}

.api-key-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.api-key-full-input {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    word-break: break-all;
}

.btn-copy {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: 1px solid var(--primary-dark);
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
    font-size: 14px;
}

.btn-copy:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
    box-shadow: 0 2px 8px var(--primary-glow);
}

/* Delete / confirm modals */
#deleteModal > .modal-content > div,
#deleteSettingModal > .modal-content > div {
    padding: 28px;
}

.delete-info-box {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 4px solid var(--error);
    border-radius: 10px;
    padding: 18px;
    margin: 16px 0;
}

.delete-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.delete-info-item:last-child {
    margin-bottom: 0;
}

.delete-info-label {
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 72px;
    margin-right: 12px;
}

.delete-info-value {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
    background: rgba(255,255,255,0.04);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex: 1;
}

/* Modal form actions */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

#solveAddressModal .form-actions {
    margin-right: 20px;
    margin-bottom: 20px;
}

#editModal .form-actions .btn-primary,
#createModal .form-actions .btn-primary,
#createSettingModal .form-actions .btn-primary,
#editSettingModal .form-actions .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border: 1px solid var(--primary-dark);
}

#editModal .form-actions .btn-primary:hover,
#createModal .form-actions .btn-primary:hover,
#createSettingModal .form-actions .btn-primary:hover,
#editSettingModal .form-actions .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
    box-shadow: 0 2px 8px var(--primary-glow);
}

#editModal .form-actions .btn-secondary,
#createModal .form-actions .btn-secondary,
#createSettingModal .form-actions .btn-secondary,
#editSettingModal .form-actions .btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-hover);
}

#deleteModal .form-actions .btn-delete,
#deleteSettingModal .form-actions .btn-delete {
    background: var(--error);
    color: #fff;
    border: 1px solid #e11d48;
}

#deleteModal .form-actions .btn-delete:hover,
#deleteSettingModal .form-actions .btn-delete:hover {
    background: #e11d48;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
}

/* Settings sections */
.settings-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.settings-section h3 {
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.settings-grid .form-group.full-width {
    grid-column: 1 / -1;
}

.profile-rules-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.profile-rules-section h3 {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
}
.profile-rules-global {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-rules-global .form-group {
    margin-bottom: 0;
}
.profile-rules-pair {
    display: flex;
    flex-direction: row;
    gap: 28px;
    align-items: flex-end;
}
.profile-rules-pair .form-group {
    flex: 1;
    margin-bottom: 0;
}

.profile-optional-limits-disabled {
    opacity: 0.6;
    pointer-events: none;
}
.profile-optional-limits-disabled input {
    cursor: not-allowed;
}

.profile-modifier-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.profile-modifier-row-main {
    flex: 1;
    min-width: 0;
}
.profile-modifier-row .modifier-row-header {
    margin-bottom: 6px;
}
.profile-modifier-row .modifier-conditions-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 8px;
}
.profile-modifier-row .btn-add-condition {
    font-size: 12px;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px;
}
.profile-modifier-row .btn-add-condition:hover {
    text-decoration: underline;
}
.profile-modifier-row .modifier-conditions-list {
    margin-top: 6px;
    margin-bottom: 4px;
}
.profile-modifier-row .modifier-condition {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 6px;
}
.profile-modifier-row .modifier-condition-remove {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}
.profile-modifier-row .modifier-condition-remove:hover {
    color: var(--error);
    background: var(--bg-hover);
}
.profile-modifier-row .modifier-row-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.profile-modifier-row .modifier-row-remove:hover {
    color: var(--error);
    background: rgba(244, 63, 94, 0.12);
}
.profile-modifier-row .modifier-override-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 2px;
}

.pkginfo-day-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 30px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    flex-wrap: wrap;
}
.pkginfo-day-bar .pkginfo-day-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-right: 4px;
    white-space: nowrap;
}
.pkginfo-day-btn {
    padding: 5px 14px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.pkginfo-day-btn:hover {
    background: var(--bg-hover);
}
.pkginfo-day-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Proof section header (shared by delivery + signature) */
.proof-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.proof-section-header h3 { margin: 0; }
.proof-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Signature proof */
.sig-dark-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.sig-dark-toggle input { accent-color: var(--primary); cursor: pointer; }
.sig-proof-wrap {
    text-align: center;
    margin-top: 16px;
    padding: 24px;
    background: transparent;
    border-radius: 10px;
    border: 1px solid #ddd;
    transition: background 0.2s, border-color 0.2s;
}
.sig-proof-wrap.sig-dark img {
    background: transparent;
}
.sig-proof-wrap img {
    max-width: 100%;
    max-height: 500px;
    border-radius: 6px;
    background: #ffffff;
}

/* Proof image container — handles rotation */
.proof-img-container {
    text-align: center;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: height 0.3s;
}
.proof-img-container img {
    max-width: 100%;
    max-height: 600px;
    border-radius: 8px;
    border: 1px solid #444;
    transition: transform 0.3s;
    transform-origin: center center;
}
.sig-proof-wrap .proof-img-container {
    margin-top: 0;
}
.sig-proof-wrap .proof-img-container img {
    border: none;
}

/* Package Data grouped layout */
.pkgdata-group {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.pkgdata-group-title {
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
}
.pkgdata-group-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
}
.pkgdata-field {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.pkgdata-field:last-child { border-bottom: none; }
.pkgdata-field-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pkgdata-field-value {
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
}
.pkgdata-field-value.pkgdata-na {
    color: var(--text-muted);
    font-style: italic;
}
.pkgdata-field-wide {
    grid-column: 1 / -1;
}
.pkgdata-group-primary {
    border-color: var(--primary);
}
.pkgdata-group-primary .pkgdata-group-title {
    color: var(--primary);
    background: rgba(99,102,241,0.08);
}

/* Proof image controls */
.proof-img-toolbar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.proof-rotate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.proof-rotate-btn:hover {
    background: var(--bg-hover);
}
.proof-rotate-btn svg {
    width: 18px;
    height: 18px;
}

/* Extra Delivery Proofs — stacked list of independent proof images, each with
   its own rotation toolbar. Visually separated by a hairline divider so they
   read as discrete entries inside the same section. */
.extra-delivery-proofs-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}
.extra-delivery-proofs-container .extra-proof-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px 18px;
    background: rgba(255, 255, 255, 0.02);
}
.extra-delivery-proofs-container .extra-proof-item + .extra-proof-item {
    margin-top: 0;
}
.extra-delivery-proofs-container .extra-proof-item-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.extra-delivery-proofs-container .proof-img-container {
    margin-top: 12px;
}

.package-data-grid {
    margin-top: 16px;
}

.package-data-grid .settings-grid {
    margin-top: 12px;
}

#packageInfoModal .settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ========== Chips ========== */
.chip-input-container {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    min-height: 52px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.chip-input-container:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.chips-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.chip {
    display: inline-flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-primary);
    gap: 6px;
}

.chip-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.chip-remove:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.chip-input {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    padding: 4px 8px;
    flex: 1;
    min-width: 120px;
    outline: none;
}

.chip-input::placeholder {
    color: var(--text-muted);
}

/* ========== GPS Search ========== */
.gps-search-container {
    padding: 40px;
}

.gps-search-box {
    max-width: 600px;
    margin: 0 auto;
}

.gps-search-box label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
}

.gps-input-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.gps-search-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    transition: var(--transition);
}

.gps-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.gps-search-input::placeholder {
    color: var(--text-muted);
}

.gps-modal-body {
    padding: 28px;
}

.gps-info-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.gps-info-label {
    display: block;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 6px;
    font-weight: 600;
}

.gps-info-value {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    background: var(--bg-elevated);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

#gps-map {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-top: 16px;
    position: relative;
}

#gps-map .leaflet-tile-container img {
    filter: brightness(0.45) contrast(1.3) invert(0.06) !important;
}

.leaflet-popup-content-wrapper {
    background: #111113;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.leaflet-popup-tip {
    background: #111113;
}

.leaflet-popup-close-button {
    color: var(--text-secondary);
}

.leaflet-popup-close-button:hover {
    color: var(--text-primary);
}

/* ========== Map Tab – Route Map ========== */
#map-tab-header.map-tab-header {
    padding: 16px 20px;
}

.map-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 20px;
}

.map-search-group {
    margin-bottom: 0;
}

.map-search-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.map-search-input {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-primary);
    min-width: 120px;
    transition: var(--transition);
}

select.map-search-input option,
select.map-autorefresh-select option,
.ps-autorefresh-select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.map-search-address .map-search-input {
    min-width: 200px;
}

.map-search-actions .btn {
    margin-top: 0;
}

.map-last-updated-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 0;
}

/* "Source" group in the Map header — a labeled, bordered chip that contains
   the "Logs" checkbox and (when toggled on) the snapshot-version dropdown.
   The chip approach keeps the row visually organized: the controls feel like
   one intentional unit instead of loose elements scattered between the search
   inputs, and the dropdown expands inside the chip rather than pushing the
   surrounding inputs around. */
.map-search-source {
    /* Match the column-style layout of the other .map-search-group items so
       the "Source" label sits directly above the chip exactly like "Day" and
       "Tour ID" do above their inputs. */
    display: flex;
    flex-direction: column;
    gap: 0;
}
.map-search-source-label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.map-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    border-radius: 10px;
    transition: var(--transition);
    min-height: 38px; /* match the height of the other map-search-input fields */
}
.map-source-chip:has(input:checked) {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.10);
}
/* The wrapper-46 ships its inner <label class="cbx"> as block-by-default
   (because the surrounding .form-group / .map-search-group rules force every
   <label> to display:block). Re-anchor it to inline-flex so the checkbox sits
   next to its text the way it does on the Dashboard / Billing filters. */
.map-source-chip .checkbox-wrapper-46 {
    margin: 0;
    padding: 0;
}
.map-source-chip .checkbox-wrapper-46 .cbx {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1;
}
.map-source-chip .checkbox-wrapper-46 .cbx span:last-child {
    padding-left: 0;
}
.map-source-version {
    min-width: 220px;
    max-width: 320px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: var(--transition);
}
.map-source-version:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.map-source-version[hidden] {
    display: none !important;
}
/* Native <select> popups otherwise inherit the OS light palette and produce
   unreadable bright-white options on the dark theme. */
.map-source-version option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.map-last-updated-label {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.map-last-updated {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ===================== Live Transfer ===================== */
/* Header row: equalize the date-input and <select> heights so their labels
   line up, and drop the "Last updated" text onto the same baseline. */
#livetransfer-tab .map-search-row { align-items: flex-end; row-gap: 14px; }
#livetransfer-tab .map-search-input { min-height: 40px; box-sizing: border-box; }
#livetransfer-tab .map-last-updated-wrap { padding-bottom: 10px; }

/* Right column: quick-filter segmented control above the scrolling card list. */
.lt-list-col {
    flex: 1 1 340px;
    max-width: 560px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lt-filter-bar {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.lt-filter-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 9px;
    cursor: pointer;
    transition: var(--transition);
}
.lt-filter-btn:hover { color: var(--text-primary); background: rgba(127,127,127,0.12); }
.lt-filter-btn.is-active { background: var(--primary); color: #fff; }

#lt-list { flex: 1; overflow-y: auto; max-height: 72vh; padding: 14px; }
.lt-list-head { font-weight: 600; padding: 2px 4px 12px; color: var(--text-primary); }

.lt-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    margin: 0 0 10px;
    background: var(--bg-elevated);
    transition: var(--transition);
}
.lt-card.is-processed { border-color: rgba(22,163,74,0.5); background: rgba(22,163,74,0.06); }
.lt-card-top { display: flex; align-items: center; gap: 8px; }
.lt-pkg { flex: 1; min-width: 0; word-break: break-all; font-size: 14px; }
.lt-count { font-weight: 700; font-size: 13px; flex: none; }
.lt-muted { color: var(--text-muted); }
.lt-recv { margin-top: 2px; }
.lt-addr { color: var(--text-muted); font-size: 13px; margin-top: 1px; }
.lt-parcels { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.lt-parcel { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; }

/* #N sequence number rendered as a label tag (matches the tag aesthetic). */
.lt-num-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    flex: none;
}
.lt-sys-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex: none;
}
/* Future booking (resolved +N days ahead) — purple, distinct from the system tag. */
.lt-future-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #7c3aed;
    white-space: nowrap;
    flex: none;
}
.lt-card.is-future { border-color: rgba(124,77,237,0.55); background: rgba(124,77,237,0.06); }

.lt-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
}
.lt-found {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Per-card Processed toggle (Open <-> Closed). */
.lt-proc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    flex: none;
}
.lt-proc-toggle:hover { border-color: var(--text-muted); color: var(--text-primary); }
.lt-proc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); transition: var(--transition); }
.lt-proc-toggle.is-on { border-color: rgba(22,163,74,0.6); background: rgba(22,163,74,0.14); color: #16a34a; }
.lt-proc-toggle.is-on .lt-proc-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.2); }

/* Subtle per-card delete (replaces the loud red button + browser confirm). */
.lt-card-del {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex: none;
}
.lt-card-del:hover { background: rgba(220,38,38,0.12); color: #dc2626; }

.lt-empty { padding: 40px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }

.route-map-wrapper {
    display: flex;
    gap: 0;
    width: 100%;
    min-height: 450px;
    margin-top: 12px;
    position: relative;
}

.route-map-container {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 400px;
}

.route-map {
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 400px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
}

#route-map .leaflet-tile-container img {
    filter: brightness(0.45) contrast(1.3) invert(0.06) !important;
}

#route-map-container {
    filter: brightness(0.95);
}

.map-sidebar {
    width: 320px;
    flex-shrink: 0;
    background: #111113;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-left: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.map-sidebar-content {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.map-sidebar-placeholder {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
}

.map-sidebar-details {
    font-size: 13px;
}

.map-sidebar-details .sidebar-detail-row {
    margin-bottom: 10px;
}

.map-sidebar-details .sidebar-detail-label {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 2px;
}

.map-sidebar-details .sidebar-detail-value {
    color: var(--text-primary);
}

.map-sidebar-details .sidebar-detail-note {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.4;
}

/* The action bar sits at the TOP of the sidebar — above the details —
 * so it is the first thing the user sees the moment they tap a marker
 * (no need to scroll past a long list of detail rows to reach it).
 * Subtle background + bottom border separate it from the details below. */
.map-sidebar-actions {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    flex-shrink: 0;
    align-items: stretch;
    box-sizing: border-box;
}

.map-sidebar-actions .btn {
    flex: 1 1 auto;
    min-width: 80px;
    margin: 0;
    padding: 8px 14px;
    font-size: 13px;
    box-sizing: border-box;
}

/* Push the Deselect button to the right edge so it's visually separated
 * from the info / action buttons. On a single-row layout this leaves a
 * clean gap; when the row wraps the deselect drops below the action
 * buttons but stays right-aligned, which keeps the destructive-ish
 * action out of the primary tap zone. */
.map-sidebar-actions .map-sidebar-deselect-btn {
    margin-left: auto;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .map-sidebar-actions {
        padding: 10px 14px;
    }
    .map-sidebar-actions .btn {
        padding: 10px 12px;
        min-height: 40px;
        font-size: 13px;
    }
    .map-sidebar-actions .map-sidebar-deselect-btn {
        margin-left: 0;
        flex: 1 1 auto;
    }
}

/* ========== Driver Map ========== */
#drivermap-tab {
    padding: 16px;
}
.driver-map-header {
    padding: 14px 16px;
}
.driver-map-drivers-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.driver-map-driver-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.driver-map-driver-checkbox-label input {
    accent-color: var(--primary);
    cursor: pointer;
}
.map-search-sort .map-autorefresh-select {
    min-width: 130px;
}
.driver-map-wrapper {
    width: 100%;
    margin-top: 12px;
    padding: 0 4px;
}
.driver-map-container {
    width: 100%;
    aspect-ratio: 1;
    min-height: 560px;
    max-height: min(85vh, 900px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.driver-map-container .route-map {
    width: 100%;
    height: 100%;
    min-height: 560px;
}

/* ========== Package Map ========== */
#packagemap-tab {
    padding: 16px;
}
.pkgmap-header {
    padding: 14px 16px;
}
.pkgmap-drivers-bar {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.pkgmap-drivers-header {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.pkgmap-drivers-header:hover { opacity: 0.85; }
.pkgmap-drivers-toggle-icon {
    display: inline-flex;
    transition: transform 0.2s;
    color: var(--text-muted);
    flex-shrink: 0;
}
.pkgmap-drivers-bar.pkgmap-drivers-open .pkgmap-drivers-toggle-icon {
    transform: rotate(90deg);
}
.pkgmap-drivers-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.pkgmap-drivers-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}
.pkgmap-drivers-bulk {
    margin-left: auto;
    display: flex;
    gap: 6px;
}
.pkgmap-drivers-bulk-btn {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.pkgmap-drivers-bulk-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.pkgmap-drivers-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 8px;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}
.pkgmap-drivers-bar.pkgmap-drivers-open .pkgmap-drivers-grid {
    display: grid;
}
.pkgmap-driver-block {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid transparent;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    transition: border-color 0.15s;
}
.pkgmap-driver-block:hover {
    border-color: var(--border);
}
.pkgmap-driver-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    font-size: 12px;
}
.pkgmap-cbx-wrap {
    flex-shrink: 0;
}
.pkgmap-cbx-wrap .cbx {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 0;
}
.pkgmap-cbx-wrap .cbx span:first-child {
    width: 15px;
    height: 15px;
}
.pkgmap-cbx-wrap .cbx span:first-child svg {
    top: 2px;
    left: 1px;
}
.pkgmap-cbx-wrap .cbx span:last-child {
    padding-left: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
@media (max-width: 900px) {
    .pkgmap-wrapper {
        flex-direction: column;
    }
    .pkgmap-sidebar {
        width: 100%;
        order: 2;
    }
}
@media (max-width: 600px) {
    .pkgmap-drivers-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}
.pkgmap-wrapper {
    position: relative;
    width: 100%;
    margin-top: 12px;
    padding: 0 4px;
    display: flex;
    gap: 12px;
}
.pkgmap-sidebar {
    width: 280px;
    flex-shrink: 0;
}
.pkgmap-container {
    /* `position: relative` makes the now-nested `#pkgmap-legend` anchor
     * to the actual map area (bottom-left of the map), not to the wrapper
     * — so on mobile, where the sidebar stacks below the map, the legend
     * still sits at the bottom-left of the map instead of floating below
     * it on top of the sidebar. */
    position: relative;
    flex: 1;
    min-width: 0;
    aspect-ratio: 1;
    min-height: 560px;
    max-height: min(85vh, 900px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.pkgmap-container .route-map {
    width: 100%;
    height: 100%;
    min-height: 560px;
}
.pkgmap-loading-overlay {
    position: absolute;
    top: 0;
    left: 4px;
    right: 4px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,15,20,0.55);
    border-radius: 14px;
    z-index: 800;
    pointer-events: none;
}
.pkgmap-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Map Points List modal */
.map-points-list-modal-content {
    max-width: 480px;
    width: 100%;
}

/* Route List mode picker (Full vs Partial, with mode buttons or entry list) */
.route-list-mode-modal-content {
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}
.route-list-mode-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
}
.route-list-mode-tab {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: var(--transition);
}
.route-list-mode-tab:hover {
    color: var(--text-primary);
}
.route-list-mode-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.route-list-mode-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.route-list-mode-body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.route-list-mode-hint {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 14px;
}
.route-list-mode-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.route-list-mode-btn {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
    border-radius: var(--radius-md);
    line-height: 1.3;
}
.route-list-mode-btn[hidden] {
    display: none !important;
}
.route-list-mode-btn-title {
    font-weight: 600;
    font-size: 14px;
}
.route-list-mode-btn-desc {
    font-size: 12px;
    opacity: 0.8;
    font-weight: 400;
}
.route-list-mode-loading {
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* ============================================================
   Route Lists tab — full-page driver browser + selectable entries
   ============================================================ */
.route-lists-tab .content-card {
    padding: 0;
    overflow: hidden;
}
.route-lists-card {
    /* Sub-tabs sit on top of the card now, so the card itself is a bit
       shorter to keep the whole tab inside the viewport. */
    height: calc(100vh - 230px);
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

/* ---- Basic / Advanced sub-tab bar ---- */
.route-lists-subtabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: 16px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.route-lists-subtabs .nav-tab {
    position: relative;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.route-lists-subtabs .nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}
.route-lists-subtabs .nav-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.route-lists-subtabs .nav-tab.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
.route-lists-subtabs .nav-tab.active:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* Sub-pane visibility — only the active one is rendered, the other
   stays in the DOM but is fully hidden so its state survives switches. */
.route-lists-subpane {
    display: none;
}
.route-lists-subpane.is-active {
    display: flex;
}

/* Advanced pane: there is no driver pane on the left, so let the detail
   pane occupy the full card width. */
.route-lists-advanced-pane .route-lists-advanced-detail {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Self-updating sync indicator (Dashboard "Last Driver Sync",
       Route Lists "Last Data Sync", etc.). Lives in a slim card with
       a soft pulsing green dot to signal the background poller is
       alive without dominating the page header.                    ---- */
.sync-indicator-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.2;
    border-radius: var(--radius-md);
}
.sync-indicator-bar.route-lists-sync-bar,
.sync-indicator-bar.dashboard-sync-bar {
    margin: 0 0 12px 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
.sync-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18);
    flex: 0 0 8px;
    animation: syncIndicatorPulse 2.4s ease-in-out infinite;
}
.sync-indicator-bar.is-stale .sync-indicator-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.sync-indicator-bar.is-error .sync-indicator-dot {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
    animation: none;
}
.sync-indicator-label {
    font-weight: 600;
    color: var(--text-primary);
}
.sync-indicator-value {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 500;
}
@keyframes syncIndicatorPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ---- Auto-update countdown badge (next to Reload, both Basic & Adv) ---- */
.route-lists-autoupdate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--text-muted);
    min-height: 32px;
    user-select: none;
    white-space: nowrap;
}
.route-lists-autoupdate-label {
    font-weight: 600;
    color: var(--text-secondary);
}
.route-lists-autoupdate-text {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 600;
    min-width: 48px;
    text-align: right;
}
.route-lists-autoupdate-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18);
    transition: background-color 0.2s, box-shadow 0.2s;
}
/* Briefly turn the dot blue while the silent fetch is in flight, then
   it fades back to the steady green idle state. */
.route-lists-autoupdate.is-loading .route-lists-autoupdate-dot {
    background: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
    animation: routeListsAutoupdatePulse 0.9s ease-in-out infinite;
}
.route-lists-autoupdate.is-paused .route-lists-autoupdate-dot {
    background: #6b7280;
    box-shadow: none;
}
.route-lists-autoupdate.is-paused {
    opacity: 0.7;
}
@keyframes routeListsAutoupdatePulse {
    0%, 100% { transform: scale(1);   opacity: 1;  }
    50%      { transform: scale(1.3); opacity: 0.6; }
}

/* ---- Advanced entries: per-row driver chip ---- */
.route-lists-entry-driver {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.14);
    color: var(--primary, #6366f1);
    border: 1px solid rgba(99, 102, 241, 0.4);
    line-height: 1.5;
    white-space: nowrap;
}

/* Subtle row-wide tint so rows belonging to the same tour are visually
   grouped when sorted by driver. Driven by an inline data-tour-id stripe. */
.route-lists-adv-entries .route-lists-entry {
    border-left: 3px solid transparent;
}
.route-lists-adv-entries .route-lists-entry[data-driver-stripe="1"] { border-left-color: rgba(99, 102, 241, 0.55); }
.route-lists-adv-entries .route-lists-entry[data-driver-stripe="2"] { border-left-color: rgba(34, 197, 94, 0.55); }
.route-lists-adv-entries .route-lists-entry[data-driver-stripe="3"] { border-left-color: rgba(245, 158, 11, 0.55); }
.route-lists-adv-entries .route-lists-entry[data-driver-stripe="4"] { border-left-color: rgba(244, 63, 94, 0.55); }
.route-lists-adv-entries .route-lists-entry[data-driver-stripe="5"] { border-left-color: rgba(14, 165, 233, 0.55); }
.route-lists-adv-entries .route-lists-entry[data-driver-stripe="6"] { border-left-color: rgba(168, 85, 247, 0.55); }
.route-lists-adv-entries .route-lists-entry[data-driver-stripe="7"] { border-left-color: rgba(20, 184, 166, 0.55); }
.route-lists-adv-entries .route-lists-entry[data-driver-stripe="8"] { border-left-color: rgba(236, 72, 153, 0.55); }
.route-lists-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
/* ---- Drivers pane (left sidebar) ---- */
.route-lists-drivers-pane {
    flex: 0 0 280px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg-input);
    min-height: 0;
}
.route-lists-drivers-header {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid var(--border);
}
.route-lists-driver-search {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
}
.route-lists-driver-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.route-lists-drivers-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.route-lists-drivers-count {
    font-size: 11px;
    color: var(--text-muted);
}
.route-lists-show-hidden-toggle {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.route-lists-show-hidden-toggle[hidden] {
    display: none !important;
}
.route-lists-show-hidden-toggle:hover {
    opacity: 0.85;
}
.route-lists-show-hidden-toggle.is-on {
    color: var(--text-muted);
}
.route-lists-drivers-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 0;
}
.route-lists-driver-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 0.12s, border-color 0.12s;
}
.route-lists-driver-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.route-lists-driver-item.selected {
    background: var(--primary-glow);
    border-left-color: var(--primary);
}
.route-lists-driver-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.route-lists-driver-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.route-lists-driver-item-tour {
    font-size: 11px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.route-lists-driver-item-active {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18);
}
.route-lists-driver-item-active.inactive {
    background: #6b7280;
    box-shadow: none;
    opacity: 0.5;
}
.route-lists-driver-item-hide {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, background-color 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
}
.route-lists-driver-item:hover .route-lists-driver-item-hide,
.route-lists-driver-item.selected .route-lists-driver-item-hide,
.route-lists-driver-item.is-hidden .route-lists-driver-item-hide {
    opacity: 1;
}
.route-lists-driver-item-hide:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.35);
}
.route-lists-driver-item.is-hidden {
    opacity: 0.55;
}
.route-lists-driver-item.is-hidden .route-lists-driver-item-name {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}
.route-lists-driver-item.is-hidden .route-lists-driver-item-hide {
    color: var(--primary);
}
.route-lists-driver-item.is-hidden .route-lists-driver-item-hide:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.4);
}

/* ---- Detail pane (right) ---- */
.route-lists-detail-pane {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.route-lists-empty-state {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
}
.route-lists-empty-icon {
    color: var(--text-muted);
    opacity: 0.4;
}
.route-lists-empty-state h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.route-lists-empty-state p {
    margin: 0;
    font-size: 13px;
    max-width: 320px;
}
.route-lists-detail-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.route-lists-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.route-lists-detail-driver {
    flex: 1 1 auto;
    min-width: 0;
}
.route-lists-driver-name {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.route-lists-driver-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.route-lists-driver-tour {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.route-lists-driver-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.route-lists-driver-tag.active {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}
.route-lists-driver-tag.inactive {
    background: rgba(107, 114, 128, 0.18);
    color: #a1a1aa;
}
.route-lists-detail-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.route-lists-day-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}
.route-lists-day-input {
    padding: 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.route-lists-day-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
/* "Source" chip inside the Routes-List detail header. Mirror of the Map chip:
   bordered container holds the modern checkbox + (when toggled on) the
   snapshot dropdown, so the row stays organized and the dropdown doesn't
   shove the surrounding controls around. */
.route-lists-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    transition: var(--transition);
    min-height: 32px; /* matches the day picker height in this header */
}
.route-lists-source-chip:has(input:checked) {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.10);
}
.route-lists-source-chip .checkbox-wrapper-46 {
    margin: 0;
    padding: 0;
}
.route-lists-source-chip .checkbox-wrapper-46 .cbx {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1;
}
.route-lists-source-chip .checkbox-wrapper-46 .cbx span:last-child {
    padding-left: 0;
}
.route-lists-source-version {
    min-width: 240px;
    max-width: 320px;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: var(--transition);
}
.route-lists-source-version:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.route-lists-source-version[hidden] {
    display: none !important;
}
/* Force a dark <select> popup so options stay readable on the dark theme. */
.route-lists-source-version option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.route-lists-print-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.route-lists-print-bar-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 4px;
}
.route-lists-print-btn[hidden] {
    display: none !important;
}
/* ---- "Sorted by PLZ" split-button dropdown ---- */
.route-lists-btn-split {
    position: relative;
    display: inline-block;
}
.route-lists-split-main {
    cursor: pointer;
}
.route-lists-split-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 180px;
    margin-top: 4px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.route-lists-split-menu.route-lists-split-menu-open {
    display: block;
}
.route-lists-split-option {
    display: block;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}
.route-lists-split-option:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Experimental "Test" button — visually offset from the primary print buttons
   with a dashed amber outline so it's clear this is a sandbox/in-progress
   layout, not a production option. Pushes itself to the far right of the
   bar via margin-left so it never sits flush against "Importance". */
.route-lists-print-btn.route-lists-print-btn-test {
    margin-left: auto;
    border: 1px dashed #d97706;        /* amber-600 */
    color: #b45309;                    /* amber-700 */
    background: rgba(245, 158, 11, 0.08);
}
.route-lists-print-btn.route-lists-print-btn-test:hover {
    background: rgba(245, 158, 11, 0.18);
    border-style: solid;
}
.route-lists-print-btn.route-lists-print-btn-test::before {
    content: "⚙ ";
    margin-right: 2px;
}
.route-lists-entries-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 8px;
    flex-wrap: wrap;
}
.route-lists-entries-search {
    flex: 1 1 240px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.route-lists-entries-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.route-lists-entries-toolbar-actions {
    display: flex;
    gap: 6px;
}
.route-lists-link {
    padding: 4px 8px !important;
    font-size: 12px !important;
    background: transparent !important;
    color: var(--primary) !important;
    border: none !important;
    box-shadow: none !important;
}
.route-lists-link:hover {
    text-decoration: underline;
}
.route-lists-entries {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    min-height: 120px;
}
.route-lists-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.12s;
}
.route-lists-entry:last-child {
    border-bottom: none;
}
.route-lists-entry:hover {
    background: rgba(255, 255, 255, 0.04);
}
.route-lists-entry.checked {
    background: var(--primary-glow);
}
.route-lists-entry input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: var(--primary);
    cursor: pointer;
}
.route-lists-entry-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}
.route-lists-entry-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-primary);
}
.route-lists-entry-type {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.route-lists-entry-type.delivery {
    background: rgba(43, 109, 245, 0.18);
    color: #6fa8ff;
}
.route-lists-entry-type.pickup {
    background: rgba(245, 158, 11, 0.18);
    color: #f4b85e;
}
.route-lists-entry-sendung {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
}
.route-lists-entry-name {
    font-weight: 600;
}
/* Carrier-system chip on each entry row (DEKU, ATF, MucOvn, …). Helps the
   operator visually scan and the search box now also matches against this. */
.route-lists-entry-system {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(120, 144, 156, 0.16);
    color: #455a64;
    border: 1px solid rgba(120, 144, 156, 0.35);
    line-height: 1.5;
    white-space: nowrap;
}
/* A few well-known systems get distinct colours so the eye can group them
   even when scrolling through hundreds of rows. Unknown values fall back
   to the neutral slate styling above. */
.route-lists-entry-system[data-system="DEKU"]   { background: rgba(33, 150, 243, 0.14); color: #1565c0; border-color: rgba(33, 150, 243, 0.45); }
.route-lists-entry-system[data-system="ATF"]    { background: rgba(76, 175, 80, 0.16);  color: #2e7d32; border-color: rgba(76, 175, 80, 0.45); }
.route-lists-entry-system[data-system="MUCOVN"] { background: rgba(255, 152, 0, 0.16);  color: #ef6c00; border-color: rgba(255, 152, 0, 0.45); }
.route-lists-entry-line2 {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.route-lists-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    margin-top: 14px;
}
.route-lists-entries-count {
    color: var(--text-muted);
    font-size: 13px;
}
#route-lists-btn-print-selected:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ========== Route Lists — Batch Print ========== */
/* Trigger button sits in the drivers-pane header, next to the search box,
 * so it's reachable regardless of which (if any) driver is selected. */
.route-lists-batch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

/* Modal: full-width content card sized for a long driver list with the
 * day/mode controls always visible at the top. The drivers section flexes
 * to fill the remaining space so the user sees as many drivers at once as
 * the viewport allows. Mirrors the Edit Driver and Admin Permissions modal
 * sizing convention. */
#routeListsBatchModal .modal-content.rl-batch-modal-content {
    max-width: min(96vw, 920px);
    width: 96vw;
    height: min(95vh, 1000px);
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
#routeListsBatchModal .modal-header.rl-batch-modal-header {
    flex-shrink: 0;
    padding: 18px 24px;
    border-radius: 20px 20px 0 0;
}
.rl-batch-title {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}
.rl-batch-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.14);
    color: var(--primary, #6366f1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rl-batch-title-text { min-width: 0; }
.rl-batch-title-text h2 {
    margin: 0 0 2px;
    font-size: 18px;
    color: var(--text-primary, #fff);
}
.rl-batch-subtitle {
    margin: 0;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-size: 13px;
}

.rl-batch-body {
    flex: 1 1 auto;
    /* No outer scroll — the drivers section owns its own scroll so the
     * day/mode controls stay anchored at the top regardless of the list
     * length. */
    overflow: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
}

.rl-batch-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 16px;
    flex: 0 0 auto;
}
/* The drivers card grows to fill whatever vertical space the modal has
 * left after the day/mode card and the footer — that's what makes a tall
 * viewport show 30+ drivers without scrolling the whole modal. */
.rl-batch-section.rl-batch-drivers {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.rl-batch-day-mode {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    align-items: start;
}
.rl-batch-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rl-batch-field > label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-weight: 600;
}
.rl-batch-day-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-primary, #fff);
    color-scheme: dark;
    font-size: 13px;
    min-height: 38px;
}

/* Mode pills — radio inputs visually replaced by a card for each option.
 * The chosen option gets an indigo highlight; the disabled (Optimized when
 * not all drivers are optimized) option dims and ignores clicks.
 * Compact one-line layout — the descriptive hint text lives in the title
 * tooltip, not in the body, so the pills don't tower over the drivers list. */
.rl-batch-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}
.rl-batch-mode-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s;
    min-height: 36px;
}
.rl-batch-mode-pill:hover { border-color: rgba(99, 102, 241, 0.45); }
.rl-batch-mode-pill input[type="radio"] {
    margin: 0;
    accent-color: var(--primary, #6366f1);
    flex-shrink: 0;
}
.rl-batch-mode-pill:has(input[type="radio"]:checked) {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.5);
}
.rl-batch-mode-pill.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.015);
}
.rl-batch-mode-pill.is-disabled input[type="radio"] { pointer-events: none; }
.rl-batch-mode-name {
    color: var(--text-primary, #fff);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Raw toggle field in the batch modal day/mode section */
.rl-batch-raw-field {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}
.rl-batch-raw-field .checkbox-wrapper-46 {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.rl-batch-raw-field .cbx {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rl-batch-raw-hint {
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-size: 12px;
    line-height: 1.3;
}

/* Inline warning shown below the pills only when Optimized is not allowed. */
.rl-batch-mode-warning {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(244, 63, 94, 0.10);
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: #fca5a5;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Drivers section — search + Select all/Clear in the header, scrollable
 * checkbox list below. */
.rl-batch-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.rl-batch-section-header h3 {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    flex: 1 1 auto;
    min-width: 0;
}
.rl-batch-driver-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rl-batch-driver-search {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text-primary, #fff);
    font-size: 13px;
    min-width: 180px;
    min-height: 32px;
}
.rl-batch-driver-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* No fixed max-height: the parent (.rl-batch-drivers) is itself a flex
     * column that fills the modal, so we just need to be flex:1 inside it
     * and own the scroll. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
}

/* Each row uses the same .checkbox-wrapper-46 pattern as every other modern
 * checkbox in the app (dashboard filters, Map logs toggle, etc). The .cbx
 * label is overloaded into a CSS-grid container so the name / tour-id /
 * status badge line up across rows. The `display: inline-block` on
 * .cbx span coming from the global style is overridden so the spans take
 * their grid cell width. */
.checkbox-wrapper-46.rl-batch-driver-row {
    display: block;          /* override potential `margin: auto` on .cbx */
    margin: 0;
    border-radius: 6px;
    transition: background-color 0.1s;
}
.checkbox-wrapper-46.rl-batch-driver-row:hover {
    background: rgba(255, 255, 255, 0.04);
}
.checkbox-wrapper-46.rl-batch-driver-row .cbx {
    display: grid;
    grid-template-columns: 24px 1fr 80px auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.checkbox-wrapper-46.rl-batch-driver-row .cbx > span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
/* The global .cbx span:last-child rule injects padding-left:8px (intended
 * for the label tail next to a checkbox). In our grid rows the last span
 * is the OPT/— badge and we don't want that injected padding to either
 * shift it or, when combined with our `padding-left: 0` override, eat its
 * own padding. We instead set padding explicitly on each typed cell using
 * an extra-specific selector so it always wins the cascade. */
.checkbox-wrapper-46.rl-batch-driver-row .cbx span.rl-batch-driver-name,
.checkbox-wrapper-46.rl-batch-driver-row .cbx span.rl-batch-driver-tour {
    padding-left: 0;
}

.rl-batch-driver-name {
    color: var(--text-primary, #fff);
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;   /* beat .cbx span inline-block */
}
.rl-batch-driver-tour {
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    justify-content: flex-end;
}
/* The badge gets its own explicit padding via a selector specific enough
 * to beat the global .cbx span:last-child rule (which would otherwise add
 * an unwanted padding-left:8px and visually swallow the "OPT" text). */
.checkbox-wrapper-46.rl-batch-driver-row .cbx span.rl-batch-driver-badge {
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1;
    justify-content: center;
}
.rl-batch-driver-badge {
    /* Fallback (kept for any non-row context). The qualified selector
     * above is what actually paints the badge inside a row. */
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1;
    justify-content: center;
}
.rl-batch-driver-badge.is-opt {
    background: rgba(34, 197, 94, 0.16);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}
.rl-batch-driver-badge.is-no-opt {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    border-color: var(--border, rgba(255, 255, 255, 0.08));
}

/* Footer with summary + actions */
#routeListsBatchModal .form-actions.rl-batch-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: linear-gradient(0deg, var(--bg-elevated, #111113) 0%, rgba(17, 17, 19, 0.6) 100%);
    margin: 0;
}
.rl-batch-summary {
    flex: 1 1 auto;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-size: 13px;
}
.rl-batch-summary.is-error {
    color: #fca5a5;
    font-weight: 600;
}

@media (max-width: 768px) {
    .rl-batch-day-mode { grid-template-columns: 1fr; }
    .rl-batch-modes { grid-template-columns: repeat(2, 1fr); }
    .checkbox-wrapper-46.rl-batch-driver-row .cbx {
        grid-template-columns: 24px 1fr auto;
    }
    .rl-batch-driver-tour { display: none; }

    /* On phones the day/mode card alone (date + 4 mode pills + Raw +
     * FixedToday) eats most of the viewport, leaving the drivers list
     * with effectively zero space. Replace the desktop "modal owns its
     * scroll, drivers list owns inner scroll" layout with a single page
     * scroll: the modal body scrolls vertically and the drivers list
     * grows to fit its content. Native mobile scrolling, no awkward
     * nested scroll regions. */
    #routeListsBatchModal .modal-content.rl-batch-modal-content {
        max-width: 100vw;
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        overflow: hidden;
    }
    #routeListsBatchModal .modal-header.rl-batch-modal-header {
        padding: 14px 16px;
        border-radius: 0;
    }
    .rl-batch-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px;
        gap: 14px;
        min-height: 0;
    }
    .rl-batch-section { padding: 12px; }
    .rl-batch-section.rl-batch-drivers {
        flex: 0 0 auto;
        overflow: visible;
        min-height: 0;
    }
    .rl-batch-driver-list {
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
        min-height: 240px;
    }
    #routeListsBatchModal .form-actions.rl-batch-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .rl-batch-modes { grid-template-columns: 1fr; }
    .rl-batch-driver-search { min-width: 0; flex: 1 1 100%; }
    .rl-batch-section-header { gap: 8px; }
    .rl-batch-driver-actions { width: 100%; justify-content: flex-end; }
}

/* Mobile: stack the panes vertically and let the driver list collapse */
@media (max-width: 900px) {
    .route-lists-card {
        height: auto;
        min-height: 0;
    }
    .route-lists-autoupdate {
        flex: 1 1 auto;
        justify-content: center;
    }
    .route-lists-layout {
        flex-direction: column;
    }
    .route-lists-drivers-pane {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .route-lists-drivers-list {
        max-height: 280px;
    }
    .route-lists-detail-pane {
        min-height: 0;
    }
    .route-lists-entries {
        max-height: 50vh;
    }

    /* Detail header: chips no longer fit on one line at this width — stack
     * the driver block above the controls and let the controls themselves
     * wrap so Raw + FixedToday don't get clipped or pushed off-screen. */
    .route-lists-detail-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }
    .route-lists-detail-controls {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    .route-lists-day-input {
        flex: 1 1 auto;
        min-width: 130px;
    }
    .route-lists-source-chip {
        flex: 0 0 auto;
    }
    /* The version dropdown that pops out of the Logs chip would otherwise
     * stretch the chip past the viewport — let it shrink with the row. */
    .route-lists-source-version {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 200px;
    }

    /* Print bar buttons stay clickable when there's many of them. */
    .route-lists-print-bar {
        padding: 10px 16px;
    }

    /* Drivers panel header (search + batch print + show-hidden). */
    .route-lists-drivers-header {
        padding: 10px 14px;
    }
    .route-lists-batch-btn {
        width: 100%;
        justify-content: center;
    }

    /* Entries toolbar: search field grows, action buttons wrap underneath. */
    .route-lists-entries-toolbar {
        padding: 10px 16px 6px;
        gap: 8px;
    }
    .route-lists-entries-search {
        flex: 1 1 100%;
    }
}

/* Partial sub-section: searchable, multi-select entry list */
.route-list-partial-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.route-list-partial-search {
    flex: 1 1 220px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
}
.route-list-partial-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.route-list-partial-search::placeholder {
    color: var(--text-muted);
}
.route-list-partial-toolbar-actions {
    display: flex;
    gap: 6px;
}
.route-list-partial-link {
    padding: 4px 8px !important;
    font-size: 12px !important;
    background: transparent !important;
    color: var(--primary) !important;
    border: none !important;
    box-shadow: none !important;
}
.route-list-partial-link:hover {
    text-decoration: underline;
}
.route-list-partial-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
}
.route-list-partial-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s;
}
.route-list-partial-item:last-child {
    border-bottom: none;
}
.route-list-partial-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.route-list-partial-item.checked {
    background: var(--primary-glow);
}
.route-list-partial-item input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: var(--primary);
    cursor: pointer;
}
.route-list-partial-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}
.route-list-partial-item-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-primary);
}
.route-list-partial-item-type {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.route-list-partial-item-type.delivery {
    background: rgba(43, 109, 245, 0.18);
    color: #6fa8ff;
}
.route-list-partial-item-type.pickup {
    background: rgba(245, 158, 11, 0.18);
    color: #f4b85e;
}
.route-list-partial-item-sendung {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
}
.route-list-partial-item-name {
    font-weight: 600;
}
.route-list-partial-item-line2 {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.route-list-partial-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.route-list-partial-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.route-list-partial-count {
    color: var(--text-muted);
    font-size: 13px;
}
#route-list-partial-generate:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.map-points-list-search-wrap {
    padding: 12px 20px 0;
}
.map-points-list-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
}
.map-points-list-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.map-points-list-search::placeholder {
    color: var(--text-muted);
}

.map-points-list-body {
    padding: 16px 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.map-points-list-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 12px 0;
}

.map-points-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.map-points-list-empty {
    color: var(--text-muted);
    padding: 20px;
    text-align: center;
}

.map-points-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 10px;
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--bg-elevated);
    transition: var(--transition);
}

.map-points-list-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--primary);
}

.map-points-list-row-match {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
}

.map-points-list-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
}

.map-points-list-label {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 600px) {
    .map-points-list-label {
        white-space: normal;
    }
}

/* Map legend */
.map-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 1000;
}
.map-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.map-legend-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.map-legend-toggle:hover {
    color: var(--text-primary);
    border-color: var(--primary);
}
.map-legend-open .map-legend-toggle {
    color: var(--primary);
    border-color: var(--primary);
}
.map-legend-body {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 160px;
    /* Capped at 50vh so the popup stays inside the (now-parent) map
     * container even on tall portrait viewports — the pkgmap container
     * has `overflow: hidden` for its rounded corners and would clip the
     * popup if it grew taller than the map. */
    max-height: 50vh;
    overflow-y: auto;
}
.map-legend-section {
    margin-bottom: 10px;
}
.map-legend-section:last-child {
    margin-bottom: 0;
}
.map-legend-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.map-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.map-legend-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.25);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.map-legend-dot-driver {
    border-color: #1565c0;
}
.map-legend-item[data-colors] {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    margin: 0 -6px;
    transition: background 0.15s;
}
.map-legend-item[data-colors]:hover {
    background: rgba(255,255,255,0.06);
}
.map-legend-item-active {
    background: rgba(99, 102, 241, 0.15) !important;
}
.map-legend-item-inactive {
    opacity: 0.35;
}
.map-legend-title[data-colors] {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    margin: 0 -6px;
    transition: background 0.15s;
}
.map-legend-title[data-colors]:hover {
    background: rgba(255,255,255,0.06);
}
.map-legend-section--info .map-legend-title {
    cursor: default;
}
.map-legend-item--info {
    cursor: default;
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.35;
    align-items: flex-start;
}
.map-legend-item--info:hover {
    background: transparent !important;
}
.map-legend-dot--user-fallback {
    position: relative;
    background: #ffffff;
    border-color: #ff9800 !important;
    box-shadow: 0 0 0 1px #ffb74d, 0 1px 2px rgba(0,0,0,0.2);
    overflow: visible;
    margin-top: 2px;
    margin-right: 4px;
}
.map-legend-fallback-badge {
    position: absolute;
    top: -6px;
    right: -7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ff9800;
    color: #1a1a1a;
    font-size: 7.5px;
    font-weight: 800;
    line-height: 11px;
    text-align: center;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.map-legend-title-active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--primary) !important;
}
.map-legend-clear {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 5px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.map-legend-clear:hover {
    color: var(--text-primary);
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.route-map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 24px;
    color: var(--text-secondary);
    text-align: center;
}

.route-marker-dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.route-marker-dot-numbered {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.route-marker-num {
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 1px #fff, 0 1px 1px rgba(255,255,255,0.8);
}
.route-marker-num-light {
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.5);
}

.route-marker {
    background: none !important;
    border: none !important;
}

.route-marker-dimmed .route-marker-dot {
    opacity: 0.25;
}

.route-marker-selected .route-marker-dot {
    box-shadow: 0 0 0 3px var(--primary);
}

/* User-fallback indicator: when a delivered package's planned coordinates were
   missing/zero and we fell back to the driver's recorded scan location. */
.route-marker--user-fallback {
    position: relative;
}
.route-marker-dot--user-fallback {
    border: 3px solid #ff9800 !important;
    box-shadow:
        0 0 0 3px #ffe0b2,
        0 0 10px 2px rgba(255, 152, 0, 0.55),
        0 1px 4px rgba(0,0,0,0.4) !important;
}
.route-marker-fallback-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ff9800;
    color: #1a1a1a;
    font-size: 9px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.route-marker-selected .route-marker-dot--user-fallback {
    box-shadow: 0 0 0 3px var(--primary), 0 0 0 5px #ffb74d;
}

/* Geocoded indicator: open packages whose planned coordinates were missing
   and were resolved via the self-hosted Nominatim instance (i.e. derived
   from the address, NOT from Google). The badge uses a violet palette to
   stay clearly distinct from the orange "U" (user-scan-fallback) badge.

   We override the full `border` shorthand (not just border-color) because
   the marker HTML uses `style="border: 2px solid #333"` inline, which
   competes with our class rule. Using `border` + `!important` and bumping
   the width to 3px makes the violet ring unmistakable in a sea of grey-
   bordered pins, and the box-shadow adds a soft glow for extra contrast. */
.route-marker--geocoded {
    position: relative;
}
.route-marker-dot--geocoded {
    border: 3px solid #7c4dff !important;
    box-shadow:
        0 0 0 3px #d1c4e9,
        0 0 10px 2px rgba(124, 77, 255, 0.55),
        0 1px 4px rgba(0,0,0,0.4) !important;
    animation: route-marker-geocoded-pulse 2.4s ease-in-out infinite;
}
@keyframes route-marker-geocoded-pulse {
    0%, 100% { box-shadow: 0 0 0 3px #d1c4e9, 0 0 10px 2px rgba(124, 77, 255, 0.55), 0 1px 4px rgba(0,0,0,0.4); }
    50%      { box-shadow: 0 0 0 4px #b39ddb, 0 0 14px 4px rgba(124, 77, 255, 0.75), 0 1px 4px rgba(0,0,0,0.4); }
}
.route-marker-fallback-badge--geocoded {
    background: #7c4dff;
    color: #fff;
    width: 16px;
    height: 16px;
    line-height: 14px;
    font-size: 11px;
    top: -7px;
    right: -7px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(124, 77, 255, 0.4), 0 1px 4px rgba(0,0,0,0.6);
}
.route-marker-selected .route-marker-dot--geocoded {
    box-shadow:
        0 0 0 3px var(--primary),
        0 0 0 6px #d1c4e9,
        0 0 14px 4px rgba(124, 77, 255, 0.75) !important;
}
.map-legend-dot--geocoded {
    position: relative;
    background: #ffffff;
    border-color: #7c4dff !important;
    box-shadow: 0 0 0 1px #b39ddb, 0 1px 2px rgba(0,0,0,0.2);
    overflow: visible;
    margin-top: 2px;
    margin-right: 4px;
}
.map-legend-fallback-badge--geocoded {
    background: #7c4dff;
    color: #fff;
}

/* Background geocoding progress chip — sits just above each map and fades
   out once the async resolver has processed every pending address. */
.map-geocoding-progress {
    display: none;
    margin: 6px 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(124, 77, 255, 0.12);
    color: #5e35b1;
    border: 1px solid rgba(124, 77, 255, 0.35);
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.map-geocoding-progress::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border: 2px solid rgba(124, 77, 255, 0.4);
    border-top-color: #7c4dff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: map-geocoding-spin 0.8s linear infinite;
}
@keyframes map-geocoding-spin {
    to { transform: rotate(360deg); }
}

/* Error state replaces the violet styling with a salmon/red look so a
   misconfigured geocoder is immediately visible. The spinner is hidden
   because there's nothing in flight to wait for any more. */
.map-geocoding-progress--error {
    background: rgba(229, 57, 53, 0.10);
    color: #c62828;
    border-color: rgba(229, 57, 53, 0.40);
    pointer-events: auto;
    cursor: help;
}
.map-geocoding-progress--error::before {
    display: none;
}

.route-marker-dot-driver {
    background-color: #2196f3 !important;
    border-color: #1565c0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* Inactive driver waypoint: rendered when the position's `last_servertime`
   does not fall on today's local date. Used on Driver Map for stale/last-
   known positions, and on Map / Package Map when viewing a historical
   delivery_day. The grey palette keeps the badge legible while clearly
   signalling "old data, not currently tracked". */
.route-marker-dot-driver--inactive {
    background-color: #9e9e9e !important;
    border-color: #616161 !important;
    color: #fff;
    opacity: 0.85;
}

.route-marker-driver--inactive .route-marker-dot-driver {
    box-shadow: none;
}

.driver-marker-tour-id {
    text-shadow: 0 0 1px #000, 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Map PDF capture */
.map-pdf-capture .route-marker-driver {
    display: none !important;
}
.map-pdf-capture .route-marker-selected .route-marker-dot {
    box-shadow: none !important;
}
.map-pdf-capture .route-marker-dimmed .route-marker-dot {
    opacity: 1 !important;
}
.map-pdf-capture .route-marker-dot-numbered {
    min-width: 28px !important;
    min-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
}
.map-pdf-capture .route-marker-num {
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 2px #000, 1px 0 2px #000, 1px 1px 2px #000, -1px -1px 2px #000 !important;
}

.route-point-tooltip {
    background: #111113 !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.map-point-info-body .readonly-input {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.map-point-info-body {
    padding: 28px 32px 24px;
}
.map-point-info-body .settings-section {
    margin-bottom: 24px;
}
.map-point-info-body .settings-section:last-of-type {
    margin-bottom: 12px;
}
.map-point-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.map-point-info-body .modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.pkginfo-type-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pkginfo-type-pickup {
    background: rgba(255,167,38,0.18);
    color: #ffb74d;
    border: 1px solid rgba(255,167,38,0.4);
}
.pkginfo-type-delivery {
    background: rgba(67,160,71,0.18);
    color: #66bb6a;
    border: 1px solid rgba(67,160,71,0.4);
}

/* ========== Package Info Modal ========== */
.package-info-body {
    padding: 28px;
}

#delivery-proof-image {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 14px;
    border: 1px solid var(--border);
}

/* ========== Package Logs ========== */
#packagelogs-tab {
    min-width: 0;
    overflow-x: hidden;
}
.packagelogs-result-area {
    margin-top: 16px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100%;
    overflow-x: hidden;
}
.packagelogs-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 0;
    flex-wrap: wrap;
}
.packagelogs-date-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 16px;
}
.packagelogs-date-label {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}
.packagelogs-date-input {
    padding: 6px 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.2;
    color-scheme: dark;
    min-width: 0;
}
.packagelogs-date-input:focus {
    outline: none;
    border-color: var(--primary);
}
.packagelogs-status-label {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}
.packagelogs-status-value {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.packagelogs-status-value.packagelogs-status-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}
.packagelogs-status-tag--open {
    background: var(--success);
    color: #fff;
}
.packagelogs-status-tag--closed {
    background: var(--error);
    color: #fff;
}
.packagelogs-status-row .packagelogs-create-report-btn {
    margin-left: auto;
}
.packagelogs-pagination {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.packagelogs-page-info {
    color: var(--text-muted);
    font-size: 13px;
}

.packagelogs-type-wrong-scan {
    color: var(--error) !important;
    font-weight: 600;
}

/* Package Logs Timeline */
.packagelogs-timeline {
    position: relative;
    padding: 4px 0 4px 0;
}
.packagelogs-timeline-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.packagelogs-timeline-entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 0 0 32px;
    min-height: 48px;
}
.packagelogs-timeline-entry::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.packagelogs-timeline-entry--last::before {
    display: none;
}
.packagelogs-timeline-dot {
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    z-index: 1;
}
.packagelogs-dot--scan {
    background: #94a3b8;
}
.packagelogs-dot--delivery {
    background: #10b981;
}
.packagelogs-dot--pickup {
    background: #06b6d4;
}
.packagelogs-dot--return {
    background: #84cc16;
}
.packagelogs-dot--wrong {
    background: #ef4444;
}
.packagelogs-dot--field-scan {
    background: #14b8a6;
}
.packagelogs-dot--manual-field-scan {
    background: #f59e0b;
}
.packagelogs-dot--wrong-field-scan {
    background: #f97316;
}
.packagelogs-dot--wrong-manual-field-scan {
    background: #b91c1c;
}
.packagelogs-dot--gps {
    background: #6366f1;
}
.packagelogs-dot--added {
    background: #8b5cf6;
}
.packagelogs-dot--removed {
    background: #ec4899;
}
.packagelogs-type-failed-delivery {
    color: var(--warning);
    font-weight: 600;
}

/* Status Codes / Service Codes admin */
#admin-statuscodes-block .content-card,
#admin-servicecodes-block .content-card {
    padding: 28px 32px 32px;
}
#admin-statuscodes-block .table-container,
#admin-servicecodes-block .table-container {
    margin: 20px -32px -32px;
}
.sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.sc-header .admin-settings-title { margin: 0; }
.sc-table th:last-child,
.sc-table td:last-child { text-align: right; }
.sc-table td.empty-state,
.sc-table td.empty-state:last-child { text-align: center; }
.sc-table td { padding: 10px 14px; vertical-align: middle; }
.sc-table th { padding: 12px 14px; }
.sc-table th:first-child,
.sc-table td:first-child { padding-left: 32px; }
.sc-table th:last-child,
.sc-table td:last-child { padding-right: 32px; }
.sc-actions {
    white-space: nowrap;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.sc-btn-delete { color: var(--error) !important; }
.sc-color-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.15);
}
.sc-color-dot--none {
    background: transparent !important;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.18) 0,
        rgba(255,255,255,0.18) 2px,
        rgba(255,255,255,0.04) 2px,
        rgba(255,255,255,0.04) 4px
    ) !important;
    border-style: dashed;
    border-color: rgba(255,255,255,0.35);
}
.sc-color-input--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.sc-no-color-label {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.sc-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.sc-badge-yes { background: rgba(67,160,71,0.18); color: #66bb6a; }
.sc-badge-no { background: rgba(239,83,80,0.18); color: #ef5350; }

/* Status Code modal */
.sc-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sc-color-input {
    width: 40px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    cursor: pointer;
}
.sc-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.sc-color-input::-webkit-color-swatch { border-radius: 4px; border: none; }
.sc-color-input::-moz-color-swatch { border-radius: 4px; border: none; }
.sc-color-hex {
    font-size: 13px;
    color: var(--text-muted);
    font-family: monospace;
}
.sc-success-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}
.sc-success-label input { accent-color: var(--primary); cursor: pointer; }
.packagelogs-timeline-content {
    flex: 1;
    min-width: 0;
    padding-bottom: 28px;
}
.packagelogs-timeline-entry--last .packagelogs-timeline-content {
    padding-bottom: 4px;
}
.packagelogs-timeline-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}
.packagelogs-timeline-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.packagelogs-timeline-detail {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}
.packagelogs-timeline-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Package Logs GPS modal */
/* ============================================
   Package Logs GPS Modal — PDF-report-style cards
   ============================================ */
.packagelogs-gps-modal-content {
    max-width: min(95vw, 880px);
}
.packagelogs-gps-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.packagelogs-gps-body .modal-footer {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* Section header (matches the PDF report's blue accent + bold title rhythm) */
.pl-gps-section { display: flex; flex-direction: column; gap: 12px; }
.pl-gps-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.pl-gps-section-title h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.pl-gps-section-bar {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.45);
}

/* Card grid — auto-fills like the PDF report's two-up layout */
.pl-gps-cards {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Individual location card (color-coded by accent) */
.pl-gps-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 14px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
}
.pl-gps-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--pl-gps-accent, var(--primary));
}
.pl-gps-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Card header row: dot + title */
.pl-gps-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Numbered chip — mirrors the numerals printed inside the PDF report's
   teardrop pins (and inside the live Leaflet markers on this same modal). */
.pl-gps-card-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pl-gps-accent, var(--primary));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 0 0 3px color-mix(in srgb, var(--pl-gps-accent, var(--primary)) 18%, transparent);
    flex-shrink: 0;
}
.pl-gps-card-dot:empty {
    /* Fall back to the original plain-dot look when no number is provided. */
    min-width: 12px;
    width: 12px;
    height: 12px;
    padding: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-gps-accent, var(--primary)) 18%, transparent);
}

/* Leaflet wraps every divIcon in a positioned <div>; remove its default
   background/border so our SVG teardrop renders cleanly. */
.leaflet-marker-icon.pl-gps-pin {
    background: transparent;
    border: 0;
}
.pl-gps-pin svg {
    display: block;
    overflow: visible; /* let the drop-shadow filter spill outside the bbox */
}
.pl-gps-card-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-primary);
}

/* Address row */
.pl-gps-card-address {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pl-gps-card-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pl-gps-card-address-value {
    font-size: 13.5px;
    color: var(--text-primary);
    line-height: 1.4;
}
.pl-gps-card-address-value--muted {
    color: var(--text-muted);
    font-style: italic;
}

/* Coordinates row */
.pl-gps-card-coords {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pl-gps-card-coords-value {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--text-secondary);
    word-break: break-all;
}

/* Status pill (e.g. "cached", "loading") */
.pl-gps-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.pl-gps-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.pl-gps-card-pill--loading {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-hover);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.pl-gps-card-pill--warn {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

/* Per-card accent palette */
.pl-gps-card--planned   { --pl-gps-accent: #10b981; } /* emerald — package GPS */
.pl-gps-card--driver    { --pl-gps-accent: #f43f5e; } /* rose    — driver GPS */
.pl-gps-card--order     { --pl-gps-accent: #2196f3; } /* blue    — order address */

/* Map card frame (mirrors the PDF report's rounded card around the map) */
.pl-gps-map-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 6px;
    box-shadow: var(--shadow-sm);
}
.packagelogs-gps-map {
    width: 100%;
    min-height: 420px;
    border-radius: calc(var(--radius-md) - 4px);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Legacy plain-text coords list (kept for back-compat; hidden via [hidden] attr) */
.packagelogs-gps-coords {
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-muted);
}

/* Compact layout below ~600px wide */
@media (max-width: 600px) {
    .packagelogs-gps-body { padding: 16px; gap: 18px; }
    .pl-gps-card { padding: 12px 14px 12px 16px; }
    .packagelogs-gps-map { min-height: 320px; }
}

/* Package Logs Quick Modal (Map / Package Map "Show Logs")
   The body hosts the relocated #packagelogs-result-area, so we keep the
   shell minimal and let the existing .packagelogs-status-row / timeline /
   pagination styles drive the inner layout.

   Horizontal padding intentionally matches `.modal-header` (28px) so the
   status row, timeline dots, and pagination line up with the modal title
   instead of looking flush-left against the modal edge.

   Z-index sits below the standard `.modal` (1000) on purpose: the Quick
   Modal is a *parent* surface that spawns the Package Info, GPS, and
   image modals via the existing timeline buttons. Those child modals
   share the default 1000 stack, so giving the Quick Modal 990 lets each
   child naturally render on top with its own backdrop instead of
   disappearing behind the parent. */
#packageLogsQuickModal {
    z-index: 990;
}
.packagelogs-quick-modal-content {
    padding-bottom: 0;
}
.packagelogs-quick-modal-pkg-id {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-weight: 600;
    color: var(--accent, #4a90e2);
    margin-left: 6px;
}
.packagelogs-quick-modal-host {
    padding: 16px 28px 24px 28px;
}
/* While the result area lives inside the modal we want it flush to the
   modal body padding, not the tab-card chrome it normally carries
   (background, border, box-shadow all come from the modal-content shell
   so the embedded card would just produce a doubled-up frame). */
.packagelogs-quick-modal-host > .packagelogs-result-area {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}
/* The status row's own top padding (12px) plus the host's 16px top padding
   gives the right amount of breathing room under the modal header without
   making the modal feel airy. Trim the row's bottom margin a hair so the
   timeline doesn't drop too far. */
.packagelogs-quick-modal-host > .packagelogs-result-area > .packagelogs-status-row {
    padding-top: 0;
    margin-bottom: 12px;
}
.packagelogs-quick-modal-host > .packagelogs-result-area > .packagelogs-pagination {
    margin-top: 20px;
}
@media (max-width: 720px) {
    .packagelogs-quick-modal-host { padding: 12px 16px 20px 16px; }
}

/* Package Logs Image modal */
.packagelogs-image-modal-content {
    max-width: min(95vw, 800px);
}
.packagelogs-image-body {
    padding: 20px;
    text-align: center;
}
.packagelogs-image-body .modal-footer {
    margin-top: 24px;
}
.packagelogs-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--border);
    transition: var(--transition);
}
.packagelogs-image-wrap--white {
    background: #ffffff;
}
.packagelogs-image-img {
    max-width: 100%;
    max-height: 70vh;
    transition: transform 0.25s ease;
}
.packagelogs-image-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.packagelogs-image-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.packagelogs-sig-whitebg-wrap {
    display: inline-flex;
    align-items: center;
}
.packagelogs-image-loading {
    padding: 24px;
    color: var(--text-muted);
}
.packagelogs-image-error {
    padding: 16px;
    color: var(--error);
    background: rgba(244, 63, 94, 0.1);
    border-radius: 10px;
    margin-top: 12px;
}

/* ========== Proof Images ========== */
.proofimages-tab-content {
    padding: 20px 24px 28px;
}

/* ===== Page header ===== */
.proofimages-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 4px 18px;
}
.proofimages-page-header-text {
    min-width: 0;
}
.proofimages-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.proofimages-page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #4f46e5) 100%);
    color: #fff;
    box-shadow: 0 6px 18px var(--primary-glow);
    flex-shrink: 0;
}
.proofimages-page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 720px;
}

/* ===== Search card ===== */
.proofimages-search-card {
    margin: 0 4px 16px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.proofimages-search-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0 2px;
}
.proofimages-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
    height: 46px;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
}
.proofimages-search-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.proofimages-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-right: 10px;
}
.proofimages-search-input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1;
    outline: none;
    padding: 0;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
}
.proofimages-search-input::-webkit-search-cancel-button { display: none; }
.proofimages-search-input::placeholder { color: var(--text-muted); }
.proofimages-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.proofimages-search-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* ===== Section header ===== */
.proofimages-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 4px 14px;
}
.proofimages-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.proofimages-section-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* ===== Gallery wrap ===== */
.proofimages-gallery-wrap {
    margin: 0 4px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.proofimages-gallery-state {
    padding: 18px 20px;
    color: var(--text-muted);
    text-align: center;
}
.proofimages-gallery-state.is-empty-hero {
    padding: 56px 24px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.proofimages-empty-icon {
    color: var(--text-muted);
    opacity: 0.55;
    margin-bottom: 6px;
}
.proofimages-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}
.proofimages-empty-sub {
    color: var(--text-muted);
    font-size: 0.88rem;
    max-width: 480px;
    line-height: 1.5;
}
.proofimages-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
@media (max-width: 900px) {
    .proofimages-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}
@media (max-width: 500px) {
    .proofimages-gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ===== Card ===== */
.proofimages-card {
    background: var(--bg-elevated);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
}
.proofimages-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(99, 102, 241, 0.4);
}
.proofimages-card-img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    cursor: pointer;
    overflow: hidden;
}
.proofimages-card-img-wrap:not(.proofimages-card-loaded)::after {
    content: 'Loading…';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.proofimages-card-img-wrap.proofimages-card-error::after {
    content: 'Failed to load';
    color: #f87171;
}
.proofimages-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.proofimages-card:hover .proofimages-card-img {
    transform: scale(1.04);
}
.proofimages-card-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    color: #fff;
}
.proofimages-card:hover .proofimages-card-hover {
    opacity: 1;
}
.proofimages-card-hover svg {
    background: rgba(99, 102, 241, 0.95);
    border-radius: 10px;
    padding: 7px;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.proofimages-card-label {
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}
.proofimages-card-label svg {
    color: var(--primary);
    flex-shrink: 0;
}
.proofimages-card-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ===== Pagination ===== */
.proofimages-pagination {
    margin-top: 20px;
}
.proofimages-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.proofimages-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
    min-width: auto;
}
.proofimages-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.proofimages-pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* Mobile */
@media (max-width: 768px) {
    .proofimages-tab-content {
        padding: 14px 14px 18px;
    }
    .proofimages-page-header {
        margin-bottom: 14px;
    }
    .proofimages-page-title {
        font-size: 1.3rem;
    }
    .proofimages-page-title-icon {
        width: 36px;
        height: 36px;
    }
    .proofimages-search-card {
        margin: 0 0 14px;
    }
    .proofimages-search-wrap {
        height: 44px;
    }
    .proofimages-gallery-wrap {
        margin: 0;
    }
    .proofimages-gallery-state.is-empty-hero {
        padding: 36px 20px;
    }
    .proofimages-pagination-bar {
        padding: 12px;
        gap: 10px;
    }
}
/* Proof Images overlay modal */
.proofimages-image-modal-content {
    max-width: min(95vw, 800px);
    overflow: hidden;
}
.proofimages-image-body {
    padding: 20px;
    text-align: center;
    overflow: hidden;
}
.proofimages-image-body .modal-footer {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.proofimages-image-wrap {
    min-height: 120px;
    width: min(90vw, 900px);
    height: 70vh;
    max-width: min(90vw, 900px);
    max-height: 70vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
}
.proofimages-image-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--border);
    transition: transform 0.2s ease-out;
    transform-origin: center center;
}
.proofimages-image-loading {
    padding: 24px;
    color: var(--text-muted);
}
.proofimages-image-error {
    padding: 16px;
    color: var(--error);
    background: rgba(244, 63, 94, 0.1);
    border-radius: 10px;
    margin-top: 12px;
}

/* ========== Notifications ========== */
.notification-container {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 48px));
}

.notification-container .notification {
    pointer-events: auto;
}

.notification {
    padding: 16px 22px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--shadow-md);
    animation: notifyIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 100%;
}

@keyframes notifyIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.success {
    background: var(--primary);
    border: 1px solid var(--primary-hover);
}

.notification.error {
    background: var(--error);
    border: 1px solid #e11d48;
}

/* Form hint */
.form-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ========== Mobile touch targets ========== */
.btn,
.nav-tab,
.btn-api-view,
.btn-copy,
.close,
.chip-remove {
    min-height: 44px;
    min-width: 44px;
}

.toggle-switch {
    min-height: 28px;
    min-width: 52px;
}

.nav-tab {
    padding: 14px 18px;
}

.btn:active,
.nav-tab:active,
.btn-api-view:active,
.btn-copy:active {
    transform: scale(0.98);
    opacity: 0.95;
}

/* ========== Solve Address Correction Modal ========== */
.solve-address-modal-content .modal-body {
    padding: 20px 24px 24px;
}
.solve-address-modal-content .form-hint {
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.solve-address-modal-content .form-group {
    margin-bottom: 16px;
}
.solve-address-modal-content .form-group:last-of-type {
    margin-bottom: 0;
}
.solve-confirm-message {
    margin: 0 0 12px 0;
    font-weight: 500;
    color: var(--text-primary);
}
#solveAddressModal .btn-confirm-no {
    background: var(--error);
    color: #fff;
    border: 1px solid #e11d48;
}
#solveAddressModal .btn-confirm-no:hover {
    background: #e11d48;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
}
#solveAddressModal .btn-confirm-yes {
    background: var(--success);
    color: #fff;
    border: 1px solid #059669;
}
#solveAddressModal .btn-confirm-yes:hover {
    background: #059669;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.solve-address-modal-content .form-actions {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    gap: 14px;
}
.solve-google-maps-url-input {
    word-break: break-all;
    font-size: 13px;
}

/* ========== Address Corrections ========== */
#addresscorrections-tab.addresscorrections-tab-content {
    padding: 20px 24px 28px;
}
#addresscorrections-tab .content-card {
    padding: 20px 24px 24px;
    margin-bottom: 20px;
}
#addresscorrections-tab .table-container {
    padding: 12px 0 0;
    margin: 0 -4px;
}

/* ===== Page header ===== */
.addresscorrections-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 4px 18px;
}
.addresscorrections-page-header-text {
    min-width: 0;
}
.addresscorrections-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.addresscorrections-page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #4f46e5) 100%);
    color: #fff;
    box-shadow: 0 6px 18px var(--primary-glow);
    flex-shrink: 0;
}
.addresscorrections-page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 720px;
}
.addresscorrections-page-stats {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}
.addresscorrections-stat-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    min-width: 96px;
    position: relative;
    overflow: hidden;
}
.addresscorrections-stat-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color, var(--primary)), transparent);
    opacity: 0.6;
}
.addresscorrections-stat-pill.is-unresolved {
    --accent-color: #f59e0b;
}
.addresscorrections-stat-pill.is-resolved {
    --accent-color: #10b981;
}
.addresscorrections-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.addresscorrections-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

/* ===== Toolbar (sub-tabs only) ===== */
.addresscorrections-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 4px 16px;
}
.addresscorrections-toolbar .address-corrections-subtabs {
    margin-bottom: 0;
}

/* ===== Search card ===== */
.addresscorrections-search-card {
    margin-bottom: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.addresscorrections-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
    height: 46px;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-sm);
}
.addresscorrections-search-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.addresscorrections-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-right: 10px;
}
.addresscorrections-search-input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1;
    outline: none;
    padding: 0;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
}
.addresscorrections-search-input::-webkit-search-cancel-button {
    display: none;
}
.addresscorrections-search-input::placeholder {
    color: var(--text-muted);
}
.addresscorrections-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.addresscorrections-search-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* ===== Section header ===== */
.addresscorrections-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 4px 14px;
}
.addresscorrections-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.addresscorrections-section-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* ===== Card grid ===== */
.addresscorrections-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}
.addresscorrections-empty {
    grid-column: 1 / -1;
    padding: 48px 20px;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: 14px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.addresscorrections-empty-icon {
    color: var(--text-muted);
    opacity: 0.6;
    margin-bottom: 4px;
}
.addresscorrections-empty-title {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
}
.addresscorrections-empty-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    max-width: 460px;
    line-height: 1.45;
}

/* ===== Address card ===== */
.addresscorrections-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
    overflow: hidden;
}
.addresscorrections-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-accent, var(--primary)), transparent);
    opacity: 0.55;
}
.addresscorrections-card.is-pending { --card-accent: #f59e0b; }
.addresscorrections-card.is-resolved { --card-accent: #10b981; }
.addresscorrections-card.is-cached { --card-accent: #6366f1; }
.addresscorrections-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: rgba(99, 102, 241, 0.35);
}
.addresscorrections-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.addresscorrections-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
}
.addresscorrections-badge.is-pending {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}
.addresscorrections-badge.is-resolved {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}
.addresscorrections-badge.is-cached {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
}
.addresscorrections-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.addresscorrections-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.addresscorrections-card-meta-item svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.addresscorrections-card-meta-item strong {
    color: var(--text-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.addresscorrections-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.addresscorrections-card-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border-left: 3px solid rgba(255, 255, 255, 0.08);
}
.addresscorrections-card-field.is-input {
    border-left-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.05);
    cursor: pointer;
}
.addresscorrections-card-field.is-input:hover {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.25);
}
.addresscorrections-card-field.is-suggested {
    border-left-color: rgba(99, 102, 241, 0.55);
    background: rgba(99, 102, 241, 0.05);
}
.addresscorrections-card-field.is-corrected {
    border-left-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.05);
}
/* Any address field that has an onclick handler attached (e.g. the
 * Cached card's Formatted field) gets the same click affordance as the
 * Input field — pointer cursor and a soft hover lift — so the
 * click-to-copy behaviour is consistent and discoverable. */
.addresscorrections-card-field[onclick] {
    cursor: pointer;
}
.addresscorrections-card-field.is-corrected[onclick]:hover {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.25);
}
.addresscorrections-card-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.addresscorrections-card-field-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}
.addresscorrections-card-field.is-input:hover .addresscorrections-card-field-hint,
.addresscorrections-card-field[onclick]:hover .addresscorrections-card-field-hint {
    opacity: 1;
}
.addresscorrections-card-field-value {
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.4;
    word-break: break-word;
}
.addresscorrections-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.addresscorrections-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
    min-width: 0;
    justify-content: center;
}
.addresscorrections-action-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}
.addresscorrections-action-btn.is-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #4f46e5) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px var(--primary-glow);
    flex: 2;
}
.addresscorrections-action-btn.is-primary:hover {
    color: #fff;
    box-shadow: 0 6px 16px var(--primary-glow);
    transform: translateY(-1px);
}
.addresscorrections-action-btn.is-edit {
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.06);
}
.addresscorrections-action-btn.is-edit:hover {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.5);
}
.addresscorrections-action-btn.is-delete {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
}
.addresscorrections-action-btn.is-delete:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ===== Pagination ===== */
.addresscorrections-pagination {
    margin-top: 20px;
}
.addresscorrections-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.addresscorrections-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9px;
}
.addresscorrections-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.addresscorrections-pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* Hide legacy table styles inside the redesigned tab */
#addresscorrections-tab .table-container,
#addresscorrections-tab .address-corrections-table {
    display: none !important;
}

.address-corrections-subtabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: 20px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.address-corrections-subtabs .nav-tab {
    position: relative;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.address-corrections-subtabs .nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.address-corrections-subtabs .nav-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.address-corrections-subtabs .nav-tab.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35);
}

.address-corrections-subtabs .nav-tab.active:hover {
    background: var(--primary-hover);
    color: #fff;
}

.admin-subtabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: 20px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
}
.admin-subtabs .nav-tab {
    position: relative;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.admin-subtabs .nav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}
.admin-subtabs .nav-tab.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35);
}
.admin-panel-block { display: block; }

/* Admin Settings */
.admin-settings-card {
    padding: 28px 32px 32px;
}
.admin-settings-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
    padding: 0;
}
.admin-settings-title.admin-settings-section-title {
    margin-top: 28px;
    margin-bottom: 6px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.admin-settings-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 0 16px;
    padding: 0;
}
.sidebar-link.nav-page-disabled {
    display: none !important;
}

.sidebar-nav .sidebar-link[data-permission-tab],
.mobile-drawer-nav .sidebar-link[data-permission-tab] {
    display: none;
}
body.nav-permissions-applied .sidebar-nav .sidebar-link[data-permission-tab].nav-page-disabled,
body.nav-permissions-applied .mobile-drawer-nav .sidebar-link[data-permission-tab].nav-page-disabled {
    display: none !important;
}

.nav-pages-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 16px;
}
.nav-page-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.nav-page-checkbox-label input {
    accent-color: var(--primary);
    cursor: pointer;
}

.admin-settings-desc code {
    font-size: 0.85em;
    padding: 2px 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}
.admin-settings-field {
    margin-bottom: 20px;
}
.admin-settings-field:last-of-type {
    margin-bottom: 0;
}
.admin-settings-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.admin-settings-field .form-control {
    margin: 0;
    padding: 10px 14px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}
.admin-settings-file-input {
    display: block;
    margin-bottom: 12px;
}
.admin-settings-actions {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.admin-logo-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.admin-logo-preview {
    min-width: 80px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px;
}
.admin-logo-preview .admin-logo-placeholder {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Address Corrections panel animations */
#address-rejections-block.address-corrections-panel-visible,
#address-cache-block.address-corrections-panel-visible {
    animation: addressCorrectionsPanelIn 0.25s ease forwards;
}

@keyframes addressCorrectionsPanelIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.address-corrections-badge {
    display: none;
    margin-left: 6px;
    padding: 2px 6px;
    min-width: 18px;
    border-radius: 10px;
    background: var(--error);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.address-corrections-badge.visible {
    display: inline-block;
}
.address-corrections-table .address-cell {
    max-width: 220px;
    word-break: break-word;
}
.address-corrections-table .addr-copy-cell {
    cursor: pointer;
}
.address-corrections-table .addr-copy-cell:hover {
    background: var(--bg-hover);
}

.addr-expand-btn {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}
.addr-expand-btn:hover {
    background: var(--bg-hover);
}

/* Address Corrections – mobile list */
@media (max-width: 768px) {
    .addr-expand-btn {
        display: inline-flex;
    }

    .address-corrections-table tbody tr:not(.addr-row-expanded) td:not(.addr-query-cell):not(.empty-state) {
        display: none !important;
    }

    .address-corrections-table tbody tr:has(td.empty-state) td.empty-state {
        display: block !important;
    }

    .address-corrections-table tbody tr:not(.addr-row-expanded) td.addr-query-cell {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        border-bottom: none;
    }

    .address-corrections-table tbody tr:not(.addr-row-expanded) td.addr-query-cell::before {
        content: none !important;
        display: none !important;
    }

    .address-corrections-table tbody tr:not(.addr-row-expanded) .addr-query-text {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .address-corrections-table tbody tr.addr-row-expanded td.addr-query-cell {
        display: block !important;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }

    .address-corrections-table tbody tr.addr-row-expanded .addr-query-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    #address-rejections-block .address-corrections-table tbody tr.addr-row-expanded {
        display: flex;
        flex-direction: column;
    }
    #address-rejections-block .address-corrections-table tbody tr.addr-row-expanded td:nth-child(1) { order: 2; }
    #address-rejections-block .address-corrections-table tbody tr.addr-row-expanded td:nth-child(2) { order: 1; }
    #address-rejections-block .address-corrections-table tbody tr.addr-row-expanded td:nth-child(3) { order: 3; }
    #address-rejections-block .address-corrections-table tbody tr.addr-row-expanded td:nth-child(4) { order: 4; }
    #address-rejections-block .address-corrections-table tbody tr.addr-row-expanded td:nth-child(5) { order: 5; }
    #address-rejections-block .address-corrections-table tbody tr.addr-row-expanded td:nth-child(6) { order: 6; }
    #address-rejections-block .address-corrections-table tbody tr.addr-row-expanded td:nth-child(7) { order: 7; }
}

/* Address Corrections — mobile rules for redesigned card layout */
@media (max-width: 768px) {
    #addresscorrections-tab.addresscorrections-tab-content {
        padding: 14px 14px 18px;
    }
    .addresscorrections-page-header {
        margin-bottom: 12px;
    }
    .addresscorrections-page-title {
        font-size: 1.3rem;
    }
    .addresscorrections-page-title-icon {
        width: 36px;
        height: 36px;
    }
    .addresscorrections-page-stats {
        width: 100%;
        gap: 8px;
    }
    .addresscorrections-stat-pill {
        flex: 1;
        min-width: 0;
        padding: 10px 12px;
    }
    .addresscorrections-stat-value {
        font-size: 1.2rem;
    }
    .addresscorrections-toolbar {
        margin: 0 0 12px;
    }
    .addresscorrections-toolbar .address-corrections-subtabs {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .addresscorrections-toolbar .address-corrections-subtabs::-webkit-scrollbar { display: none; }
    .addresscorrections-search-card {
        margin-bottom: 14px;
    }
    .addresscorrections-search-wrap {
        height: 44px;
    }
    .addresscorrections-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .addresscorrections-card {
        padding: 14px;
    }
    .addresscorrections-card-actions {
        flex-direction: column;
    }
    .addresscorrections-action-btn {
        width: 100%;
        flex: none;
    }
    .addresscorrections-pagination-bar {
        padding: 12px;
        gap: 10px;
    }
    .addresscorrections-pagination-info {
        font-size: 0.82rem;
    }
}

/* Address Corrections – mobile scrollable sub-tabs */
@media (max-width: 768px) {
    #addresscorrections-tab {
        min-width: 0;
        overflow-x: hidden;
    }

    .address-corrections-subtabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        margin-left: -2px;
        margin-right: -2px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .address-corrections-subtabs .nav-tab {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 0.875rem;
    }

    #addresscorrections-tab .address-cache-search,
    #address-rejections-search,
    #address-cache-search {
        padding: 0 2px;
        min-width: 0;
    }

    #addresscorrections-tab .address-corrections-pagination {
        min-width: 0;
        padding: 0 4px;
    }

    #addresscorrections-tab .content-card {
        min-width: 0;
        overflow: hidden;
    }

    #addresscorrections-tab .address-cache-search-row {
        min-width: 0;
    }

    #addresscorrections-tab .address-cache-search-input {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

#address-corrections-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
#address-corrections-pagination .pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ========== Audit Logs Tab ========== */
#auditlogs-tab {
    padding: 20px 24px;
    box-sizing: border-box;
}
#auditlogs-tab .content-card.audit-logs-card {
    padding: 20px 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
#auditlogs-tab .content-card {
    margin-bottom: 16px;
}
#auditlogs-tab .table-container {
    padding: 16px 20px;
    overflow-x: auto;
}
.audit-logs-filters {
    margin-bottom: 20px;
    padding: 0;
}
.audit-logs-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}
.audit-logs-filter-row label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin: 0;
}
.audit-logs-select {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    min-width: 160px;
    cursor: pointer;
    transition: var(--transition);
}
.audit-logs-select:hover {
    border-color: var(--primary);
}
.audit-logs-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.audit-logs-select option {
    background-color: #1a1d24;
    color: var(--text-primary);
}
.audit-logs-select option:checked,
.audit-logs-select option:hover {
    background-color: var(--primary);
    color: #fff;
}
.audit-logs-search-input {
    min-width: 180px;
    flex: 1;
    max-width: 280px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 14px;
    transition: var(--transition);
}
.audit-logs-search-input:hover {
    border-color: var(--primary);
}
.audit-logs-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.audit-details-cell {
    max-width: 420px;
    max-height: 180px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85em;
}
@media (max-width: 768px) {
    .audit-details-cell {
        max-width: 100%;
    }
    #settings-tab {
        padding: 16px;
    }
    .settings-table tbody td {
        word-break: break-word;
        min-width: 0;
    }
    .settings-table tbody td:nth-child(2) {
        max-width: 100%;
        overflow-wrap: break-word;
    }
}
.audit-logs-pagination {
    padding-top: 16px;
    margin-top: 0;
}
.audit-logs-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.audit-logs-pagination .pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.address-cache-search {
    margin-bottom: 16px;
}
.address-cache-search label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.address-cache-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.address-cache-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
}

/* ========== Tablet & Mobile (768px) ========== */
@media (max-width: 768px) {
    body.control-panel {
        padding: 0;
    }

    .top-header {
        padding: 0 12px 0 8px;
    }

    .breadcrumb {
        display: none;
    }

    .header-hamburger {
        display: flex;
        margin-left: 14px;
    }

    .header-right {
        display: none;
    }

    .app-body {
        flex-direction: column;
    }

    .sidebar {
        display: none;
    }

    .main-content {
        padding: 20px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        width: 100%;
    }

    .app-footer {
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        font-size: 12px;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title {
        font-size: 1.3rem;
    }

    .page-actions {
        width: 100%;
        min-width: 0;
    }

    .page-actions .btn,
    .page-actions .btn-primary {
        width: 100%;
        max-width: 100%;
    }

    .dashboard-table .actions {
        min-width: 0;
    }

    .dashboard-table .actions .btn {
        max-width: 100%;
    }

    .content-card {
        border-radius: 14px;
    }

    .content-card .table-container {
        padding: 12px 16px;
    }

    .table-container {
        overflow-x: visible;
    }

    .dashboard-table thead,
    .settings-table thead,
    .admin-users-table thead,
    .address-corrections-table thead,
    .audit-logs-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .dashboard-table tbody tr,
    .settings-table tbody tr,
    .admin-users-table tbody tr,
    .address-corrections-table tbody tr,
    .audit-logs-table tbody tr {
        display: block;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 14px;
        padding: 18px;
        box-shadow: var(--shadow-sm);
    }

    .dashboard-table tbody td,
    .settings-table tbody td,
    .admin-users-table tbody td,
    .audit-logs-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        font-size: 14px;
    }

    .address-corrections-table tbody td {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        font-size: 14px;
    }

    .dashboard-table tbody td:last-child,
    .settings-table tbody td:last-child,
    .admin-users-table tbody td:last-child,
    .address-corrections-table tbody td:last-child,
    .audit-logs-table tbody td:last-child {
        border-bottom: none;
        padding-bottom: 0;
        padding-top: 16px;
        margin-top: 4px;
        border-top: 1px solid var(--border);
    }

    .dashboard-table tbody td::before,
    .settings-table tbody td::before,
    .admin-users-table tbody td::before,
    .audit-logs-table tbody td::before {
        font-weight: 700;
        color: var(--text-secondary);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }

    .address-corrections-table tbody td::before {
        display: block;
        margin-bottom: 6px;
        font-weight: 700;
        color: var(--text-secondary);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Column labels for mobile cards */
    #address-rejections-block .address-corrections-table tbody td:nth-child(1)::before { content: "Input Address"; }
    #address-rejections-block .address-corrections-table tbody td:nth-child(2)::before { content: "Query Address"; }
    #address-rejections-block .address-corrections-table tbody td:nth-child(3)::before { content: "Suggested Address"; }
    #address-rejections-block .address-corrections-table tbody td:nth-child(4)::before { content: "Corrected Address"; }
    #address-rejections-block .address-corrections-table tbody td:nth-child(5)::before { content: "Confidence"; }
    #address-rejections-block .address-corrections-table tbody td:nth-child(6)::before { content: "Created"; }
    #address-rejections-block .address-corrections-table tbody td:nth-child(7)::before { content: "Actions"; }
    #address-cache-block .address-corrections-table tbody td:nth-child(1)::before { content: "Query Address"; }
    #address-cache-block .address-corrections-table tbody td:nth-child(2)::before { content: "Formatted Address"; }
    #address-cache-block .address-corrections-table tbody td:nth-child(3)::before { content: "Lat"; }
    #address-cache-block .address-corrections-table tbody td:nth-child(4)::before { content: "Lng"; }
    #address-cache-block .address-corrections-table tbody td:nth-child(5)::before { content: "Actions"; }

    .dashboard-table tbody td:nth-child(1)::before { content: "Access"; }
    .dashboard-table tbody td:nth-child(2)::before { content: "Tour ID"; }
    .dashboard-table tbody td:nth-child(3)::before { content: "API Key"; }
    .dashboard-table tbody td:nth-child(4)::before { content: "Comment"; }
    .dashboard-table tbody td:nth-child(5)::before { content: "Profile"; }
    .dashboard-table tbody td:nth-child(6)::before { content: "Ignore"; }
    .dashboard-table tbody td:nth-child(7)::before { content: "Locked"; }
    .dashboard-table tbody td:nth-child(8)::before { content: "Active"; }
    .dashboard-table tbody td:nth-child(9)::before { content: "Actions"; }
    .audit-logs-table tbody td:nth-child(1)::before { content: "Date / Time"; }
    .audit-logs-table tbody td:nth-child(2)::before { content: "User"; }
    .audit-logs-table tbody td:nth-child(3)::before { content: "Action"; }
    .audit-logs-table tbody td:nth-child(4)::before { content: "Details"; }
    .audit-logs-table tbody td:nth-child(5)::before { content: "IP"; }
    .settings-table tbody td:nth-child(1)::before { content: "Key"; }
    .settings-table tbody td:nth-child(2)::before { content: "Value"; }
    .settings-table tbody td:nth-child(3)::before { content: "Actions"; }
    .admin-users-table tbody td:nth-child(1)::before { content: "ID"; }
    .admin-users-table tbody td:nth-child(2)::before { content: "Username"; }
    .admin-users-table tbody td:nth-child(3)::before { content: "Role"; }
    .admin-users-table tbody td:nth-child(4)::before { content: "Status"; }
    .admin-users-table tbody td:nth-child(5)::before { content: "Created"; }
    .admin-users-table tbody td:nth-child(6)::before { content: "Actions"; }
    .dashboard-table tbody td.empty-state::before,
    .settings-table tbody td.empty-state::before,
    .admin-users-table tbody td.empty-state::before,
    .address-corrections-table tbody td.empty-state::before {
        content: none;
        display: none;
    }

    .dashboard-table tbody tr td.empty-state,
    .settings-table tbody tr td.empty-state,
    .admin-users-table tbody tr td.empty-state,
    .address-corrections-table tbody tr td.empty-state {
        display: block;
        text-align: center;
        padding: 32px 16px !important;
        border-bottom: none;
    }

    .dashboard-table .empty-state,
    .settings-table .empty-state,
    .admin-users-table .empty-state,
    .address-corrections-table .empty-state {
        padding: 32px 16px !important;
    }

    .dashboard-table tbody td,
    .address-corrections-table tbody td {
        min-width: 0;
    }

    .address-corrections-table tbody td .address-cell,
    .address-corrections-table tbody td {
        max-width: none;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .dashboard-table tbody td .api-key-display {
        flex-wrap: wrap;
        min-width: 0;
        justify-content: flex-start;
    }

    .dashboard-table .api-key-display .api-key-text {
        min-width: 0;
    }

    .dashboard-table .api-key-display,
    .settings-table .actions,
    .admin-users-table tbody td:last-child .actions,
    .address-corrections-table tbody td:last-child .actions {
        justify-content: flex-start;
    }

    .admin-users-table tbody td:last-child {
        min-height: 48px;
    }

    .admin-users-table .actions .actions-empty {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        vertical-align: middle;
    }

    .dashboard-table .actions,
    .admin-users-table .actions,
    .address-corrections-table .actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ===== Releases tab — mobile ===== */
    .releases-tab-content {
        padding: 14px;
    }
    .releases-page-header {
        margin-bottom: 16px;
        gap: 12px;
    }
    .releases-page-title {
        font-size: 1.3rem;
    }
    .releases-page-title-icon {
        width: 36px;
        height: 36px;
    }
    .releases-page-stats {
        width: 100%;
    }
    .releases-stat-pill {
        flex: 1;
    }

    .releases-hero {
        padding: 18px;
        margin-bottom: 16px;
        border-radius: 14px;
    }
    .releases-hero-inner {
        gap: 16px;
    }
    .releases-hero-version {
        font-size: 1.7rem;
    }
    .releases-hero-meta-item span {
        max-width: 100%;
    }
    .releases-hero-actions {
        width: 100%;
    }
    .releases-hero-actions .releases-hero-btn {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
        min-height: 44px;
    }
    .releases-hero-btn-primary {
        flex-basis: 100% !important;
    }

    .releases-upload-card {
        padding: 16px;
        margin-bottom: 16px;
    }
    .releases-upload-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }
    .releases-upload-form {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: stretch;
    }
    .releases-upload-form .releases-file-group > .form-label.is-spacer {
        display: none;
    }
    .releases-upload-form input[type="text"] {
        font-size: 16px;
    }
    .releases-upload-btn {
        width: 100%;
    }

    .releases-section-header {
        margin: 4px 0 10px;
    }

    .releases-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .release-card {
        padding: 16px;
    }
    .release-card-actions {
        gap: 8px;
    }
    .release-action-btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 42px;
        font-size: 12px;
        padding: 8px 10px;
    }
    .release-action-primary {
        margin-left: 0;
        flex: 1 1 100%;
    }
    .release-action-delete {
        flex: 0 0 auto;
        min-width: 42px;
    }

    /* Share modal — stack URL row on small screens */
    .releases-share-url-row {
        flex-direction: column;
        align-items: stretch;
    }
    .releases-share-copy-btn {
        justify-content: center;
        min-height: 44px;
    }
    .releases-share-actions {
        flex-direction: column-reverse;
    }
    .releases-share-actions .btn {
        width: 100%;
    }

    .dashboard-table .btn-edit,
    .dashboard-table .btn-delete,
    .settings-table .btn-edit,
    .settings-table .btn-delete,
    .admin-users-table .btn-edit,
    .admin-users-table .btn-delete,
    .address-corrections-table .btn-edit,
    .address-corrections-table .btn-delete,
    .address-corrections-table .btn-primary {
        flex: 1 1 auto;
        min-width: 80px;
        min-height: 48px;
    }

    .admin-users-table .role-select {
        min-width: 0;
        flex: 1;
    }

    /* Modals: full screen on mobile */
    body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .modal {
        padding: 0;
        align-items: stretch;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal[style*="display: block"],
    .modal[style*="display:block"] {
        display: flex !important;
        flex-direction: column;
    }

    .modal-content {
        margin: 0;
        max-height: none;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
        border: none;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    #editModal .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .modal-header {
        flex-shrink: 0;
        padding: 16px 20px;
        padding-top: max(16px, env(safe-area-inset-top));
        min-height: 56px;
    }

    .modal-header h2 {
        font-size: 1.15rem;
        padding-right: 8px;
    }

    form,
    .api-key-modal-body,
    .gps-modal-body,
    .package-info-body {
        padding: 20px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        flex: 1;
    }

    .form-actions {
        flex-shrink: 0;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    .form-group input[type="text"],
    .form-group input[type="password"],
    .form-group input[type="number"],
    .form-group input[type="time"],
    .form-group input[type="url"] {
        min-height: 50px;
        font-size: 16px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .btn-edit,
    .btn-delete {
        min-height: 48px;
        padding: 12px 16px;
    }

    .btn {
        min-height: 48px;
    }

    .api-key-input-wrapper {
        flex-direction: column;
    }

    .btn-copy {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .gps-search-container {
        padding: 20px 16px;
    }

    .gps-input-wrapper {
        flex-direction: column;
    }

    .gps-input-wrapper .btn-primary {
        width: 100%;
        min-height: 48px;
    }

    .gps-search-input {
        min-height: 50px;
        font-size: 16px;
    }

    #packagelogs-tab .packagelogs-result-area {
        padding-left: 0;
        padding-right: 0;
    }

    #packagelogs-tab .content-card .table-container {
        padding-left: 0;
        padding-right: 0;
    }

    .packagelogs-status-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .packagelogs-pagination {
        flex-wrap: wrap;
    }

    #gps-map {
        height: 280px !important;
        min-height: 280px;
    }

    /* Map tab: full-width */
    #map-tab {
        min-width: 0;
        overflow-x: hidden;
        width: 100%;
    }

    #map-tab .map-tab-header {
        padding: 12px 16px;
    }

    #map-tab .map-search-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    #map-tab .map-search-group {
        margin-bottom: 0;
    }

    #map-tab .map-search-input {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    #map-tab .map-search-address .map-search-input {
        min-width: 0;
    }

    #map-tab .map-search-actions .btn {
        width: 100%;
        min-height: 48px;
    }

    .route-map-wrapper {
        flex-direction: column;
        min-height: 0;
        margin-top: 12px;
    }

    .route-map-container {
        width: 100%;
        min-width: 0;
        flex: none;
        order: 1;
    }

    .route-map {
        width: 100% !important;
        height: 50vh;
        min-height: 320px;
        max-height: 70vh;
        border-radius: 14px;
    }

    .map-sidebar {
        width: 100%;
        margin-left: 0;
        margin-top: 12px;
        flex-shrink: 0;
        order: 2;
        min-height: 120px;
    }

    /* Notifications full-width on mobile */
    .notification-container {
        left: 16px;
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
    }
    .notification {
        max-width: none;
        animation: notifyInMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes notifyInMobile {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Dashboard toggles smaller on mobile */
    .dashboard-table .toggle-switch {
        width: 40px !important;
        min-width: 40px !important;
        height: 22px !important;
        min-height: 22px !important;
    }

    .dashboard-table .slider {
        border-radius: 22px !important;
    }

    .dashboard-table .slider:before {
        height: 16px !important;
        width: 16px !important;
        left: 2px !important;
        bottom: 2px !important;
    }

    .dashboard-table input:checked + .slider:before {
        transform: translateX(18px) !important;
    }
}

/* ========== Small Phones (480px) ========== */
@media (max-width: 480px) {
    body {
        padding: 8px;
    }

    .main-content {
        padding: 16px;
    }

    .nav-tab {
        padding: 10px 12px;
        font-size: 12px;
    }

    .dashboard-table tbody td,
    .settings-table tbody td {
        padding: 10px 0;
        font-size: 13px;
    }

    .dashboard-table tbody td::before,
    .settings-table tbody td::before {
        font-size: 11px;
    }

    .dashboard-table .btn-edit,
    .dashboard-table .btn-delete,
    .settings-table .btn-edit,
    .settings-table .btn-delete {
        min-width: 72px;
    }

    .chip-input {
        min-width: 80px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* ========== Very Small (360px) ========== */
@media (max-width: 360px) {
    .nav-tab {
        font-size: 11px;
        padding: 10px 8px;
    }

    header h1 {
        font-size: 1.1rem;
    }
}

/* ========== Package Search – Full-screen Kanban ========== */
html[data-active-tab="packagesearch"] .top-header,
html[data-active-tab="packagesearch"] .app-footer,
html[data-active-tab="packagesearch"] .sidebar,
html[data-active-tab="packagesearch"] .page-header {
    display: none !important;
}
html[data-active-tab="packagesearch"] .main-content {
    padding: 0 !important;
}
html[data-active-tab="packagesearch"] .app-body {
    height: 100vh;
}

.packagesearch-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-body);
}

.ps-topbar {
    display: flex;
    align-items: center;
    /* Wrap the controls onto a second line when the width gets tight (high zoom)
       instead of overflowing and being clipped by the fullscreen container. */
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 24px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 56px;
}
.ps-back-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
}
.ps-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.ps-logout-btn {
    background: none;
    border: 1px solid var(--error);
    border-radius: 8px;
    color: var(--error);
    cursor: pointer;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}
.ps-logout-btn:hover {
    background: var(--error);
    color: #fff;
}
.ps-topbar-center {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-left: 8px;
}
.ps-date-big {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.ps-clock {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.ps-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* The Package Search topbar theme/language toggles reuse the header's
 * .theme-toggle / .lang-toggle classes for identical styling and the working
 * sun/moon icon-swap; no bespoke styles needed here. */
.ps-autorefresh-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ps-autorefresh-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.ps-autorefresh-select {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
}
.ps-countdown {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: center;
}
.ps-refresh-btn,
.ps-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 6px 14px;
}
/* "Filter" button shows a small badge with the count of currently-hidden
 * drivers so dispatchers can see at a glance that the visible driver
 * strip is being filtered. */
.ps-filter-btn {
    position: relative;
}
.ps-filter-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--warning);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.ps-filter-btn-badge[hidden] {
    display: none;
}

/* Driver-filter modal */
.ps-filter-modal-content {
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.ps-filter-body {
    padding: 22px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
}
.ps-filter-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.ps-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ps-filter-search {
    flex: 1;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 14px;
    transition: var(--transition);
}
.ps-filter-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.ps-filter-toolbar-actions {
    display: flex;
    gap: 6px;
}
.ps-filter-link {
    padding: 6px 10px;
    font-size: 13px;
}
.ps-filter-driver-list {
    flex: 1;
    min-height: 200px;
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(0,0,0,0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ps-filter-driver-list .empty-state {
    margin: auto;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 12px;
}
.ps-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.ps-filter-row:hover {
    background: rgba(255,255,255,0.04);
}
.ps-filter-row.is-hidden {
    opacity: 0.55;
}
.ps-filter-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}
.ps-filter-row-tour {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ps-filter-row-name {
    flex: 1;
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-filter-row-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--error);
    padding: 2px 7px;
    border-radius: 10px;
}
.ps-filter-footer {
    margin: 0;
    padding: 16px 24px;
    align-items: center;
}
.ps-filter-summary {
    margin-right: auto;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Light theme: the modal list bg / row hover need legible counterparts. */
body.app-theme-light .ps-filter-driver-list {
    background: #f8fafc;
    border-color: #e2e8f0;
}
body.app-theme-light .ps-filter-row:hover {
    background: rgba(15, 23, 42, 0.05);
}
body.app-theme-light .ps-filter-search {
    background: #fff;
    border-color: #cbd5e1;
}

/* Drivers strip
 *
 * Wraps onto multiple rows so all drivers are always visible without
 * horizontal scroll. With ~40 drivers we end up with 3-5 rows depending on
 * viewport width, which is much easier to scan than a wide horizontal
 * scroller. A `max-height` + vertical-scroll fallback keeps the strip from
 * eating too much room on small viewports while still showing every entry.
 */
.ps-drivers-strip {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    padding: 14px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 35vh;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: rgba(17, 17, 19, 0.7);
    scrollbar-width: thin;
}
.ps-drivers-strip::-webkit-scrollbar { width: 6px; height: 6px; }
.ps-drivers-strip::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

.ps-drivers-loading {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
}

.ps-driver-card {
    flex: 0 1 auto;
    min-width: 120px;
    max-width: 200px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ps-driver-card.ps-driver-active {
    border-color: var(--error);
    background: rgba(244, 63, 94, 0.06);
}
.ps-driver-tour-id {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 28px;
    text-align: center;
    line-height: 1;
}
.ps-driver-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.ps-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 0 5px;
    flex-shrink: 0;
}
.ps-count-active {
    background: var(--error);
    color: #fff;
}

/* Stats bar */
.ps-stats-bar {
    display: flex;
    gap: 20px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-body);
    flex-shrink: 0;
    align-items: stretch;
}
.ps-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 18px;
}
.ps-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}
.ps-stat-value {
    font-size: 24px;
    font-weight: 700;
}
.ps-stat-packages .ps-stat-value {
    color: var(--primary);
}
.ps-stat-drivers .ps-stat-value {
    color: var(--warning);
}

/* Packages board */
.ps-packages-board {
    flex: 1;
    overflow-y: auto;
    /* Safety net: at extreme zoom/narrow widths the max-content number columns
       plus the un-wrappable scan timestamp can exceed the width. Rather than let
       the fullscreen container clip (lose) that data, scroll it horizontally so
       every value is always reachable. Never truncates. */
    overflow-x: auto;
    padding: 20px 24px;
}
.ps-packages-loading {
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px 0;
}
.ps-packages-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}
.ps-empty-icon {
    background: rgba(16, 185, 129, 0.08);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.ps-empty-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--success);
    margin: 0 0 8px 0;
}
.ps-empty-sub {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
    max-width: 340px;
    line-height: 1.5;
}

/* PS Animations */
@keyframes psFadeSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes psFadeSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
}
.ps-animate-in {
    animation: psFadeSlideIn 0.35s ease both;
}
.ps-animate-out {
    animation: psFadeSlideOut 0.3s ease both;
    pointer-events: none;
}
.ps-packages-empty {
    animation: psFadeSlideIn 0.4s ease both;
}

/* Packages list — ONE CSS grid (rows use display:contents so every cell is an
   item of the same grid) so columns align across all rows. Every track is
   minmax(0, …): the number/short columns prefer max-content (full value on one
   line whenever there is room) but can shrink and wrap as a LAST resort under
   extreme zoom; the free-text columns (Name/Address/Last-scan) are flexible and
   wrap first. So the grid ALWAYS fits the width with no horizontal scroll — at
   worst the rows just grow taller. Nothing is ever truncated. */
.ps-packages-list {
    display: grid;
    grid-template-columns:
        minmax(0, max-content) minmax(0, max-content) minmax(0, max-content)
        minmax(0, 1.3fr) minmax(0, 1.6fr)
        minmax(0, max-content) minmax(0, max-content) minmax(0, max-content) minmax(0, max-content)
        minmax(0, 1.4fr);
    width: 100%;
    align-content: start;
}
.ps-packages-list-header,
.ps-package-row {
    display: contents;
}
.ps-packages-list-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.ps-package-row {
    font-size: 14px;
    color: var(--text-primary);
}
.ps-packages-list-header > span,
.ps-package-row > span {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 12px 10px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    /* Stay on one line while the column has room (track prefers max-content);
       under extreme zoom the track shrinks and the value wraps instead of
       overflowing/being clipped. anywhere lets long unbroken IDs break too. */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.ps-packages-list-header > span {
    padding: 10px 10px;
    line-height: 1.3;
    white-space: normal;
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
}
/* Higher specificity than `.ps-package-row > span` so these actually wrap. */
.ps-package-row > .ps-col-recipient,
.ps-package-row > .ps-col-address,
.ps-packages-list-header > .ps-col-recipient,
.ps-packages-list-header > .ps-col-address {
    white-space: normal;
    word-break: break-word;
}
/* Time-only (HH:MM:SS) never wraps; the full-date fallback is allowed to wrap
   so it can never force the scan column wider than its share of the row. */
.ps-scan-time { white-space: normal; }
.ps-packages-list-header > span:last-child,
.ps-package-row > span:last-child {
    border-right: none;
}

/* Last Scanned By */
.ps-col-scan {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center;
    white-space: normal !important;
    overflow: visible !important;
}
.ps-scan-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    line-height: 1.3;
}
.ps-scan-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ps-scan-type {
    font-weight: 700;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.ps-scan-normal .ps-scan-type {
    background: var(--success);
    color: #fff;
}
.ps-scan-return .ps-scan-type {
    background: var(--warning);
    color: #000;
}
.ps-scan-wrong .ps-scan-type {
    background: var(--error);
    color: #fff;
}
.ps-scan-field .ps-scan-type {
    background: #14b8a6;
    color: #fff;
}
.ps-scan-manual-field .ps-scan-type {
    background: #f59e0b;
    color: #000;
}
.ps-scan-wrong-field .ps-scan-type {
    background: #f97316;
    color: #fff;
}
.ps-scan-wrong-manual-field .ps-scan-type {
    background: #b91c1c;
    color: #fff;
}
.ps-scan-driver {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}
.ps-scan-time {
    color: var(--text-secondary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.ps-scan-time-green {
    color: var(--success) !important;
    font-weight: 600;
}
.ps-scan-time-yellow {
    color: var(--warning) !important;
    font-weight: 600;
}
.ps-scan-time-red {
    color: var(--error) !important;
    font-weight: 600;
}
.ps-scan-none {
    color: var(--text-muted);
}
.ps-package-row:hover > span {
    background: var(--surface-hover);
}
.ps-mobile-label {
    display: none;
}

/* ============ Package Search — display tuning ============
 * Runs full-screen on a wall-mounted TV but must stay clean on normal monitors
 * too, and pack in many rows. Sizing is moderate and dense; the structural
 * pieces (header stat chips, compact driver pills, refined scan cell) apply at
 * all widths, and only small responsive bumps are gated to wide screens.
 * Everything is theme-token based so it holds up in light and dark. */

/* Stats now live in the header — compact rounded chips instead of a full row. */
.ps-topbar-stats { display: flex; align-items: center; gap: 10px; }
.ps-topbar-stats:empty { display: none; }
.ps-topbar-stats .ps-stat { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.ps-topbar-stats .ps-stat-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ps-topbar-stats .ps-stat-value { font-size: 20px; font-weight: 800; line-height: 1; }

/* Drivers strip: compact pills; collapse entirely when nobody is being searched. */
.ps-drivers-strip:empty { display: none; padding: 0; border: none; }
.ps-driver-card { min-width: 0; padding: 6px 14px 6px 10px; gap: 8px; border-radius: 999px; }
.ps-driver-tour-id { font-size: 17px; min-width: auto; padding: 0; background: none; border: none; }

/* Last Scanned By: a status pill + driver, then a colour-dotted scan time. */
.ps-scan-info { gap: 5px; width: 100%; min-width: 0; max-width: 100%; }
.ps-scan-type { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ps-scan-type { font-size: 11px; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em; }
.ps-scan-driver { font-weight: 600; }
.ps-scan-time { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ps-scan-time::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.9; }

/* Tour: full driver name + (id) on one line — the column is max-content so it's
   never cut off. The scan driver wraps to always show its full name. */
.ps-col-tour .ps-tour-name { white-space: nowrap; }
.ps-scan-row-top { min-width: 0; flex-wrap: wrap; }
.ps-scan-driver { min-width: 0; white-space: normal; }

/* Light theme: the app's --warning is amber-700 (#b45309) which reads as a muddy
   dark-orange on white. Use a cleaner amber for solid badges, and for the scan
   time carry the green/amber/red urgency on the coloured dot while keeping the
   time text a neutral, legible grey. */
body.app-theme-light .ps-filter-btn-badge { background: #d97706; }
body.app-theme-light .ps-stat-drivers .ps-stat-value { color: #d97706; }
body.app-theme-light .ps-scan-time-green,
body.app-theme-light .ps-scan-time-yellow,
body.app-theme-light .ps-scan-time-red { color: var(--text-secondary) !important; }
body.app-theme-light .ps-scan-time-green::before { background: var(--success); }
body.app-theme-light .ps-scan-time-yellow::before { background: #d97706; }
body.app-theme-light .ps-scan-time-red::before { background: var(--error); }

@media (min-width: 901px) {
    .ps-date-big { font-size: 22px; }
    .ps-packages-list-header { font-size: 12px; letter-spacing: 0.04em; background: var(--bg-elevated); }
    .ps-packages-list-header > span { padding: 10px 9px; }
    .ps-package-row { font-size: 14px; }
    .ps-package-row > span { padding: 8px 9px; }
    /* Zebra striping so rows stay easy to track across a wide screen. Applied
       to the cells because rows are display:contents (no box of their own). */
    .ps-package-row:nth-child(even) > span { background: var(--surface-1); }
    .ps-package-row:hover > span { background: var(--surface-hover); }
    .ps-scan-driver { font-size: 15px; }
    .ps-scan-time { font-size: 14px; }
    .ps-empty-icon { width: 130px; height: 130px; margin-bottom: 20px; }
    .ps-empty-title { font-size: 30px; }
    .ps-empty-sub { font-size: 17px; max-width: 400px; }
}

@media (max-width: 900px) {
    .packagesearch-fullscreen {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ps-topbar {
        padding: 10px 12px;
        gap: 6px;
        flex-wrap: wrap;
    }
    .ps-topbar-center {
        gap: 6px;
        order: 3;
        width: 100%;
        justify-content: center;
    }
    .ps-topbar-actions {
        gap: 8px;
    }
    .ps-date-big {
        font-size: 15px;
    }
    .ps-clock {
        font-size: 13px;
    }
    .ps-refresh-btn span,
    .ps-filter-btn span:not(.ps-filter-btn-badge),
    .ps-autorefresh-label {
        display: none;
    }
    .ps-refresh-btn,
    .ps-filter-btn {
        padding: 6px 8px;
        gap: 4px;
    }
    .ps-filter-modal-content {
        max-width: calc(100vw - 24px);
    }
    .ps-filter-driver-list {
        max-height: 55vh;
    }
    .ps-drivers-strip {
        padding: 10px 12px;
        gap: 8px;
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .ps-driver-card {
        min-width: 0;
        max-width: none;
        flex: 0 0 auto;
        padding: 8px 10px;
    }
    .ps-driver-tour-id {
        font-size: 16px;
        min-width: 22px;
    }
    .ps-driver-name {
        font-size: 12px;
    }
    .ps-stats-bar {
        gap: 10px;
        padding: 8px 12px;
    }
    .ps-stat {
        padding: 8px 12px;
        flex: 1;
    }
    .ps-stat-label {
        font-size: 12px;
    }
    .ps-stat-value {
        font-size: 18px;
    }
    .ps-packages-board {
        padding: 12px;
        overflow-y: visible;
    }
    .ps-packages-list {
        display: block;
    }
    .ps-packages-list-header {
        display: none;
    }
    .ps-package-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 8px;
        background: var(--bg-card);
    }
    .ps-package-row > span {
        display: flex;
        gap: 8px;
        align-items: baseline;
        border-right: none !important;
        padding: 2px 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    .ps-mobile-label {
        display: inline;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        min-width: 85px;
        flex-shrink: 0;
    }
    .ps-col-address,
    .ps-col-scan {
        white-space: normal;
    }
    .ps-packages-empty {
        padding: 40px 16px;
    }
    .ps-empty-icon {
        width: 80px;
        height: 80px;
    }
    .ps-empty-icon svg {
        width: 48px;
        height: 48px;
    }
    .ps-empty-title {
        font-size: 18px;
    }
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {
    .modal-content,
    .notification,
    .btn,
    .nav-tab,
    .slider,
    .slider:before {
        animation: none !important;
        transition: none !important;
    }
}

/* === Language switcher (header + mobile drawer) === */
.lang-switcher{position:relative;display:flex;align-items:center}
.lang-toggle{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:var(--transition);min-height:36px}
.lang-toggle:hover{background:var(--surface-hover);border-color:var(--primary)}
.lang-switcher.open .lang-toggle{background:var(--accent-soft-bg);border-color:var(--primary)}
.lang-toggle-label{font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.lang-toggle-caret{transition:transform .15s ease;opacity:.7}
.lang-switcher.open .lang-toggle-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--bg-card,#18181b);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:1500}
.lang-switcher.open .lang-menu{display:block}
.lang-option{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:6px;color:var(--text-primary);font-size:13px;text-align:left;cursor:pointer;transition:var(--transition)}
.lang-option:hover{background:var(--surface-2)}
.lang-option.active{background:var(--accent-soft-bg);color:var(--accent-soft-text)}
.lang-option-code{font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:12px;min-width:28px}
.lang-option-name{font-size:13px;color:var(--text-secondary)}
.lang-option.active .lang-option-name{color:inherit}
.mobile-drawer-lang{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.mobile-drawer-lang-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600}
.mobile-drawer-lang-options{display:flex;flex-wrap:wrap;gap:8px}
.mobile-lang-option{flex:1 1 auto;min-width:130px;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition);text-align:left}
.mobile-lang-option:hover{background:var(--surface-hover);border-color:var(--primary)}
.mobile-lang-option.active{background:var(--accent-soft-bg);border-color:var(--primary);color:var(--accent-soft-text)}

/* === Theme switcher (header + mobile drawer) ===
 * Mirrors the language switcher's visual language so the header reads as
 * a coherent group of two pill-shaped controls. The toggle button shows
 * the *current* theme's icon (sun in light mode, moon in dark mode); the
 * dropdown lists every available theme. */
.theme-switcher{position:relative;display:flex;align-items:center}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:0;padding:0;width:36px;height:36px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);cursor:pointer;transition:var(--transition);flex-shrink:0}
.theme-toggle:hover{background:var(--surface-hover);border-color:var(--primary);color:var(--primary)}
.theme-switcher.open .theme-toggle{background:var(--accent-soft-bg);border-color:var(--primary);color:var(--accent-soft-text)}
.theme-toggle-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
/* Show only the icon matching the active theme. Dark is default. */
.theme-toggle .theme-icon-sun{display:none}
.theme-toggle .theme-icon-moon{display:inline-flex}
body.app-theme-light .theme-toggle .theme-icon-sun{display:inline-flex}
body.app-theme-light .theme-toggle .theme-icon-moon{display:none}
.theme-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--bg-card,#18181b);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:1500}
.theme-switcher.open .theme-menu{display:block}
.theme-option{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:transparent;border:none;border-radius:6px;color:var(--text-primary);font-size:13px;text-align:left;cursor:pointer;transition:var(--transition)}
.theme-option:hover{background:var(--surface-2)}
.theme-option.active{background:var(--accent-soft-bg);color:var(--accent-soft-text)}
.theme-option-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;opacity:.85}
.theme-option.active .theme-option-icon{opacity:1}
.theme-option-name{font-size:13px;font-weight:500}
.mobile-drawer-theme{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.mobile-drawer-theme-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600}
.mobile-drawer-theme-options{display:flex;flex-wrap:wrap;gap:8px}
.mobile-theme-option{flex:1 1 auto;min-width:130px;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition);text-align:left;display:inline-flex;align-items:center;gap:8px}
.mobile-theme-option:hover{background:var(--surface-hover);border-color:var(--primary)}
.mobile-theme-option.active{background:var(--accent-soft-bg);border-color:var(--primary);color:var(--accent-soft-text)}
.mobile-theme-option svg{width:16px;height:16px;flex-shrink:0}

/* ============================================================
 * Light Theme Overrides
 * ============================================================
 * Targeted overrides for elements/colors hardcoded into the dark
 * palette that don't flow through the CSS variable system. Anything
 * below only applies when `body` has the `app-theme-light` class.
 *
 * Strategy:
 *   1. Re-skin elements with literal dark hex backgrounds (#0c0c0e,
 *      #111113, #18181b, …) to white / near-white.
 *   2. Replace `rgba(255,255,255,X)` overlay tints with `rgba(15,23,42,X)`
 *      counterparts so hover/active surfaces stay visible on light.
 *   3. Re-color the indigo-soft accent text (#a5b4fc, #c7d2fe) to a
 *      darker indigo so it's readable on white.
 *   4. Boost the contrast of status-tinted text colors that were chosen
 *      for dark backgrounds and would otherwise wash out on white.
 * ============================================================ */

/* ----- Surface chrome -----
 * Cards/header/sidebar are pure white; the body sits on a soft slate
 * so the white surfaces have a clear edge. Cards get a hairline shadow
 * so they "lift" off the page even without explicit borders. */
body.app-theme-light .top-header { box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); }
body.app-theme-light .sidebar { box-shadow: 1px 0 0 rgba(15, 23, 42, 0.04); }
body.app-theme-light .mobile-drawer { background: var(--bg-sidebar); box-shadow: 4px 0 24px rgba(15, 23, 42, 0.14); }
body.app-theme-light .app-footer { background: var(--bg-header); }
body.app-theme-light .login-card { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-md); }
body.app-theme-light .content-card { background: var(--bg-card); border-color: var(--border); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); }

/* ----- Sidebar links -----
 * Active link is a SOLID indigo pill with white text — the standard
 * "selected nav" pattern for light UIs (Linear / Vercel / GitHub).
 * This guarantees the label always reads cleanly because text & bg
 * have full contrast instead of competing tints. */
body.app-theme-light .sidebar-link { color: var(--text-secondary); }
body.app-theme-light .sidebar-link:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
/* Active sidebar pill — must read as a clearly "selected" item on a
 * white sidebar. Uses a deep indigo-800 fill (much darker than the
 * regular brand indigo-600 used elsewhere) with pure white text and
 * icon, plus an even darker indigo-900 left bar. Marked !important
 * defensively because several other generic rules (`.sidebar-link`
 * color, `.sidebar-icon` opacity, accent-text overrides further down
 * the file) used to win on source order and ghost the active item out
 * to a faint pastel — we never want that to come back. */
body.app-theme-light .sidebar-link.active,
body.app-theme-light .mobile-drawer .sidebar-link.active {
    background: #3730a3 !important;             /* indigo-800 — deep, clearly selected */
    color: #ffffff !important;
    border-left-color: #1e1b4b !important;      /* indigo-950 — strong indicator bar */
    font-weight: 600 !important;
    box-shadow: inset 4px 0 0 #1e1b4b, 0 1px 2px rgba(55, 48, 163, 0.30);
}
body.app-theme-light .sidebar-link.active:hover {
    background: #312e81 !important;             /* indigo-900 — slightly darker on hover */
    color: #ffffff !important;
}
body.app-theme-light .sidebar-link.active .sidebar-icon,
body.app-theme-light .sidebar-link.active .sidebar-icon .nav-svg {
    opacity: 1 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}
body.app-theme-light .sidebar-nav-section-title { color: var(--text-muted); }
/* Admin-warning sidebar link keeps amber identity but inverts when active. */
body.app-theme-light .sidebar-link-admin.active {
    background: var(--warning);
    border-left-color: #92400e;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(180, 83, 9, 0.25);
}
body.app-theme-light .sidebar-link-admin.active .sidebar-icon { color: #ffffff; }

/* ----- Modals ----- */
body.app-theme-light .modal { background: var(--modal-backdrop); }
body.app-theme-light .modal-content { background: var(--bg-card); border-color: var(--modal-border); box-shadow: var(--shadow-lg); }
body.app-theme-light .modal-header,
body.app-theme-light .modal-content .modal-header { background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%); }
body.app-theme-light .modal-footer,
body.app-theme-light .modal-content .modal-footer { background: linear-gradient(0deg, var(--bg-elevated) 0%, rgba(244, 244, 245, 0.6) 100%); }

/* ----- Map / popup chrome ----- */
body.app-theme-light .leaflet-popup-content-wrapper,
body.app-theme-light .leaflet-popup-tip,
body.app-theme-light .map-sidebar,
body.app-theme-light .route-point-tooltip { background: var(--bg-card) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-md); }

/* ----- Map tiles -----
 * In dark mode the GPS / route maps darken the OpenStreetMap tiles with
 * a brightness/contrast/invert filter so the colorful tiles don't blow
 * out against the dark UI. In light mode that same filter looks awful
 * (muddy greenish-grey instead of clean OSM colors), so we strip the
 * filter entirely and let OSM's native palette show through. */
body.app-theme-light #gps-map .leaflet-tile-container img,
body.app-theme-light #route-map .leaflet-tile-container img,
body.app-theme-light #driver-map .leaflet-tile-container img,
body.app-theme-light #pkgmap .leaflet-tile-container img,
body.app-theme-light #packagelogs-gps-map .leaflet-tile-container img,
body.app-theme-light .leaflet-tile-container img { filter: none !important; }
body.app-theme-light #route-map-container { filter: none; }

/* ----- Map legend / floating map UI -----
 * Map overlays float on top of the (now light) tiles. Their default
 * hardcoded dark drop-shadows look too heavy on white, and the white-
 * overlay hover tints become invisible on a white card. */
body.app-theme-light .map-legend-toggle { box-shadow: var(--shadow-sm); }
body.app-theme-light .map-legend-body { box-shadow: var(--shadow-md); }
body.app-theme-light .map-legend-item[data-colors]:hover,
body.app-theme-light .map-legend-title[data-colors]:hover { background: var(--surface-2); }
body.app-theme-light .map-legend-item-active { background: var(--accent-soft-bg) !important; }

/* ----- Floating leaflet controls (zoom, attribution, etc.) -----
 * Leaflet ships its own light styling for these so we mostly leave
 * them alone, but the attribution control's translucent-white
 * background reads more naturally with a hairline border in light. */
body.app-theme-light .leaflet-control-attribution { border: 1px solid var(--border); }
body.app-theme-light .leaflet-bar a,
body.app-theme-light .leaflet-control-zoom-in,
body.app-theme-light .leaflet-control-zoom-out { color: var(--text-primary); background: var(--bg-card); }

/* ----- Map sidebars (route list, driver map, package map) ----- */
body.app-theme-light .map-sidebar,
body.app-theme-light .driver-map-container,
body.app-theme-light .pkgmap-container { border-color: var(--border); }

/* ----- Inputs / selects ----- */
body.app-theme-light .dashboard-search-input,
body.app-theme-light .dashboard-page-size-select,
body.app-theme-light .audit-logs-select option,
body.app-theme-light .admin-users-table .role-select option { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }

/* ----- Generic surface tint overrides -----
 * These selectors collectively re-tint the most-used "white overlay" hover
 * & background tints (rgba(255,255,255,0.0X)) so they read as soft gray on
 * light surfaces rather than disappearing into the white card. */
body.app-theme-light .ps-drivers-strip,
body.app-theme-light .ps-driver-row,
body.app-theme-light .ps-summary { background: var(--bg-card); }

/* Indigo-tinted accent text — too light against white, so flip to a darker
 * indigo. We deliberately list the most prominent selectors instead of
 * trying to color-replace everywhere because some `#a5b4fc` usages are on
 * dark inset surfaces (badges, chips) and read fine as-is.
 *
 * NOTE: `.sidebar-link.active` is intentionally NOT in this list — it gets
 * a solid indigo pill with white text from the sidebar override above
 * (around line 11596). Including it here was previously beating that rule
 * on source order, leaving the active page text faded indigo on white. */
body.app-theme-light .lang-option.active,
body.app-theme-light .theme-option.active,
body.app-theme-light .breadcrumb-active,
body.app-theme-light .tab.active { color: var(--accent-soft-text); }

/* ----- Tab/chip surfaces using rgba(255,255,255,0.04-0.06) ----- */
body.app-theme-light .tabs-nav .tab,
body.app-theme-light .filter-chip,
body.app-theme-light .filter-pill { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
body.app-theme-light .tabs-nav .tab:hover,
body.app-theme-light .filter-chip:hover,
body.app-theme-light .filter-pill:hover { background: var(--surface-hover); color: var(--text-primary); }
body.app-theme-light .tabs-nav .tab.active,
body.app-theme-light .filter-chip.active,
body.app-theme-light .filter-pill.active { background: var(--accent-soft-bg); color: var(--accent-soft-text); border-color: var(--primary); }

/* ----- Code blocks / pre / diff backgrounds ----- */
body.app-theme-light pre,
body.app-theme-light code,
body.app-theme-light .code-block { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }

/* ----- Status badge text contrast on light backgrounds -----
 * Light tints used for badges (rgba(green, 0.18)) keep their green/red/etc.
 * background fine, but the *text* colors (#86efac, #fca5a5, #c7d2fe …)
 * were tuned for dark contexts and turn near-invisible on the lighter
 * tint. Override the most-used badge text colors so badges stay legible. */
body.app-theme-light .status-success,
body.app-theme-light .badge-success,
body.app-theme-light .pill-success { color: #047857; }       /* emerald-700 */
body.app-theme-light .status-error,
body.app-theme-light .badge-error,
body.app-theme-light .pill-error { color: #b91c1c; }         /* red-700 */
body.app-theme-light .status-warning,
body.app-theme-light .badge-warning,
body.app-theme-light .pill-warning { color: #b45309; }       /* amber-700 */
body.app-theme-light .status-info,
body.app-theme-light .badge-info,
body.app-theme-light .pill-info { color: #1d4ed8; }          /* blue-700 */
body.app-theme-light .status-neutral,
body.app-theme-light .badge-neutral { color: var(--text-secondary); }

/* ----- Login page background ----- */
body.login-page.app-theme-light { background: var(--bg-body); color: var(--text-primary); }
body.login-page.app-theme-light .login-header { background: var(--bg-header); border-bottom: 1px solid var(--border); }
body.login-page.app-theme-light .login-footer { color: var(--text-muted); }

/* ----- Dropdown / select options force readable in light ----- */
body.app-theme-light select option { background-color: var(--bg-elevated); color: var(--text-primary); }

/* ----- Hover surfaces frequently used by tables ----- */
body.app-theme-light .data-table tbody tr:hover,
body.app-theme-light .dashboard-driver-row:hover { background: var(--surface-2); }

/* ----- Skeleton / shimmer placeholders that used white overlays ----- */
body.app-theme-light .skeleton,
body.app-theme-light .shimmer { background: linear-gradient(90deg, rgba(15,23,42,0.04) 0%, rgba(15,23,42,0.08) 50%, rgba(15,23,42,0.04) 100%); }

/* ============================================================
 * Light-mode contrast fixes
 * ============================================================
 * The original dark palette is full of low-alpha tints designed for
 * dark backgrounds (e.g. `rgba(255,255,255,0.04)` for input fields,
 * `#a5b4fc` for soft accent text). Many of these wash out completely
 * on white. The rules below restore visible contrast on each element
 * the design relies on.
 * ============================================================ */

/* ---------- Form inputs / textareas / selects ----------
 * Give every text-style input a real, subtly darker fill so the field
 * boundary is visible against the white card behind it. */
body.app-theme-light .form-group input[type="text"],
body.app-theme-light .form-group input[type="password"],
body.app-theme-light .form-group input[type="number"],
body.app-theme-light .form-group input[type="time"],
body.app-theme-light .form-group input[type="email"],
body.app-theme-light .form-group input[type="url"],
body.app-theme-light .form-group input[type="search"],
body.app-theme-light .form-group input[type="date"],
body.app-theme-light .form-group input[type="datetime-local"],
body.app-theme-light .form-group select,
body.app-theme-light .form-group textarea,
body.app-theme-light .modal .form-group input[type="text"],
body.app-theme-light .modal .form-group input[type="password"],
body.app-theme-light .modal .form-group input[type="number"],
body.app-theme-light .modal .form-group input[type="email"],
body.app-theme-light .login-form .form-group input[type="text"],
body.app-theme-light .login-form .form-group input[type="password"],
body.app-theme-light .releases-upload-form input[type="text"],
body.app-theme-light .billing-tour-row input[type="number"],
body.app-theme-light .admin-settings-field .form-control { background: var(--bg-input); border-color: var(--border-hover); color: var(--text-primary); }

/* Flip color-scheme + option colors back to light values so the OPEN
 * native dropdown popup matches the surrounding light card. Without this
 * override the base rule (color-scheme: dark) forces a dark popup even
 * after the user switches to the light theme. */
body.app-theme-light .form-group select { color-scheme: light; }
body.app-theme-light .form-group select option {
    background-color: var(--bg-input, #ffffff);
    color: var(--text-primary);
}

body.app-theme-light .form-group input::placeholder,
body.app-theme-light .form-group textarea::placeholder { color: var(--text-muted); opacity: 0.85; }

/* Read-only inputs — slightly darker so they stand apart from editable fields. */
body.app-theme-light .form-group input[readonly],
body.app-theme-light .readonly-input { background: #e9ecef; color: var(--text-secondary); border-color: var(--border); }

/* ---------- Custom checkbox (.checkbox-wrapper-46) ----------
 * Light-mode color refresh ONLY — keep the original 18×18 size so layout
 * doesn't shift. Dark-mode default is a translucent white box that ghosts
 * out on light surfaces, so we swap to a clean outlined control:
 *   - resting: white box with a slate-400 border + soft inner shadow
 *   - hover  : indigo ring (no fill flood) so the affordance is obvious
 *   - checked: solid indigo fill with a white tick — same accent the
 *              rest of the UI uses for active states (sidebar pill,
 *              primary buttons), keeping the visual language unified. */
body.app-theme-light .checkbox-wrapper-46 .cbx span:first-child {
    border: 2px solid #94a3b8;          /* slate-400 — clearly visible, not muddy */
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
body.app-theme-light .checkbox-wrapper-46 .cbx span:first-child svg {
    stroke: #ffffff;
}
body.app-theme-light .checkbox-wrapper-46 .cbx:hover span:first-child {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
body.app-theme-light .checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
    background: var(--primary);
    border-color: var(--primary-dark);
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.30);
}
body.app-theme-light .checkbox-wrapper-46 .inp-cbx:checked + .cbx:hover span:first-child {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

/* Native browser checkboxes / radios — match the indigo accent. */
body.app-theme-light input[type="checkbox"],
body.app-theme-light input[type="radio"] { accent-color: var(--primary); }

/* ---------- Buttons re-tuned for light mode ----------
 * The dark theme uses vivid linear-gradients (indigo / amber / red)
 * that look correct on a near-black background but read as neon on
 * white. In light mode we replace them with calmer flat fills +
 * darker borders. The visual hierarchy stays the same:
 *   primary actions → solid indigo
 *   secondary actions → soft white pill with strong border
 *   destructive actions → muted red
 *   warning actions → muted amber
 */

/* Primary / Edit — solid indigo, no gradient. */
body.app-theme-light .btn-primary,
body.app-theme-light header .btn-primary,
body.app-theme-light .btn-edit {
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary-dark);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
body.app-theme-light .btn-primary:hover,
body.app-theme-light header .btn-primary:hover,
body.app-theme-light .btn-edit:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

/* Secondary (Deploy / Map view) — flat white pill, strong border. */
body.app-theme-light .btn-secondary {
    background: #ffffff;
    color: var(--text-primary);
    border: 1px solid #cbd5e1;          /* slate-300 — visible at rest */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.app-theme-light .btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--primary);
    color: var(--primary);
}

/* Warning / Rotate Key — muted amber, no gradient. Rotates orange
 * conventionally signals "destructive but recoverable", so we use the
 * amber-700 family rather than the bright orange of the dark theme. */
body.app-theme-light .btn.btn-warning {
    background: #d97706;                /* amber-600 */
    color: #ffffff;
    border: 1px solid #b45309;          /* amber-700 */
    box-shadow: 0 1px 2px rgba(180, 83, 9, 0.25);
}
body.app-theme-light .btn.btn-warning:hover:not(:disabled) {
    background: #b45309;
    border-color: #92400e;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.30);
}

/* Delete / destructive — muted red. */
body.app-theme-light .btn-delete {
    background: #dc2626;                /* red-600 */
    color: #ffffff;
    border: 1px solid #b91c1c;          /* red-700 */
    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.20);
}
body.app-theme-light .btn-delete:hover {
    background: #b91c1c;
    border-color: #991b1b;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.28);
}

/* Header logout pill — muted red wash that flips solid on hover. */
body.app-theme-light .btn-logout {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.30);
    color: #b91c1c;
    box-shadow: none;
}
body.app-theme-light .btn-logout:hover {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.25);
}

/* ---------- Dashboard table contrast ---------- */
/* Tour ID pill (#1, #2 …) — indigo text was the dark-theme `300` weight,
 * basically invisible on the new soft-indigo bg. Use the darker indigo
 * text + a slightly stronger tint. */
body.app-theme-light .dashboard-tour-tag {
    background: rgba(79, 70, 229, 0.12);
    color: #4338ca;
}
/* Driver row separator + hover were `rgba(255,255,255,0.0X)` — invisible. */
body.app-theme-light .dashboard-driver-row { border-bottom-color: var(--border); }
body.app-theme-light .dashboard-driver-row:hover { background: var(--surface-2); }
/* Sortable header hover/active states. */
body.app-theme-light .dashboard-sortable:hover { background: var(--surface-2); color: var(--text-primary); }
body.app-theme-light .dashboard-sortable.is-sorted { background: rgba(79, 70, 229, 0.10); color: var(--primary); }
/* Dashboard pagination top border. */
body.app-theme-light .dashboard-pagination { border-top-color: var(--border); }

/* ---------- Dashboard flag pills (Ign, Lck, Act, Geo, Opt, Trk) ----------
 * "Off" state = white pill with slate border + muted label.
 * "On"  state = SOLID darker color of that flag's family + white label.
 * Solid fills give every active toggle a clear, readable identity
 * instead of pastel washes you have to squint at. */
body.app-theme-light .dashboard-flag-btn {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #64748b;
}
body.app-theme-light .dashboard-flag-btn:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: #94a3b8;
    background: var(--bg-elevated);
}
body.app-theme-light .dashboard-flag-btn.is-on {
    background: #4f46e5;            /* indigo-600 (Ign) */
    color: #ffffff;
    border-color: #4338ca;
}
body.app-theme-light .dashboard-flag-btn.dashboard-flag-locked.is-on {
    background: #dc2626;            /* red-600 */
    color: #ffffff;
    border-color: #b91c1c;
}
body.app-theme-light .dashboard-flag-btn.dashboard-flag-active.is-on {
    background: #16a34a;            /* green-600 */
    color: #ffffff;
    border-color: #15803d;
}
body.app-theme-light .dashboard-flag-btn.dashboard-flag-geo.is-on {
    background: #0891b2;            /* cyan-600 */
    color: #ffffff;
    border-color: #0e7490;
}
body.app-theme-light .dashboard-flag-btn.dashboard-flag-opt.is-on {
    background: #ea580c;            /* orange-600 */
    color: #ffffff;
    border-color: #c2410c;
}
body.app-theme-light .dashboard-flag-btn.dashboard-flag-trk.is-on {
    background: #9333ea;            /* purple-600 */
    color: #ffffff;
    border-color: #7e22ce;
}

/* ---------- Address Corrections page ---------- */
/* Status badges — soft wash + dark text. */
body.app-theme-light .addresscorrections-badge.is-pending {
    background: rgba(217, 119, 6, 0.09);
    border-color: rgba(217, 119, 6, 0.28);
    color: #92400e;
}
body.app-theme-light .addresscorrections-badge.is-resolved {
    background: rgba(5, 150, 105, 0.09);
    border-color: rgba(5, 150, 105, 0.28);
    color: #065f46;
}
body.app-theme-light .addresscorrections-badge.is-cached {
    background: rgba(79, 70, 229, 0.09);
    border-color: rgba(79, 70, 229, 0.28);
    color: #3730a3;
}
/* Card-field surfaces. */
body.app-theme-light .addresscorrections-card-field {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-left: 3px solid #cbd5e1;
}
body.app-theme-light .addresscorrections-card-field.is-input {
    border-left-color: #d97706;
    background: rgba(217, 119, 6, 0.05);
}
body.app-theme-light .addresscorrections-card-field.is-input:hover {
    background: rgba(217, 119, 6, 0.09);
    border-color: rgba(217, 119, 6, 0.25);
}
body.app-theme-light .addresscorrections-card-field.is-suggested {
    border-left-color: #4f46e5;
    background: rgba(79, 70, 229, 0.05);
}
body.app-theme-light .addresscorrections-card-field.is-corrected {
    border-left-color: #059669;
    background: rgba(5, 150, 105, 0.05);
}
body.app-theme-light .addresscorrections-card-field.is-corrected[onclick]:hover {
    background: rgba(5, 150, 105, 0.09);
    border-color: rgba(5, 150, 105, 0.25);
}
/* Action buttons */
body.app-theme-light .addresscorrections-action-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: var(--text-secondary);
}
body.app-theme-light .addresscorrections-action-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--primary);
}
body.app-theme-light .addresscorrections-action-btn.is-primary {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
body.app-theme-light .addresscorrections-action-btn.is-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}
body.app-theme-light .addresscorrections-action-btn.is-edit {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.28);
    color: #92400e;
}
body.app-theme-light .addresscorrections-action-btn.is-edit:hover {
    background: rgba(217, 119, 6, 0.14);
    border-color: rgba(217, 119, 6, 0.45);
    color: #78350f;
}
body.app-theme-light .addresscorrections-action-btn.is-delete {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.25);
    color: #991b1b;
}
body.app-theme-light .addresscorrections-action-btn.is-delete:hover {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.45);
    color: #7f1d1d;
}
/* Stat pills at the top of the page */
body.app-theme-light .addresscorrections-stat-pill.is-unresolved {
    background: rgba(217, 119, 6, 0.08);
    color: #92400e;
    border: 1px solid rgba(217, 119, 6, 0.20);
}
body.app-theme-light .addresscorrections-stat-pill.is-resolved {
    background: rgba(5, 150, 105, 0.08);
    color: #065f46;
    border: 1px solid rgba(5, 150, 105, 0.20);
}

/* ---------- Route Lists Pickup / Delivery tags ----------
 * Solid filled badges — same approach as the dashboard flag pills.
 * Maximum contrast, no ambiguity. */
body.app-theme-light .route-lists-entry-type.delivery,
body.app-theme-light .route-list-partial-item-type.delivery {
    background: #1d4ed8;        /* blue-700 */
    color: #ffffff;
}
body.app-theme-light .route-lists-entry-type.pickup,
body.app-theme-light .route-list-partial-item-type.pickup {
    background: #b45309;        /* amber-700 */
    color: #ffffff;
}

/* Package info / package logs — solid dots. */
body.app-theme-light .pkginfo-type-pickup,
body.app-theme-light .packagelogs-dot--pickup { color: #b45309; }
body.app-theme-light .pkginfo-type-delivery,
body.app-theme-light .packagelogs-dot--delivery { color: #1d4ed8; }

/* ---------- Generic chip / badge legibility on light backgrounds ----------
 * For other badges in the codebase that follow the `rgba(color, 0.18)`
 * + `light-color text` pattern but don't have a dedicated class hook,
 * widen the net by re-coloring the most common light-text values when
 * sitting on these tinted pills. We can't easily detect "is this a
 * pill?" in pure CSS, so this is intentionally narrow: only the
 * documented "sc-badge" helpers are touched. */
body.app-theme-light .sc-badge-yes { background: rgba(22, 163, 74, 0.14); color: #15803d; }
body.app-theme-light .sc-badge-no  { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }

/* ---------- Tooltips that were dark text on dark hover surfaces ----------
 * Most tooltips use `rgba(0,0,0,0.92)` bg + `#fff` text — already a
 * dark tooltip, fine on light pages. Nothing to do. */

/* ---------- Header chrome contrast ---------- */
/* Role badge (Admin pill in the header) — soft wash so it reads as a
 * label, not as a button. */
body.app-theme-light .role-badge {
    background: rgba(79, 70, 229, 0.10);
    color: #3730a3;
    border: 1px solid rgba(79, 70, 229, 0.18);
}
/* Header username text gets a touch more weight on white. */
body.app-theme-light .header-username { color: var(--text-primary); }
body.app-theme-light .header-user-info { color: var(--text-secondary); }

/* ---------- Generic table chrome ----------
 * `.data-table` headers / borders use the "white-overlay" pattern; on
 * white they vanish. Force them to use the variable border. */
body.app-theme-light .data-table thead th,
body.app-theme-light .data-table th { background: var(--bg-elevated); color: var(--text-secondary); border-bottom: 1px solid var(--border); }
body.app-theme-light .data-table td { border-top: 1px solid var(--border); }
body.app-theme-light .data-table tbody tr:hover { background: var(--surface-2); }

/* ---------- Pagination buttons ---------- */
body.app-theme-light .pagination-page-btn,
body.app-theme-light .addresscorrections-page-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border-hover);
    color: var(--text-secondary);
}
body.app-theme-light .pagination-page-btn:hover,
body.app-theme-light .addresscorrections-page-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    color: var(--text-primary);
}
body.app-theme-light .pagination-page-btn.is-active,
body.app-theme-light .pagination-page-btn[aria-current="page"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

/* ---------- Modal headers/footers — make the gradient actually visible ---------- */
body.app-theme-light .modal-header,
body.app-theme-light .modal-content .modal-header {
    background: linear-gradient(135deg, #eef0f4 0%, #ffffff 100%);
    border-bottom: 1px solid var(--border);
}
body.app-theme-light .modal-footer,
body.app-theme-light .modal-content .modal-footer {
    background: #f7f8fa;
    border-top: 1px solid var(--border);
}

/* ---------- Soft indigo chips (tour-tag, ps-driver-tour-id, etc.) ----------
 * Subtle indigo wash + darker indigo text — readable but not loud. */
body.app-theme-light .dashboard-tour-tag {
    background: rgba(79, 70, 229, 0.09);
    color: #3730a3;
    border: 1px solid rgba(79, 70, 229, 0.18);
}

/* ---------- Profile select / dashboard inline selects ---------- */
body.app-theme-light .dashboard-search-input,
body.app-theme-light .dashboard-page-size-select,
body.app-theme-light .dashboard-driver-profile-select { background: var(--bg-input); border: 1px solid var(--border-hover); color: var(--text-primary); }

/* ---------- Settings / admin toolbar ---------- */
body.app-theme-light .billing-filters,
body.app-theme-light .addresscorrections-search-card,
body.app-theme-light .addresscorrections-pagination-bar { background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); }

/* ---------- Releases — "Latest" badge ----------
 * Was emerald-300 text on a 14% emerald wash — barely visible on white.
 * Switch to a solid emerald pill to match the rest of the badge system. */
body.app-theme-light .release-latest-badge {
    background: #047857;            /* emerald-700 */
    color: #ffffff;
    border-color: #065f46;
}
/* The "is-latest" card variant uses an indigo gradient that disappears
 * on white — give it a clean white background with a strong indigo
 * border so the highlighted card still stands out. */
body.app-theme-light .release-card.is-latest {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-md);
}
body.app-theme-light .release-card.is-latest::before {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* ---------- Releases — Latest hero card ----------
 * The hero on the Releases page is a separate element (`.releases-hero`)
 * from the `.release-card.is-latest` cards in the list. Dark mode paints
 * it with two layered indigo washes (8–18 % alpha) plus a `#a5b4fc` text
 * eyebrow — both of which collapse to "indigo on white-indigo on white"
 * in light mode, so the version reads fine but the "LATEST RELEASE"
 * badge becomes literal white-on-white.
 *
 * We do three things in light mode:
 *   1. Strengthen the hero panel (slightly deeper indigo wash, stronger
 *      border, no soft glow shadow) so it still feels like a hero but
 *      reads as a defined surface, not a faint tint.
 *   2. Repaint the eyebrow as a solid indigo pill with white text — the
 *      same treatment we use for the active sidebar link and primary
 *      buttons, keeping the visual language consistent.
 *   3. Darken meta text and the pulse dot so they have real contrast. */
body.app-theme-light .releases-hero {
    background:
        radial-gradient(circle at 100% 0%, rgba(79, 70, 229, 0.10) 0%, transparent 55%),
        linear-gradient(135deg, #eef0ff 0%, #ffffff 100%);
    border-color: rgba(79, 70, 229, 0.30);
    box-shadow: var(--shadow-md);
}
body.app-theme-light .releases-hero-glow {
    /* The blurred glow muddies the lighter background — soften it. */
    background: radial-gradient(circle, rgba(79, 70, 229, 0.10) 0%, transparent 60%);
}
body.app-theme-light .releases-hero-eyebrow {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
body.app-theme-light .releases-hero-pulse {
    background: #ffffff;            /* on the indigo pill it now reads as a pulsing white dot */
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
body.app-theme-light .releases-hero-meta {
    color: var(--text-secondary);
}
body.app-theme-light .releases-hero-meta-item svg {
    color: var(--primary);          /* small accent — calendar/file icons in indigo */
}

/* ---------- Sidebar Admin link — keep amber identity in light mode ----------
 * Dark mode uses `var(--warning)` text for `.sidebar-link-admin` so it's
 * clearly distinct from regular nav. In light mode the warning color
 * (#b45309 amber-700) gives the same visual signal — and when the link
 * is active we already invert it to a solid amber pill (handled in the
 * sidebar-links override above). */
body.app-theme-light .sidebar-link-admin {
    color: var(--warning);          /* amber-700 in light mode */
    font-weight: 600;
}
body.app-theme-light .sidebar-link-admin:hover {
    color: #92400e;                 /* amber-800 — darkens on hover */
    background: rgba(217, 119, 6, 0.08);
}
body.app-theme-light .sidebar-link-admin .sidebar-icon { color: var(--warning); }
body.app-theme-light .sidebar-link-admin.active .sidebar-icon { color: #ffffff; }

/* ---------- Generic label / muted-text contrast bump ----------
 * Many uppercase form labels and section titles use the muted slate-500
 * color which is fine on dark backgrounds but reads as "ghost text" on
 * white. Bump them up to slate-700 so they sit clearly on the page. */
body.app-theme-light .form-group label,
body.app-theme-light .dashboard-filter-label,
body.app-theme-light .billing-filter-label,
body.app-theme-light .map-search-source-label,
body.app-theme-light .mobile-drawer-lang-label,
body.app-theme-light .mobile-drawer-theme-label,
body.app-theme-light .sidebar-nav-section-title,
body.app-theme-light .addresscorrections-card-field-label,
body.app-theme-light .map-legend-title,
body.app-theme-light .audit-logs-filter-row label { color: #334155; }   /* slate-700 */

/* Subtitles / hints stay one shade lighter so the hierarchy is intact. */
body.app-theme-light .addresscorrections-page-subtitle,
body.app-theme-light .map-legend-item--info,
body.app-theme-light .release-card-meta,
body.app-theme-light .ps-driver-meta { color: var(--text-secondary); }

/* ---------- Audit Logs — mobile responsiveness ----------
 * Desktop nests several padded containers (tab → card → table-container
 * → row → details td), which on a 360-400px phone leaves almost no
 * horizontal room and forces the JSON details cell to scroll sideways.
 * We collapse that nesting on mobile, force everything to clip
 * horizontally so a long JSON blob never causes the page or card to
 * scroll sideways, and reformat the details panel as a wrapped code
 * block so it stays readable. */
@media (max-width: 768px) {
    /* Tame outer padding so we get back ~30px of horizontal room. */
    #auditlogs-tab {
        padding: 12px;
    }
    #auditlogs-tab .content-card.audit-logs-card {
        padding: 14px 12px;
        margin-bottom: 12px;
        max-width: 100%;
        overflow: hidden;
    }
    /* The desktop rule sets overflow-x: auto with id-level specificity,
     * which beats the generic .table-container mobile override. Pin it
     * back to no horizontal scroll and zero padding so the row cards
     * use the full card width. */
    #auditlogs-tab .table-container {
        padding: 0;
        overflow-x: hidden;
    }

    /* Filter bar: stack vertically with full-width controls. */
    .audit-logs-filters {
        margin-bottom: 14px;
        padding: 0;
    }
    .audit-logs-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .audit-logs-filter-row label {
        width: 100%;
        margin-top: 4px;
    }
    .audit-logs-filter-row label:first-child {
        margin-top: 0;
    }
    .audit-logs-select,
    .audit-logs-search-input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .audit-logs-filter-row > .btn {
        width: 100%;
    }

    /* Each log row renders as a stacked card. Override the inherited
     * "td as flex row" mobile layout (from the shared .dashboard-table
     * block) with a clean block layout — label on top, value below. */
    .audit-logs-table {
        width: 100%;
        table-layout: auto;
    }
    .audit-logs-table tbody tr {
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .audit-logs-table tbody td {
        display: block;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        font-size: 13.5px;
        line-height: 1.45;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .audit-logs-table tbody tr td:first-child {
        padding-top: 0;
    }
    .audit-logs-table tbody tr td:last-child {
        padding-bottom: 0;
        padding-top: 8px;
        margin-top: 0;
        border-bottom: none;
        border-top: 1px solid var(--border);
    }
    .audit-logs-table tbody td::before {
        display: block;
        margin-bottom: 4px;
        font-weight: 700;
        color: var(--text-secondary);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Details cell: keep it a normal block; the visual code-panel comes
     * from .audit-details-preview itself (see below). */
    .audit-logs-table tbody td.audit-details-cell,
    .audit-logs-table tbody td:nth-child(4) {
        max-width: 100%;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: 0;
        padding: 8px 0;
        font-family: inherit;
        font-size: 13.5px;
    }

    /* The preview becomes a self-contained code panel with proper
     * wrapping. white-space: pre-wrap keeps the JSON's indentation, and
     * overflow-wrap: anywhere force-breaks long unbroken tokens (hashes,
     * URLs, IDs) so nothing ever scrolls sideways. */
    .audit-details-preview {
        display: block;
        background: rgba(255,255,255,0.04);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px 10px;
        margin-top: 2px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        line-height: 1.45;
        color: var(--text-primary);
        max-height: 180px;
        overflow-y: auto;
        overflow-x: hidden;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .btn-audit-show-more {
        display: block;
        width: 100%;
        margin: 10px 0 0;
        padding: 10px;
        text-align: center;
    }

    /* Pagination controls stay readable when wrapped. */
    .audit-logs-pagination {
        padding: 12px 4px 4px;
    }
    .audit-logs-pagination .pagination-controls {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .audit-logs-pagination .pagination-info {
        flex-basis: 100%;
        text-align: center;
        order: -1;
        font-size: 0.85rem;
    }
    .audit-logs-pagination .pagination-controls .btn {
        flex: 1;
        min-width: 0;
    }

    /* Light-theme tweak: the rgba(255,255,255,0.04) panel background is
     * invisible on a white card, so use a soft slate tint instead. */
    body.app-theme-light .audit-details-preview {
        background: #f1f5f9;            /* slate-100 */
        border-color: #e2e8f0;          /* slate-200 */
        color: #0f172a;                 /* slate-900 */
    }
}

/* =========================================================================
 * Mass Settings modal
 * ========================================================================= */
.mass-settings-modal-content {
    max-width: 900px;
    width: 95%;
}
.mass-settings-body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}
.mass-settings-body .settings-section {
    margin-bottom: 24px;
}
.mass-target-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.mass-driver-search-wrap {
    flex: 1 1 220px;
    min-width: 180px;
}
.mass-target-bulk {
    display: flex;
    gap: 8px;
}
.mass-target-count {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.mass-driver-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    background: var(--bg-input);
}
.mass-driver-list.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.mass-driver-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}
.mass-driver-item:hover {
    background: var(--bg-hover);
}
.mass-driver-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mass-driver-tour {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.mass-driver-empty,
.mass-fields-empty {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 13px;
    padding: 16px;
    text-align: center;
}
.mass-field-section {
    margin-bottom: 18px;
}
.mass-field-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.mass-field-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mass-field-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}
.mass-field-row.is-active {
    background: var(--accent-soft-bg);
    border-color: var(--border-hover);
}
.mass-field-main {
    display: grid;
    grid-template-columns: 1fr 220px;
    align-items: center;
    gap: 12px;
}
.mass-field-label {
    font-size: 14px;
    color: var(--text-primary);
}
.mass-field-control {
    display: flex;
    justify-content: flex-end;
}
.mass-control-input {
    width: 100%;
    max-width: 220px;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
}
.mass-control-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mass-trackdays {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: flex-end;
}
.mass-apply-summary {
    flex: 1;
    font-size: 13px;
    color: var(--text-muted);
}
@media (max-width: 640px) {
    .mass-field-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .mass-field-main {
        grid-template-columns: 1fr;
    }
    .mass-field-control {
        justify-content: flex-start;
    }
    .mass-control-input {
        max-width: none;
    }
}

/* =========================================================================
 * Migrate Driver modal
 * ========================================================================= */
.migrate-modal-body {
    padding: 24px;
}
.migrate-form .form-group {
    margin-bottom: 16px;
}
.migrate-form select.mass-control-input {
    max-width: none;
    width: 100%;
}
.migrate-modal-body .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}
.migrate-swap-icon {
    display: flex;
    justify-content: center;
    color: var(--text-muted);
    margin: -4px 0 8px;
}
.migrate-warning {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: var(--radius-md);
    background: rgba(245, 158, 11, 0.10);
}
.migrate-warning-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f59e0b;
    margin-bottom: 8px;
}
.migrate-warning p {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.5;
}
.migrate-warning-strong {
    font-weight: 600;
}
.migrate-warning .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
.migrate-result {
    text-align: center;
}
.migrate-result-summary {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0 0 16px;
}
.migrate-results-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 12px;
}
.migrate-result-card {
    flex: 1 1 280px;
    max-width: 320px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--bg-input);
}
.migrate-result-caption {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px;
}
.migrate-result-card .deploy-qr-container {
    margin: 0 auto 10px;
}
.migrate-result-card .deploy-modal-url {
    font-size: 11px;
    word-break: break-all;
    color: var(--text-muted);
    margin: 0;
}
.migrate-result .form-actions {
    justify-content: center;
}

/* ---- Sync Tracking modal ---- */
.sync-modal-body {
    padding: 24px 28px 22px;
}
.sync-intro-text {
    color: var(--text);
    margin: 0 0 12px;
    font-size: 14px;
}
.sync-intro-list {
    margin: 0 0 18px;
    padding-left: 20px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}
.sync-intro-list li {
    margin-bottom: 8px;
}
.sync-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 36px 0;
    color: var(--text-muted);
}
.sync-spinner {
    width: 38px;
    height: 38px;
    border: 4px solid var(--border);
    border-top-color: var(--accent, #4f8cff);
    border-radius: 50%;
    animation: sync-spin 0.9s linear infinite;
}
@keyframes sync-spin {
    to { transform: rotate(360deg); }
}
.sync-results-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 18px;
}
.sync-stat {
    flex: 1 1 120px;
    min-width: 110px;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
}
.sync-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
}
.sync-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}
.sync-stat-fail .sync-stat-num {
    color: #e25555;
}
.sync-errors {
    border: 1px solid #e25555;
    border-radius: var(--radius-md);
    background: rgba(226, 85, 85, 0.08);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--text);
}
.sync-errors ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
}
.sync-errors li {
    margin-bottom: 4px;
}

/* ===================== Labels page (Operations) ===================== */
/* Uses the app's theme tokens (--bg-*, --surface-*, --text-*, --border) so the
   page adapts to both the dark and the body.app-theme-light palettes. */
.labels-card { padding: 16px 18px; }
.labels-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.labels-header-titles { display: flex; align-items: baseline; gap: 10px; }
.labels-title { margin: 0; font-size: 18px; color: var(--text-primary); }
.labels-day { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.labels-header-actions { display: flex; align-items: center; gap: 10px; }
.labels-autoupdate { color: var(--text-muted); font-size: 12px; min-width: 120px; text-align: right; }

.labels-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.labels-search { flex: 1 1 220px; min-width: 180px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); }
.labels-search::placeholder { color: var(--text-muted); }
.labels-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.labels-list { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; }
.labels-empty { padding: 28px; text-align: center; color: var(--text-muted); }

.labels-entry { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); cursor: pointer; transition: background-color 0.12s, border-color 0.12s; }
.labels-entry:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.labels-entry.is-printed { background: var(--surface-1); }
.labels-entry.is-printed .labels-entry-sendung,
.labels-entry.is-printed .labels-entry-name { color: var(--text-muted); }
.labels-entry-check { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.labels-entry-system { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-secondary); flex: 0 0 auto; }
.labels-entry-system[data-system="ATF"] { background: rgba(76,175,80,0.16); color: #4caf50; }
.labels-entry-system[data-system="MUCOVN"] { background: rgba(255,152,0,0.18); color: #e08600; }
.labels-entry-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.labels-entry-sendung { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.labels-entry-name { font-size: 13px; color: var(--text-secondary); }
.labels-entry-addr { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labels-entry-printed { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; flex: 0 0 auto; }

.labels-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.labels-modal-overlay[hidden] { display: none; }
.labels-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; width: min(420px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.labels-modal h3 { margin: 0 0 8px; font-size: 16px; color: var(--text-primary); }
.labels-modal-text { margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; }
.labels-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }