/* ============================================================
   FleetPilot Design System
   Soft slate surfaces + steel-teal accent — tuned for long
   dispatcher shifts (no pure white, no OLED black, no purple).
   ============================================================ */

:root {
    --fp-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Soft stone — bg sits below cards so the screen isn't a white floodlight */
    --fp-bg: #e8ebef;
    --fp-surface: #f5f6f8;
    --fp-surface-2: #eceff3;
    --fp-border: #d5dae2;
    --fp-text: #3a4150;
    --fp-text-muted: #5b6474;   /* 4.99:1 on --fp-bg, 5.52:1 on surface — was #6e7787 (3.78:1, failed AA) */
    --fp-heading: #252b36;

    /* Steel-teal: calm, fleet-native, easy in peripheral vision.
       Hover darkens (a press), it does not flash lighter. */
    --fp-accent: #0f766e;
    --fp-accent-hover: #0c5c56;
    --fp-accent-soft: #d9f3ef;
    --fp-accent-contrast: #ffffff;
    --fp-accent-text: #0f766e;

    --fp-success: #166534;   /* was #15803d, 4.19:1 on --fp-bg */
    --fp-success-soft: #e8f7ee;
    --fp-warning: #854d0e;   /* was #a16207, 4.12:1 on --fp-bg */
    --fp-warning-soft: #faf3e0;
    --fp-danger: #b91c1c;
    --fp-danger-soft: #fceceb;
    /* Same ink as the text colors: on the light theme they already hold white labels. */
    --fp-success-solid: #166534;
    --fp-warning-solid: #854d0e;
    --fp-danger-solid: #b91c1c;

    /* Drivers on the map are navy; "booked / planned" stays sky. Same family, two meanings. */
    --fp-map-drivers: #1b4f72;
    --fp-info: #0369a1;
    --fp-info-soft: #e0effa;
    /* Closed-successfully (delivered, paid). Quieter than in-transit green, still the same hue. */
    --fp-settled: #3f6b5c;

    /* ---- Type scale ----------------------------------------------------
       Nine deliberate steps. Before this existed the stylesheet carried 33
       near-identical sizes (.84 / .85 / .86 / .87 / .88rem …) which read as
       drift rather than hierarchy: differences too small to signal meaning,
       but large enough to look unresolved. Every size now snaps to a step. */
    --fp-text-2xs: .6875rem;   /* 11px — badge counts, uppercase nav labels */
    --fp-text-xs: .75rem;      /* 12px — table meta, captions */
    --fp-text-sm: .8125rem;    /* 13px — secondary text */
    --fp-text-base: .875rem;   /* 14px — dense UI, table cells */
    --fp-text-md: .9375rem;    /* 15px — body default */
    --fp-text-lg: 1.0625rem;   /* 17px — card & section titles */
    --fp-text-xl: 1.25rem;     /* 20px — page headings */
    --fp-text-2xl: 1.5rem;     /* 24px — display */
    --fp-text-3xl: 1.8125rem;  /* 29px — hero numerals, empty-state glyphs */

    --fp-leading-tight: 1.2;
    --fp-leading: 1.5;

    /* ---- Spacing scale (4px base) ---- */
    --fp-space-1: .25rem;
    --fp-space-2: .5rem;
    --fp-space-3: .75rem;
    --fp-space-4: 1rem;
    --fp-space-5: 1.5rem;
    --fp-space-6: 2rem;
    --fp-space-7: 3rem;

    /* ---- Radius: five steps, was eleven ---- */
    --fp-radius-xs: 6px;
    --fp-radius-sm: 9px;
    --fp-radius: 12px;
    --fp-radius-lg: 16px;
    --fp-radius-pill: 999px;

    --fp-shadow: 0 1px 2px rgba(37, 43, 54, .04);
    --fp-shadow-lg: 0 14px 36px -14px rgba(37, 43, 54, .16);
    --fp-sidebar-w: 264px;

    /* ---- Focus & motion ----
       One ring, one duration. A focus style that differs per control is how a
       keyboard user loses their place. */
    --fp-focus-ring: 0 0 0 3px var(--fp-accent-soft);
    --fp-focus-ring-strong: 0 0 0 3px rgba(15, 118, 110, .32);
    --fp-transition: 140ms cubic-bezier(.2, 0, .2, 1);
}

[data-theme="dark"] {
    /* Elevated charcoal — never pure black; soft text, not bright white */
    --fp-bg: #16191f;
    --fp-surface: #1e232b;
    --fp-surface-2: #272d37;
    --fp-border: #343b48;
    --fp-text: #c2c8d3;
    --fp-text-muted: #98a0af;   /* was #8b93a3, 4.48:1 on surface-2 */
    --fp-heading: #e6e9ef;

    /* Same steel as the light theme, lifted just enough to sit on charcoal.
       Text colors are dusty (sage, sand, rose, sky). Solids are the deeper
       chips that still carry a white label (counts, map clusters). */
    --fp-accent: #1a7f76;             /* white 4.8:1, chip vs surface 3.3:1 */
    --fp-accent-hover: #1b847b;       /* white 4.5:1 */
    --fp-accent-soft: rgba(126, 200, 188, .16);
    --fp-accent-contrast: #ffffff;
    --fp-accent-text: #7ec8bc;        /* dusty aqua, 8.2:1 on surface — not mint neon */

    --fp-success: #5eae86;
    --fp-success-soft: rgba(94, 174, 134, .16);
    --fp-success-solid: #2f7d52;
    --fp-warning: #c9956a;
    --fp-warning-soft: rgba(201, 149, 106, .16);
    --fp-warning-solid: #985e38;
    --fp-danger: #e08a86;
    --fp-danger-soft: rgba(224, 138, 134, .14);
    --fp-danger-solid: #be4e44;          /* white 4.8:1, chip vs surface 3.3:1 */
    --fp-map-drivers: #2c7498;
    --fp-info: #6aabd0;
    --fp-info-soft: rgba(106, 171, 208, .16);
    --fp-settled: #8eaea0;

    --fp-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --fp-shadow-lg: 0 14px 36px -14px rgba(0, 0, 0, .5);

    --fp-focus-ring-strong: 0 0 0 3px rgba(126, 200, 188, .45);
}

/* ---------- Base ---------- */
html { height: 100%; }
body.fp-app {
    font-family: var(--fp-font);
    background:
        radial-gradient(ellipse 90% 55% at 8% -10%, color-mix(in srgb, var(--fp-accent) 7%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 45% at 100% 0%, color-mix(in srgb, var(--fp-accent) 4%, transparent), transparent 50%),
        var(--fp-bg);
    color: var(--fp-text);
    min-height: 100vh;
    font-size: var(--fp-text-md);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { color: var(--fp-heading); font-weight: 650; }
a { color: var(--fp-accent-text); text-decoration: none; }
a:hover { color: var(--fp-accent-hover); }
.fp-muted { color: var(--fp-text-muted); }

/* Focus styling is defined authoritatively at the END of this file — see
   "Focus ring". It has to come last to beat Bootstrap's `outline: 0`. */

/* Respect users who ask for less motion — applies to every transition below. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Theme icon swap */
[data-theme="light"] .fp-theme-icon-light { display: none; }
[data-theme="dark"] .fp-theme-icon-dark { display: none; }

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

.fp-sidebar {
    width: var(--fp-sidebar-w);
    flex-shrink: 0;
    background: var(--fp-surface);
    border-right: 1px solid var(--fp-border);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.fp-sidebar-brand { display: block; padding: .25rem .5rem 1.25rem; }

.fp-brand { display: inline-flex; align-items: center; gap: .6rem; }
.fp-brand-mark { width: 30px; height: 30px; }
.fp-brand-name { font-size: var(--fp-text-xl); font-weight: 700; color: var(--fp-heading); letter-spacing: -.02em; }
.fp-brand-accent { color: var(--fp-accent-text); }

.fp-nav { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.fp-nav-section {
    font-size: var(--fp-text-2xs);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--fp-text-muted);
    padding: 1.1rem .6rem .35rem;
    font-weight: 600;
}
/* Collapsible sidebar groups (More tools, Settings): native <details>, so it opens with
   Enter/Space and screen readers announce expanded/collapsed with no script. */
.fp-nav-group { display: flex; flex-direction: column; gap: 2px; }
.fp-nav-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    border-radius: var(--fp-radius-sm);
}
.fp-nav-group > summary::-webkit-details-marker { display: none; }
.fp-nav-group > summary::after {
    content: "\F282";   /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: var(--fp-text-2xs);
    letter-spacing: 0;
    transition: transform var(--fp-transition);
}
.fp-nav-group[open] > summary::after { transform: rotate(180deg); }
.fp-nav-group > summary:hover { color: var(--fp-heading); }
.fp-nav-group > summary:focus-visible { outline: none; box-shadow: var(--fp-focus-ring-strong); }
.fp-nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-text);
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.fp-nav-link i { font-size: var(--fp-text-lg); color: var(--fp-text-muted); transition: color .12s ease; }
.fp-nav-link:hover { background: var(--fp-surface-2); color: var(--fp-heading); }
.fp-nav-link.active { background: var(--fp-accent-soft); color: var(--fp-accent-text); }
.fp-nav-link.active i { color: var(--fp-accent-text); }
.fp-nav-link.disabled { color: var(--fp-text-muted); cursor: default; opacity: .75; }
.fp-soon {
    margin-left: auto;
    font-size: var(--fp-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--fp-surface-2);
    color: var(--fp-text-muted);
    border-radius: var(--fp-radius-pill);
    padding: .12rem .5rem;
}
.fp-sidebar-footer { border-top: 1px solid var(--fp-border); padding-top: .9rem; margin-top: .9rem; }
.fp-ai-teaser { display: flex; align-items: center; gap: .55rem; color: var(--fp-text-muted); font-size: var(--fp-text-base); padding: 0 .6rem; text-decoration: none; border-radius: var(--fp-radius-sm); }
.fp-ai-teaser:hover { color: var(--fp-accent-text); background: var(--fp-accent-soft); }
.fp-ai-teaser i { color: var(--fp-accent-text); }

.fp-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

.fp-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.75rem;
    background: color-mix(in srgb, var(--fp-bg) 82%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--fp-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.fp-page-title { font-size: var(--fp-text-lg); font-weight: 600; margin: 0; color: var(--fp-text-muted); }
.fp-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
/* On desktop every page's own header sits right under the top bar and repeats this title, so
   it's hidden visually there. It stays in the accessibility tree: it is the page's <h1>. */
@media (min-width: 992px) {
    .fp-topbar .fp-page-title {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

.fp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--fp-radius-sm);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    color: var(--fp-text);
    transition: background .12s ease, border-color .12s ease;
}
.fp-icon-btn:hover { background: var(--fp-surface-2); }
.fp-icon-btn-sm { width: 32px; height: 32px; border-radius: var(--fp-radius-sm); font-size: var(--fp-text-md); }
/* Destructive row actions sit beside everyday ones (open, documents) on every list. Always-red
   gave Remove the most weight in the row; it turns red only when you point at it. */
.fp-icon-btn-danger { color: var(--fp-text-muted); }
.fp-icon-btn-danger:hover,
.fp-icon-btn-danger:focus-visible { color: var(--fp-danger); background: var(--fp-danger-soft); border-color: transparent; }

.fp-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
    border-radius: var(--fp-radius-pill);
    padding: .28rem .75rem .28rem .3rem;
    color: var(--fp-text);
    font-weight: 500;
    font-size: var(--fp-text-base);
}
.fp-user-chip:hover { background: var(--fp-surface-2); }
.fp-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fp-accent);
    color: var(--fp-accent-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-xs);
    font-weight: 650;
}

/* Full main pane (sidebar → right edge). No centered max-width — forms and boards
   use the whole content column so the right side is never clipped/empty. */
.fp-content {
    padding: 1.9rem 1.75rem 3rem;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

/* ---------- Page header ---------- */
.fp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.fp-heading { font-size: var(--fp-text-2xl); letter-spacing: -.02em; margin-bottom: .2rem; }
.fp-subheading { color: var(--fp-text-muted); margin: 0; font-size: var(--fp-text-md); }

/* ---------- Cards ---------- */
.fp-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow);
}
.fp-card-pad { padding: 1.5rem; }
.fp-card-title { font-size: var(--fp-text-lg); margin-bottom: .9rem; }
/* Forms stretch with the content column (narrow auth/settings override inline). */
.fp-form-card { max-width: none; width: 100%; }

/* Section title — used as the primary <h3> heading across the AI dashboards (Intelligence,
   Marketplace, Copilot). Previously undefined, so it fell back to the oversized default h3 and
   broke the tight premium hierarchy on exactly the flagship pages. Sized to sit just above the
   card title, uppercase-adjacent weight, muted so content leads. */
.fp-section-title {
    font-size: var(--fp-text-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--fp-heading);
    margin: 0 0 .9rem;
}

/* Page-header action cluster (buttons/links on the right of a page header). Previously an
   undefined hook that only worked by accident of the flex parent. */
.fp-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Horizontal row of stat/KPI cards. */
.fp-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.fp-stat { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.35rem; transition: transform .14s ease, box-shadow .14s ease; }
.fp-stat:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-lg); }
.fp-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--fp-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-xl);
    background: var(--fp-surface-2);
    color: var(--fp-text-muted);
    flex-shrink: 0;
}
.fp-stat-icon-accent { background: var(--fp-accent-soft); color: var(--fp-accent-text); }
.fp-stat-icon-success { background: var(--fp-success-soft); color: var(--fp-success); }
.fp-stat-value { font-size: var(--fp-text-2xl); font-weight: 700; color: var(--fp-heading); line-height: 1.15; }
.fp-stat-label { color: var(--fp-text-muted); font-size: var(--fp-text-sm); }

.fp-ai-card { position: relative; overflow: hidden; }
.fp-ai-card::after {
    content: "";
    position: absolute;
    inset: auto -30% -60% auto;
    width: 240px;
    height: 240px;
    background: radial-gradient(closest-side, var(--fp-accent-soft), transparent);
    pointer-events: none;
}
.fp-ai-badge {
    width: 40px;
    height: 40px;
    border-radius: var(--fp-radius);
    background: var(--fp-accent-soft);
    color: var(--fp-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-xl);
    margin-bottom: .8rem;
}

/* ---------- Checklist ---------- */
.fp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.fp-checklist li { display: flex; align-items: center; gap: .7rem; }
.fp-checklist li i { color: var(--fp-text-muted); font-size: var(--fp-text-lg); }
.fp-checklist li.done i { color: var(--fp-success); }
.fp-checklist li.done span { color: var(--fp-text-muted); text-decoration: line-through; }
.fp-checklist li a { margin-left: auto; font-size: var(--fp-text-base); font-weight: 600; }

/* ---------- Tables ---------- */
.fp-table-card { overflow: hidden; }
.fp-table { --bs-table-bg: transparent; color: var(--fp-text); }
.fp-table thead th {
    font-size: var(--fp-text-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--fp-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--fp-border);
    padding: .85rem 1.1rem;
    background: var(--fp-surface-2);
}
.fp-table tbody td {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--fp-border);
    color: var(--fp-text);
}
.fp-sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.fp-sort-link:hover { color: var(--fp-accent-text); text-decoration: underline; }
.fp-table tbody tr:last-child td { border-bottom: 0; }
.fp-table tbody tr { transition: background .1s ease; }
.fp-table tbody tr:hover { background: var(--fp-surface-2); }
.fp-cell-title { font-weight: 600; color: var(--fp-heading); display: block; }
a.fp-row-primary { text-decoration: none; }
a.fp-row-primary:hover, a.fp-row-primary:focus-visible { color: var(--fp-accent-text); text-decoration: underline; }
.fp-cell-sub { display: block; font-size: var(--fp-text-sm); color: var(--fp-text-muted); }

/* Phones: a wide list becomes one card per row instead of a sideways-scrolling table (the Loads
   lane wrapped over four lines at 375px). First cell is the card's title; every other cell with
   a data-label shows as "label ... value". Opt in per table with .fp-table-stack. */
@media (max-width: 767.98px) {
    .fp-table-stack thead { display: none; }
    .fp-table-stack, .fp-table-stack tbody, .fp-table-stack tr, .fp-table-stack td { display: block; width: 100%; }
    .fp-table-stack tr { padding: .75rem 1rem; border-bottom: 1px solid var(--fp-border); }
    .fp-table-stack tr:last-child { border-bottom: 0; }
    .fp-table.fp-table-stack tbody td { border: 0; padding: .2rem 0; background: transparent; }
    .fp-table-stack td[data-label] {
        display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
        text-align: right !important;
    }
    .fp-table-stack td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--fp-text-muted);
        font-size: var(--fp-text-xs);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .fp-table.fp-table-stack tbody td:first-child { padding-bottom: .4rem; }
    .fp-table.fp-table-stack tbody td:last-child:not([data-label]) { text-align: left !important; padding-top: .4rem; }
}

/* ---------- Badges ---------- */
.fp-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--fp-radius-pill);
    padding: .22rem .65rem;
    font-size: var(--fp-text-xs);
    font-weight: 600;
}
.fp-badge-success { background: var(--fp-success-soft); color: var(--fp-success); }
.fp-badge-warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-badge-danger { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-badge-accent { background: var(--fp-accent-soft); color: var(--fp-accent-text); }
.fp-badge-muted { background: var(--fp-surface-2); color: var(--fp-text-muted); }
.fp-badge-planned { background: var(--fp-info-soft); color: var(--fp-info); }

/* ---------- Buttons ----------
   Bootstrap's .btn ships at 1rem, which rendered button labels (16px) LARGER
   than body copy (15px) and larger than the inputs beside them — the button
   shouted louder than the content it acted on. Putting .btn on the type scale
   is the single change that most settles a form visually. */
.btn {
    font-size: var(--fp-text-base);
    font-weight: 550;
    border-radius: var(--fp-radius-sm);
    transition: background var(--fp-transition), border-color var(--fp-transition), color var(--fp-transition);
}
.btn-sm { font-size: var(--fp-text-sm); }

/* Bootstrap's .small is .875em of a 15px parent = 13.125px — a half-step off
   our 13px. Snapping it removes a duplicate rung from the scale. */
.small, small { font-size: var(--fp-text-sm); }

.fp-btn-primary {
    background: var(--fp-accent);
    border: 1px solid var(--fp-accent);
    color: var(--fp-accent-contrast);
    font-weight: 600;
    border-radius: var(--fp-radius-sm);
    padding: .52rem 1.1rem;
    transition: background .12s ease, transform .1s ease;
}
.fp-btn-primary:hover, .fp-btn-primary:focus { background: var(--fp-accent-hover); border-color: var(--fp-accent-hover); color: var(--fp-accent-contrast); }
.fp-btn-primary:active { transform: translateY(1px); }
.fp-btn-ghost {
    background: transparent;
    border: 1px solid var(--fp-border);
    color: var(--fp-text);
    font-weight: 500;
    border-radius: var(--fp-radius-sm);
    padding: .52rem 1.1rem;
}
.fp-btn-ghost:hover { background: var(--fp-surface-2); color: var(--fp-heading); }

/* ---------- Forms ---------- */
.form-label { font-weight: 550; color: var(--fp-heading); font-size: var(--fp-text-base); margin-bottom: .35rem; }
.form-control, .form-select {
    /* Use background-color (not the background shorthand) so select chevrons
       are not wiped — the shorthand resets image/repeat/position/size. */
    background-color: var(--fp-surface);
    border: 1px solid var(--fp-border);
    color: var(--fp-text);
    border-radius: var(--fp-radius-sm);
    padding: .55rem .8rem;
    font-size: var(--fp-text-md);
    transition: border-color var(--fp-transition), box-shadow var(--fp-transition);
}
.form-control:focus, .form-select:focus {
    background-color: var(--fp-surface);
    color: var(--fp-text);
    border-color: var(--fp-accent);
    box-shadow: var(--fp-focus-ring);
}
.form-control::placeholder { color: var(--fp-text-muted); opacity: .7; }

/* Auto-filled / computed fields must stay readable (Bootstrap readonly uses
   --bs-secondary-bg which clashes with FleetPilot theme tokens). */
.form-control[readonly],
.form-control:disabled,
.fp-readonly {
    background-color: var(--fp-surface-2) !important;
    color: var(--fp-heading) !important;
    opacity: 1;
    cursor: default;
    border-color: var(--fp-border);
}
.form-text { color: var(--fp-text-muted); font-size: var(--fp-text-sm); }
.form-check-input { background-color: var(--fp-surface); border-color: var(--fp-border); }
.form-check-input:checked { background-color: var(--fp-accent); border-color: var(--fp-accent); }
.form-check-label { color: var(--fp-text); }

/* Native selects: one chevron, right-aligned — never tile. */
.form-select {
    --fp-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--fp-surface);
    background-image: var(--fp-select-chevron);
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 12px 8px;
    padding: .62rem 2.5rem .62rem .95rem;
    border-radius: calc(var(--fp-radius-sm) + 2px);
    border: 1px solid color-mix(in srgb, var(--fp-border) 88%, var(--fp-heading));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--fp-heading) 4%, transparent);
    cursor: pointer;
    line-height: 1.35;
}
.form-select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--fp-border) 40%, var(--fp-accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-accent) 12%, transparent);
}
.form-select:focus {
    border-color: var(--fp-accent);
    box-shadow: var(--fp-focus-ring);
}
.form-select:disabled {
    cursor: not-allowed;
    opacity: .65;
    background-image: var(--fp-select-chevron);
    box-shadow: none;
}
.form-select-lg {
    min-height: 3rem;
    font-size: 1.05rem;
    padding-top: .72rem;
    padding-bottom: .72rem;
}
.form-select-sm {
    padding-top: .38rem;
    padding-bottom: .38rem;
    padding-left: .7rem;
    font-size: var(--fp-text-sm);
}
.form-select[multiple],
.form-select[size]:not([size="1"]) {
    background-image: none;
    padding-right: .8rem;
}
.form-select option {
    background-color: var(--fp-surface);
    color: var(--fp-text);
    padding: .35rem .5rem;
}
[data-theme="dark"] .form-select {
    --fp-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239299a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.fp-select-shell { position: relative; }
.fp-combobox { position: relative; width: 100%; }
.fp-combobox-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Combobox + city typeahead share the same select chrome as .form-select */
.fp-combobox-display,
.fp-select-display,
input.form-control[data-city-typeahead],
input.form-control[data-cp-display] {
    width: 100%;
    cursor: text;
    padding-right: 2.5rem !important;
    border-radius: calc(var(--fp-radius-sm) + 2px);
    border: 1px solid color-mix(in srgb, var(--fp-border) 88%, var(--fp-heading));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--fp-heading) 4%, transparent);
    line-height: 1.35;
}
.fp-combobox:focus-within .fp-combobox-display,
.fp-select-shell:focus-within > .form-control,
.fp-select-shell:focus-within > .fp-combobox .fp-combobox-display {
    border-color: var(--fp-accent);
    box-shadow: var(--fp-focus-ring);
    outline: 0;
}
.fp-select-toggle {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--fp-text-muted);
    border-radius: var(--fp-radius-xs);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.fp-select-toggle:hover {
    color: var(--fp-heading);
    background: var(--fp-surface-2);
}
.fp-select-shell.is-open .fp-select-toggle,
.fp-combobox.is-open .fp-select-toggle {
    color: var(--fp-accent-text);
}
.fp-select-shell.is-open .fp-select-toggle i,
.fp-combobox.is-open .fp-select-toggle i {
    transform: rotate(180deg);
}
.fp-select-toggle i {
    font-size: .85rem;
    transition: transform .15s ease;
    display: inline-block;
}
/* Labels above city shells: toggle aligns to the input, not the label */
.fp-select-shell > .form-label + .fp-field-control,
.fp-select-shell > .form-label + input,
.fp-select-shell > .form-label + .fp-combobox {
    /* no-op structural */
}
.fp-field-control { position: relative; width: 100%; }
.fp-field-control .fp-select-toggle { top: 50%; }
.fp-field-control .fp-typeahead-menu { left: 0; right: 0; }
.fp-field-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .35rem;
    font-size: var(--fp-text-xs, .75rem);
    font-weight: 550;
}
.fp-field-status.is-confirmed { color: var(--fp-success); }
.fp-field-status.is-pending { color: var(--fp-warning); }
.fp-select-shell.is-city-confirmed > input.form-control,
.fp-select-shell.is-city-confirmed .fp-combobox-display {
    border-color: color-mix(in srgb, var(--fp-success) 45%, var(--fp-border));
}
.fp-combobox .fp-typeahead-menu {
    z-index: 30;
    max-height: 16rem;
    overflow-y: auto;
}
.fp-typeahead-more {
    padding: .45rem .75rem .55rem;
    color: var(--fp-text-muted);
    font-size: var(--fp-text-xs, .75rem);
    border-top: 1px solid var(--fp-border);
    line-height: 1.35;
}
.fp-typeahead-clear { color: var(--fp-text-muted); font-style: italic; }
.fp-typeahead-empty {
    padding: .65rem .75rem;
    color: var(--fp-text-muted);
    font-size: var(--fp-text-sm);
}

/* ---------- Date / datetime picker ---------- */
.fp-dtp {
    position: relative;
    width: 100%;
}
.fp-dtp-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.fp-dtp-display {
    width: 100%;
    padding-right: 2.5rem !important;
    cursor: pointer;
    border-radius: calc(var(--fp-radius-sm) + 2px);
    border: 1px solid color-mix(in srgb, var(--fp-border) 88%, var(--fp-heading));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--fp-heading) 4%, transparent);
    background-color: var(--fp-surface);
    color: var(--fp-text);
    text-align: left;
}
.fp-dtp-display:hover {
    border-color: color-mix(in srgb, var(--fp-border) 40%, var(--fp-accent));
}
.fp-dtp.is-open .fp-dtp-display {
    border-color: var(--fp-accent);
    box-shadow: var(--fp-focus-ring);
}
.fp-dtp-toggle {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--fp-text-muted);
    border-radius: var(--fp-radius-xs);
    cursor: pointer;
}
.fp-dtp-toggle:hover { color: var(--fp-accent-text); background: var(--fp-surface-2); }
.fp-dtp-panel {
    position: absolute;
    z-index: 1100;
    left: 0;
    top: calc(100% + .35rem);
    width: min(100%, 20.5rem);
    min-width: 18.5rem;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-sm, 0 8px 28px rgba(0,0,0,.12));
    padding: .75rem;
}
.fp-dtp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .65rem;
}
.fp-dtp-title {
    font-weight: 650;
    color: var(--fp-heading);
    font-size: var(--fp-text-md);
    margin: 0;
}
.fp-dtp-nav {
    display: inline-flex;
    gap: .25rem;
}
.fp-dtp-nav button {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--fp-radius-xs);
    background: var(--fp-surface-2);
    color: var(--fp-heading);
    cursor: pointer;
}
.fp-dtp-nav button:hover { background: var(--fp-accent-soft); color: var(--fp-accent-text); }
.fp-dtp-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .15rem;
    margin-bottom: .25rem;
}
.fp-dtp-week span {
    text-align: center;
    font-size: .68rem;
    font-weight: 650;
    color: var(--fp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .2rem 0;
}
.fp-dtp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .15rem;
}
.fp-dtp-day {
    aspect-ratio: 1;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fp-text);
    font-size: var(--fp-text-sm);
    font-weight: 550;
    cursor: pointer;
    padding: 0;
}
.fp-dtp-day:hover:not(:disabled) { background: var(--fp-accent-soft); color: var(--fp-accent-text); }
.fp-dtp-day.is-muted { color: var(--fp-text-muted); opacity: .55; }
.fp-dtp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--fp-accent); }
.fp-dtp-day.is-selected {
    background: var(--fp-accent);
    color: var(--fp-accent-contrast);
}
.fp-dtp-day.is-selected.is-today { box-shadow: none; }
.fp-dtp-time {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px solid var(--fp-border);
}
.fp-dtp-time label {
    font-size: var(--fp-text-xs);
    font-weight: 650;
    color: var(--fp-text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fp-dtp-time select {
    flex: 1;
    min-width: 0;
}
.fp-dtp-actions {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .65rem;
}
.fp-dtp-actions .btn { flex: 0 0 auto; }

/* Inline quick-create for broker / customer */
.fp-quick-select { position: relative; }
.fp-quick-select-trigger {
    border: 0;
    background: transparent;
    color: var(--fp-accent);
    font-size: var(--fp-text-sm);
    font-weight: 600;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    cursor: pointer;
}
.fp-quick-select-trigger:hover { color: var(--fp-heading); text-decoration: underline; }
.fp-quick-select-panel {
    margin-top: .65rem;
    padding: .85rem .95rem;
    border: 1px solid color-mix(in srgb, var(--fp-accent) 28%, var(--fp-border));
    border-radius: calc(var(--fp-radius-sm) + 2px);
    background: color-mix(in srgb, var(--fp-accent-soft) 55%, var(--fp-surface));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--fp-heading) 8%, transparent);
}
.fp-quick-select-panel-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: .65rem;
}
.fp-quick-select-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
}
@media (max-width: 768px) {
    .fp-quick-select-panel-grid { grid-template-columns: 1fr; }
}

.fp-form-section {
    font-size: var(--fp-text-xs);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--fp-text-muted);
    font-weight: 650;
    margin: 1.4rem 0 .8rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--fp-border);
}
.fp-form-section:first-child { margin-top: 0; }
.fp-form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .5rem; }

.fp-field-error, .fp-validation-summary { color: var(--fp-danger); font-size: var(--fp-text-sm); }
.fp-validation-summary ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.fp-validation-summary:empty { display: none; }
.input-validation-error { border-color: var(--fp-danger) !important; }

.fp-role-options { display: flex; flex-wrap: wrap; gap: .6rem; }
.fp-role-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    padding: .5rem .9rem;
    cursor: pointer;
    background: var(--fp-surface);
    transition: border-color .12s ease, background .12s ease;
}
.fp-role-option:hover { border-color: var(--fp-accent); }
.fp-role-option .form-check-input { margin: 0; }

/* ---------- Alerts ---------- */
.fp-alert,
.alert.fp-alert {
    display: flex;
    align-items: center;
    border-radius: var(--fp-radius);
    border: 1px solid transparent;
    padding: .8rem 2.5rem .8rem 1rem;
    margin-bottom: 1.2rem;
    font-weight: 500;
    position: relative;
    /* Keep FleetPilot look when Bootstrap's `.alert` is also present (required for dismiss). */
    background-image: none;
}
.fp-alert-success { background: var(--fp-success-soft); color: var(--fp-success); }
.fp-alert-warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-alert-danger { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-alert-info { background: var(--fp-info-soft); color: var(--fp-info); }

/* Bootstrap's color utilities are hardcoded and ignore data-theme. Point them
   at the tokens so a leftover text-danger or alert-warning cannot introduce
   a second red or a yellow that the palette does not have. */
.text-muted { color: var(--fp-text-muted) !important; }
.text-primary { color: var(--fp-accent-text) !important; }
.text-success { color: var(--fp-success) !important; }
.text-warning { color: var(--fp-warning) !important; }
.text-danger { color: var(--fp-danger) !important; }
.text-info { color: var(--fp-info) !important; }
.alert-success { background: var(--fp-success-soft); color: var(--fp-success); border-color: transparent; }
.alert-warning { background: var(--fp-warning-soft); color: var(--fp-warning); border-color: transparent; }
.alert-danger { background: var(--fp-danger-soft); color: var(--fp-danger); border-color: transparent; }
.alert-info { background: var(--fp-info-soft); color: var(--fp-info); border-color: transparent; }
.fp-alert .btn-close { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); filter: none; }
[data-theme="dark"] .fp-alert .btn-close { filter: invert(1) grayscale(100%); }

.fp-desk-scope {
    /* One line, not a card. It sat between every roster page's title and its content and pushed
       the table down ~80px to say, on the full-fleet case, that nothing was filtered. */
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem .5rem;
    margin: 0 0 var(--fp-space-3);
    padding: .3rem .8rem;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-pill);
    background: var(--fp-surface);
    font-size: var(--fp-text-sm);
}
.fp-desk-scope > i { font-size: var(--fp-text-base); color: var(--fp-accent); }
.fp-desk-scope strong { color: var(--fp-heading); font-weight: 600; }
.fp-desk-scope-mine {
    border-color: color-mix(in srgb, var(--fp-accent) 35%, var(--fp-border));
    background: color-mix(in srgb, var(--fp-accent-soft) 70%, var(--fp-surface));
}
.fp-desk-scope-full { background: var(--fp-surface-2); }

/* ---------- Empty state ---------- */
.fp-empty { text-align: center; padding: 4rem 2rem; }
.fp-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: var(--fp-radius-lg);
    background: var(--fp-accent-soft);
    color: var(--fp-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-3xl);
}
.fp-empty h3 { font-size: var(--fp-text-xl); }
.fp-empty p { max-width: 380px; margin: .3rem auto 1.2rem; }

/* ---------- Permission chips ---------- */
.fp-permission-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.fp-permission-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--fp-text-xs);
    background: var(--fp-surface-2);
    color: var(--fp-text);
    border-radius: var(--fp-radius-pill);
    padding: .25rem .65rem;
}
.fp-permission-chip i { color: var(--fp-success); }

/* ---------- Dropdown ---------- */
.fp-dropdown {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-lg);
    padding: .4rem;
}
.fp-dropdown .dropdown-item { border-radius: var(--fp-radius-sm); color: var(--fp-text); font-size: var(--fp-text-md); padding: .45rem .7rem; }
.fp-dropdown .dropdown-item:hover { background: var(--fp-surface-2); color: var(--fp-heading); }
.fp-dropdown .dropdown-item-text { color: var(--fp-text-muted); }
.fp-dropdown .dropdown-divider { border-color: var(--fp-border); }

/* ---------- Auth pages ---------- */
.fp-auth-body { display: block; }
.fp-auth-wrap { min-height: 100vh; display: flex; flex-direction: column; max-width: 1140px; margin: 0 auto; padding: 1.5rem; }
.fp-auth-header { display: flex; align-items: center; justify-content: space-between; }
.fp-auth-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; }
.fp-auth-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    box-shadow: var(--fp-shadow-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 440px;
}
.fp-auth-card-wide { max-width: 560px; }
/* Phones (drivers sign in here): 40px of card padding inside the page gutter left ~250px for
   the form, so "Keep me signed in" and the SSO button text wrapped mid-phrase. */
@media (max-width: 575.98px) { .fp-auth-card { padding: 1.5rem 1.25rem; } }
.fp-auth-title { font-size: var(--fp-text-2xl); letter-spacing: -.02em; margin-bottom: .35rem; }
.fp-auth-subtitle { color: var(--fp-text-muted); font-size: var(--fp-text-md); margin-bottom: 1.6rem; }
.fp-auth-switch { text-align: center; color: var(--fp-text-muted); font-size: var(--fp-text-md); margin: 1.4rem 0 0; }
.fp-auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0; color: var(--fp-text-muted); font-size: var(--fp-text-sm); }
.fp-auth-divider::before, .fp-auth-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--fp-border); }
.fp-auth-footer { text-align: center; color: var(--fp-text-muted); font-size: var(--fp-text-sm); padding: 1rem 0; }
.fp-status-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.1rem;
    border-radius: var(--fp-radius-lg);
    background: var(--fp-accent-soft);
    color: var(--fp-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-3xl);
}

/* ---------- Global search ---------- */
.fp-global-search { position: relative; flex: 1 1 auto; max-width: 420px; margin: 0 auto; }
.fp-gs-icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fp-text-muted);
    font-size: var(--fp-text-md);
    pointer-events: none;
}
.fp-gs-input {
    width: 100%;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    color: var(--fp-text);
    font-size: var(--fp-text-base);
    padding: .48rem .8rem .48rem 2.2rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fp-gs-input:focus { outline: none; border-color: var(--fp-accent); box-shadow: 0 0 0 3px var(--fp-accent-soft); }
.fp-gs-input::placeholder { color: var(--fp-text-muted); opacity: .8; }
.fp-gs-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-lg);
    padding: .35rem;
    z-index: 1100;
    max-height: 380px;
    overflow-y: auto;
}
.fp-gs-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-text);
    font-size: var(--fp-text-base);
}
.fp-gs-item:hover { background: var(--fp-surface-2); color: var(--fp-heading); }
.fp-gs-item i { color: var(--fp-accent-text); font-size: var(--fp-text-md); flex-shrink: 0; }
.fp-gs-title { font-weight: 600; color: var(--fp-heading); }
.fp-gs-sub { margin-left: auto; color: var(--fp-text-muted); font-size: var(--fp-text-xs); }
.fp-gs-empty { padding: .7rem .8rem; color: var(--fp-text-muted); font-size: var(--fp-text-base); }
@media (max-width: 767.98px) {
    .fp-global-search { display: none; }
}

/* ---------- Notification center ---------- */
.fp-notify-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-danger-solid);
    color: var(--fp-accent-contrast);
    font-size: var(--fp-text-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.fp-notify-menu { width: 360px; max-width: min(360px, calc(100vw - 1rem)); padding: .5rem; }
.fp-notify-list { max-height: min(22rem, 55vh); overflow-y: auto; }
@media (max-width: 575.98px) {
    .fp-notify-menu {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        /* Keep the panel on-screen when the bell sits near the right edge. */
        position: absolute;
        right: 0;
        left: auto;
    }
}
.fp-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: var(--fp-text-2xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 650;
    color: var(--fp-text-muted);
    padding: .35rem .6rem .5rem;
}
.fp-notify-refresh {
    border: 0;
    background: transparent;
    color: var(--fp-text-muted);
    padding: .15rem .35rem;
    border-radius: var(--fp-radius-sm);
    line-height: 1;
}
.fp-notify-refresh:hover { color: var(--fp-heading); background: var(--fp-surface-2); }
.fp-notify-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .15rem;
    border-radius: var(--fp-radius-sm);
}
.fp-notify-row:hover { background: var(--fp-surface-2); }
.fp-notify-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .6rem;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-text);
    font-size: var(--fp-text-base);
    line-height: 1.3;
    text-decoration: none;
}
.fp-notify-item:hover { color: var(--fp-heading); }
.fp-notify-item i { font-size: var(--fp-text-md); margin-top: 1px; }
.fp-notify-dismiss {
    border: 0;
    background: transparent;
    color: var(--fp-text-muted);
    padding: .45rem .55rem;
    line-height: 1;
    border-radius: var(--fp-radius-sm);
}
.fp-notify-dismiss:hover { color: var(--fp-heading); background: var(--fp-surface); }
.fp-notify-danger i { color: var(--fp-danger); }
.fp-notify-warning i { color: var(--fp-warning); }
.fp-notify-info i { color: var(--fp-accent-text); }
.fp-notify-empty { padding: .7rem .6rem; font-size: var(--fp-text-base); }

/* ---------- City picker ---------- */
.fp-citypick { position: relative; }
.fp-citypick-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-lg);
    padding: .3rem;
    z-index: 1090;
    max-height: 280px;
    overflow-y: auto;
}
.fp-citypick-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .5rem .65rem;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-heading);
    font-size: var(--fp-text-md);
    font-weight: 500;
    cursor: pointer;
}
.fp-citypick-item:hover,
.fp-citypick-item.is-active { background: var(--fp-accent-soft); color: var(--fp-accent-text); }
.fp-citypick-zip { color: var(--fp-text-muted); font-size: var(--fp-text-xs); font-weight: 400; }

/* ---------- Analytics ---------- */
.fp-chart-wrap { position: relative; height: 280px; }
.fp-stat-icon-warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-progress {
    height: 8px;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-surface-2);
    overflow: hidden;
    margin-top: .4rem;
}
.fp-progress-bar { height: 100%; border-radius: var(--fp-radius-pill); background: var(--fp-accent); transition: width .3s ease; }

/* ---------- Broker intelligence ---------- */
.fp-tabs { border-bottom: 1px solid var(--fp-border); gap: .2rem; }
.fp-tabs .nav-link {
    color: var(--fp-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .6rem .95rem;
    font-weight: 550;
    font-size: var(--fp-text-md);
    background: none;
    cursor: pointer;
    text-decoration: none;
}
.fp-tabs .nav-link:hover { color: var(--fp-heading); }
.fp-tabs .nav-link.active {
    color: var(--fp-accent-text);
    border-bottom-color: var(--fp-accent);
    background: none;
}
.fp-tabs .nav-link:disabled,
.fp-tabs .nav-link.disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}
.fp-tabs .fp-badge { margin-left: .35rem; }
.fp-tab-content { padding-top: 1.1rem; }

.fp-typeahead-menu {
    position: absolute;
    /* Above sibling fields; high enough for Bootstrap modals (assign / load forms). */
    z-index: 1080;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: .15rem;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-sm, 0 4px 16px rgba(0,0,0,.08));
    max-height: 18rem;
    overflow: auto;
    overscroll-behavior: contain;
}
/* Keep combobox menus usable inside Bootstrap modal dialogs. */
.modal .fp-combobox { position: relative; z-index: 1; }
.modal .fp-combobox:focus-within { z-index: 5; }
.fp-typeahead-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: .55rem .75rem;
    color: inherit;
}
.fp-typeahead-item:hover { background: var(--fp-accent-soft); }
.fp-trip-timeline > li { border-left: 2px solid var(--fp-border); padding-left: .85rem; margin-left: .2rem; }

.fp-risk-row { margin-bottom: 1.1rem; }
.fp-risk-row .fp-progress { margin: .35rem 0 .25rem; }
.fp-badge.fp-risk-low, .fp-progress-bar.fp-risk-low { background: var(--fp-success-soft); color: var(--fp-success); }
.fp-badge.fp-risk-moderate, .fp-progress-bar.fp-risk-moderate { background: var(--fp-accent-soft); color: var(--fp-accent-text); }
.fp-badge.fp-risk-elevated, .fp-progress-bar.fp-risk-elevated { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-badge.fp-risk-high, .fp-progress-bar.fp-risk-high { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-progress-bar.fp-risk-low { background: var(--fp-success); }
.fp-progress-bar.fp-risk-moderate { background: var(--fp-accent); }
.fp-progress-bar.fp-risk-elevated { background: var(--fp-warning); }
.fp-progress-bar.fp-risk-high { background: var(--fp-danger); }

.fp-note-pinned { border-left: 3px solid var(--fp-accent); }
.fp-superseded { opacity: .62; }

/* ---------- Operations map ---------- */
.fp-map-card { overflow: hidden; }
.fp-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--fp-border);
}
.fp-map-layer { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fp-text-base); cursor: pointer; margin: 0; }
.fp-map-layer .form-check-input { margin: 0; }
.fp-map-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.fp-dot-trucks { background: var(--fp-accent); color: var(--fp-accent); }
.fp-dot-drivers { background: var(--fp-map-drivers); color: var(--fp-map-drivers); }
.fp-dot-pickups { background: var(--fp-warning-solid); color: var(--fp-warning-solid); }
.fp-dot-deliveries { background: var(--fp-success-solid); color: var(--fp-success-solid); }
.fp-dot-completed { background: var(--fp-text-muted); color: var(--fp-text-muted); }
.fp-map-zoom { display: flex; gap: .35rem; }
.fp-map-stage {
    position: relative;
    background:
        radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--fp-accent) 6%, transparent), transparent 55%),
        var(--fp-surface-2);
    cursor: grab;
    touch-action: none; /* we drive pan/pinch ourselves — stop the browser scrolling/zooming the page */
    -webkit-user-select: none;
    user-select: none;
}
.fp-map-stage:active { cursor: grabbing; }
#fpMapSvg { display: block; width: 100%; height: min(62vh, 620px); }
/* Direct child only: the atlas provider appends its own <svg> straight into #fpMapSvg. A
   descendant selector here would also catch Leaflet's small nested attribution-flag <svg>
   (several levels deep, never a direct child) and stretch it to fill the whole map. */
#fpMapSvg > svg { display: block; width: 100%; height: 100%; }
#fpMapSvg > svg.fp-map-animated .fp-map-viewport { transition: transform 260ms cubic-bezier(.2, 0, .2, 1); }
.fp-map-states {
    fill: var(--fp-surface);
    stroke: var(--fp-border);
    stroke-width: .8;
    transition: fill var(--fp-transition);
}

/* osm provider: Leaflet manages its own drag/zoom, so it needs normal touch/select behavior
   back — the atlas provider's touch-action: none / user-select: none above is for its own
   hand-rolled pointer handling and would otherwise fight Leaflet's. */
#fpMapSvg.leaflet-container { touch-action: unset; user-select: auto; }
.fp-map-stage:has(.leaflet-container) { cursor: unset; touch-action: unset; user-select: auto; }

/* Legend, bottom-left, always tells you what a color means without opening the toolbar. */
.fp-map-legend {
    position: absolute;
    left: .65rem;
    bottom: .65rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem .65rem;
    background: color-mix(in srgb, var(--fp-surface) 88%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    box-shadow: var(--fp-shadow);
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
    pointer-events: none;
}
.fp-map-legend-row { display: flex; align-items: center; gap: .4rem; opacity: .55; transition: opacity var(--fp-transition); }
.fp-map-legend-row.is-active { opacity: 1; color: var(--fp-text); }

.fp-map-marker { cursor: pointer; }
.fp-map-marker circle.fp-marker-halo { opacity: .16; transition: r var(--fp-transition); }
.fp-map-marker circle.fp-marker-core {
    stroke: var(--fp-surface);
    stroke-width: 1.5;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
    transition: r var(--fp-transition);
}
.fp-map-marker:hover circle.fp-marker-core { stroke-width: 2.5; }
.fp-map-marker:focus-visible circle.fp-marker-core { outline: none; stroke: var(--fp-accent-text); stroke-width: 3; }
.fp-marker-trucks circle { fill: var(--fp-accent); }
.fp-marker-drivers circle { fill: var(--fp-map-drivers); }
.fp-marker-pickups circle { fill: var(--fp-warning-solid); }
.fp-marker-deliveries circle { fill: var(--fp-success-solid); }
.fp-marker-completed circle { fill: var(--fp-text-muted); }

/* A live truck's halo breathes gently so it reads as "moving", not just "here" — off entirely
   for anyone who asked the OS to reduce motion. */
.fp-marker-trucks.is-live circle.fp-marker-halo { animation: fp-map-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .fp-marker-trucks.is-live circle.fp-marker-halo { animation: none; }
}
@keyframes fp-map-pulse {
    0%, 100% { opacity: .16; r: var(--fp-marker-r, 6); }
    50% { opacity: .32; r: calc(var(--fp-marker-r, 6) * 1.8); }
}

/* osm provider: the same marker classes, but as a Leaflet divIcon's plain HTML (span, not
   SVG circle) — Leaflet positions/sizes the icon box itself, these just fill it. */
.fp-map-marker .fp-marker-halo,
.fp-map-marker .fp-marker-core { position: absolute; inset: 0; border-radius: 50%; }
.fp-map-marker .fp-marker-halo { opacity: .16; }
.fp-map-marker .fp-marker-core {
    box-shadow: 0 0 0 1.5px var(--fp-surface), 0 1px 2px rgba(0, 0, 0, .25);
    transition: box-shadow var(--fp-transition);
}
.fp-map-marker:hover .fp-marker-core { box-shadow: 0 0 0 2.5px var(--fp-surface), 0 1px 3px rgba(0, 0, 0, .3); }
.fp-map-marker .fp-map-cluster-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-accent-contrast);
    font-weight: 700;
    font-size: 11px;
    pointer-events: none;
}
.fp-marker-trucks .fp-marker-halo, .fp-marker-trucks .fp-marker-core { background: var(--fp-accent); }
.fp-marker-drivers .fp-marker-halo, .fp-marker-drivers .fp-marker-core { background: var(--fp-map-drivers); }
.fp-marker-pickups .fp-marker-halo, .fp-marker-pickups .fp-marker-core { background: var(--fp-warning-solid); }
.fp-marker-deliveries .fp-marker-halo, .fp-marker-deliveries .fp-marker-core { background: var(--fp-success-solid); }
.fp-marker-completed .fp-marker-halo, .fp-marker-completed .fp-marker-core { background: var(--fp-text-muted); }
.fp-marker-trucks.is-live .fp-marker-halo { animation: fp-map-pulse-html 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .fp-marker-trucks.is-live .fp-marker-halo { animation: none; }
}
@keyframes fp-map-pulse-html {
    0%, 100% { opacity: .16; transform: scale(1); }
    50% { opacity: .32; transform: scale(1.8); }
}

/* Leaflet's own popup chrome, themed to match the app instead of Leaflet's default white-only
   box — this app supports a dark theme and the default would look out of place/illegible there. */
.leaflet-popup-content-wrapper {
    background: var(--fp-surface);
    color: var(--fp-text);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-lg);
}
.leaflet-popup-content { margin: .35rem; }
.leaflet-popup-tip { background: var(--fp-surface); border: 1px solid var(--fp-border); box-shadow: none; }
.leaflet-popup-close-button { color: var(--fp-text-muted); }
.leaflet-popup-close-button:hover { color: var(--fp-text); }
.leaflet-container a.fp-map-popup-item { color: var(--fp-text); }
.leaflet-control-attribution {
    background: color-mix(in srgb, var(--fp-surface) 85%, transparent);
    color: var(--fp-text-muted);
}
.leaflet-control-attribution a { color: var(--fp-text-muted); }

.fp-map-cluster-label {
    fill: var(--fp-accent-contrast);
    text-anchor: middle;
    dominant-baseline: central;
    font-weight: 700;
    pointer-events: none;
}
.fp-map-popup {
    position: absolute;
    z-index: 20;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-lg);
    padding: .35rem;
    width: 280px;
    max-width: calc(100% - 1.2rem);
    transform-origin: top left;
    animation: fp-map-popup-in 140ms cubic-bezier(.2, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .fp-map-popup { animation: none; }
}
@keyframes fp-map-popup-in {
    from { opacity: 0; transform: scale(.96) translateY(2px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.fp-map-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .15rem .35rem .3rem;
    border-bottom: 1px solid var(--fp-border);
    margin-bottom: .25rem;
}
.fp-map-popup-count { font-size: var(--fp-text-xs); color: var(--fp-text-muted); }
.fp-map-popup-close {
    border: none;
    background: transparent;
    color: var(--fp-text-muted);
    line-height: 1;
    font-size: var(--fp-text-lg);
    cursor: pointer;
    padding: 0 .2rem;
    border-radius: var(--fp-radius-xs);
}
.fp-map-popup-close:hover { background: var(--fp-surface-2); color: var(--fp-text); }
.fp-map-popup-item {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    padding: .45rem .55rem;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-text);
    font-size: var(--fp-text-base);
    line-height: 1.25;
    text-decoration: none;
    transition: background var(--fp-transition);
}
.fp-map-popup-item:hover { background: var(--fp-surface-2); }
.fp-map-popup-item .fp-map-dot { margin-top: .3rem; flex-shrink: 0; }
.fp-map-popup-item small { color: var(--fp-text-muted); }
.fp-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-text-muted);
    font-size: var(--fp-text-md);
    pointer-events: none;
}

/* Route summary */
.fp-route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.fp-route-preview { border-radius: var(--fp-radius); background: var(--fp-surface-2); overflow: hidden; }
.fp-route-preview svg { display: block; width: 100%; height: 150px; }
.fp-cost-rows { font-size: var(--fp-text-base); }
.fp-cost-rows div { display: flex; justify-content: space-between; padding: .28rem 0; border-bottom: 1px dashed var(--fp-border); }
.fp-cost-rows div:last-child { border-bottom: 0; font-weight: 700; color: var(--fp-heading); }

/* ---------- Dispatch board ---------- */
.fp-kpi-row .fp-kpi {
    padding: .8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    height: 100%;
}
.fp-kpi-value { font-size: var(--fp-text-xl); font-weight: 750; color: var(--fp-heading); line-height: 1.2; }

.fp-chart-sm { height: 190px; }
.fp-util-block .fp-progress { margin-top: .35rem; }

.fp-dispatch-toolbar {
    position: sticky;
    top: 64px;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .65rem .8rem;
    align-items: center;
    backdrop-filter: blur(8px);
}
.fp-dispatch-toolbar .form-select, .fp-dispatch-toolbar .form-control { width: auto; min-width: 0; }
.fp-dispatch-toolbar .fp-toolbar-search { position: relative; flex: 1 1 220px; }
.fp-toolbar-search i {
    position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
    color: var(--fp-text-muted); font-size: var(--fp-text-sm); pointer-events: none;
}
.fp-toolbar-search .form-control { width: 100%; padding-left: 1.9rem; }
#fltOriginState, #fltDestState { width: 76px; }
#fltMinScore { width: 92px; }
#fltDriver, #fltTruck, #fltBroker { width: 110px; }

.fp-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    padding: .7rem .85rem;
}
.fp-list-toolbar .fp-toolbar-search { position: relative; flex: 1 1 220px; }
.fp-list-toolbar .form-select { width: auto; min-width: 10rem; }

.fp-toolbar-more {
    position: relative;
}
.fp-toolbar-more > summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--fp-text-sm);
    font-weight: 600;
    color: var(--fp-text-muted);
    padding: .35rem .55rem;
    border-radius: var(--fp-radius-sm);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface);
}
.fp-toolbar-more > summary::-webkit-details-marker { display: none; }
.fp-toolbar-more[open] > summary { color: var(--fp-accent-text); border-color: color-mix(in srgb, var(--fp-accent) 35%, var(--fp-border)); }
.fp-toolbar-more-body {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: min(28rem, 90vw);
    padding: .7rem;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-lg);
}

.fp-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.fp-stat-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--fp-transition), transform var(--fp-transition);
}
.fp-stat-link:hover {
    color: inherit;
    border-color: color-mix(in srgb, var(--fp-accent) 40%, var(--fp-border));
    transform: translateY(-1px);
}

.fp-dash-actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.fp-dash-action {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem .8rem;
    border-radius: var(--fp-radius);
    border: 1px solid var(--fp-border);
    background: var(--fp-surface-2);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--fp-transition), background var(--fp-transition);
}
.fp-dash-action:hover {
    color: inherit;
    border-color: color-mix(in srgb, var(--fp-accent) 40%, var(--fp-border));
    background: color-mix(in srgb, var(--fp-accent-soft) 55%, var(--fp-surface-2));
}
.fp-dash-action i {
    font-size: 1.15rem;
    color: var(--fp-accent-text);
    margin-top: .1rem;
}
.fp-dash-action strong { display: block; color: var(--fp-heading); font-weight: 650; }
.fp-dash-action .fp-muted { display: block; font-size: var(--fp-text-sm); }

.fp-dash-snapshot {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
}
.fp-dash-snapshot li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--fp-border);
    font-size: var(--fp-text-sm);
}
.fp-dash-snapshot li:last-child { border-bottom: 0; }
.fp-dash-snapshot span { color: var(--fp-text-muted); }
.fp-dash-snapshot strong { color: var(--fp-heading); font-variant-numeric: tabular-nums; }

.fp-row-link { cursor: pointer; }
.fp-row-link:hover { background: color-mix(in srgb, var(--fp-accent-soft) 45%, transparent); }
.fp-row-link:focus-visible { outline: none; box-shadow: inset var(--fp-focus-ring-strong); }

.fp-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1rem 0 .25rem;
}
.fp-filter-chips .btn.active {
    background: var(--fp-accent);
    color: var(--fp-accent-contrast, #fff);
    border-color: transparent;
}
.fp-kpi-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .12s ease, box-shadow .12s ease;
}
.fp-kpi-link:hover {
    transform: translateY(-1px);
    color: inherit;
}


.fp-board-col { display: flex; flex-direction: column; min-height: 260px; max-height: 640px; }

/* Dispatch board: horizontal snap scroll on small screens (mirror .fp-cc-board) */
@media (max-width: 767.98px) {
    #fpBoardColumns {
        display: flex;
        flex-wrap: nowrap;
        gap: .7rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .35rem;
        margin-left: 0;
        margin-right: 0;
    }
    #fpBoardColumns > [class*="col-"] {
        flex: 0 0 auto;
        width: min(82vw, 22rem);
        min-width: 200px;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        scroll-snap-align: start;
    }
    #fpBoardColumns .fp-board-col { max-height: min(70vh, 640px); }
}

#fpBoard.is-refreshing,
#fpCcBoardHost.is-refreshing,
#fpPlanBoard.is-refreshing {
    position: relative;
    opacity: .72;
    pointer-events: none;
    transition: opacity .15s ease;
}
#fpBoard.is-refreshing::after,
#fpCcBoardHost.is-refreshing::after,
#fpPlanBoard.is-refreshing::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--fp-radius);
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 20%,
        color-mix(in srgb, var(--fp-border) 50%, transparent) 40%,
        transparent 60%);
    background-size: 400% 100%;
    animation: fp-shimmer 1.4s ease-in-out infinite;
}
#fpBoard.is-refreshing.is-skeleton .fp-board-card,
#fpCcBoardHost.is-refreshing.is-skeleton .fp-cc-card {
    background: linear-gradient(90deg,
        var(--fp-surface-2) 25%,
        var(--fp-border) 37%,
        var(--fp-surface-2) 63%);
    background-size: 400% 100%;
    animation: fp-shimmer 1.4s ease-in-out infinite;
    border-color: transparent;
    color: transparent;
    box-shadow: none;
}
#fpBoard.is-refreshing.is-skeleton .fp-board-card *,
#fpCcBoardHost.is-refreshing.is-skeleton .fp-cc-card * {
    visibility: hidden;
}
.fp-board-head {
    display: flex;
    align-items: center;
    font-size: var(--fp-text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 650;
    color: var(--fp-text-muted);
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--fp-border);
}
.fp-board-list { padding: .75rem; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.fp-board-card {
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    background: var(--fp-surface-2);
    padding: .75rem .85rem;
    transition: border-color .12s ease, transform .12s ease;
}
.fp-board-card:hover { border-color: var(--fp-accent); }
.fp-board-lane { font-size: var(--fp-text-sm); color: var(--fp-text); margin-top: .15rem; }
.fp-board-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
    margin-top: .35rem;
}
.fp-board-meta i { margin-right: .2rem; }
.fp-doc-row {
    display: flex;
    gap: .25rem;
    margin-top: .45rem;
}
.fp-doc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .1rem .35rem;
    border-radius: .3rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    border: 1px solid transparent;
}
.fp-doc-chip.is-ok {
    color: var(--fp-success);
    background: color-mix(in srgb, var(--fp-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--fp-success) 28%, transparent);
}
.fp-doc-chip.is-missing {
    color: var(--fp-danger);
    background: color-mix(in srgb, var(--fp-danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--fp-danger) 24%, transparent);
}
.fp-board-empty { color: var(--fp-text-muted); font-size: var(--fp-text-base); text-align: center; padding: 1.4rem .5rem; }

.fp-score-chip {
    min-width: 34px;
    height: 26px;
    border-radius: var(--fp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.fp-score-good { background: var(--fp-success-soft); color: var(--fp-success); }
.fp-score-mid { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-score-low { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-score-none { background: var(--fp-surface); color: var(--fp-text-muted); }

.fp-completed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    padding: .35rem .25rem .8rem;
    border-bottom: 1px solid var(--fp-border);
    margin-bottom: .35rem;
}

/* Error toast */
.fp-toast {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 2000;
    background: var(--fp-danger-soft);
    color: var(--fp-danger);
    border: 1px solid var(--fp-danger);
    border-radius: var(--fp-radius);
    padding: .7rem 1rem;
    font-size: var(--fp-text-base);
    font-weight: 550;
    max-width: 360px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}
.fp-toast.show { opacity: 1; transform: translateY(0); }

/* Trip offcanvas */
.fp-offcanvas { background: var(--fp-surface); color: var(--fp-text); border-left: 1px solid var(--fp-border); width: 420px; }
.fp-offcanvas .btn-close { filter: none; }
[data-theme="dark"] .fp-offcanvas .btn-close { filter: invert(1) grayscale(100%); }

/* Bootstrap modals (Assign load, etc.) — same tokens as offcanvas */
.modal-content {
    background: var(--fp-surface);
    color: var(--fp-text);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-lg);
}
.modal-header {
    border-bottom-color: var(--fp-border);
    color: var(--fp-heading);
}
.modal-header .modal-title,
.modal-header .fp-card-title { color: var(--fp-heading); }
.modal-body { color: var(--fp-text); }
.modal-footer {
    border-top-color: var(--fp-border);
    background: transparent;
}
.modal-header .btn-close,
.modal-content .btn-close { filter: none; }
[data-theme="dark"] .modal-header .btn-close,
[data-theme="dark"] .modal-content .btn-close {
    filter: invert(1) grayscale(100%);
}
.fp-timeline { position: relative; display: flex; flex-direction: column; gap: .9rem; padding-left: .25rem; }
.fp-timeline-item { display: flex; gap: .75rem; position: relative; }
.fp-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: -14px;
    width: 2px;
    background: var(--fp-border);
}
.fp-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fp-accent-soft);
    color: var(--fp-accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-base);
    flex-shrink: 0;
    z-index: 1;
}
.fp-timeline-desc { font-size: var(--fp-text-base); color: var(--fp-heading); font-weight: 550; }
.fp-timeline-meta { font-size: var(--fp-text-xs); color: var(--fp-text-muted); margin-top: .1rem; }
.fp-note-item {
    background: var(--fp-surface-2);
    border-radius: var(--fp-radius);
    padding: .6rem .75rem;
    font-size: var(--fp-text-base);
    margin-bottom: .55rem;
}

@media (max-width: 991.98px) {
    .fp-dispatch-toolbar { position: static; }
}

/* ---------- Audit log ---------- */
.fp-audit-changes { max-width: 360px; }
.fp-audit-changes code {
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
    background: var(--fp-surface-2);
    border-radius: var(--fp-radius-xs);
    padding: .15rem .4rem;
    word-break: break-all;
}

/* ---------- Recent recommendations ---------- */
.fp-rec-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; position: relative; z-index: 1; }
.fp-rec-list li { display: flex; align-items: center; gap: .75rem; }
.fp-rec-score {
    width: 38px;
    height: 38px;
    border-radius: var(--fp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fp-text-md);
    flex-shrink: 0;
}
.fp-rec-score.fp-badge-success { background: var(--fp-success-soft); color: var(--fp-success); }
.fp-rec-score.fp-badge-warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-rec-score.fp-badge-danger { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-rec-lane { font-weight: 550; color: var(--fp-heading); font-size: var(--fp-text-md); }

/* ---------- Load evaluation ---------- */
.fp-eval-top { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.fp-score {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--fp-border);
    flex-shrink: 0;
}
.fp-score-value { font-size: var(--fp-text-3xl); font-weight: 750; line-height: 1; color: var(--fp-heading); }
.fp-score-max { font-size: var(--fp-text-2xs); color: var(--fp-text-muted); }
.fp-score.fp-decision-accept { border-color: var(--fp-success); }
.fp-score.fp-decision-negotiate { border-color: var(--fp-warning); }
.fp-score.fp-decision-reject { border-color: var(--fp-danger); }
.fp-decision-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--fp-radius-pill);
    padding: .35rem .9rem;
    font-weight: 650;
    font-size: var(--fp-text-md);
}
.fp-decision-badge.fp-decision-accept { background: var(--fp-success-soft); color: var(--fp-success); }
.fp-decision-badge.fp-decision-negotiate { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-decision-badge.fp-decision-reject { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-eval-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .9rem;
    padding: 1rem 0;
    border-top: 1px solid var(--fp-border);
    border-bottom: 1px solid var(--fp-border);
}
.fp-eval-num { font-size: var(--fp-text-xl); font-weight: 700; color: var(--fp-heading); }
.text-success-fp { color: var(--fp-success) !important; }
.text-danger-fp { color: var(--fp-danger) !important; }
.fp-eval-reasoning { margin-top: 1.1rem; background: var(--fp-surface-2); border-radius: var(--fp-radius); padding: 1rem 1.1rem; font-size: var(--fp-text-md); }

/* ---------- Responsive sidebar ---------- */
.fp-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .fp-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--fp-shadow-lg);
    }
    .fp-sidebar.open { transform: translateX(0); }
    .fp-sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 12, 16, .45);
        z-index: 1040;
    }
    .fp-content { padding: 1.4rem 1rem 2.5rem; }
    .fp-topbar { padding: .7rem 1rem; }
}


/* ==========================================================================
   Command Center (Sprint 10)
   A control-room surface: dense, dark-friendly, readable at a glance.
   ========================================================================== */

.fp-link { color: var(--fp-accent-text); text-decoration: none; font-weight: 600; }
.fp-link:hover { color: var(--fp-accent-hover); text-decoration: underline; }
.fp-badge-info { background: var(--fp-info-soft); color: var(--fp-info); }
.fp-text-danger { color: var(--fp-danger); }
.fp-row-danger > td { background: var(--fp-danger-soft); }
/* Success toast — must override the base error palette, not merely add a stripe, or a positive
   confirmation renders in red and reads as a failure. */
.fp-toast-ok {
    background: var(--fp-success-soft);
    color: var(--fp-success);
    border: 1px solid var(--fp-success);
    border-left: 3px solid var(--fp-success);
}
.is-bad { color: var(--fp-danger) !important; }
.fp-ar-blocked td:first-child { box-shadow: inset 3px 0 0 var(--fp-warning, #c58b00); }
.fp-ar-overdue-late td:first-child { box-shadow: inset 3px 0 0 var(--fp-danger); }
.is-warn { color: var(--fp-warning) !important; }
.is-good { color: var(--fp-success) !important; }

/* --- Widget 1: fleet status banner --- */
.fp-cc-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1rem 1.35rem;
    margin-bottom: .75rem;
    border-left: 4px solid var(--fp-cc-tone, var(--fp-border));
}
.fp-cc-status-success { --fp-cc-tone: var(--fp-success); }
.fp-cc-status-info    { --fp-cc-tone: var(--fp-accent); }
.fp-cc-status-warning { --fp-cc-tone: var(--fp-warning); }
.fp-cc-status-danger  { --fp-cc-tone: var(--fp-danger); }
.fp-cc-status-muted   { --fp-cc-tone: var(--fp-text-muted); }

.fp-cc-status-main { display: flex; align-items: center; gap: .9rem; }
.fp-cc-status-pulse {
    width: 12px;
    height: 12px;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-cc-tone, var(--fp-text-muted));
    animation: fp-cc-pulse 2.4s ease-out infinite;
    flex: none;
}
@keyframes fp-cc-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fp-cc-tone) 55%, transparent); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .fp-cc-status-pulse { animation: none; }
}
.fp-cc-status-label {
    display: block;
    font-size: var(--fp-text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp-cc-tone, var(--fp-text-muted));
}
.fp-cc-status-headline { margin: .15rem 0 0; color: var(--fp-heading); font-weight: 600; }

.fp-cc-status-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.fp-cc-status-stats dt { font-size: var(--fp-text-xs); color: var(--fp-text-muted); font-weight: 500; }
.fp-cc-status-stats dd { margin: 0; font-size: var(--fp-text-xl); font-weight: 700; color: var(--fp-heading); }
/* The number was the whole link (a ~10x25px target); the link now covers its label too. */
.fp-cc-status-stats > div { position: relative; }
.fp-cc-status-stats dd a::after { content: ""; position: absolute; inset: -.35rem -.5rem; border-radius: var(--fp-radius-sm); }
.fp-cc-status-stats dd a:focus-visible { outline: none; }
.fp-cc-status-stats dd a:focus-visible::after { box-shadow: var(--fp-focus-ring-strong); }
/* A zero is "nothing yet", not a result: step it back so a real number (or a bad one) leads. */
.fp-kpi-value.is-zero { color: var(--fp-text-muted); font-weight: 600; }

/* --- Shared widget chrome --- */
.fp-cc-grid { margin-top: .75rem; }
.fp-cc-widget { padding: 1rem 1.1rem; margin-bottom: .85rem; }
.fp-cc-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .8rem;
}
.fp-cc-widget-title { font-weight: 650; color: var(--fp-heading); }
.fp-cc-widget-note { margin: -.4rem 0 .7rem; }
.fp-cc-count {
    min-width: 1.6rem;
    padding: .1rem .45rem;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-surface-2);
    color: var(--fp-text-muted);
    font-size: var(--fp-text-xs);
    font-weight: 700;
    text-align: center;
}
.fp-cc-count.is-critical { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-cc-empty { color: var(--fp-text-muted); font-size: var(--fp-text-md); margin: .4rem 0 .2rem; }
.fp-cc-map-stage { min-height: 380px; }

/* --- Widget 4: kanban board --- */
.fp-cc-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: .7rem;
    overflow-x: auto;
    padding-bottom: .35rem;
}
.fp-cc-column {
    background: var(--fp-surface-2);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: .6rem;
    min-height: 140px;
    transition: border-color .15s ease, background .15s ease;
}
.fp-cc-column.is-drop-target { border-color: var(--fp-accent); background: var(--fp-accent-soft); }
.fp-cc-column.is-busy { opacity: .6; pointer-events: none; }
.fp-cc-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .55rem;
}
.fp-cc-column-title { font-size: var(--fp-text-sm); font-weight: 700; color: var(--fp-heading); }
.fp-cc-column-body { display: flex; flex-direction: column; gap: .5rem; }

.fp-cc-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    padding: .6rem .7rem;
    box-shadow: var(--fp-shadow);
}
.fp-cc-card[draggable="true"] { cursor: grab; }
.fp-cc-card[draggable="true"]:active { cursor: grabbing; }
.fp-cc-card.is-dragging { opacity: .45; }
.fp-cc-card.is-delayed { border-left: 3px solid var(--fp-danger); }
.fp-cc-card-top { display: flex; justify-content: space-between; gap: .5rem; }
.fp-cc-card-ref { font-weight: 700; color: var(--fp-heading); font-size: var(--fp-text-base); }
.fp-cc-card-rate { font-weight: 700; color: var(--fp-success); font-size: var(--fp-text-base); }
.fp-cc-card-lane { margin: .3rem 0; font-size: var(--fp-text-sm); color: var(--fp-text); }
.fp-cc-arrow { color: var(--fp-text-muted); font-size: var(--fp-text-2xs); }
.fp-cc-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
}
.fp-cc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .45rem;
    flex-wrap: wrap;
}
.fp-cc-card-actions {
    display: flex;
    gap: .25rem;
    margin-top: .5rem;
}
.fp-cc-eta { font-size: var(--fp-text-xs); color: var(--fp-text-muted); }
.fp-cc-eta.is-late { color: var(--fp-danger); font-weight: 600; }

/* --- Widgets 6 and 7: alerts and recommendations --- */
.fp-cc-alert-list, .fp-cc-rec-list, .fp-cc-list, .fp-cc-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.fp-cc-alert-list, .fp-cc-rec-list, .fp-cc-timeline { max-height: 26rem; overflow-y: auto; }

.fp-cc-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: var(--fp-radius-sm);
    background: var(--fp-surface-2);
    border-left: 3px solid var(--fp-cc-tone, var(--fp-border));
}
.fp-cc-alert-danger  { --fp-cc-tone: var(--fp-danger); background: var(--fp-danger-soft); }
.fp-cc-alert-warning { --fp-cc-tone: var(--fp-warning); background: var(--fp-warning-soft); }
.fp-cc-alert-info    { --fp-cc-tone: var(--fp-accent); }
.fp-cc-alert > .bi { color: var(--fp-cc-tone); margin-top: .15rem; }
.fp-cc-alert-body { flex: 1; min-width: 0; }
.fp-cc-alert-title { margin: 0; font-weight: 650; font-size: var(--fp-text-base); color: var(--fp-heading); }
.fp-cc-alert-message { margin: .15rem 0 0; font-size: var(--fp-text-sm); color: var(--fp-text-muted); }

.fp-cc-rec {
    padding: .7rem .75rem;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-sm);
    background: var(--fp-surface-2);
}
.fp-cc-rec-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fp-cc-score { font-weight: 800; font-size: var(--fp-text-lg); color: var(--fp-accent-text); }
.fp-cc-rec-lane { margin: .35rem 0 .2rem; font-weight: 600; font-size: var(--fp-text-sm); color: var(--fp-heading); }
.fp-cc-rec-reason { margin: 0; font-size: var(--fp-text-sm); color: var(--fp-text-muted); line-height: 1.45; }
.fp-cc-rec-profit { margin: .35rem 0 0; font-size: var(--fp-text-sm); font-weight: 650; color: var(--fp-success); }
.fp-cc-rec-actions { display: flex; gap: .4rem; margin-top: .55rem; }

/* --- Widgets 8, 9, 10: lists and timeline --- */
.fp-cc-list { max-height: 20rem; overflow-y: auto; }
.fp-cc-list > li { padding: .45rem 0; border-bottom: 1px solid var(--fp-border); }
.fp-cc-list > li:last-child { border-bottom: none; }

.fp-cc-timeline > li { display: flex; gap: .6rem; align-items: flex-start; }
.fp-cc-timeline > li > .bi {
    color: var(--fp-text-muted);
    font-size: var(--fp-text-sm);
    margin-top: .2rem;
    flex: none;
}
.fp-cc-timeline-text { margin: 0; font-size: var(--fp-text-sm); color: var(--fp-text); }

/* --- Widget 11: quick actions --- */
.fp-cc-fab { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1030; }
.fp-cc-fab-button {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-accent);
    color: var(--fp-accent-contrast);
    font-size: var(--fp-text-xl);
    box-shadow: var(--fp-shadow-lg);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.fp-cc-fab-button:hover { background: var(--fp-accent-hover); transform: translateY(-2px); }
.fp-cc-fab.is-open .fp-cc-fab-button { transform: rotate(15deg); }
.fp-cc-fab-menu {
    position: absolute;
    right: 0;
    bottom: 62px;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .4rem;
    min-width: 190px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-lg);
}
.fp-cc-fab-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .6rem;
    border-radius: var(--fp-radius-sm);
    color: var(--fp-text);
    text-decoration: none;
    font-size: var(--fp-text-base);
}
.fp-cc-fab-item:hover { background: var(--fp-surface-2); color: var(--fp-heading); }

.fp-cc-live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .6rem;
    font-size: var(--fp-text-base);
    color: var(--fp-text-muted);
    vertical-align: middle;
}
.fp-cc-live-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--fp-text-muted);
}
.fp-cc-live.is-live { color: var(--fp-success); }
.fp-cc-live.is-live .fp-cc-live-dot {
    background: var(--fp-success);
    box-shadow: 0 0 0 0 var(--fp-success);
    animation: fp-cc-live-pulse 1.6s ease-out infinite;
}
.fp-cc-live.is-offline { color: var(--fp-warning); }
.fp-cc-live.is-offline .fp-cc-live-dot { background: var(--fp-warning); }
@keyframes fp-cc-live-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fp-success) 55%, transparent); }
    70% { box-shadow: 0 0 0 .45rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.fp-cc-trend-ranges { display: flex; gap: .25rem; }
.fp-cc-trend-ranges .is-active {
    background: var(--fp-surface-2);
    color: var(--fp-heading);
    font-weight: 600;
}

/* Document Intelligence */
.fp-doc-filters { margin-top: .5rem; }
.fp-doc-checklist { list-style: none; padding: 0; margin: 0 0 .75rem; }
.fp-doc-checklist li {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem 0; border-bottom: 1px solid var(--fp-border);
    font-size: var(--fp-text-md);
}
.fp-doc-checklist li:last-child { border-bottom: 0; }
.fp-doc-file-list { list-style: none; padding: 0; margin: 0; font-size: var(--fp-text-base); }
.fp-doc-file-list li {
    display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
    padding: .35rem 0; color: var(--fp-text);
    border-bottom: 1px solid var(--fp-border);
}
.fp-doc-file-list li:last-child { border-bottom: 0; }
.fp-doc-file-list .fp-link { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; flex: 1; }
.fp-doc-file-actions { display: inline-flex; gap: .15rem; margin-left: auto; }
.fp-doc-widget { margin-top: .85rem; position: sticky; top: 1rem; }
.fp-doc-widget-upload {
    border-top: 1px solid var(--fp-border);
    padding-top: .85rem;
}
.fp-doc-widget-upload .form-label { font-size: var(--fp-text-sm); }
.fp-doc-drop {
    border: 1px dashed var(--fp-border);
    border-radius: var(--fp-radius);
    padding: .55rem .65rem;
    background: var(--fp-bg, transparent);
    transition: border-color .15s ease, background .15s ease;
}
.fp-doc-drop.is-drag {
    border-color: var(--fp-accent, #0d6efd);
    background: color-mix(in srgb, var(--fp-accent, #0d6efd) 8%, transparent);
}
.fp-doc-drop .form-control { margin-bottom: .35rem; }
.fp-doc-modal {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
}
.fp-doc-modal[hidden] { display: none; }
.fp-doc-modal-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.45);
}
.fp-doc-modal-panel {
    position: relative; z-index: 1;
    width: min(32rem, calc(100vw - 2rem));
    background: var(--fp-surface); border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius); padding: 1.1rem 1.25rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.fp-doc-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .85rem;
}
.fp-doc-modal-head h3 { margin: 0; font-size: var(--fp-text-lg); }
.fp-doc-drop {
    border: 2px dashed var(--fp-border); border-radius: var(--fp-radius-sm);
    padding: 1.4rem 1rem; text-align: center; margin-bottom: 1rem;
    color: var(--fp-text-muted); position: relative;
}
.fp-doc-drop.is-drag { border-color: var(--fp-accent); background: var(--fp-surface-2); }
.fp-doc-drop i { font-size: var(--fp-text-2xl); display: block; margin-bottom: .35rem; }
.fp-doc-drop input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

@media (max-width: 767.98px) {
    .fp-cc-status { flex-direction: column; align-items: flex-start; }
    .fp-cc-status-stats { gap: 1rem; }
    .fp-cc-board { grid-auto-columns: minmax(200px, 82vw); }
    .fp-cc-fab { right: 1rem; bottom: 1rem; }
}

/* ==========================================================================
   UI consolidation sprint — shared primitives + Sprint 17-20 screens.

   .fp-modal is the generic dialog these screens share. .fp-doc-modal above
   predates it and is left alone; migrating a verified page is risk without
   need, but new screens use the shared one so this does not fork further.
   ========================================================================== */

/* ---- shared primitives ---- */
.fp-strong { font-weight: 600; color: var(--fp-heading); }
.fp-kpi-sub { font-size: var(--fp-text-sm); font-weight: 500; color: var(--fp-text-muted); margin-left: .25rem; }
.fp-card-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; margin-bottom: .85rem;
}
.fp-card-head .fp-card-title { margin: 0; }

.fp-modal {
    position: fixed; inset: 0; z-index: 1080;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.45); padding: 1rem;
}
.fp-modal[hidden] { display: none; }
.fp-modal-dialog {
    width: min(34rem, 100%); max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column;
    background: var(--fp-surface); border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius); box-shadow: var(--fp-shadow-lg);
}
.fp-modal-lg { width: min(46rem, 100%); }
.fp-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--fp-border);
}
.fp-modal-body { padding: 1.25rem; overflow-y: auto; }
.fp-modal-foot {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .85rem 1.25rem; border-top: 1px solid var(--fp-border);
}

/* ---- automation ---- */
.fp-auto-approvals { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.fp-auto-approval {
    border: 1px solid var(--fp-border); border-left: 3px solid var(--fp-warning);
    border-radius: var(--fp-radius); padding: .75rem .9rem; background: var(--fp-surface-2);
}
.fp-auto-approval.is-expiring { border-left-color: var(--fp-danger); }
.fp-auto-approval-main { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.fp-auto-approval-rule { font-weight: 600; color: var(--fp-heading); }
.fp-auto-approval-trigger { margin: .35rem 0 .15rem; font-size: var(--fp-text-md); }
.fp-auto-approval-meta { margin: 0 0 .6rem; font-size: var(--fp-text-sm); color: var(--fp-text-muted); }
.fp-auto-approval-actions { display: flex; gap: .5rem; }

.fp-auto-clause {
    display: grid; grid-template-columns: 1fr 1fr 1fr auto;
    gap: .5rem; align-items: center; margin-bottom: .5rem;
}
.fp-auto-conditions {
    border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: .85rem;
}
.fp-auto-conditions legend { float: none; width: auto; padding: 0 .35rem; font-size: var(--fp-text-md); }
.fp-auto-actions { display: grid; gap: .5rem; padding: .5rem 0; }
.fp-auto-action {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .5rem .75rem; border-radius: var(--fp-radius-sm); background: var(--fp-surface-2);
}
.fp-auto-action.is-failed { border-left: 3px solid var(--fp-danger); }

/* ---- driver (mobile-first) ---- */
.fp-driver { max-width: 34rem; margin: 0 auto; }
.fp-driver-stop { display: flex; flex-direction: column; gap: .1rem; margin: 0 0 1rem; padding: .75rem .9rem; border-radius: var(--fp-radius); background: var(--fp-surface-2); }
.fp-driver-stop-kicker { font-size: var(--fp-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--fp-text-muted); font-weight: 600; }
.fp-driver-stop strong { color: var(--fp-heading); }
.fp-driver-load {
    border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg);
    padding: 1.1rem; background: var(--fp-surface); margin-bottom: 1rem;
}
.fp-lane { font-size: var(--fp-text-xl); font-weight: 600; color: var(--fp-heading); }
.fp-lane i { color: var(--fp-text-muted); margin: 0 .4rem; }
.fp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .9rem 0; }
.fp-detail-grid dt { font-size: var(--fp-text-xs); color: var(--fp-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.fp-detail-grid dd { margin: 0; font-weight: 600; }
/* The primary action is deliberately huge: it is pressed in a moving cab, one-handed. */
.fp-driver-action {
    display: block; width: 100%; padding: 1rem; font-size: var(--fp-text-lg); font-weight: 600;
    border-radius: var(--fp-radius); border: none;
    background: var(--fp-accent); color: var(--fp-accent-contrast);
}
.fp-driver-action:disabled { opacity: .55; }
/* Phones keep :hover on the spot last tapped, and the next step's link often lands right under the
   thumb: without this the plain a:hover colour (dark teal) wins and the label disappears. */
.fp-driver-action:hover, .fp-driver-action:focus { color: var(--fp-accent-contrast); }
.fp-driver-steps { display: flex; gap: .35rem; margin: .9rem 0; }
.fp-driver-step { flex: 1; height: 4px; border-radius: var(--fp-radius-pill); background: var(--fp-border); }
.fp-driver-step.is-done { background: var(--fp-success); }
.fp-driver-step.is-current { background: var(--fp-accent); }

/* ---- portal ---- */
.fp-portal-shipments { display: grid; gap: .75rem; }
.fp-portal-shipment {
    border: 1px solid var(--fp-border); border-radius: var(--fp-radius);
    padding: .9rem 1rem; background: var(--fp-surface); text-decoration: none; color: inherit;
    display: block;
}
.fp-portal-shipment:hover { border-color: var(--fp-accent); }
.fp-portal-progress { height: 6px; border-radius: var(--fp-radius-pill); background: var(--fp-surface-2); margin-top: .6rem; overflow: hidden; }
.fp-portal-progress span { display: block; height: 100%; background: var(--fp-accent); }
.fp-portal-progress.is-delayed span { background: var(--fp-danger); }
.fp-portal-thread { display: grid; gap: .6rem; margin-bottom: 1rem; }
.fp-portal-msg { padding: .6rem .8rem; border-radius: var(--fp-radius); background: var(--fp-surface-2); max-width: 85%; }
.fp-portal-msg.is-mine { margin-left: auto; background: var(--fp-accent-soft); }
.fp-portal-msg-meta { font-size: var(--fp-text-xs); color: var(--fp-text-muted); margin-top: .2rem; }

/* Public tracking page: no app shell, so it carries its own frame. */
.fp-track { max-width: 32rem; margin: 3rem auto; padding: 0 1rem; }
.fp-track-card {
    border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg);
    padding: 1.5rem; background: var(--fp-surface);
}

/* ---- document AI ---- */
.fp-dai-field {
    display: grid; grid-template-columns: 11rem 1fr auto; gap: .6rem; align-items: center;
    padding: .5rem 0; border-bottom: 1px solid var(--fp-border);
}
.fp-dai-field:last-child { border-bottom: none; }
.fp-dai-field-name { font-size: var(--fp-text-base); color: var(--fp-text-muted); }
.fp-dai-confidence { font-size: var(--fp-text-xs); font-variant-numeric: tabular-nums; }
.fp-dai-discrepancy {
    border-left: 3px solid var(--fp-warning); background: var(--fp-warning-soft);
    border-radius: var(--fp-radius-sm); padding: .6rem .8rem; margin-bottom: .5rem;
}
.fp-dai-discrepancy.is-critical { border-left-color: var(--fp-danger); background: var(--fp-danger-soft); }
.fp-dai-values { display: flex; gap: 1.25rem; font-size: var(--fp-text-md); margin-top: .3rem; flex-wrap: wrap; }
.fp-dai-values b { font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
    .fp-auto-clause { grid-template-columns: 1fr 1fr; }
    .fp-dai-field { grid-template-columns: 1fr; gap: .25rem; }
    .fp-detail-grid { grid-template-columns: 1fr; }
}

/* A capability that is switched off, explained in place rather than left as dead controls. */
.fp-callout-warning {
    border-left: 3px solid var(--fp-warning);
    background: var(--fp-warning-soft);
}
.fp-callout-warning .fp-card-title { margin-bottom: .4rem; }

/* Positive confirmation banner (settlement generated, paid, etc.). */
.fp-callout-success {
    border-left: 3px solid var(--fp-success);
    background: var(--fp-success-soft);
    color: var(--fp-success);
}

/* ---------- Skeletons ----------
   A shimmer placed where content will land, sized like the content. Preferred
   over a spinner because it preserves layout — the page does not jump when
   data arrives, which is most of what makes an interface feel "fast". The
   global prefers-reduced-motion rule near the top freezes the shimmer. */
.fp-skeleton {
    background: linear-gradient(90deg,
        var(--fp-surface-2) 25%,
        var(--fp-border) 37%,
        var(--fp-surface-2) 63%);
    background-size: 400% 100%;
    animation: fp-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--fp-radius-xs);
}
@keyframes fp-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.fp-skeleton-text { height: .75rem; margin-bottom: var(--fp-space-2); }
.fp-skeleton-text:last-child { width: 60%; margin-bottom: 0; }
.fp-skeleton-title { height: 1.1rem; width: 40%; margin-bottom: var(--fp-space-3); }
.fp-skeleton-row { height: 2.5rem; margin-bottom: var(--fp-space-2); border-radius: var(--fp-radius-sm); }

/* ---------- Copilot ----------
   Moved out of an inline <style> block on the page itself. Page-local styles
   are how a design system quietly stops being the source of truth: they can't
   be audited, they duplicate tokens, and they drift. The three classes the
   markup referenced but never defined (chat / suggestions / compose) are
   defined here too. */
.fp-copilot-chat { display: flex; flex-direction: column; gap: var(--fp-space-3); }
.fp-copilot-messages {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--fp-space-2);
    padding-right: var(--fp-space-1);
}
.fp-copilot-msg {
    padding: var(--fp-space-3);
    border-radius: var(--fp-radius-sm);
    background: var(--fp-surface-2);
}
.fp-copilot-msg-user { border-left: 3px solid var(--fp-accent); }
.fp-copilot-msg-assistant { border-left: 3px solid var(--fp-success); }
.fp-copilot-msg-role {
    font-size: var(--fp-text-2xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--fp-text-muted);
    margin-bottom: var(--fp-space-1);
}
.fp-copilot-msg-body { white-space: pre-wrap; font-size: var(--fp-text-md); line-height: var(--fp-leading); }

/* Suggestion chips: quiet until hovered, so they read as optional prompts
   rather than competing primary actions. */
.fp-copilot-suggestions { display: flex; flex-wrap: wrap; gap: var(--fp-space-2); }
.fp-copilot-suggestions .btn {
    font-size: var(--fp-text-sm);
    border-radius: var(--fp-radius-pill);
    background: var(--fp-surface-2);
    border: 1px solid var(--fp-border);
    color: var(--fp-text);
}
.fp-copilot-suggestions .btn:hover { border-color: var(--fp-accent); color: var(--fp-accent-text); }

.fp-copilot-compose { display: flex; gap: var(--fp-space-2); align-items: flex-end; }
.fp-copilot-compose .form-control { flex: 1 1 auto; }

/* Partner portal nav — three links, no product chrome. */
.fp-portal-nav {
    display: flex; gap: 1.25rem; justify-content: center;
    padding: .75rem 1rem; border-bottom: 1px solid var(--fp-border);
}
.fp-portal-nav a {
    color: var(--fp-text-muted); text-decoration: none; font-weight: 500; font-size: var(--fp-text-md);
}
.fp-portal-nav a:hover { color: var(--fp-accent-text); }

/* ============================================================
   Focus ring — authoritative, intentionally last
   ============================================================
   Before this, only text inputs and the global search rendered any focus
   style, so a keyboard user tabbing through the sidebar, a table's row
   actions or any button had no idea where they were: a WCAG 2.4.7 failure
   across most of the product.

   It lives at the end of the file, at class-level specificity, because
   Bootstrap's `.form-control:focus { outline: 0 }` (0,2,0) silently strips
   any lower-specificity or earlier ring. A focus indicator that loses a
   cascade fight is the same as no focus indicator.

   :focus-visible (not :focus) means pointer users never see it, so the
   mouse path gains no visual noise. The transparent outline is deliberate:
   invisible normally, but it becomes a real ring under Windows High
   Contrast / forced-colors mode, where box-shadow is discarded. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.fp-icon-btn:focus-visible,
.fp-nav-link:focus-visible,
.fp-gs-input:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--fp-focus-ring-strong);
    border-radius: var(--fp-radius-sm);
}

/* Skip link: present for keyboard users, out of the way for everyone else. */
.fp-skip-link {
    position: absolute;
    left: var(--fp-space-3);
    top: -3rem;
    z-index: 3000;
    background: var(--fp-surface);
    color: var(--fp-accent-text);
    border: 1px solid var(--fp-accent);
    border-radius: var(--fp-radius-sm);
    padding: var(--fp-space-2) var(--fp-space-3);
    font-size: var(--fp-text-base);
    font-weight: 600;
    transition: top var(--fp-transition);
}
.fp-skip-link:focus { top: var(--fp-space-3); }

/* ==========================================================================
   Load Entry — premium dispatcher surface
   ========================================================================== */
.fp-le {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
.fp-form-sticky-pad {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767.98px) {
    .fp-le,
    .fp-form-sticky-pad {
        padding-bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px));
    }
}
.fp-le-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.1rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid transparent;
}
[data-theme="dark"] .fp-le-hero {
    border-bottom-color: color-mix(in srgb, var(--fp-border) 80%, transparent);
}
.fp-le-hero-main { min-width: 0; }
.fp-le-number {
    font-size: clamp(1.75rem, 2.4vw, 2.35rem);
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--fp-heading);
    margin: 0;
}
.fp-le-number span {
    color: var(--fp-text-muted);
    font-weight: 550;
    font-size: .55em;
    letter-spacing: 0;
    margin-right: .15rem;
}
.fp-le-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: .55rem;
}
.fp-le-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .65rem;
    border-radius: var(--fp-radius-pill);
    background: var(--fp-surface-2);
    border: 1px solid var(--fp-border);
    font-size: var(--fp-text-sm);
    font-weight: 600;
    color: var(--fp-heading);
}
.fp-le-chip-status { background: var(--fp-accent-soft); border-color: transparent; color: var(--fp-accent-text); }
[data-theme="dark"] .fp-le-chip {
    background: color-mix(in srgb, var(--fp-surface-2) 88%, var(--fp-accent) 12%);
    border-color: color-mix(in srgb, var(--fp-border) 70%, var(--fp-accent) 30%);
}
[data-theme="dark"] .fp-le-chip-status {
    background: var(--fp-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-accent) 28%, transparent);
}
.fp-le-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (max-width: 575.98px) {
    .fp-le-actions { width: 100%; }
    .fp-le-actions .btn { flex: 1 1 auto; justify-content: center; }
}

.fp-le-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 1099.98px) {
    .fp-le-layout { grid-template-columns: 1fr; }
}

.fp-le-rail {
    position: sticky;
    top: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.fp-le-rail-card {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    padding: 1rem 1.1rem;
    box-shadow: var(--fp-shadow);
}
[data-theme="dark"] .fp-le-rail-card {
    background: linear-gradient(165deg, color-mix(in srgb, var(--fp-surface) 92%, var(--fp-accent) 8%), var(--fp-surface));
    border-color: color-mix(in srgb, var(--fp-border) 75%, var(--fp-accent) 25%);
}
.fp-le-rail-title {
    font-size: var(--fp-text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fp-text-muted);
    font-weight: 650;
    margin: 0 0 .75rem;
}
.fp-le-rail-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .35rem 0;
}
.fp-le-rail-stat + .fp-le-rail-stat { border-top: 1px solid var(--fp-border); }
.fp-le-rail-stat span { color: var(--fp-text-muted); font-size: var(--fp-text-sm); }
.fp-le-rail-stat strong { font-size: var(--fp-text-lg); color: var(--fp-heading); font-variant-numeric: tabular-nums; }
.fp-le-rail-profit.is-neg { color: var(--fp-danger); }
.fp-le-rail-profit.is-pos { color: var(--fp-success); }

.fp-le-block {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-lg);
    padding: 1.15rem 1.25rem 1.35rem;
    margin-bottom: 1rem;
    box-shadow: var(--fp-shadow);
    /* Columns follow the card's own width, not the viewport's. With the sidebar and the
       Economics rail both showing (1100–1400px), a viewport-"lg" screen leaves the form
       ~500px — col-md-2 fields shrank to 54px and "Appointment #" overlapped "Pickup #". */
    container-type: inline-size;
}
/* Defensive: engines that give containers layout containment make each card a stacking
   context, which would slide an open typeahead under the next card. Chrome 2026 doesn't
   (verified), but lifting the focused card — the one with the open menu — costs nothing. */
.fp-le-block:focus-within { position: relative; z-index: 3; }
@container (max-width: 720px) {
    .fp-le-block .row > [class*="col-md-"],
    .fp-le-block .row > [class*="col-lg-"] { flex: 0 0 auto; width: 50%; }
    /* Free-text fields (Description) were already the wide column — keep them full width. */
    .fp-le-block .row > .col-md-8,
    .fp-le-block .row > .col-lg-8 { width: 100%; }
}
@container (max-width: 400px) {
    .fp-le-block .row > [class*="col-md-"],
    .fp-le-block .row > [class*="col-lg-"] { width: 100%; }
}
.fp-le-block-head { margin-bottom: .9rem; }
.fp-le-block-title {
    font-size: var(--fp-text-lg);
    font-weight: 650;
    color: var(--fp-heading);
    margin: 0 0 .2rem;
    letter-spacing: -.01em;
}
.fp-le-block-hint {
    margin: 0;
    color: var(--fp-text-muted);
    font-size: var(--fp-text-sm);
}
.fp-le-primary-field { font-weight: 550; }
.fp-le-rpm {
    margin-top: .35rem;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
    font-variant-numeric: tabular-nums;
}
.fp-le-miles {
    display: grid;
    /* Loaded is the required field and shares its cell with the estimate button — give it the extra room. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr) auto minmax(0, 1fr);
    gap: .65rem;
    align-items: end;
}
.fp-le-miles-plus, .fp-le-miles-eq {
    padding-bottom: .65rem;
    color: var(--fp-text-muted);
    font-weight: 650;
    text-align: center;
}
.fp-le-total-miles { font-weight: 700; font-size: var(--fp-text-lg); }
@media (max-width: 575.98px) {
    .fp-le-miles { grid-template-columns: 1fr; }
    .fp-le-miles-plus, .fp-le-miles-eq { display: none; }
}

.fp-le-lane-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .75rem;
    align-items: center;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    border-radius: var(--fp-radius-lg);
    border: 1px dashed var(--fp-border);
    background: linear-gradient(135deg, var(--fp-surface-2), var(--fp-surface));
}
[data-theme="dark"] .fp-le-lane-strip {
    border-style: solid;
    border-color: color-mix(in srgb, var(--fp-border) 65%, var(--fp-accent) 35%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--fp-surface-2) 85%, var(--fp-accent) 15%), var(--fp-surface));
}
.fp-le-lane-kicker {
    display: block;
    font-size: var(--fp-text-2xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fp-text-muted);
    font-weight: 650;
    margin-bottom: .2rem;
}
.fp-le-lane-side strong {
    display: block;
    font-size: var(--fp-text-lg);
    color: var(--fp-heading);
    letter-spacing: -.02em;
}
.fp-le-lane-arrow {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--fp-accent-soft);
    color: var(--fp-accent-text);
}
@media (max-width: 767.98px) {
    .fp-le-lane-strip { grid-template-columns: 1fr; text-align: left; }
    .fp-le-lane-arrow { display: none; }
}

.fp-le-stops { display: flex; flex-direction: column; gap: 0; }
.fp-le-stop {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: .85rem;
    position: relative;
    padding: .35rem 0 1.15rem;
}
.fp-le-stop:not(:last-child) .fp-le-stop-rail::after {
    content: "";
    position: absolute;
    left: .55rem;
    top: 1.35rem;
    bottom: -.15rem;
    width: 2px;
    background: var(--fp-border);
}
.fp-le-stop-rail { position: relative; }
.fp-le-stop-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin-top: .55rem;
    border: 2px solid var(--fp-surface);
    box-shadow: 0 0 0 2px var(--fp-border);
    background: var(--fp-text-muted);
}
.fp-le-stop-dot.is-pickup { background: var(--fp-warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fp-warning) 35%, transparent); }
.fp-le-stop-dot.is-delivery { background: var(--fp-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fp-success) 35%, transparent); }
.fp-le-stop-body {
    background: var(--fp-surface-2);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: .85rem 1rem 1rem;
}
.fp-le-stop-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
}
.fp-le-stop-type { width: auto; min-width: 7.5rem; }
.fp-le-stop-seq { font-size: var(--fp-text-sm); color: var(--fp-text-muted); font-weight: 600; }

.fp-le-money-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--fp-radius-lg);
    background: linear-gradient(135deg, var(--fp-surface-2), var(--fp-surface));
    border: 1px solid var(--fp-border);
}
[data-theme="dark"] .fp-le-money-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--fp-success-soft) 55%, var(--fp-surface)), var(--fp-surface));
    border-color: color-mix(in srgb, var(--fp-border) 60%, var(--fp-success) 40%);
    box-shadow: inset 3px 0 0 var(--fp-success);
}
.fp-le-money-hero .fp-le-money-label {
    font-size: var(--fp-text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fp-text-muted);
    font-weight: 650;
}
.fp-le-money-hero .fp-le-money-total {
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    font-weight: 750;
    letter-spacing: -.03em;
    color: var(--fp-heading);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.fp-le-money-side {
    text-align: right;
    font-size: var(--fp-text-sm);
    color: var(--fp-text-muted);
}
.fp-le-money-side strong { color: var(--fp-heading); font-variant-numeric: tabular-nums; }

.fp-le-empty {
    text-align: center;
    padding: 2.25rem 1.25rem;
}
.fp-le-empty i {
    font-size: 1.75rem;
    color: var(--fp-accent-text);
    display: block;
    margin-bottom: .65rem;
}
.fp-le-empty p { margin: 0 auto; max-width: 28rem; color: var(--fp-text-muted); }

.fp-le-sticky {
    position: fixed;
    left: var(--fp-sidebar-w);
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.5rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--fp-surface) 92%, transparent);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    border-top: 1px solid var(--fp-border);
    box-shadow: 0 -8px 24px -16px rgba(16, 24, 40, .35);
}
[data-theme="dark"] .fp-le-sticky {
    background: color-mix(in srgb, var(--fp-surface) 88%, transparent);
    border-top-color: color-mix(in srgb, var(--fp-border) 70%, var(--fp-accent) 30%);
    box-shadow: 0 -12px 32px -12px rgba(0, 0, 0, .65), 0 -1px 0 color-mix(in srgb, var(--fp-accent) 18%, transparent);
}
.fp-le-sticky-hint {
    color: var(--fp-text-muted);
    font-size: var(--fp-text-sm);
    min-width: 0;
    line-height: 1.35;
}
.fp-le-sticky-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
@media (max-width: 991.98px) {
    .fp-le-sticky {
        left: 0;
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }
}
@media (max-width: 767.98px) {
    .fp-le-sticky {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
        padding-top: .65rem;
        padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
    }
    .fp-le-sticky-hint {
        text-align: center;
        font-size: var(--fp-text-xs);
        order: 2;
    }
    .fp-le-sticky-actions {
        order: 1;
        width: 100%;
    }
    .fp-le-sticky-actions .btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 2.65rem;
    }
}
@media (max-width: 419.98px) {
    .fp-le-sticky-hint { display: none; }
}

.fp-le .fp-tabs {
    position: sticky;
    top: 3.55rem;
    z-index: 40;
    background: color-mix(in srgb, var(--fp-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    margin-bottom: 0;
}
[data-theme="dark"] .fp-le .fp-tabs {
    border-bottom-color: color-mix(in srgb, var(--fp-border) 75%, var(--fp-accent) 25%);
}
.fp-le .fp-tab-content { padding-top: 1rem; }

.fp-toast-ok-float {
    position: fixed;
    bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
    right: max(1.2rem, env(safe-area-inset-right, 0px));
    z-index: 2100;
    background: var(--fp-success-soft);
    color: var(--fp-success);
    border: 1px solid color-mix(in srgb, var(--fp-success) 35%, transparent);
    border-radius: var(--fp-radius);
    padding: .7rem 1rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
    max-width: min(20rem, calc(100vw - 2rem));
}
.fp-toast-ok-float.show { opacity: 1; transform: translateY(0); }
@media (max-width: 767.98px) {
    .fp-toast-ok-float {
        left: 1rem;
        right: 1rem;
        bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
        text-align: center;
        max-width: none;
    }
}

.fp-typeahead-item.is-active { background: var(--fp-accent-soft); }
.fp-btn-busy { pointer-events: none; opacity: .72; }
.fp-btn-busy .fp-btn-spinner {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.1em;
    margin-right: .4rem;
    animation: fp-spin .6s linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* Offline banner — pinned above everything, because a driver acts on what they can see. */
.fp-offline-banner {
    position: sticky;
    top: 0;
    z-index: 1080;
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: var(--fp-text-sm);
    font-weight: 600;
    color: var(--fp-warning);
    background: var(--fp-warning-soft);
    border-bottom: 1px solid var(--fp-warning);
}

.fp-offline-banner[hidden] { display: none; }

/* Work captured without signal, still on the phone. Reassurance, not an error. */
.fp-driver-outbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--fp-radius);
    font-size: var(--fp-text-sm);
    font-weight: 600;
    color: var(--fp-warning);
    background: var(--fp-warning-soft);
    border: 1px solid var(--fp-warning);
}

.fp-driver-outbox[hidden] { display: none; }

/* Quote desk suggestion — the numbers the desk decides from, before anything is saved. */
.fp-quote-suggestion {
    padding: 0.85rem 1rem;
    border-radius: var(--fp-radius);
    background: var(--fp-accent-soft);
    color: var(--fp-text);
    font-size: var(--fp-text-sm);
    line-height: 1.7;
}

.fp-quote-suggestion[hidden] { display: none; }

/* Driver walk-around checklist: big tap targets, one component per row. */
.fp-dvir-list { display: grid; gap: 0.5rem; }
.fp-dvir-item {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    background: var(--fp-surface);
}
.fp-dvir-item .form-check-label { font-weight: 500; }
.fp-dvir-detail[hidden] { display: none; }
.fp-dvir-open { border-left: 4px solid var(--fp-danger); }
.fp-w-auto { width: auto; }
.fp-w-mechanic { width: 8rem; }

/* The driver whose file is open, in the fleet list beside it. */
.fp-row-selected > td { background: var(--fp-accent-soft); }

/* Custom role editor: permissions grouped by area, in a responsive grid. */
.fp-role-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
.fp-role-matrix-group { border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 0.5rem 0.75rem; margin: 0; }
.fp-role-matrix-group legend { float: none; width: auto; font-size: var(--fp-text-sm); font-weight: 600; padding: 0 0.25rem; margin: 0; }

/* API & webhooks */
.fp-secret-card { border-left: 4px solid var(--fp-warning); }
.fp-code-block { background: var(--fp-surface-2); border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 0.75rem; font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; }

/* Utilities that replace inline style attributes (CSP: style-src 'self'). !important because
   they stand in for inline styles, which always won over component rules. */
.fp-u-dashed-bottom { border-bottom: 1px dashed var(--fp-border) !important; }
.fp-u-border-top { border-top: 1px solid var(--fp-border) !important; }
.fp-u-border-color { border-color: var(--fp-border) !important; }
.fp-u-w-auto { width: auto !important; }
.fp-u-w-80 { width: 80px !important; }
.fp-u-w-110 { width: 110px !important; }
.fp-u-w-1 { width: 1% !important; }
.fp-u-w-120 { width: 120px !important; }
.fp-u-w-2rem { width: 2rem !important; }
.fp-u-w-2-5rem { width: 2.5rem !important; }
.fp-u-w-9rem { width: 9rem !important; }
.fp-u-w-28rem { width: min(28rem, 100%) !important; }
.fp-u-minw-9rem { min-width: 9rem !important; }
.fp-u-minw-12rem { min-width: 12rem !important; }
.fp-u-maxw-320 { max-width: 320px !important; }
.fp-u-maxw-480 { max-width: 480px !important; }
.fp-u-maxw-720 { max-width: 720px !important; }
.fp-u-floating-560 { max-width: 560px !important; position: absolute !important; top: 4.5rem !important; }
.fp-u-scroll-340 { max-height: 340px !important; overflow-y: auto !important; }
.fp-u-pre-wrap { white-space: pre-wrap !important; }
.fp-u-no-transform { text-transform: none !important; }
.fp-u-pt-1rem { padding-top: 1rem !important; }
.fp-u-fs-sm { font-size: var(--fp-text-sm) !important; }
.fp-u-fs-md { font-size: var(--fp-text-md) !important; }
.fp-u-fs-base { font-size: var(--fp-text-base) !important; }
.fp-u-fs-95 { font-size: .95rem !important; }
.fp-u-fs-100 { font-size: 1rem !important; }
.fp-u-fs-110 { font-size: 1.1rem !important; }

/* Progress widths (Css.Pct). Not !important: live updates set element.style.width, which must win. */
.fp-pct-0 { width: 0%; }
.fp-pct-1 { width: 1%; }
.fp-pct-2 { width: 2%; }
.fp-pct-3 { width: 3%; }
.fp-pct-4 { width: 4%; }
.fp-pct-5 { width: 5%; }
.fp-pct-6 { width: 6%; }
.fp-pct-7 { width: 7%; }
.fp-pct-8 { width: 8%; }
.fp-pct-9 { width: 9%; }
.fp-pct-10 { width: 10%; }
.fp-pct-11 { width: 11%; }
.fp-pct-12 { width: 12%; }
.fp-pct-13 { width: 13%; }
.fp-pct-14 { width: 14%; }
.fp-pct-15 { width: 15%; }
.fp-pct-16 { width: 16%; }
.fp-pct-17 { width: 17%; }
.fp-pct-18 { width: 18%; }
.fp-pct-19 { width: 19%; }
.fp-pct-20 { width: 20%; }
.fp-pct-21 { width: 21%; }
.fp-pct-22 { width: 22%; }
.fp-pct-23 { width: 23%; }
.fp-pct-24 { width: 24%; }
.fp-pct-25 { width: 25%; }
.fp-pct-26 { width: 26%; }
.fp-pct-27 { width: 27%; }
.fp-pct-28 { width: 28%; }
.fp-pct-29 { width: 29%; }
.fp-pct-30 { width: 30%; }
.fp-pct-31 { width: 31%; }
.fp-pct-32 { width: 32%; }
.fp-pct-33 { width: 33%; }
.fp-pct-34 { width: 34%; }
.fp-pct-35 { width: 35%; }
.fp-pct-36 { width: 36%; }
.fp-pct-37 { width: 37%; }
.fp-pct-38 { width: 38%; }
.fp-pct-39 { width: 39%; }
.fp-pct-40 { width: 40%; }
.fp-pct-41 { width: 41%; }
.fp-pct-42 { width: 42%; }
.fp-pct-43 { width: 43%; }
.fp-pct-44 { width: 44%; }
.fp-pct-45 { width: 45%; }
.fp-pct-46 { width: 46%; }
.fp-pct-47 { width: 47%; }
.fp-pct-48 { width: 48%; }
.fp-pct-49 { width: 49%; }
.fp-pct-50 { width: 50%; }
.fp-pct-51 { width: 51%; }
.fp-pct-52 { width: 52%; }
.fp-pct-53 { width: 53%; }
.fp-pct-54 { width: 54%; }
.fp-pct-55 { width: 55%; }
.fp-pct-56 { width: 56%; }
.fp-pct-57 { width: 57%; }
.fp-pct-58 { width: 58%; }
.fp-pct-59 { width: 59%; }
.fp-pct-60 { width: 60%; }
.fp-pct-61 { width: 61%; }
.fp-pct-62 { width: 62%; }
.fp-pct-63 { width: 63%; }
.fp-pct-64 { width: 64%; }
.fp-pct-65 { width: 65%; }
.fp-pct-66 { width: 66%; }
.fp-pct-67 { width: 67%; }
.fp-pct-68 { width: 68%; }
.fp-pct-69 { width: 69%; }
.fp-pct-70 { width: 70%; }
.fp-pct-71 { width: 71%; }
.fp-pct-72 { width: 72%; }
.fp-pct-73 { width: 73%; }
.fp-pct-74 { width: 74%; }
.fp-pct-75 { width: 75%; }
.fp-pct-76 { width: 76%; }
.fp-pct-77 { width: 77%; }
.fp-pct-78 { width: 78%; }
.fp-pct-79 { width: 79%; }
.fp-pct-80 { width: 80%; }
.fp-pct-81 { width: 81%; }
.fp-pct-82 { width: 82%; }
.fp-pct-83 { width: 83%; }
.fp-pct-84 { width: 84%; }
.fp-pct-85 { width: 85%; }
.fp-pct-86 { width: 86%; }
.fp-pct-87 { width: 87%; }
.fp-pct-88 { width: 88%; }
.fp-pct-89 { width: 89%; }
.fp-pct-90 { width: 90%; }
.fp-pct-91 { width: 91%; }
.fp-pct-92 { width: 92%; }
.fp-pct-93 { width: 93%; }
.fp-pct-94 { width: 94%; }
.fp-pct-95 { width: 95%; }
.fp-pct-96 { width: 96%; }
.fp-pct-97 { width: 97%; }
.fp-pct-98 { width: 98%; }
.fp-pct-99 { width: 99%; }
.fp-pct-100 { width: 100%; }

/* Planning board (Dispatch/Planning). Columns and spans are classes, not inline styles (CSP). */
.fp-plan { overflow-x: auto; }
.fp-plan-row { display: flex; min-width: 760px; border-bottom: 1px solid var(--fp-border); transition: background var(--fp-transition); }
.fp-plan-row:last-child { border-bottom: 0; }
.fp-plan-row:not(.fp-plan-head):hover { background: color-mix(in srgb, var(--fp-surface-2) 55%, transparent); }
.fp-plan-label { flex: 0 0 11rem; padding: .5rem .75rem; border-right: 1px solid var(--fp-border); min-width: 0; }
.fp-plan-days { flex: 1 1 auto; display: grid; grid-auto-rows: minmax(2.1rem, auto); gap: 5px 0; padding: 4px 0; min-height: 3.25rem; }
.fp-plan-7 .fp-plan-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fp-plan-14 .fp-plan-days { grid-template-columns: repeat(14, minmax(0, 1fr)); }
.fp-plan-7 .fp-plan-lane { background-image: linear-gradient(to right, var(--fp-border) 1px, transparent 1px); background-size: calc(100% / 7) 100%; }
.fp-plan-14 .fp-plan-lane { background-image: linear-gradient(to right, var(--fp-border) 1px, transparent 1px); background-size: calc(100% / 14) 100%; }
.fp-plan-head { background: var(--fp-surface-2); position: sticky; top: 0; z-index: 1; font-size: var(--fp-text-sm); }
.fp-plan-head .fp-plan-days { padding: 0; min-height: 0; }
.fp-plan-day { padding: .45rem .5rem; border-left: 1px solid var(--fp-border); white-space: nowrap; overflow: hidden; }
.fp-plan-day span { color: var(--fp-text-muted); text-transform: uppercase; font-size: var(--fp-text-2xs); letter-spacing: .04em; }
.fp-plan-day.is-weekend { background: color-mix(in srgb, var(--fp-surface-2) 60%, var(--fp-border)); }
.fp-plan-day.is-today { background: var(--fp-accent-soft); box-shadow: inset 0 -3px 0 var(--fp-accent); }
.fp-plan-day.is-today strong { color: var(--fp-accent-text); }
.fp-plan-bar {
    display: block;
    margin: 0 3px;
    padding: .22rem .5rem;
    border-radius: var(--fp-radius-sm);
    font-size: var(--fp-text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    border: 1px solid transparent;
    color: var(--fp-text);
    box-shadow: var(--fp-shadow);
    transition: transform var(--fp-transition), box-shadow var(--fp-transition), filter var(--fp-transition);
}
.fp-plan-bar:hover { filter: brightness(.97); text-decoration: none; transform: translateY(-1px); box-shadow: var(--fp-shadow-lg); }
.fp-plan-bar span { color: var(--fp-text-muted); }
.fp-plan-bar.starts-before { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.fp-plan-bar.ends-after { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.fp-plan-bar.is-conflict { border: 2px solid var(--fp-danger); }
/* Each stage gets a solid edge (--fp-plan-tone) on top of its soft fill. The fills alone were
   near-identical pastels, and the legend's 13px swatches of them were barely visible. */
.fp-plan-bar-booked { --fp-plan-tone: var(--fp-info); background: var(--fp-info-soft); }
/* Planned next on a truck still on a trip: not dispatched yet. */
.fp-plan-bar.is-planned, .fp-plan-key.is-planned { background: transparent; border: 1px dashed var(--fp-plan-tone, var(--fp-info)); }
.fp-plan-bar-dispatched { --fp-plan-tone: var(--fp-accent); background: var(--fp-accent-soft); }
.fp-plan-bar-moving { --fp-plan-tone: var(--fp-success); background: var(--fp-success-soft); }
.fp-plan-bar-done { --fp-plan-tone: var(--fp-text-muted); background: var(--fp-surface-2); opacity: .65; }
.fp-plan-bar[class*="fp-plan-bar-"] { border-left: 3px solid var(--fp-plan-tone); }
.fp-plan-key[class*="fp-plan-bar-"] { background: var(--fp-plan-tone); border-color: var(--fp-plan-tone); }
.fp-plan-bar.is-conflict { border-left-color: var(--fp-danger); }   /* the clash outruns the stage color */
.fp-plan-empty-hint { background: var(--fp-info-soft); color: var(--fp-text); }
.fp-plan.is-dragging .fp-plan-lane.is-droppable {
    outline: 1px dashed var(--fp-accent);
    outline-offset: -2px;
    background-color: color-mix(in srgb, var(--fp-accent-soft) 40%, transparent);
}
.fp-plan-lane { transition: background-color 120ms ease; }
.fp-plan-lane.is-over { background-color: var(--fp-accent-soft); outline: 2px solid var(--fp-accent); outline-offset: -2px; }
.fp-plan-card {
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    padding: .5rem .6rem;
    margin-bottom: .5rem;
    background: var(--fp-surface);
    box-shadow: var(--fp-shadow);
    transition: transform var(--fp-transition), box-shadow var(--fp-transition), opacity var(--fp-transition);
}
.fp-plan-card[draggable='true'] { cursor: grab; }
.fp-plan-card[draggable='true']:hover { box-shadow: var(--fp-shadow-lg); transform: translateY(-1px); }
.fp-plan-card.is-dragging { opacity: .45; transform: scale(.97); }
.fp-plan-waiting { max-height: 70vh; overflow-y: auto; }
.fp-plan-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.fp-plan-key { display: inline-block; width: .8rem; height: .8rem; border-radius: var(--fp-radius-xs); vertical-align: middle; border: 1px solid var(--fp-border); }
.fp-plan-c1 { grid-column-start: 1; }
.fp-plan-c2 { grid-column-start: 2; }
.fp-plan-c3 { grid-column-start: 3; }
.fp-plan-c4 { grid-column-start: 4; }
.fp-plan-c5 { grid-column-start: 5; }
.fp-plan-c6 { grid-column-start: 6; }
.fp-plan-c7 { grid-column-start: 7; }
.fp-plan-c8 { grid-column-start: 8; }
.fp-plan-c9 { grid-column-start: 9; }
.fp-plan-c10 { grid-column-start: 10; }
.fp-plan-c11 { grid-column-start: 11; }
.fp-plan-c12 { grid-column-start: 12; }
.fp-plan-c13 { grid-column-start: 13; }
.fp-plan-c14 { grid-column-start: 14; }
.fp-plan-s1 { grid-column-end: span 1; }
.fp-plan-s2 { grid-column-end: span 2; }
.fp-plan-s3 { grid-column-end: span 3; }
.fp-plan-s4 { grid-column-end: span 4; }
.fp-plan-s5 { grid-column-end: span 5; }
.fp-plan-s6 { grid-column-end: span 6; }
.fp-plan-s7 { grid-column-end: span 7; }
.fp-plan-s8 { grid-column-end: span 8; }
.fp-plan-s9 { grid-column-end: span 9; }
.fp-plan-s10 { grid-column-end: span 10; }
.fp-plan-s11 { grid-column-end: span 11; }
.fp-plan-s12 { grid-column-end: span 12; }
.fp-plan-s13 { grid-column-end: span 13; }
.fp-plan-s14 { grid-column-end: span 14; }

/* Legal documents (/legal) */
.fp-legal-doc { width: 100%; max-width: 860px; }
.fp-legal-body h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.fp-legal-body h2 { font-size: 1.05rem; margin-top: 1.5rem; }
.fp-legal-body p, .fp-legal-body li { line-height: 1.6; }
.fp-legal-body table { width: 100%; border-collapse: collapse; font-size: var(--fp-text-sm); }
.fp-legal-body th, .fp-legal-body td { border-bottom: 1px solid var(--fp-border); padding: .4rem .5rem; text-align: left; vertical-align: top; }
.fp-legal-links { font-size: var(--fp-text-sm); margin-top: .25rem; }
.fp-legal-links a { color: inherit; text-decoration: underline; }
.fp-clickwrap { border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: .75rem; background: var(--fp-surface-2); }
.fp-clickwrap a { text-decoration: underline; font-weight: 600; }

.fp-invoice-actions { min-width: 6.5rem; max-width: 12rem; }
.fp-invoice-actions .btn { margin: .1rem 0 .1rem .25rem; }
/* Wide lists beside the sidebar (992–1399px): tighter side padding instead of a sideways scroll. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .fp-table.fp-table-stack thead th, .fp-table.fp-table-stack tbody td { padding-left: .7rem; padding-right: .7rem; }
}

/* ---------- Driver: send photos ----------
   Thumb-sized targets (min 44px) and one clear verdict per photo: a driver reads this standing
   at a dock with gloves on, not at a desk. */
.fp-photo-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.fp-photo-kind { position: relative; margin: 0; cursor: pointer; }
.fp-photo-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fp-photo-kind-body {
    display: flex; flex-direction: column; gap: .1rem; min-height: 4.5rem; height: 100%;
    padding: .65rem .75rem; border: 1px solid var(--fp-border); border-radius: var(--fp-radius);
    background: var(--fp-surface); transition: border-color var(--fp-transition), background var(--fp-transition);
}
.fp-photo-kind-body i { font-size: var(--fp-text-xl); color: var(--fp-text-muted); }
.fp-photo-kind-body strong { color: var(--fp-heading); font-size: var(--fp-text-base); }
.fp-photo-kind-body small { color: var(--fp-text-muted); font-size: var(--fp-text-xs); }
.fp-photo-kind input:checked + .fp-photo-kind-body { border-color: var(--fp-accent); background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1px var(--fp-accent); }
.fp-photo-kind input:checked + .fp-photo-kind-body i { color: var(--fp-accent-text); }
.fp-photo-kind input:focus-visible + .fp-photo-kind-body { box-shadow: var(--fp-focus-ring-strong); }
.fp-photo-actions { display: grid; gap: .5rem; }
.fp-photo-pick { display: flex; align-items: center; justify-content: center; cursor: pointer; min-height: 3rem; margin: 0; }
.fp-photo-pick:has(input:disabled) { opacity: .5; pointer-events: none; }
.fp-photo-list { display: grid; gap: .6rem; margin-top: .9rem; }
.fp-photo-item {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: start;
    padding: .6rem; border: 1px solid var(--fp-border); border-left-width: 4px; border-radius: var(--fp-radius);
    background: var(--fp-surface);
}
.fp-photo-item.is-good { border-left-color: var(--fp-success); }
.fp-photo-item.is-bad { border-left-color: var(--fp-warning); background: var(--fp-warning-soft); }
.fp-photo-item.is-busy { opacity: .7; }
.fp-photo-thumb { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--fp-radius-sm); background: var(--fp-surface-2); }
.fp-photo-status { display: block; font-weight: 600; font-size: var(--fp-text-base); color: var(--fp-heading); }
.fp-photo-item.is-good .fp-photo-status { color: var(--fp-success); }
.fp-photo-item.is-bad .fp-photo-status { color: var(--fp-warning); }
.fp-photo-advice { font-size: var(--fp-text-sm); color: var(--fp-text); margin: .2rem 0 .35rem; }
.fp-photo-advice li + li { margin-top: .15rem; }
.fp-photo-item-actions { display: flex; gap: .35rem; }
.fp-photo-item-actions .btn { flex: 1 1 0; padding-left: .4rem; padding-right: .4rem; white-space: nowrap; }
.fp-photo-item-actions .btn { min-height: 2.25rem; }
.fp-photo-warning { padding: .6rem .75rem; border-radius: var(--fp-radius-sm); background: var(--fp-warning-soft); color: var(--fp-warning); font-size: var(--fp-text-sm); }

/* ---------- Driver app: home, pay, tab bar ---------- */
.fp-driver-alert {
    display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .75rem;
    padding: .75rem .9rem; border-radius: var(--fp-radius); font-size: var(--fp-text-sm);
}
.fp-driver-alert > i { font-size: var(--fp-text-lg); line-height: 1.2; }
.fp-driver-alert strong { display: block; }
.fp-driver-alert.is-danger { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-driver-alert.is-warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-driver-status { font-weight: 600; color: var(--fp-heading); font-size: var(--fp-text-base); }
.fp-driver-stop-time { font-size: var(--fp-text-sm); color: var(--fp-text-muted); margin-top: .15rem; }
.fp-driver-stop-time.is-late { color: var(--fp-danger); font-weight: 600; }
.fp-driver-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.fp-driver-quick-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    min-height: 4rem; padding: .5rem; border: 1px solid var(--fp-border); border-radius: var(--fp-radius);
    background: var(--fp-surface); color: var(--fp-heading); font-size: var(--fp-text-sm); font-weight: 600; text-decoration: none;
}
.fp-driver-quick-btn i { font-size: var(--fp-text-xl); color: var(--fp-accent-text); }
.fp-driver-quick-btn:hover, .fp-driver-quick-btn:focus-visible { border-color: var(--fp-accent); color: var(--fp-heading); }
.fp-driver-quick-count {
    position: absolute; top: .35rem; right: .45rem; min-width: 1.25rem; padding: 0 .3rem; border-radius: var(--fp-radius-pill);
    background: var(--fp-danger-solid); color: var(--fp-accent-contrast); font-size: var(--fp-text-2xs); line-height: 1.25rem; text-align: center;
}
.fp-driver-owed { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; }
.fp-driver-owed-item {
    display: flex; align-items: center; gap: .65rem; min-height: 3rem; padding: .55rem .8rem;
    border-radius: var(--fp-radius); background: var(--fp-warning-soft); color: var(--fp-heading); text-decoration: none;
}
.fp-driver-owed-item > i:first-child { font-size: var(--fp-text-lg); color: var(--fp-warning); }
.fp-driver-owed-item small { display: block; color: var(--fp-text-muted); font-size: var(--fp-text-xs); font-weight: 400; }
.fp-driver-owed-item span { font-weight: 600; }
.fp-driver-owed-item.is-later { background: var(--fp-surface-2); }
.fp-driver-owed-item.is-later > i:first-child { color: var(--fp-text-muted); }
.fp-driver-note {
    display: flex; gap: .6rem; margin-top: 1rem; padding: .7rem .85rem; border-radius: var(--fp-radius);
    background: var(--fp-info-soft); color: var(--fp-text); font-size: var(--fp-text-sm);
}
.fp-driver-note > i { color: var(--fp-info); font-size: var(--fp-text-lg); }
.fp-driver-note strong { display: block; color: var(--fp-heading); }
.fp-driver-facts { margin-top: 1rem; }
.fp-driver-number { font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: var(--fp-text-lg); }
.fp-driver-pay-link {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem;
    border: 1px solid var(--fp-border); border-radius: var(--fp-radius); color: var(--fp-heading); text-decoration: none;
}
.fp-driver-pay-link strong { display: block; font-size: var(--fp-text-xl); }
.fp-driver-pay-link small { color: var(--fp-text-muted); }
.fp-driver-pay-link:hover, .fp-driver-pay-link:focus-visible { border-color: var(--fp-accent); color: var(--fp-heading); }
.fp-driver-trips { display: grid; gap: .6rem; }
.fp-driver-trips li { display: flex; flex-direction: column; gap: .1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--fp-border); }
.fp-driver-trips li:last-child { border-bottom: 0; padding-bottom: 0; }
.fp-driver-trip-owed { font-size: var(--fp-text-sm); color: var(--fp-warning); font-weight: 600; text-decoration: none; }
.fp-pay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.fp-pay-net { display: block; font-size: var(--fp-text-3xl); color: var(--fp-heading); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fp-pay-sum { display: grid; gap: .25rem; margin: 0 0 .75rem; }
.fp-pay-sum > div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.fp-pay-sum dt { font-weight: 400; color: var(--fp-text-muted); }
.fp-pay-sum dd { margin: 0; }
.fp-pay-sum .is-total { padding-top: .35rem; border-top: 1px solid var(--fp-border); font-weight: 700; }
.fp-pay-sum .is-total dt { color: var(--fp-heading); font-weight: 700; }
.fp-pay-lines summary { cursor: pointer; font-weight: 600; color: var(--fp-accent-text); min-height: 2.5rem; display: flex; align-items: center; }
.fp-pay-lines li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--fp-border); font-variant-numeric: tabular-nums; }
.fp-driver-tabbar { display: none; }
@media (max-width: 991.98px) {
    .fp-driver-app .fp-content { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .fp-driver-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: grid; grid-template-columns: repeat(5, 1fr);
        padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--fp-surface); border-top: 1px solid var(--fp-border);
        box-shadow: 0 -6px 18px -12px rgba(37, 43, 54, .25);
    }
    .fp-driver-tabbar a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.6rem;
        color: var(--fp-text-muted); font-size: var(--fp-text-xs); font-weight: 600; text-decoration: none;
    }
    .fp-driver-tabbar a i { font-size: 1.35rem; }
    .fp-driver-tabbar a.is-active { color: var(--fp-accent-text); }
    .fp-driver-tabbar a.is-active i { transform: translateY(-1px); }
    /* The toast and "sent" notices must clear the bar. */
    .fp-driver-app .fp-toast { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}
.fp-driver-done { display: flex; align-items: center; padding: .85rem 1rem; border-radius: var(--fp-radius); background: var(--fp-success-soft); color: var(--fp-success); font-weight: 600; }
/* Driver facts stay two-up on a phone: short label/value pairs read faster side by side, and a
   one-column list pushed "This week" three screens down. */
.fp-driver .fp-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-driver-pay-link .fp-driver-stop-kicker { display: block; }

/* ---------- Driver: trips history and trip detail ---------- */
.fp-driver-back { display: inline-flex; align-items: center; gap: .25rem; min-height: 2.5rem; margin-bottom: .25rem; color: var(--fp-accent-text); font-weight: 600; text-decoration: none; }
.fp-driver-segments { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .25rem; margin-bottom: 1rem; border-radius: var(--fp-radius); background: var(--fp-surface-2); }
.fp-driver-segments a {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.6rem;
    border-radius: var(--fp-radius-sm); color: var(--fp-text-muted); font-weight: 600; text-decoration: none;
}
.fp-driver-segments a.is-active { background: var(--fp-surface); color: var(--fp-heading); box-shadow: var(--fp-shadow); }
.fp-driver-segment-count { position: static; }
.fp-driver-week { margin-bottom: 1.1rem; }
.fp-driver-week-head { display: flex; justify-content: space-between; gap: .75rem; padding: 0 .25rem .4rem; font-size: var(--fp-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fp-text-muted); }
.fp-driver-trip-list { display: grid; gap: .5rem; }
.fp-driver-trip-row {
    display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius); background: var(--fp-surface); color: var(--fp-text); text-decoration: none;
}
.fp-driver-trip-row:hover, .fp-driver-trip-row:focus-visible { border-color: var(--fp-accent); color: var(--fp-text); }
.fp-driver-trip-row > i { margin-left: auto; color: var(--fp-text-muted); }
.fp-driver-trip-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fp-driver-trip-main strong { color: var(--fp-heading); }
.fp-driver-trip-main small { color: var(--fp-text-muted); }
.fp-driver-trip-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.fp-trip-docs { display: grid; gap: .6rem; }
.fp-trip-doc { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.fp-trip-doc-file { display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; border-radius: var(--fp-radius-sm); background: var(--fp-surface-2); font-size: 1.75rem; color: var(--fp-text-muted); }
.fp-trip-doc-meta { display: flex; flex-direction: column; gap: .1rem; }
.fp-trip-doc-meta strong { color: var(--fp-heading); }
.fp-trip-doc-meta small { color: var(--fp-text-muted); }
.fp-trip-doc-meta .fp-trip-doc-ok { color: var(--fp-success); }
.fp-trip-doc-meta .fp-trip-doc-warn { color: var(--fp-warning); }
.fp-driver-timeline { position: relative; display: grid; gap: .55rem; padding-left: 1rem; border-left: 2px solid var(--fp-border); }
.fp-driver-timeline li { display: flex; flex-direction: column; font-size: var(--fp-text-sm); }
.fp-driver-timeline time { color: var(--fp-text-muted); font-size: var(--fp-text-xs); font-variant-numeric: tabular-nums; }

/* ---- Load billing: the invoice, its payments and a void ---- */
.fp-le-invoice-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.fp-le-invoice-sums > div { background: var(--fp-surface-2, var(--fp-bg)); border-radius: var(--fp-radius, .5rem); padding: .6rem .75rem; }
.fp-le-invoice-sums dt { font-size: .8rem; font-weight: 500; color: var(--fp-text-muted); }
.fp-le-invoice-sums dd { margin: 0; font-size: 1.05rem; }
.fp-le-payment-form legend { font-size: inherit; margin-bottom: .25rem; }
.fp-le-void summary { cursor: pointer; color: var(--fp-text-muted); }
@media (max-width: 575.98px) { .fp-le-invoice-sums { grid-template-columns: 1fr; } }

/* ---- Driver: turn on notifications ---- */
.fp-driver-push { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem 1rem; margin-bottom: 1rem;
    border-radius: var(--fp-radius, 12px); background: var(--fp-surface-2); color: var(--fp-text); }
.fp-driver-push[hidden] { display: none; }

/* Profit & loss: the bottom line stands apart. */
.fp-pnl-net td { border-top: 2px solid var(--fp-border, #d1d5db); font-weight: 600; }

/* Phones: the top bar's four buttons and the page title were wider than a 375px screen, so the
   account menu sat off the right edge and every page scrolled sideways (review 2026-10-05). The
   title gives way (ellipsis), the buttons get a little smaller and lose their carets. */
@media (max-width: 575.98px) {
    .fp-topbar { gap: .5rem; }
    .fp-topbar .fp-page-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fp-topbar-actions { gap: .25rem; flex-shrink: 0; }
    .fp-topbar-actions .dropdown-toggle::after { display: none; }
    .fp-topbar-actions .dropdown-toggle .bi { margin-right: 0 !important; }
    .fp-topbar-actions .fp-icon-btn { width: 34px; height: 34px; }
    .fp-user-chip { padding: .2rem; gap: 0; }
    .fp-user-chip .bi-chevron-down { display: none; }
    .fp-content code { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Haularo visual refresh (2026-10-07)
   One layer over the system above, so it reads and reverts as a unit:
   a brand-teal sidebar, near-white cards that float on soft layered shadow,
   bolder headings and numbers, quieter tables, and a short entrance motion.
   Tokens first; the components below only use tokens.
   ========================================================================== */
:root {
    --fp-bg: #edf0f3;
    --fp-surface: #fbfcfd;
    --fp-surface-2: #f1f4f7;
    --fp-border: #e0e5eb;
    --fp-heading: #141b26;
    --fp-shadow: 0 1px 2px rgba(20, 27, 38, .04), 0 2px 6px -2px rgba(20, 27, 38, .05);
    --fp-shadow-md: 0 1px 2px rgba(20, 27, 38, .04), 0 8px 24px -10px rgba(20, 27, 38, .14);
    --fp-shadow-lg: 0 2px 4px rgba(20, 27, 38, .04), 0 18px 40px -16px rgba(20, 27, 38, .22);
    --fp-warm: #f5b544;
    --fp-rail-bg: linear-gradient(180deg, #0c4440 0%, #0a3330 55%, #092b29 100%);
    --fp-rail-text: #cfe5e1;
    --fp-rail-muted: rgba(207, 229, 225, .62);
    --fp-rail-hover: rgba(255, 255, 255, .07);
    --fp-rail-active: rgba(255, 255, 255, .12);
    --fp-rail-line: rgba(255, 255, 255, .09);
}
[data-theme="dark"] {
    --fp-bg: #14181d;
    --fp-surface: #1b2027;
    --fp-surface-2: #232931;
    --fp-border: #2e3540;
    --fp-heading: #edf0f4;
    --fp-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --fp-shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -12px rgba(0, 0, 0, .55);
    --fp-shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 44px -16px rgba(0, 0, 0, .65);
    --fp-rail-bg: linear-gradient(180deg, #10201f 0%, #0f1a1b 100%);
    --fp-rail-text: #c3d6d2;
    --fp-rail-muted: rgba(195, 214, 210, .58);
    --fp-rail-hover: rgba(255, 255, 255, .05);
    --fp-rail-active: rgba(126, 200, 188, .14);
    --fp-rail-line: rgba(255, 255, 255, .07);
}

/* ---- Sidebar: the brand colour carries the frame, the content stays calm ---- */
.fp-sidebar {
    background: var(--fp-rail-bg);
    border-right: 0;
    color: var(--fp-rail-text);
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.fp-sidebar .fp-brand-name { color: #fff; }
.fp-sidebar .fp-brand-accent { color: #9fe3d6; }
.fp-sidebar .fp-brand-mark { --fp-accent: #14917f; --fp-accent-contrast: #fff; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.fp-sidebar .fp-nav-section { color: var(--fp-rail-muted); }
.fp-sidebar .fp-nav-group > summary:hover { color: #fff; }
.fp-sidebar .fp-nav-link { color: var(--fp-rail-text); position: relative; }
.fp-sidebar .fp-nav-link i { color: var(--fp-rail-muted); }
.fp-sidebar .fp-nav-link:hover { background: var(--fp-rail-hover); color: #fff; }
.fp-sidebar .fp-nav-link:hover i { color: #fff; }
.fp-sidebar .fp-nav-link.active { background: var(--fp-rail-active); color: #fff; font-weight: 600; }
.fp-sidebar .fp-nav-link.active i { color: var(--fp-warm); }
.fp-sidebar .fp-nav-link.active::before {
    content: ""; position: absolute; left: -1rem; top: 22%; bottom: 22%; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--fp-warm);
}
.fp-sidebar .fp-nav-link.disabled { color: var(--fp-rail-muted); }
.fp-sidebar .fp-soon { background: rgba(255, 255, 255, .1); color: var(--fp-rail-text); }
.fp-sidebar-footer { border-top-color: var(--fp-rail-line); }
.fp-sidebar .fp-ai-teaser { color: var(--fp-rail-muted); }
.fp-sidebar .fp-ai-teaser i { color: #9fe3d6; }
.fp-sidebar .fp-ai-teaser:hover { color: #fff; background: var(--fp-rail-hover); }
.fp-sidebar a:focus-visible, .fp-sidebar summary:focus-visible { box-shadow: 0 0 0 3px rgba(245, 181, 68, .6); }

/* ---- Top bar: lighter, the search reads as the main tool ---- */
.fp-topbar { background: color-mix(in srgb, var(--fp-bg) 78%, transparent); border-bottom-color: transparent; box-shadow: 0 1px 0 var(--fp-border); }
.fp-gs-input { border-radius: var(--fp-radius-pill); background-color: var(--fp-surface); }
.fp-user-chip, .fp-icon-btn { box-shadow: var(--fp-shadow); }

/* ---- Page header ---- */
.fp-heading { font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.fp-subheading { margin-top: .15rem; }

/* ---- Surfaces ---- */
.fp-card { border-color: var(--fp-border); box-shadow: var(--fp-shadow); }
a.fp-card:hover, .fp-kpi-link:hover, .fp-stat:hover { box-shadow: var(--fp-shadow-md); }

/* ---- Numbers: big, tabular, they lead the card ---- */
.fp-kpi-value, .fp-stat-value, .fp-cc-status-stats dd { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fp-kpi-value { font-size: 1.6rem; font-weight: 750; }
.fp-kpi-row .fp-kpi { padding: 1rem 1.15rem; gap: .2rem; position: relative; overflow: hidden; }
.fp-kpi-row .fp-kpi::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--fp-accent), color-mix(in srgb, var(--fp-accent) 20%, transparent));
    opacity: 0; transition: opacity var(--fp-transition);
}
.fp-kpi-row .fp-kpi:hover::after { opacity: 1; }
.fp-kpi-link:hover { transform: translateY(-2px); }
/* A stat without an icon (label · number · note) stacks instead of running on one line. */
.fp-stat-row > .fp-stat { flex: 1 1 200px; }
/* On a Bootstrap .row the gutters already space the columns; the extra flex gap pushed four
   25% columns past 100%, so Analytics showed three cards a row and an empty right side. */
.row.fp-stat-row { gap: 0; }
.row.fp-stat-row > [class*="col"] > .fp-stat { height: 100%; }
.fp-stat:not(:has(.fp-stat-icon)) { flex-direction: column; align-items: flex-start; gap: .1rem; }
.fp-stat:not(:has(.fp-stat-icon)) .fp-stat-value { font-size: 1.6rem; font-weight: 750; }
.fp-stat-sub { color: var(--fp-text-muted); font-size: var(--fp-text-sm); }

/* ---- Buttons: a little depth on the primary action ---- */
.fp-btn-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--fp-accent) 86%, #fff) 0%, var(--fp-accent) 100%);
    box-shadow: 0 1px 2px rgba(15, 118, 110, .25), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.fp-btn-primary:hover { background: var(--fp-accent-hover); }
.fp-btn-ghost { background-color: var(--fp-surface); }

/* ---- Tables: a lighter header, a tinted row under the pointer ---- */
.fp-table thead th { background: transparent; letter-spacing: .08em; }
.fp-table tbody tr:hover { background: color-mix(in srgb, var(--fp-accent-soft) 45%, transparent); }

/* ---- Badges: a status dot makes them scannable without reading ---- */
.fp-badge { gap: .35rem; font-weight: 650; white-space: nowrap; }
.fp-badge:is(.fp-badge-success, .fp-badge-warning, .fp-badge-danger, .fp-badge-accent, .fp-badge-planned, .fp-badge-info)::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}

/* ---- Empty states: a soft ring around the icon ---- */
.fp-empty-icon {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--fp-accent-soft) 55%, var(--fp-surface)), var(--fp-accent-soft));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--fp-accent-soft) 45%, transparent);
}

/* An empty list's single "Nothing yet" row (the muted colspan cell every list renders) becomes
   a small empty state instead of one grey line under a row of column headers. */
table tbody > tr:only-child > td[colspan].fp-muted:only-child {
    padding: 2.4rem 1.5rem !important;
    text-align: center;
    color: var(--fp-text-muted);
    background: transparent;
}
table tbody > tr:only-child > td[colspan].fp-muted:only-child::before {
    content: "\F42D";   /* bi-inbox */
    font-family: "bootstrap-icons";
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin: 0 auto .75rem;
    border-radius: 50%;
    font-size: 1.35rem;
    color: var(--fp-accent-text);
    background: var(--fp-accent-soft);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--fp-accent-soft) 45%, transparent);
}
table tbody > tr:only-child:hover { background: transparent !important; }

/* Receivables: the invoice number gets its own column only on very wide screens; below that it
   sits under the load reference, so Actions stays on screen. */
.fp-ar-wide { display: none; }
@media (min-width: 1600px) { .fp-ar-wide { display: table-cell; } .fp-ar-narrow { display: none !important; } }

/* Receivables: a date or a broker's name broken over three lines read as three facts. */
@media (min-width: 768px) {
    .fp-ar-table td { white-space: nowrap; }
    .fp-ar-table td .fp-badge + .fp-badge { margin-top: .25rem; }
    .fp-ar-table td[data-label="Docs"] { white-space: normal; }
    .fp-ar-table td[data-label="Docs"] .fp-badge { display: flex; width: max-content; margin-left: 0 !important; }
    .fp-ar-table td[data-label="Broker"] { white-space: normal; min-width: 7rem; }
    /* An invoiced row has three actions (PDF, Package, Mark paid): they wrap under each other. */
    .fp-ar-table td.fp-invoice-actions { white-space: normal; min-width: 10.5rem; }
    .fp-ar-table td.fp-invoice-actions .btn { margin: .15rem 0 .15rem .25rem; }
    /* Eleven columns at full width: a tighter gutter keeps Actions on screen. */
    .fp-ar-table thead th, .fp-ar-table tbody td { padding-left: .6rem; padding-right: .6rem; }
    .fp-ar-table thead th:first-child, .fp-ar-table tbody td:first-child { padding-left: 1rem; }
    .fp-ar-table thead th:last-child, .fp-ar-table tbody td:last-child { padding-right: 1rem; }
}

/* ---- Partner portal: tabs that show where you are ---- */
/* "safe": when the tabs overflow a phone, centring would cut off the first one. */
.fp-portal-nav { justify-content: safe center; gap: .35rem; border-bottom: 0; padding: .5rem; margin: .5rem auto 0; width: max-content; max-width: 100%;
    background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-pill); box-shadow: var(--fp-shadow); overflow-x: auto; }
.fp-portal-nav a { padding: .4rem 1rem; border-radius: var(--fp-radius-pill); white-space: nowrap; transition: background var(--fp-transition), color var(--fp-transition); }
.fp-portal-nav a:hover { background: var(--fp-surface-2); }
.fp-portal-nav a[aria-current="page"] { background: var(--fp-accent); color: var(--fp-accent-contrast); font-weight: 600; }
.fp-portal-nav + .fp-auth-main .fp-driver { max-width: 48rem; }
.fp-portal-shipment { transition: border-color var(--fp-transition), box-shadow var(--fp-transition), transform var(--fp-transition); }
.fp-portal-shipment:hover { box-shadow: var(--fp-shadow-md); transform: translateY(-1px); }

/* ---- Sign-in: brand panel beside the form on wide screens ---- */
.fp-auth-brand { display: none; }
@media (min-width: 992px) {
    .fp-auth-split { display: grid; grid-template-columns: minmax(400px, 44%) 1fr; min-height: 100vh; }
    .fp-auth-split > .fp-auth-wrap { width: 100%; max-width: none; }
    .fp-auth-split > .fp-auth-wrap > .fp-auth-header > :first-child { visibility: hidden; }
    .fp-auth-brand {
        display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
        position: sticky; top: 0; height: 100vh; overflow: hidden;
        padding: 2.5rem 3rem;
        background:
            radial-gradient(900px 500px at 10% 0%, rgba(20, 145, 127, .55), transparent 60%),
            linear-gradient(160deg, #0c4440, #092b29 75%);
        color: #d6ece8;
    }
    .fp-auth-brand-logo { text-decoration: none; }
    .fp-auth-brand .fp-brand-name { color: #fff; }
    .fp-auth-brand .fp-brand-accent { color: #9fe3d6; }
    .fp-auth-brand .fp-brand-mark { --fp-accent: #14917f; --fp-accent-contrast: #fff; width: 36px; height: 36px; }
    .fp-auth-brand-copy { position: relative; z-index: 1; max-width: 30rem; margin: auto 0; }
    .fp-auth-brand-copy p { font-size: 1.1rem; color: #bfe0da; margin: 0 0 1.75rem; }
    .fp-auth-brand-copy .fp-auth-brand-title { font-size: 2.75rem; font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: #fff; margin: 0 0 1rem; }
    .fp-auth-brand-copy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
    .fp-auth-brand-copy li { display: flex; align-items: center; gap: .8rem; color: #e6f4f1; font-weight: 500; }
    .fp-auth-brand-copy li i {
        display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
        border-radius: 10px; background: rgba(255, 255, 255, .1); color: var(--fp-warm);
    }
    .fp-auth-brand a:focus-visible { box-shadow: 0 0 0 3px rgba(245, 181, 68, .6); }
    .fp-auth-brand-copy { margin: 0; }

    /* The country, lit up: a dot map with live-looking routes under the copy. */
    .fp-auth-brand-map { position: relative; margin: 0 -1rem; width: min(calc(100% + 2rem), 480px, (100vh - 560px) * 1.9); min-width: 300px; }
    .fp-auth-map { display: block; width: 100%; height: auto; }
    .fp-am-dots { fill: rgba(159, 227, 214, .22); }
    .fp-am-route {
        fill: none; stroke: #9fe3d6; stroke-width: 1.7; stroke-linecap: round;
        stroke-dasharray: 3 5; opacity: .9;
        filter: drop-shadow(0 0 3px rgba(159, 227, 214, .55));
        animation: fp-am-flow 2.6s linear infinite;
    }
    .fp-am-city {
        fill: var(--fp-warm); transform-box: fill-box; transform-origin: center;
        filter: drop-shadow(0 0 4px rgba(245, 181, 68, .8));
        animation: fp-am-ping 3s ease-out infinite;
    }
    /* Staggered here, not in the markup: the CSP forbids style attributes. */
    .fp-am-route:nth-child(2) { animation-delay: -.7s; } .fp-am-route:nth-child(3) { animation-delay: -1.4s; }
    .fp-am-route:nth-child(4) { animation-delay: -2.1s; } .fp-am-route:nth-child(5) { animation-delay: -.35s; }
    .fp-am-route:nth-child(6) { animation-delay: -1.05s; } .fp-am-route:nth-child(7) { animation-delay: -1.75s; }
    .fp-am-city:nth-child(2n) { animation-delay: -1s; } .fp-am-city:nth-child(3n) { animation-delay: -2s; }
    @keyframes fp-am-flow { to { stroke-dashoffset: -32; } }
    @keyframes fp-am-ping { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .7; } }

    .fp-auth-chip {
        position: absolute; right: 1.5rem; top: -.25rem;
        display: inline-flex; align-items: center; gap: .65rem;
        padding: .6rem .85rem; border-radius: 14px;
        background: rgba(255, 255, 255, .1);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, .16);
        box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
        font-size: var(--fp-text-sm); color: #d6ece8; line-height: 1.3;
        animation: fp-chip-float 6s ease-in-out infinite;
    }
    .fp-auth-chip i { font-size: 1.15rem; color: #6ee7b7; }
    .fp-auth-chip b { color: #fff; margin-right: .3rem; }
    .fp-auth-chip small { display: block; color: #9fc9c2; font-size: var(--fp-text-xs); }
    @keyframes fp-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
}

/* The form side: calm, a soft wash of the brand colours, a solid card that leads. */
.fp-auth-split > .fp-auth-wrap {
    background:
        radial-gradient(700px 420px at 100% 0%, color-mix(in srgb, var(--fp-accent) 10%, transparent), transparent 70%),
        radial-gradient(600px 380px at 0% 100%, color-mix(in srgb, var(--fp-warm) 9%, transparent), transparent 70%),
        var(--fp-bg);
}
.fp-auth-body .fp-auth-main .fp-auth-card {
    background: var(--fp-surface);
    border-color: var(--fp-border);
    box-shadow: 0 1px 2px rgba(20, 27, 38, .04), 0 24px 60px -24px rgba(20, 27, 38, .28);
}
[data-theme="dark"] .fp-auth-body .fp-auth-main .fp-auth-card { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7); }

/* ---- Sign-in form: roomy fields with icons, one strong action, SSO as its own button ---- */
.fp-auth-main { flex-direction: column; }
.fp-auth-card { max-width: 460px; padding: 2.4rem 2.75rem 2rem; border-radius: 20px; }
@media (min-width: 992px) { .fp-auth-split .fp-auth-main { padding: 1.25rem 0; } .fp-auth-split .fp-auth-footer { padding: .5rem 0 0; } }
.fp-auth-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.fp-auth-subtitle { margin-bottom: 1.9rem; }
.fp-auth-card .form-control { min-height: 48px; border-radius: 12px; background-color: var(--fp-surface-2); border-color: transparent; transition: background-color var(--fp-transition), border-color var(--fp-transition), box-shadow var(--fp-transition); }
.fp-auth-card .form-control:hover { border-color: var(--fp-border); }
.fp-auth-card .form-control:focus { background-color: var(--fp-surface); border-color: var(--fp-accent); box-shadow: 0 0 0 4px var(--fp-accent-soft); }
.fp-auth-field { position: relative; }
.fp-auth-field > .bi { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); z-index: 5; color: var(--fp-text-muted); pointer-events: none; transition: color var(--fp-transition); }
.fp-auth-field:focus-within > .bi { color: var(--fp-accent-text); }
.fp-auth-field > .form-control { padding-left: 2.6rem; }
.fp-auth-field.input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fp-auth-field.input-group > .btn { min-height: 48px; border-radius: 0 12px 12px 0; border-color: transparent; background: var(--fp-surface-2); box-shadow: none; }
.fp-auth-submit { min-height: 50px; border-radius: 12px; font-size: var(--fp-text-md); font-weight: 650; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--fp-accent) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .16); }
.fp-auth-submit .bi { transition: transform var(--fp-transition); }
.fp-auth-submit:hover .bi { transform: translateX(3px); }
.fp-auth-or { display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0; color: var(--fp-text-muted); font-size: var(--fp-text-xs); text-transform: uppercase; letter-spacing: .1em; }
.fp-auth-or::before, .fp-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--fp-border); }
.fp-auth-sso > summary {
    list-style: none; display: flex; align-items: center; justify-content: center; min-height: 48px;
    border: 1px solid var(--fp-border); border-radius: 12px; background: var(--fp-surface);
    color: var(--fp-heading); font-weight: 600; font-size: var(--fp-text-base); cursor: pointer;
    transition: background var(--fp-transition), border-color var(--fp-transition);
}
.fp-auth-sso > summary::-webkit-details-marker { display: none; }
.fp-auth-sso > summary:hover { background: var(--fp-surface-2); border-color: color-mix(in srgb, var(--fp-accent) 35%, var(--fp-border)); }
.fp-auth-sso[open] > summary { border-color: var(--fp-accent); }
.fp-auth-card .fp-auth-switch { margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--fp-border); }
.fp-auth-trust { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; color: var(--fp-text-muted); font-size: var(--fp-text-sm); }
.fp-auth-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.fp-auth-trust .bi { color: var(--fp-accent-text); }
@media (max-width: 575.98px) { .fp-auth-card { padding: 1.75rem 1.35rem; } .fp-auth-title { font-size: 1.6rem; } }

/* A faint dot grid behind the form gives the empty side some texture, fading out at the edges. */
@media (min-width: 992px) {
    .fp-auth-split > .fp-auth-wrap { position: relative; isolation: isolate; }
    .fp-auth-split > .fp-auth-wrap::before {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background-image: radial-gradient(color-mix(in srgb, var(--fp-text-muted) 22%, transparent) 1px, transparent 1.2px);
        background-size: 22px 22px;
        -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 30%, transparent 80%);
        mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 30%, transparent 80%);
    }
}

/* ---- Sign-in, form side: the form card on a faint grid with a brand glow ---- */
@media (min-width: 992px) {
    .fp-auth-wrap { position: relative; isolation: isolate; overflow: hidden; }
    .fp-auth-split > .fp-auth-wrap::before { display: none; }
    .fp-auth-split > .fp-auth-wrap {
        background:
            radial-gradient(ellipse 60% 55% at 50% 48%, transparent 35%, var(--fp-bg) 85%),
            radial-gradient(520px 340px at 50% 45%, color-mix(in srgb, var(--fp-accent) 9%, transparent), transparent 70%),
            linear-gradient(color-mix(in srgb, var(--fp-border) 60%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
            linear-gradient(90deg, color-mix(in srgb, var(--fp-border) 60%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
            var(--fp-bg);
    }


    .fp-auth-body .fp-auth-main .fp-auth-card {
        background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 20px;
        box-shadow: 0 1px 2px rgba(20, 27, 38, .05), 0 40px 90px -30px rgba(11, 61, 58, .4);
    }
    [data-theme="dark"] .fp-auth-body .fp-auth-main .fp-auth-card { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85); }
    .fp-auth-split .fp-auth-title { font-size: 2rem; }
    .fp-auth-split .fp-auth-trust { max-width: 460px; flex-wrap: nowrap; white-space: nowrap; justify-content: center; gap: 1.25rem; font-size: var(--fp-text-xs); }
}

.fp-auth-hello { margin: 0 0 .6rem; color: var(--fp-text-muted); font-size: var(--fp-text-sm); font-weight: 500; }
.fp-auth-hello[hidden] { display: none; }
.fp-auth-hello .bi { margin-right: .4rem; color: var(--fp-accent-text); }
.fp-auth-hello span { margin: 0 .4rem; opacity: .5; }

.fp-chart-wrap.fp-chart-empty { display: flex; align-items: center; justify-content: center; text-align: center;
    color: var(--fp-text-muted); font-size: var(--fp-text-sm); border: 1px dashed var(--fp-border); border-radius: var(--fp-radius); }

/* ---- Driver app polish (2026-10-07) ---- */
.fp-driver-hello { color: var(--fp-accent-text); font-weight: 650; font-size: var(--fp-text-md); }
/* the current load: a lit card with the route on a brand band */
.fp-driver-load { position: relative; overflow: hidden; border: 1px solid var(--fp-border);
    box-shadow: 0 1px 2px rgba(20, 27, 38, .05), 0 18px 40px -22px rgba(11, 61, 58, .35); }
.fp-driver-load::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--fp-accent), #2dd4bf, var(--fp-warm)); }
.fp-driver-load .fp-lane { font-size: 1.3rem; font-weight: 750; letter-spacing: -.015em; }
.fp-driver-steps { gap: .3rem; }
.fp-driver-step { height: 6px; }
.fp-driver-step.is-current { background: var(--fp-accent); box-shadow: 0 0 0 3px var(--fp-accent-soft); }
.fp-driver-status { font-weight: 650; color: var(--fp-heading); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fp-driver-stepno { font-size: var(--fp-text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fp-accent-text); background: var(--fp-accent-soft); padding: .2rem .55rem; border-radius: var(--fp-radius-pill); }
.fp-driver-action { min-height: 58px; border-radius: 16px; letter-spacing: -.01em; }
/* camera picker instead of the browser's "Choose File" */
.fp-photo-pick { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem; cursor: pointer; margin: 0;
    border: 1.5px dashed color-mix(in srgb, var(--fp-accent) 45%, var(--fp-border)); border-radius: 16px;
    background: color-mix(in srgb, var(--fp-accent-soft) 45%, var(--fp-surface)); transition: background var(--fp-transition), border-color var(--fp-transition); }
.fp-photo-pick:hover { background: var(--fp-accent-soft); border-color: var(--fp-accent); }
.fp-photo-pick:focus-within { box-shadow: var(--fp-focus-ring-strong); }
.fp-photo-pick > .bi { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
    color: #fff; background: linear-gradient(145deg, #18a08e, #0b5d56); box-shadow: 0 8px 18px -8px rgba(15, 118, 110, .7); }
.fp-photo-pick strong { display: block; color: var(--fp-heading); font-size: var(--fp-text-md); }
.fp-photo-pick small { display: block; color: var(--fp-text-muted); font-size: var(--fp-text-sm); overflow-wrap: anywhere; }
.fp-photo-pick.has-file { border-style: solid; border-color: var(--fp-success); background: var(--fp-success-soft); }
.fp-photo-pick.has-file > .bi { background: var(--fp-success); }
.fp-photo-pick.has-file small { color: var(--fp-success); font-weight: 600; }
/* inspection: two columns of tiles; a ticked one turns red and opens its details across the row */
.fp-dvir-list { grid-template-columns: 1fr 1fr; gap: .5rem; }
.fp-dvir-item { border-radius: 14px; padding: .7rem .8rem; transition: background var(--fp-transition), border-color var(--fp-transition); }
.fp-dvir-item > .form-check { display: flex; align-items: center; gap: .55rem; padding-left: 0; min-height: 30px; }
.fp-dvir-item > .form-check .form-check-input { float: none; margin: 0; flex: none; width: 1.2rem; height: 1.2rem; }
.fp-dvir-item > .form-check .form-check-label { font-size: var(--fp-text-base); line-height: 1.25; }
.fp-dvir-item:has([data-dvir-toggle]:checked) { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--fp-danger) 55%, var(--fp-border)); background: var(--fp-danger-soft); }
.fp-dvir-item:has([data-dvir-toggle]:checked) > .form-check .form-check-label { color: var(--fp-danger); font-weight: 650; }
.fp-dvir-item [data-dvir-toggle]:checked { background-color: var(--fp-danger); border-color: var(--fp-danger); }
/* bottom tabs: the current one sits on a pill */
.fp-driver-tabbar a { position: relative; }
.fp-driver-tabbar a.is-active i { background: var(--fp-accent-soft); border-radius: var(--fp-radius-pill); padding: .1rem .9rem; }

/* ---- Help & guides ---- */
.fp-help { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 992px) { .fp-help { grid-template-columns: 250px 1fr; } .fp-help-toc { position: sticky; top: 5rem; } }
.fp-help-toc { display: flex; flex-direction: column; gap: .1rem; }
.fp-help-toc-title { margin: .7rem 0 .25rem; font-size: var(--fp-text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-text-muted); }
.fp-help-toc-title:first-child { margin-top: 0; }
.fp-help-toc a { padding: .35rem .6rem; border-radius: var(--fp-radius-sm); color: var(--fp-text); font-size: var(--fp-text-base); }
.fp-help-toc a:hover { background: var(--fp-accent-soft); color: var(--fp-accent-text); }
.fp-help-body { display: grid; gap: 1rem; }
.fp-help-step { scroll-margin-top: 5rem; }
.fp-help-step h3 { display: flex; align-items: center; gap: .7rem; font-size: var(--fp-text-xl); font-weight: 750; margin-bottom: .8rem; }
.fp-help-step h3 span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; font-size: var(--fp-text-md);
    color: #fff; background: linear-gradient(145deg, #18a08e, #0b5d56); }
.fp-help-step p, .fp-help-step li { line-height: 1.65; }
.fp-help-step p:last-child { margin-bottom: 0; }
.fp-help-step a { font-weight: 600; }


.fp-driver-action {
    background: linear-gradient(180deg, color-mix(in srgb, var(--fp-accent) 86%, #fff) 0%, var(--fp-accent) 100%);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--fp-accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* ---- Command center status: a calm header, not a siren ---- */
.fp-cc-status {
    border-left: 0;
    background:
        radial-gradient(640px 220px at 0% 0%, color-mix(in srgb, var(--fp-cc-tone) 11%, transparent), transparent 70%),
        var(--fp-surface);
    box-shadow: var(--fp-shadow-md);
    padding: 1.3rem 1.5rem;
}
.fp-cc-greeting { display: block; font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; color: var(--fp-heading); line-height: 1.2; }
.fp-cc-status-label {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem;
    padding: .18rem .6rem; border-radius: var(--fp-radius-pill);
    background: color-mix(in srgb, var(--fp-cc-tone) 12%, transparent);
    font-size: var(--fp-text-2xs); letter-spacing: .08em;
}
.fp-cc-status-headline { font-weight: 500; color: var(--fp-text); margin-top: .35rem; }
.fp-cc-status-stats { gap: 0; }
.fp-cc-status-stats > div { padding: 0 1.25rem; border-left: 1px solid var(--fp-border); }
.fp-cc-status-stats > div:first-child { border-left: 0; }
.fp-cc-status-stats dd { font-size: 1.6rem; font-weight: 750; }
@media (max-width: 767.98px) {
    .fp-cc-status-stats > div { padding: 0; border-left: 0; }
    .fp-cc-status-stats { gap: 1rem 1.5rem; }
}

/* ---- Entrance: the page settles in once, top to bottom ---- */
@keyframes fp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fp-content > * { animation: fp-rise .42s cubic-bezier(.2, .7, .2, 1) both; }
.fp-content > :nth-child(2) { animation-delay: .04s; }
.fp-content > :nth-child(3) { animation-delay: .08s; }
.fp-content > :nth-child(4) { animation-delay: .12s; }
.fp-content > :nth-child(5) { animation-delay: .16s; }
.fp-content > :nth-child(n+6) { animation-delay: .2s; }

/* Owner-operator (2026-10-07): the office <-> cab switch, the cut-down menu and its toggle,
   and the sign-up's truck number shown only when "I drive my own truck" is ticked. */
.fp-nav-switch { font-weight: 600; }
.fp-nav-compact .fp-nav-more:not(.active):not([open]) { display: none !important; }   /* the page you are on stays */
.fp-nav-toggle { width: 100%; border: 0; background: transparent; text-align: left; margin-top: .25rem; opacity: .85; }
.fp-nav-toggle:hover, .fp-nav-toggle:focus-visible { opacity: 1; }
.fp-own-truck:has(input:not(:checked)) { margin-bottom: 1.5rem !important; }
.fp-own-truck:has(input:not(:checked)) + .fp-own-truck-unit { display: none; }

/* Driver app (2026-10-07): one title on a phone (the page's own heading; the top bar repeated it),
   and the "put it on your home screen" card. */
@media (max-width: 991.98px) {
    .fp-driver-app .fp-topbar .fp-page-title { visibility: hidden; }
}
.fp-install { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; margin-bottom: 1rem;
    border-radius: 16px; background: var(--fp-surface, #fff); border: 1px solid var(--fp-border, rgba(0,0,0,.08));
    box-shadow: 0 6px 18px -12px rgba(15, 118, 110, .45); }
.fp-install[hidden] { display: none; }
.fp-install-icon { border-radius: 11px; flex: 0 0 auto; }
.fp-install-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: .9rem; line-height: 1.3; }
.fp-install-text span { color: var(--fp-text-muted, #64748b); }
.fp-install-close { border: 0; background: transparent; color: var(--fp-text-muted, #64748b); padding: .4rem; border-radius: 8px; }
.fp-install-close:hover, .fp-install-close:focus-visible { background: rgba(0,0,0,.05); }
.fp-lane-end { white-space: nowrap; }

/* Driver application (2026-10-07): the public form a carrier links from a job ad. */
.fp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fp-apply-job { border: 1px solid var(--fp-border); border-radius: 12px; padding: .75rem .9rem .5rem; margin-bottom: .75rem; }
.fp-apply-job + .fp-form-section { margin-top: 1.25rem; }
.fp-apply .text-uppercase::placeholder { text-transform: none; }
.fp-apply-more > summary { list-style: none; }
.fp-apply-more > summary::-webkit-details-marker { display: none; }
.fp-apply-more[open] > summary { display: none; }

/* Inbox (2026-10-09) */
.fp-inbox-drop { cursor: pointer; min-height: 120px; }
.fp-inbox-preview { display: block; width: 100%; height: min(70vh, 720px); border: 1px solid var(--fp-border); border-radius: 10px; background: var(--fp-surface-2); margin-bottom: .75rem; object-fit: contain; }
img.fp-inbox-preview { height: auto; max-height: 70vh; }
.fp-inbox-text { white-space: pre-wrap; word-break: break-word; background: var(--fp-surface-2); border-radius: 10px; padding: .75rem .9rem; max-height: 420px; overflow: auto; font-size: .9rem; }