/* ==========================================================================
   Sataloop Fleet design system - light + dark (Phase 2 / 3)
   --------------------------------------------------------------------------
   Loaded last in every page head (application/views/fleet/theme_head.php),
   so it wins over AdminLTE, Bootstrap and the vendor plugins.

   Theme: <html data-theme="light|dark"> is set before first paint by the
   inline script in theme_head.php. The user's choice (light / dark / system)
   is kept in localStorage "fleet-theme"; assets/fleet/fleet-theme.js draws
   the switch, follows the system setting and restyles maps and charts.

   Rule of thumb: never hard-code a colour below the token block - use a
   token, so both themes stay correct. Same family as Sataloop HMS.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    color-scheme: light;

    /* surfaces: warm paper, like a well-used logbook */
    --fl-bg: #F6F1E9;
    --fl-surface: #FFFFFF;
    --fl-surface-2: #FBF7F1;          /* table heads, subtle fills */
    --fl-elevated: #FFFFFF;           /* modals, dropdowns, popovers */
    --fl-input: #FFFFFF;
    --fl-hover: #F4EDE3;
    --fl-overlay: rgba(36, 26, 19, .55);

    /* lines */
    --fl-border: #E8DED1;
    --fl-border-strong: #D5C7B5;
    --fl-divider: #F0E8DD;

    /* text: warm ink, never cold grey */
    --fl-text: #221B15;
    --fl-text-2: #4A4037;
    --fl-muted: #6E6255;
    --fl-placeholder: #A5988A;
    --fl-inverse: #FFFFFF;

    /* brand: burnt orange of a Ghanaian sunset on the road, gold road markings, espresso frame */
    --fl-primary: #C2410C;
    --fl-primary-hover: #9A3412;
    --fl-primary-soft: rgba(194, 65, 12, .10);
    --fl-primary-contrast: #FFFFFF;
    --fl-accent: #E9A23B;             /* highlights, road-line motif; never body text on white */
    --fl-accent-text: #8A5500;        /* gold that passes AA as text on white */
    --fl-accent-soft: rgba(233, 162, 59, .16);
    --fl-navy: #241A13;               /* kept name for older rules: the espresso frame colour */

    /* status (moving / idle / offline / alert map onto these) */
    --fl-success: #15803D;  --fl-success-soft: rgba(21, 128, 61, .11);
    --fl-warning: #B45309;  --fl-warning-soft: rgba(217, 119, 6, .14);
    --fl-danger:  #B91C1C;  --fl-danger-soft:  rgba(185, 28, 28, .10);
    --fl-info:    #1D4ED8;  --fl-info-soft:    rgba(29, 78, 216, .10);
    --fl-offline: #78716C;  --fl-offline-soft: rgba(120, 113, 108, .14);

    /* sidebar: warm espresso in both themes */
    --fl-side-bg: #241A13;
    --fl-side-bg-2: #2E221A;
    --fl-side-text: #EADFD2;
    --fl-side-muted: #A89788;
    --fl-side-active: #F4884E;
    --fl-side-hover: rgba(255, 244, 230, .07);

    /* shape + depth: softer and rounder than a typical admin panel */
    --fl-r-sm: 10px;
    --fl-r: 14px;
    --fl-r-lg: 20px;
    --fl-r-pill: 999px;
    --fl-shadow-sm: 0 1px 2px rgba(60, 38, 20, .05), 0 3px 10px rgba(60, 38, 20, .05);
    --fl-shadow: 0 6px 20px rgba(60, 38, 20, .09);
    --fl-shadow-lg: 0 22px 54px rgba(60, 38, 20, .18);
    --fl-focus: 0 0 0 3px rgba(194, 65, 12, .25);

    /* type: a soft serif for headings, a friendly rounded sans for everything else */
    --fl-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fl-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fl-fs-xs: .78rem;
    --fl-fs-sm: .84rem;
    --fl-fs: .9rem;
    --fl-fs-md: 1.02rem;
    --fl-fs-lg: 1.28rem;
    --fl-fs-xl: 1.6rem;

    /* spacing */
    --fl-s1: 4px; --fl-s2: 8px; --fl-s3: 12px; --fl-s4: 16px; --fl-s5: 20px; --fl-s6: 24px; --fl-s8: 32px;

    --fl-speed: .16s;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --fl-bg: #15100C;
    --fl-surface: #1E1712;
    --fl-surface-2: #1A140F;
    --fl-elevated: #271E17;
    --fl-input: #18120E;
    --fl-hover: #2A2019;
    --fl-overlay: rgba(8, 5, 3, .72);

    --fl-border: #3A2E24;
    --fl-border-strong: #4D3E31;
    --fl-divider: #2C231B;

    --fl-text: #F4EBE1;
    --fl-text-2: #D8CABB;
    --fl-muted: #A8998A;
    --fl-placeholder: #7A6B5D;
    --fl-inverse: #15100C;

    --fl-primary: #F4884E;
    --fl-primary-hover: #F7A374;
    --fl-primary-soft: rgba(244, 136, 78, .15);
    --fl-primary-contrast: #2A1206;
    --fl-accent: #F2B85A;
    --fl-accent-text: #F2B85A;
    --fl-accent-soft: rgba(242, 184, 90, .15);

    --fl-success: #4ADE80;  --fl-success-soft: rgba(74, 222, 128, .13);
    --fl-warning: #FBBF24;  --fl-warning-soft: rgba(251, 191, 36, .14);
    --fl-danger:  #F87171;  --fl-danger-soft:  rgba(248, 113, 113, .14);
    --fl-info:    #7DA2FF;  --fl-info-soft:    rgba(125, 162, 255, .14);
    --fl-offline: #A8A29E;  --fl-offline-soft: rgba(168, 162, 158, .14);

    --fl-side-bg: #100B08;
    --fl-side-bg-2: #19120D;
    --fl-side-text: #E6D9CB;
    --fl-side-muted: #8F7E6F;
    --fl-side-active: #F4884E;
    --fl-side-hover: rgba(255, 244, 230, .05);

    --fl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --fl-shadow: 0 6px 20px rgba(0, 0, 0, .4);
    --fl-shadow-lg: 0 22px 54px rgba(0, 0, 0, .6);
    --fl-focus: 0 0 0 3px rgba(244, 136, 78, .35);
}

/* ---------- 2. Base --------------------------------------------------------- */
html[data-theme] { background: var(--fl-bg); }
html[data-theme] body {
    font-family: var(--fl-font) !important;
    font-size: var(--fl-fs);
    color: var(--fl-text) !important;
    background: var(--fl-bg) !important;
    -webkit-font-smoothing: antialiased;
    transition: none;
}
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] h5, html[data-theme] h6,
html[data-theme] .h1, html[data-theme] .h2, html[data-theme] .h3, html[data-theme] .h4 {
    font-family: var(--fl-font-head) !important;
    color: var(--fl-text) !important;
    letter-spacing: -.01em;
    font-weight: 700;
}
html[data-theme] p, html[data-theme] li, html[data-theme] td, html[data-theme] dd { color: inherit; }
html[data-theme] a { color: var(--fl-primary); }
html[data-theme] a:hover { color: var(--fl-primary-hover); }
html[data-theme] small, html[data-theme] .text-muted, html[data-theme] .text-gray, html[data-theme] .help-block,
html[data-theme] .form-text { color: var(--fl-muted) !important; }
html[data-theme] hr { border-color: var(--fl-divider) !important; opacity: 1; }
html[data-theme] label { font-weight: 600 !important; color: var(--fl-text-2) !important; font-size: var(--fl-fs-sm); margin-bottom: 6px; padding-top: 0; }
html[data-theme] ::selection { background: var(--fl-primary); color: var(--fl-primary-contrast); }
html[data-theme] :focus-visible { outline: none; box-shadow: var(--fl-focus) !important; border-radius: var(--fl-r-sm); }
html[data-theme] * { scrollbar-width: thin; scrollbar-color: var(--fl-border-strong) transparent; }
html[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] ::-webkit-scrollbar-thumb { background: var(--fl-border-strong); border-radius: 10px; border: 2px solid var(--fl-bg); }
html[data-theme] .content-wrapper {
    background: var(--fl-bg) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--fl-text);
}
html[data-theme] .content { padding: 0 var(--fl-s4) var(--fl-s6); }

/* ---------- 3. Top bar ----------------------------------------------------- */
html[data-theme] .main-header.navbar {
    background: color-mix(in srgb, var(--fl-surface) 88%, transparent) !important;
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--fl-border) !important;
    box-shadow: none !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
    position: sticky; top: 0; z-index: 1030;
}
html[data-theme] .main-header .nav-link { color: var(--fl-text-2) !important; border-radius: var(--fl-r-sm); transition: background var(--fl-speed), color var(--fl-speed); }
html[data-theme] .main-header .nav-link:hover { background: var(--fl-hover); color: var(--fl-text) !important; }
html[data-theme] .main-header .nav-link::after { display: none !important; }
html[data-theme] .navbar-badge { background: var(--fl-accent) !important; color: #fff !important; font-weight: 700; }

/* Theme switcher (light / dark / system) */
/* Theme switch: outlined pill with high-contrast icons so it reads in both themes */
.fl-theme-switch {
    display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--fl-r-pill);
    background: var(--fl-surface) !important; border: 1.5px solid var(--fl-border-strong) !important;
    box-shadow: var(--fl-shadow-sm);
}
html[data-theme="dark"] .fl-theme-switch { background: var(--fl-surface-2) !important; border-color: rgba(255, 255, 255, .22) !important; }
.fl-theme-switch button {
    width: 30px; height: 28px; border: 0 !important; border-radius: var(--fl-r-pill); background: transparent !important;
    color: var(--fl-text-2) !important; display: grid; place-items: center; cursor: pointer; font-size: 13px; padding: 0; line-height: 1;
    transition: background var(--fl-speed), color var(--fl-speed); box-shadow: none !important;
}
html[data-theme="dark"] .fl-theme-switch button { color: #C9D6E2 !important; }
.fl-theme-switch button i { color: inherit !important; }
.fl-theme-switch button:hover { color: var(--fl-primary) !important; background: var(--fl-primary-soft) !important; }
.fl-theme-switch button:focus-visible { outline: 2px solid var(--fl-primary); outline-offset: 1px; }
.fl-theme-switch button[aria-pressed="true"] { background: var(--fl-primary) !important; color: var(--fl-primary-contrast) !important; }
html[data-theme="dark"] .fl-theme-switch button[aria-pressed="true"] { color: var(--fl-primary-contrast) !important; }
.fl-theme-switch--floating { position: fixed; top: 14px; right: 14px; z-index: 1100; }

/* ---------- 4. Sidebar ----------------------------------------------------- */
html[data-theme] .main-sidebar {
    background: linear-gradient(180deg, var(--fl-side-bg), var(--fl-side-bg-2)) !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(255, 255, 255, .04);
}
html[data-theme] .main-sidebar .brand-link {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    padding: 14px 12px !important;
}
html[data-theme] .main-sidebar .brand-link .brand-image {
    width: 38px !important; height: 38px !important; border-radius: 10px !important; border: 0 !important;
    box-shadow: none !important; object-fit: cover; max-height: none; margin-left: 4px;
}
html[data-theme] .main-sidebar .brand-text {
    font-family: var(--fl-font-head) !important; font-size: 1rem !important; font-weight: 700 !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important;
    letter-spacing: 0 !important; text-transform: none !important; margin-left: 10px;
}
html[data-theme] .main-sidebar .brand-link.fl-brand { display: flex !important; align-items: center; gap: 0; white-space: nowrap; overflow: hidden; }
html[data-theme] .main-sidebar .brand-link.fl-brand .brand-image { float: none; margin: 0 0 0 4px; flex: 0 0 auto; }

/* section headings ("Operations", "Setup"...) */
html[data-theme] .nav-sidebar .nav-header {
    color: var(--fl-side-muted) !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 18px 12px 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* links */
html[data-theme] .nav-sidebar .nav-item > .nav-link {
    color: var(--fl-side-text) !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    margin: 1px 0;
    font-size: var(--fl-fs) !important;
    font-weight: 500;
    transform: none !important;
    transition: background var(--fl-speed), color var(--fl-speed);
}
html[data-theme] .nav-sidebar .nav-link .nav-icon { color: var(--fl-side-muted); width: 1.4rem; font-size: 1rem; transition: color var(--fl-speed); }
html[data-theme] .nav-sidebar .nav-link > p > .right { transition: transform var(--fl-speed) ease; }
html[data-theme] .nav-sidebar .nav-item > .nav-link:hover { background: var(--fl-side-hover) !important; color: #fff !important; }
html[data-theme] .nav-sidebar .nav-item > .nav-link:hover .nav-icon { color: #fff; }
html[data-theme] .nav-sidebar .nav-item > .nav-link:focus-visible { outline: 2px solid var(--fl-side-active); outline-offset: -2px; }

/* an expanded group: quietly lifted, no accent */
html[data-theme] .nav-sidebar > .nav-item.menu-open > .nav-link { background: rgba(255, 255, 255, .04) !important; color: #fff !important; box-shadow: none !important; }
html[data-theme] .nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon { color: #fff; }

/* the page you are on (a top-level link, or the group that holds it) */
html[data-theme] .nav-sidebar > .nav-item > .nav-link.active,
html[data-theme] .nav-sidebar > .nav-item > .nav-link.fl-parent-active {
    background: color-mix(in srgb, var(--fl-side-active) 16%, transparent) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--fl-side-active) !important;
}
html[data-theme] .nav-sidebar .nav-link.active .nav-icon,
html[data-theme] .nav-sidebar .nav-link.fl-parent-active .nav-icon { color: var(--fl-side-active) !important; }

/* sub-menus: a thin guide line and small dots instead of big circles */
html[data-theme] .nav-sidebar .nav-treeview { padding-left: 0; margin: 2px 0 6px 22px; border-left: 1px solid rgba(255, 255, 255, .08); }
html[data-theme] .nav-sidebar .nav-treeview > .nav-item > .nav-link { position: relative; font-size: var(--fl-fs-sm) !important; padding: 7px 10px !important; margin-left: 6px; color: var(--fl-side-text) !important; }
html[data-theme] .nav-sidebar .nav-treeview .nav-icon.fa-circle { font-size: 6px !important; width: 1rem; vertical-align: middle; }
html[data-theme] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active { background: var(--fl-side-hover) !important; box-shadow: none !important; color: #fff !important; font-weight: 600; }
html[data-theme] .nav-sidebar .nav-treeview > .nav-item > .nav-link.active::before {
    content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--fl-side-active);
}
html[data-theme] .nav-sidebar .badge { font-size: 10px; }
html[data-theme] .sidebar { padding-bottom: 24px; }

/* collapsed "mini" sidebar (desktop): headings become thin dividers */
@media (min-width: 992px) {
    html[data-theme] .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-header {
        display: block !important; height: 1px; padding: 0 !important; margin: 10px 8px; font-size: 0; background: rgba(255, 255, 255, .08);
    }
    html[data-theme] .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview { margin-left: 0; border-left: 0; }
    html[data-theme] .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview > .nav-item > .nav-link { margin-left: 0; }
}

/* phones and tablets: off-canvas menu over a dimmed page */
@media (max-width: 991.98px) {
    html[data-theme] .main-sidebar { box-shadow: var(--fl-shadow-lg, 0 20px 50px rgba(0, 0, 0, .35)) !important; }
    html[data-theme] #sidebar-overlay { background: rgba(6, 14, 22, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    html[data-theme] .nav-sidebar .nav-item > .nav-link { padding: 11px 12px !important; }
}

/* ---------- 5. Page header + breadcrumbs ----------------------------------- */
html[data-theme] .content-header { padding: 20px var(--fl-s4) 12px !important; }
html[data-theme] .content-header h1, html[data-theme] .content-header .m-0 {
    font-size: var(--fl-fs-xl) !important; font-weight: 800 !important; color: var(--fl-text) !important;
}
/* two header styles exist across modules (plain, and "bg-white shadow-sm display-4"); render both the same */
html[data-theme] .content-header { background: transparent !important; box-shadow: none !important; margin-bottom: 0 !important; }
html[data-theme] .content-header h1 { display: flex; align-items: center; gap: 12px; line-height: 1.25 !important; margin: 0 0 4px !important; letter-spacing: -.01em; }
html[data-theme] .content-header h1 > i {
    flex: 0 0 auto; width: 38px; height: 38px; margin: 0 !important; border-radius: 10px; display: inline-grid; place-items: center;
    font-size: 17px !important; background: var(--fl-primary-soft); color: var(--fl-primary) !important;
}
html[data-theme] .content-header .row { align-items: center; row-gap: 6px; }
html[data-theme] .content-header .breadcrumb.float-sm-right { justify-content: flex-end; }
@media (max-width: 575.98px) {
    html[data-theme] .content-header .breadcrumb.float-sm-right { justify-content: flex-start; float: none !important; }
}
html[data-theme] .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0; font-size: var(--fl-fs-sm); }
html[data-theme] .breadcrumb-item, html[data-theme] .breadcrumb-item a { color: var(--fl-muted) !important; }
html[data-theme] .breadcrumb-item.active { color: var(--fl-text-2) !important; font-weight: 600; }
html[data-theme] .breadcrumb-item + .breadcrumb-item::before { color: var(--fl-placeholder) !important; }

/* Demo banner */
.demo-mode-banner {
    background: var(--fl-accent-soft); color: var(--fl-accent-text); border-bottom: 1px solid color-mix(in srgb, var(--fl-accent) 35%, transparent);
    font-size: var(--fl-fs-sm); font-weight: 600; text-align: center; padding: 8px 16px; letter-spacing: .01em;
}
.demo-mode-banner i { margin-right: 6px; }

/* ---------- 6. Cards ------------------------- */
html[data-theme] .card, html[data-theme] .panel {
    background: var(--fl-surface) !important;
    color: var(--fl-text) !important;
    border: 1px solid var(--fl-border) !important;
    border-radius: var(--fl-r) !important;
    box-shadow: var(--fl-shadow-sm) !important;
    backdrop-filter: none !important;
    margin-bottom: var(--fl-s5);
}
html[data-theme] .card:hover { box-shadow: var(--fl-shadow-sm) !important; }
html[data-theme] .card-header, html[data-theme] .panel-heading {
    background: transparent !important;
    color: var(--fl-text) !important;
    border-bottom: 1px solid var(--fl-divider) !important;
    padding: 14px 18px !important;
    border-radius: var(--fl-r) var(--fl-r) 0 0 !important;
}
html[data-theme] .card-title, html[data-theme] .panel-title, html[data-theme] .card-header h3, html[data-theme] .card-header h4 {
    font-family: var(--fl-font-head) !important; font-size: var(--fl-fs-md) !important; font-weight: 700 !important; color: var(--fl-text) !important; margin: 0;
}
html[data-theme] .card-body, html[data-theme] .panel-body { padding: 18px !important; color: var(--fl-text); }
html[data-theme] .card-footer, html[data-theme] .panel-footer {
    background: var(--fl-surface-2) !important; border-top: 1px solid var(--fl-divider) !important;
    border-radius: 0 0 var(--fl-r) var(--fl-r) !important;
}
/* AdminLTE coloured card outlines -> a slim accent on top instead of a heavy frame */
html[data-theme] .card-primary.card-outline, html[data-theme] .card-info.card-outline,
html[data-theme] .card-success.card-outline, html[data-theme] .card-danger.card-outline,
html[data-theme] .card-warning.card-outline { border-top: 3px solid var(--fl-primary) !important; }
html[data-theme] .card-primary:not(.card-outline) > .card-header,
html[data-theme] .card-info:not(.card-outline) > .card-header,
html[data-theme] .card-success:not(.card-outline) > .card-header {
    background: var(--fl-primary-soft) !important; color: var(--fl-text) !important;
}
html[data-theme] .card-primary:not(.card-outline) > .card-header *,
html[data-theme] .card-info:not(.card-outline) > .card-header * { color: var(--fl-text) !important; }

/* ---------- 7. KPI tiles (AdminLTE small-box / info-box) ------------------- */
html[data-theme] .small-box {
    background: var(--fl-surface) !important;
    color: var(--fl-text) !important;
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-r-lg) !important;
    box-shadow: var(--fl-shadow-sm) !important;
    overflow: hidden;
    transition: transform var(--fl-speed), box-shadow var(--fl-speed), border-color var(--fl-speed);
}
html[data-theme] .small-box:hover { transform: translateY(-2px); box-shadow: var(--fl-shadow) !important; border-color: var(--fl-border-strong); }
html[data-theme] .small-box .inner { padding: 18px 20px !important; }
html[data-theme] .small-box h3 { font-size: 1.9rem !important; font-weight: 800 !important; color: var(--fl-text) !important; margin: 0 0 4px; }
html[data-theme] .small-box p { color: var(--fl-muted) !important; font-weight: 600; font-size: var(--fl-fs-sm); margin: 0; }
html[data-theme] .small-box .icon > i, html[data-theme] .small-box .icon > .fa, html[data-theme] .small-box .icon > .fas {
    color: var(--fl-primary) !important; opacity: .18; font-size: 64px !important; top: 16px !important;
}
html[data-theme] .small-box .small-box-footer {
    background: var(--fl-surface-2) !important; color: var(--fl-primary) !important; font-weight: 600;
    border-top: 1px solid var(--fl-divider); padding: 8px 0;
}
html[data-theme] .small-box .small-box-footer:hover { background: var(--fl-primary-soft) !important; }
/* keep the meaning of the vendor colours as an accent stripe */
html[data-theme] .small-box.bg-info    { box-shadow: inset 4px 0 0 var(--fl-info), var(--fl-shadow-sm) !important; }
html[data-theme] .small-box.bg-success { box-shadow: inset 4px 0 0 var(--fl-success), var(--fl-shadow-sm) !important; }
html[data-theme] .small-box.bg-warning { box-shadow: inset 4px 0 0 var(--fl-warning), var(--fl-shadow-sm) !important; }
html[data-theme] .small-box.bg-danger  { box-shadow: inset 4px 0 0 var(--fl-danger), var(--fl-shadow-sm) !important; }
html[data-theme] .small-box.bg-primary { box-shadow: inset 4px 0 0 var(--fl-primary), var(--fl-shadow-sm) !important; }
html[data-theme] .small-box.bg-info .icon > i    { color: var(--fl-info) !important; }
html[data-theme] .small-box.bg-success .icon > i { color: var(--fl-success) !important; }
html[data-theme] .small-box.bg-warning .icon > i { color: var(--fl-warning) !important; }
html[data-theme] .small-box.bg-danger .icon > i  { color: var(--fl-danger) !important; }

html[data-theme] .info-box {
    background: var(--fl-surface) !important; color: var(--fl-text) !important;
    border: 1px solid var(--fl-border); border-radius: var(--fl-r-lg) !important; box-shadow: var(--fl-shadow-sm) !important;
    padding: 14px !important; min-height: 0;
}
html[data-theme] .info-box .info-box-icon {
    border-radius: var(--fl-r) !important; width: 52px; height: 52px; font-size: 1.35rem;
    background: var(--fl-primary-soft) !important; color: var(--fl-primary) !important; box-shadow: none !important;
}
html[data-theme] .info-box .info-box-icon.bg-success, html[data-theme] .info-box .info-box-icon.bg-green { background: var(--fl-success-soft) !important; color: var(--fl-success) !important; }
html[data-theme] .info-box .info-box-icon.bg-warning, html[data-theme] .info-box .info-box-icon.bg-yellow { background: var(--fl-warning-soft) !important; color: var(--fl-warning) !important; }
html[data-theme] .info-box .info-box-icon.bg-danger, html[data-theme] .info-box .info-box-icon.bg-red { background: var(--fl-danger-soft) !important; color: var(--fl-danger) !important; }
html[data-theme] .info-box .info-box-icon.bg-info, html[data-theme] .info-box .info-box-icon.bg-aqua { background: var(--fl-info-soft) !important; color: var(--fl-info) !important; }
html[data-theme] .info-box .info-box-text { color: var(--fl-muted) !important; font-size: var(--fl-fs-sm); font-weight: 600; text-transform: none; }
html[data-theme] .info-box .info-box-number { color: var(--fl-text) !important; font-size: 1.35rem; font-weight: 800; }

/* ---------- 8. Buttons ----------------------------------------------------- */
html[data-theme] .btn {
    border-radius: var(--fl-r-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-size: var(--fl-fs-sm) !important;
    padding: 7px 14px !important;
    transform: none !important;
    box-shadow: none !important;
    transition: background var(--fl-speed), color var(--fl-speed), border-color var(--fl-speed), box-shadow var(--fl-speed);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    line-height: 1.35;
}
html[data-theme] .btn:focus-visible { box-shadow: var(--fl-focus) !important; }
html[data-theme] .btn-sm, html[data-theme] .btn-group-sm > .btn, html[data-theme] table .btn { padding: 4px 10px !important; font-size: var(--fl-fs-xs) !important; }
html[data-theme] .btn-lg { padding: 11px 20px !important; font-size: var(--fl-fs-md) !important; }
html[data-theme] .btn-xs { padding: 2px 8px !important; font-size: 11px !important; }
html[data-theme] .btn:disabled, html[data-theme] .btn.disabled { opacity: .5 !important; cursor: not-allowed; }

/* solid */
html[data-theme] .btn-primary { background: var(--fl-primary) !important; border: 1px solid var(--fl-primary) !important; color: var(--fl-primary-contrast) !important; }
html[data-theme] .btn-primary:hover { background: var(--fl-primary-hover) !important; border-color: var(--fl-primary-hover) !important; }
html[data-theme] .btn-success { background: var(--fl-success) !important; border: 1px solid var(--fl-success) !important; color: #fff !important; }
html[data-theme] .btn-danger { background: var(--fl-danger) !important; border: 1px solid var(--fl-danger) !important; color: #fff !important; }
html[data-theme="dark"] .btn-success, html[data-theme="dark"] .btn-danger { color: var(--fl-inverse) !important; }
html[data-theme] .btn-success:hover, html[data-theme] .btn-danger:hover { filter: brightness(1.08); }
/* tonal: the app uses btn-info ~440 times for view/edit - make it calm */
html[data-theme] .btn-info { background: var(--fl-info-soft) !important; border: 1px solid transparent !important; color: var(--fl-info) !important; }
html[data-theme] .btn-info:hover { background: var(--fl-info) !important; color: #fff !important; }
html[data-theme="dark"] .btn-info:hover { color: var(--fl-inverse) !important; }
html[data-theme] .btn-warning { background: var(--fl-warning-soft) !important; border: 1px solid transparent !important; color: var(--fl-warning) !important; }
html[data-theme] .btn-warning:hover { background: var(--fl-warning) !important; color: #fff !important; }
/* neutral */
html[data-theme] .btn-secondary, html[data-theme] .btn-default, html[data-theme] .btn-light {
    background: var(--fl-surface) !important; border: 1px solid var(--fl-border-strong) !important; color: var(--fl-text-2) !important;
}
html[data-theme] .btn-secondary:hover, html[data-theme] .btn-default:hover, html[data-theme] .btn-light:hover { background: var(--fl-hover) !important; color: var(--fl-text) !important; }
html[data-theme] .btn-dark { background: var(--fl-text) !important; border: 1px solid var(--fl-text) !important; color: var(--fl-inverse) !important; }
html[data-theme] .btn-link { background: transparent !important; border: 0 !important; color: var(--fl-primary) !important; }
/* outline */
html[data-theme] .btn-outline-primary { background: transparent !important; border: 1px solid var(--fl-primary) !important; color: var(--fl-primary) !important; }
html[data-theme] .btn-outline-primary:hover { background: var(--fl-primary-soft) !important; }
html[data-theme] .btn-outline-danger { background: transparent !important; border: 1px solid var(--fl-danger) !important; color: var(--fl-danger) !important; }
html[data-theme] .btn-outline-secondary, html[data-theme] .btn-outline-info, html[data-theme] .btn-outline-success {
    background: transparent !important; border: 1px solid var(--fl-border-strong) !important; color: var(--fl-text-2) !important;
}
/* DataTables export buttons */
html[data-theme] .dt-buttons .btn, html[data-theme] .buttons-html5 {
    background: var(--fl-surface) !important; border: 1px solid var(--fl-border-strong) !important; color: var(--fl-text-2) !important;
}
html[data-theme] .dt-buttons .btn:hover, html[data-theme] .buttons-html5:hover { background: var(--fl-hover) !important; color: var(--fl-text) !important; }

/* ---------- 9. Forms ------------------------------------------------------- */
html[data-theme] .form-control, html[data-theme] .custom-select, html[data-theme] .form-select,
html[data-theme] input[type="text"], html[data-theme] input[type="email"], html[data-theme] input[type="number"],
html[data-theme] input[type="password"], html[data-theme] input[type="search"], html[data-theme] input[type="tel"],
html[data-theme] input[type="date"], html[data-theme] input[type="time"], html[data-theme] input[type="datetime-local"],
html[data-theme] input[type="url"], html[data-theme] textarea, html[data-theme] select {
    background-color: var(--fl-input) !important;
    color: var(--fl-text) !important;
    border: 1px solid var(--fl-border-strong) !important;
    border-radius: var(--fl-r-sm) !important;
    font-size: var(--fl-fs) !important;
    box-shadow: none !important;
    transition: border-color var(--fl-speed), box-shadow var(--fl-speed);
}
html[data-theme] .form-control:not(textarea) { min-height: 38px; }
html[data-theme] .form-control:focus, html[data-theme] .custom-select:focus, html[data-theme] .form-select:focus,
html[data-theme] textarea:focus, html[data-theme] select:focus, html[data-theme] input:focus {
    border-color: var(--fl-primary) !important; box-shadow: var(--fl-focus) !important; outline: none;
}
html[data-theme] .form-control::placeholder, html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--fl-placeholder) !important; opacity: 1; }
html[data-theme] .form-control:disabled, html[data-theme] .form-control[readonly] { background-color: var(--fl-surface-2) !important; color: var(--fl-muted) !important; }
html[data-theme] .is-invalid, html[data-theme] .has-error .form-control { border-color: var(--fl-danger) !important; }
html[data-theme] .invalid-feedback, html[data-theme] .text-danger { color: var(--fl-danger) !important; }
html[data-theme] .input-group-text, html[data-theme] .input-group-addon {
    background: var(--fl-surface-2) !important; color: var(--fl-muted) !important; border: 1px solid var(--fl-border-strong) !important;
}
html[data-theme] .form-group { margin-bottom: 14px; }
html[data-theme] .form-group label .required, html[data-theme] label .text-danger { color: var(--fl-danger) !important; }
html[data-theme] .custom-control-label::before { background: var(--fl-input) !important; border-color: var(--fl-border-strong) !important; }
html[data-theme] .custom-control-input:checked ~ .custom-control-label::before,
html[data-theme] .form-check-input:checked { background-color: var(--fl-primary) !important; border-color: var(--fl-primary) !important; }
html[data-theme] .form-check-input { background-color: var(--fl-input); border-color: var(--fl-border-strong); }
html[data-theme] input[type="checkbox"], html[data-theme] input[type="radio"] { accent-color: var(--fl-primary); }
html[data-theme] input[type="file"].form-control { padding: 6px; }
html[data-theme] input[type="file"]::file-selector-button {
    border: 0; border-radius: 6px; background: var(--fl-primary-soft); color: var(--fl-primary); font-weight: 600; padding: 4px 10px; margin-right: 10px; cursor: pointer;
}
html[data-theme] .icheck-primary > input:first-child:checked + label::before { background: var(--fl-primary) !important; border-color: var(--fl-primary) !important; }

/* ---------- 10. Tables + DataTables --------------------------------------- */
html[data-theme] .table {
    color: var(--fl-text) !important;
    background: transparent !important;
    border-collapse: separate !important; border-spacing: 0;
    box-shadow: none !important; border-radius: 0 !important; overflow: visible;
    font-size: var(--fl-fs) !important;
    margin-bottom: 0;
}
html[data-theme] .table thead th, html[data-theme] .table th {
    background: var(--fl-surface-2) !important;
    color: var(--fl-muted) !important;
    font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em;
    border: 0 !important; border-bottom: 1px solid var(--fl-border) !important;
    padding: 11px 14px !important; white-space: nowrap; vertical-align: middle;
    position: static;
}
html[data-theme] .table td {
    border: 0 !important; border-bottom: 1px solid var(--fl-divider) !important;
    padding: 11px 14px !important; vertical-align: middle; color: var(--fl-text) !important; background: transparent !important;
}
html[data-theme] .table tbody tr { background: transparent !important; transition: background var(--fl-speed); }
html[data-theme] .table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--fl-surface-2) 70%, transparent) !important; }
html[data-theme] .table-hover tbody tr:hover, html[data-theme] .table tbody tr:hover { background: var(--fl-hover) !important; }
html[data-theme] .table tbody tr.selected, html[data-theme] .table tbody tr.active { background: var(--fl-primary-soft) !important; }
html[data-theme] .table-bordered, html[data-theme] .table-bordered td, html[data-theme] .table-bordered th { border-color: var(--fl-divider) !important; }
html[data-theme] .table tfoot th, html[data-theme] .table tfoot td { background: var(--fl-surface-2) !important; color: var(--fl-text) !important; font-weight: 700; }
html[data-theme] .card > .table-responsive, html[data-theme] .card-body > .table-responsive { border-radius: var(--fl-r-sm); }
html[data-theme] .dataTables_wrapper { color: var(--fl-text-2); font-size: var(--fl-fs-sm); }
html[data-theme] .dataTables_wrapper .dataTables_filter input, html[data-theme] .dataTables_wrapper .dataTables_length select {
    min-height: 34px; border-radius: var(--fl-r-pill) !important; padding: 4px 12px !important; margin-left: 6px;
}
html[data-theme] .dataTables_wrapper .dataTables_filter input { padding-left: 32px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238698AD' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='m12.5 12.5-3-3'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 12px center !important; }
html[data-theme] .dataTables_wrapper .dataTables_info { color: var(--fl-muted) !important; padding-top: 14px !important; }
html[data-theme] table.dataTable thead .sorting::before, html[data-theme] table.dataTable thead .sorting::after,
html[data-theme] table.dataTable thead .sorting_asc::after, html[data-theme] table.dataTable thead .sorting_desc::after { color: var(--fl-muted); opacity: .45; }
html[data-theme] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
html[data-theme] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { background: var(--fl-primary) !important; box-shadow: none !important; border: 0 !important; }
html[data-theme] table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--fl-divider) !important; }
html[data-theme] .dataTables_processing { background: var(--fl-elevated) !important; color: var(--fl-text) !important; border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r) !important; box-shadow: var(--fl-shadow) !important; }
html[data-theme] td.dataTables_empty { color: var(--fl-muted) !important; padding: 36px 14px !important; text-align: center; }

/* ---------- 11. Badges, labels, alerts ------------------------------------ */
html[data-theme] .badge, html[data-theme] .label {
    border-radius: var(--fl-r-pill) !important; font-weight: 600 !important; font-size: 11.5px !important;
    padding: 4px 9px !important; letter-spacing: .01em; line-height: 1.2;
}
html[data-theme] .badge-primary, html[data-theme] .bg-primary.badge, html[data-theme] .label-primary { background: var(--fl-primary-soft) !important; color: var(--fl-primary) !important; }
html[data-theme] .badge-success, html[data-theme] .label-success, html[data-theme] .bg-success.badge { background: var(--fl-success-soft) !important; color: var(--fl-success) !important; }
html[data-theme] .badge-warning, html[data-theme] .label-warning, html[data-theme] .bg-warning.badge { background: var(--fl-warning-soft) !important; color: var(--fl-warning) !important; }
html[data-theme] .badge-danger, html[data-theme] .label-danger, html[data-theme] .bg-danger.badge { background: var(--fl-danger-soft) !important; color: var(--fl-danger) !important; }
html[data-theme] .badge-info, html[data-theme] .label-info, html[data-theme] .bg-info.badge { background: var(--fl-info-soft) !important; color: var(--fl-info) !important; }
html[data-theme] .badge-secondary, html[data-theme] .badge-light, html[data-theme] .label-default { background: var(--fl-surface-2) !important; color: var(--fl-text-2) !important; border: 1px solid var(--fl-border); }
html[data-theme] .badge-dark { background: var(--fl-text) !important; color: var(--fl-inverse) !important; }
html[data-theme] .alert { border-radius: var(--fl-r) !important; border: 1px solid transparent !important; font-weight: 500; padding: 12px 16px; }
html[data-theme] .alert-success { background: var(--fl-success-soft) !important; color: var(--fl-success) !important; border-color: color-mix(in srgb, var(--fl-success) 30%, transparent) !important; }
html[data-theme] .alert-danger { background: var(--fl-danger-soft) !important; color: var(--fl-danger) !important; border-color: color-mix(in srgb, var(--fl-danger) 30%, transparent) !important; }
html[data-theme] .alert-warning { background: var(--fl-warning-soft) !important; color: var(--fl-warning) !important; border-color: color-mix(in srgb, var(--fl-warning) 30%, transparent) !important; }
html[data-theme] .alert-info, html[data-theme] .alert-primary { background: var(--fl-info-soft) !important; color: var(--fl-info) !important; border-color: color-mix(in srgb, var(--fl-info) 30%, transparent) !important; }
html[data-theme] .alert .close { color: inherit !important; opacity: .7; text-shadow: none; }

/* Coloured utility backgrounds used directly in views keep their meaning, toned down */
html[data-theme] .bg-white { background: var(--fl-surface) !important; color: var(--fl-text) !important; }
html[data-theme] .bg-light { background: var(--fl-surface-2) !important; color: var(--fl-text) !important; }
html[data-theme] .text-dark { color: var(--fl-text) !important; }
html[data-theme] .text-primary { color: var(--fl-primary) !important; }
html[data-theme] .text-success { color: var(--fl-success) !important; }
html[data-theme] .text-warning { color: var(--fl-warning) !important; }
html[data-theme] .text-info { color: var(--fl-info) !important; }
html[data-theme] .border, html[data-theme] .border-top, html[data-theme] .border-bottom { border-color: var(--fl-border) !important; }

/* ---------- 12. Modals, dropdowns, popovers ------------------------------- */
html[data-theme] .modal-backdrop.show { background: var(--fl-overlay); opacity: 1 !important; }
html[data-theme] .modal-content {
    background: var(--fl-elevated) !important; color: var(--fl-text) !important;
    border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r-lg) !important; box-shadow: var(--fl-shadow-lg) !important;
}
html[data-theme] .modal-header { border-bottom: 1px solid var(--fl-divider) !important; padding: 16px 20px !important; background: transparent !important; }
html[data-theme] .modal-header .modal-title { font-family: var(--fl-font-head); font-weight: 700; font-size: var(--fl-fs-lg); color: var(--fl-text) !important; }
html[data-theme] .modal-header .close, html[data-theme] .modal-header .btn-close { color: var(--fl-muted) !important; opacity: 1; text-shadow: none; }
html[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme] .modal-body { padding: 20px !important; }
html[data-theme] .modal-footer { border-top: 1px solid var(--fl-divider) !important; padding: 12px 20px !important; background: var(--fl-surface-2); border-radius: 0 0 var(--fl-r-lg) var(--fl-r-lg); }
html[data-theme] .modal.fade .modal-dialog { transition: transform .18s ease-out, opacity .18s; transform: translateY(8px); }
html[data-theme] .modal.show .modal-dialog { transform: none; }

html[data-theme] .dropdown-menu {
    background: var(--fl-elevated) !important; color: var(--fl-text) !important;
    border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r) !important; box-shadow: var(--fl-shadow) !important; padding: 6px !important;
}
html[data-theme] .dropdown-item { color: var(--fl-text-2) !important; border-radius: 6px; padding: 7px 12px; font-size: var(--fl-fs); }
html[data-theme] .dropdown-item:hover, html[data-theme] .dropdown-item:focus { background: var(--fl-hover) !important; color: var(--fl-text) !important; }
html[data-theme] .dropdown-item.active, html[data-theme] .dropdown-item:active { background: var(--fl-primary-soft) !important; color: var(--fl-primary) !important; }
html[data-theme] .dropdown-divider { border-color: var(--fl-divider) !important; }
html[data-theme] .dropdown-header { color: var(--fl-muted) !important; }
html[data-theme] .popover { background: var(--fl-elevated) !important; border-color: var(--fl-border) !important; }
html[data-theme] .popover-header { background: var(--fl-surface-2) !important; color: var(--fl-text) !important; border-color: var(--fl-divider) !important; }
html[data-theme] .popover-body { color: var(--fl-text) !important; }
html[data-theme] .tooltip-inner { background: var(--fl-text) !important; color: var(--fl-inverse) !important; border-radius: 6px; font-weight: 500; }

/* ---------- 13. Tabs, pagination, lists, progress ------------------------- */
html[data-theme] .nav-tabs { border-bottom: 1px solid var(--fl-border) !important; gap: 4px; }
html[data-theme] .nav-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important; color: var(--fl-muted) !important; font-weight: 600; background: transparent !important; padding: 10px 14px; border-radius: 0 !important; }
html[data-theme] .nav-tabs .nav-link:hover { color: var(--fl-text) !important; }
html[data-theme] .nav-tabs .nav-link.active, html[data-theme] .nav-tabs .nav-item.show .nav-link { color: var(--fl-primary) !important; border-bottom-color: var(--fl-primary) !important; }
html[data-theme] .nav-pills:not(.nav-sidebar) .nav-link { border-radius: var(--fl-r-pill); color: var(--fl-text-2); font-weight: 600; }
html[data-theme] .nav-pills:not(.nav-sidebar) .nav-link.active { background: var(--fl-primary) !important; color: var(--fl-primary-contrast) !important; }
html[data-theme] .tab-content { color: var(--fl-text); }

html[data-theme] .pagination { gap: 4px; }
html[data-theme] .page-link, html[data-theme] .paginate_button .page-link {
    background: var(--fl-surface) !important; color: var(--fl-text-2) !important;
    border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r-sm) !important; min-width: 34px; text-align: center; font-weight: 600;
}
html[data-theme] .page-link:hover { background: var(--fl-hover) !important; color: var(--fl-text) !important; }
html[data-theme] .page-item.active .page-link { background: var(--fl-primary) !important; border-color: var(--fl-primary) !important; color: var(--fl-primary-contrast) !important; }
html[data-theme] .page-item.disabled .page-link { background: var(--fl-surface-2) !important; color: var(--fl-placeholder) !important; }

html[data-theme] .list-group-item { background: var(--fl-surface) !important; color: var(--fl-text) !important; border-color: var(--fl-divider) !important; }
html[data-theme] .list-group-item.active { background: var(--fl-primary-soft) !important; color: var(--fl-primary) !important; border-color: var(--fl-divider) !important; }
html[data-theme] .list-group-item-action:hover { background: var(--fl-hover) !important; }
html[data-theme] .progress { background: var(--fl-surface-2) !important; border-radius: var(--fl-r-pill) !important; height: 8px; box-shadow: none !important; }
html[data-theme] .progress-bar { background: var(--fl-primary) !important; border-radius: var(--fl-r-pill); }
html[data-theme] .progress-bar.bg-success { background: var(--fl-success) !important; }
html[data-theme] .progress-bar.bg-warning { background: var(--fl-warning) !important; }
html[data-theme] .progress-bar.bg-danger { background: var(--fl-danger) !important; }

/* ---------- 14. Select2 ---------------------------------------------------- */
html[data-theme] .select2-container--default .select2-selection--single,
html[data-theme] .select2-container--default .select2-selection--multiple,
html[data-theme] .select2-container--bootstrap4 .select2-selection {
    background: var(--fl-input) !important; border: 1px solid var(--fl-border-strong) !important; border-radius: var(--fl-r-sm) !important; min-height: 38px;
}
html[data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme] .select2-container--bootstrap4 .select2-selection__rendered { color: var(--fl-text) !important; line-height: 36px !important; }
html[data-theme] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
html[data-theme] .select2-container--default .select2-selection__placeholder { color: var(--fl-placeholder) !important; }
html[data-theme] .select2-container--default.select2-container--focus .select2-selection--multiple,
html[data-theme] .select2-container--open .select2-selection { border-color: var(--fl-primary) !important; box-shadow: var(--fl-focus) !important; }
html[data-theme] .select2-dropdown { background: var(--fl-elevated) !important; border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r-sm) !important; box-shadow: var(--fl-shadow) !important; color: var(--fl-text) !important; }
html[data-theme] .select2-search__field { background: var(--fl-input) !important; color: var(--fl-text) !important; border: 1px solid var(--fl-border-strong) !important; border-radius: 6px; }
html[data-theme] .select2-results__option { color: var(--fl-text-2) !important; }
html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme] .select2-container--default .select2-results__option--highlighted { background: var(--fl-primary) !important; color: var(--fl-primary-contrast) !important; }
html[data-theme] .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--fl-primary-soft) !important; color: var(--fl-primary) !important; }
html[data-theme] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--fl-primary-soft) !important; color: var(--fl-primary) !important; border: 0 !important; border-radius: var(--fl-r-pill) !important; padding: 2px 10px !important;
}
html[data-theme] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--fl-primary) !important; }

/* ---------- 15. Date & time pickers --------------------------------------- */
html[data-theme] .datepicker.dropdown-menu, html[data-theme] .daterangepicker, html[data-theme] .bootstrap-datetimepicker-widget,
html[data-theme] .datetimepicker, html[data-theme] .bootstrap-timepicker-widget {
    background: var(--fl-elevated) !important; color: var(--fl-text) !important;
    border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r) !important; box-shadow: var(--fl-shadow) !important;
}
html[data-theme] .datepicker table tr td, html[data-theme] .datepicker table tr th,
html[data-theme] .daterangepicker .calendar-table, html[data-theme] .daterangepicker td, html[data-theme] .daterangepicker th,
html[data-theme] .bootstrap-datetimepicker-widget td, html[data-theme] .bootstrap-datetimepicker-widget th,
html[data-theme] .datetimepicker td, html[data-theme] .datetimepicker th {
    background: transparent !important; color: var(--fl-text) !important; border-color: transparent !important; border-radius: 6px;
}
html[data-theme] .daterangepicker .calendar-table { border: 0 !important; }
html[data-theme] .datepicker table tr td.day:hover, html[data-theme] .daterangepicker td.available:hover,
html[data-theme] .bootstrap-datetimepicker-widget td.day:hover, html[data-theme] .datetimepicker td.day:hover,
html[data-theme] .datepicker .prev:hover, html[data-theme] .datepicker .next:hover, html[data-theme] .datepicker .datepicker-switch:hover { background: var(--fl-hover) !important; }
html[data-theme] .datepicker table tr td.today, html[data-theme] .bootstrap-datetimepicker-widget td.today::before { color: var(--fl-primary) !important; font-weight: 700; }
html[data-theme] .datepicker table tr td.active, html[data-theme] .datepicker table tr td.active:hover,
html[data-theme] .daterangepicker td.active, html[data-theme] .daterangepicker td.active:hover,
html[data-theme] .bootstrap-datetimepicker-widget td.active, html[data-theme] .datetimepicker td.active {
    background: var(--fl-primary) !important; color: var(--fl-primary-contrast) !important; text-shadow: none !important;
}
html[data-theme] .daterangepicker td.in-range { background: var(--fl-primary-soft) !important; color: var(--fl-text) !important; }
html[data-theme] .datepicker table tr td.old, html[data-theme] .datepicker table tr td.new, html[data-theme] .daterangepicker td.off,
html[data-theme] .datepicker table tr td.disabled, html[data-theme] .bootstrap-datetimepicker-widget td.disabled { color: var(--fl-placeholder) !important; background: transparent !important; }
html[data-theme] .daterangepicker .ranges li { color: var(--fl-text-2); border-radius: 6px; }
html[data-theme] .daterangepicker .ranges li:hover { background: var(--fl-hover) !important; }
html[data-theme] .daterangepicker .ranges li.active { background: var(--fl-primary) !important; color: var(--fl-primary-contrast) !important; }
html[data-theme] .daterangepicker .drp-buttons { border-top-color: var(--fl-divider) !important; }
html[data-theme] .daterangepicker select, html[data-theme] .daterangepicker .calendar-time select { background: var(--fl-input) !important; color: var(--fl-text) !important; }
html[data-theme] .daterangepicker::before, html[data-theme] .daterangepicker::after, html[data-theme] .datepicker-dropdown::before, html[data-theme] .datepicker-dropdown::after { display: none !important; }
html[data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* ---------- 16. FullCalendar ---------------------------------------------- */
html[data-theme] .fc {
    --fc-border-color: var(--fl-divider);
    --fc-page-bg-color: var(--fl-surface);
    --fc-neutral-bg-color: var(--fl-surface-2);
    --fc-list-event-hover-bg-color: var(--fl-hover);
    --fc-today-bg-color: var(--fl-primary-soft);
    --fc-event-bg-color: var(--fl-primary);
    --fc-event-border-color: var(--fl-primary);
    --fc-event-text-color: var(--fl-primary-contrast);
    --fc-button-bg-color: var(--fl-surface);
    --fc-button-border-color: var(--fl-border-strong);
    --fc-button-text-color: var(--fl-text-2);
    --fc-button-hover-bg-color: var(--fl-hover);
    --fc-button-hover-border-color: var(--fl-border-strong);
    --fc-button-active-bg-color: var(--fl-primary);
    --fc-button-active-border-color: var(--fl-primary);
    color: var(--fl-text);
}
html[data-theme] .fc .fc-button { border-radius: var(--fl-r-sm) !important; font-weight: 600; text-transform: capitalize; box-shadow: none !important; }
html[data-theme] .fc .fc-button-active, html[data-theme] .fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--fl-primary-contrast) !important; }
html[data-theme] .fc .fc-toolbar-title { font-family: var(--fl-font-head); font-weight: 800; font-size: var(--fl-fs-lg); color: var(--fl-text); }
html[data-theme] .fc .fc-col-header-cell-cushion, html[data-theme] .fc .fc-daygrid-day-number { color: var(--fl-text-2) !important; }
html[data-theme] .fc .fc-day-today .fc-daygrid-day-number { color: var(--fl-primary) !important; font-weight: 800; }
html[data-theme] .fc .fc-event { border-radius: 6px; padding: 1px 4px; font-weight: 600; }
html[data-theme] .fc .fc-day-other { opacity: .55; }

/* ---------- 17. Editors, uploads, notifications --------------------------- */
html[data-theme] .note-editor.note-frame { border-color: var(--fl-border-strong) !important; border-radius: var(--fl-r-sm) !important; }
html[data-theme] .note-toolbar, html[data-theme] .note-statusbar { background: var(--fl-surface-2) !important; border-color: var(--fl-divider) !important; }
html[data-theme] .note-editable { background: var(--fl-input) !important; color: var(--fl-text) !important; }
html[data-theme] .note-btn { background: var(--fl-surface) !important; color: var(--fl-text-2) !important; border-color: var(--fl-border) !important; }
html[data-theme] .dropzone { background: var(--fl-surface-2) !important; border: 2px dashed var(--fl-border-strong) !important; border-radius: var(--fl-r) !important; color: var(--fl-muted); }
html[data-theme] .ms-container .ms-list { background: var(--fl-input) !important; border-color: var(--fl-border-strong) !important; }
html[data-theme] .ms-container .ms-selectable li.ms-elem-selectable, html[data-theme] .ms-container .ms-selection li.ms-elem-selection { color: var(--fl-text-2) !important; border-bottom-color: var(--fl-divider) !important; }

html[data-theme] #toast-container > div {
    background-color: var(--fl-elevated) !important; color: var(--fl-text) !important; opacity: 1 !important;
    border: 1px solid var(--fl-border); border-left: 4px solid var(--fl-primary); border-radius: var(--fl-r) !important;
    box-shadow: var(--fl-shadow) !important; background-position: 14px center !important; padding-left: 46px !important;
}
html[data-theme] #toast-container > .toast-success { border-left-color: var(--fl-success); }
html[data-theme] #toast-container > .toast-error { border-left-color: var(--fl-danger); }
html[data-theme] #toast-container > .toast-warning { border-left-color: var(--fl-warning); }
html[data-theme] #toast-container > .toast-info { border-left-color: var(--fl-info); }
html[data-theme="light"] #toast-container > div { background-image: none !important; padding-left: 16px !important; }
html[data-theme] #toast-container .toast-title { font-weight: 700; }

html[data-theme] .swal2-popup { background: var(--fl-elevated) !important; color: var(--fl-text) !important; border-radius: var(--fl-r-lg) !important; box-shadow: var(--fl-shadow-lg); }
html[data-theme] .swal2-title { color: var(--fl-text) !important; font-family: var(--fl-font-head); }
html[data-theme] .swal2-html-container, html[data-theme] .swal2-content { color: var(--fl-text-2) !important; }
html[data-theme] .swal2-styled.swal2-confirm { background: var(--fl-primary) !important; color: var(--fl-primary-contrast) !important; border-radius: var(--fl-r-sm) !important; box-shadow: none !important; }
html[data-theme] .swal2-styled.swal2-cancel { background: var(--fl-surface-2) !important; color: var(--fl-text-2) !important; border-radius: var(--fl-r-sm) !important; }
html[data-theme] .swal2-container.swal2-backdrop-show { background: var(--fl-overlay) !important; }

/* ---------- 18j. Accessibility helpers (skip link) ---------------- */
.fl-skip { position: fixed; left: 12px; top: -60px; z-index: 100000; padding: 10px 16px; border-radius: 10px; background: var(--fl-primary); color: #fff !important; font-weight: 700; text-decoration: none !important; box-shadow: var(--fl-shadow-sm); transition: top .15s ease; }
.fl-skip:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
#fl-main:focus { outline: none; }

/* ---------- 19. Loader, footer, misc -------------------------------------- */
html[data-theme] .loader {
    border: 4px solid var(--fl-primary-soft) !important; border-top-color: var(--fl-primary) !important;
    width: 44px !important; height: 44px !important; box-shadow: none !important; animation: fl-spin .8s linear infinite !important;
}
@keyframes fl-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
html[data-theme] .main-footer { background: var(--fl-surface) !important; color: var(--fl-muted) !important; border-top: 1px solid var(--fl-border) !important; font-size: var(--fl-fs-sm); }
html[data-theme] .control-sidebar, html[data-theme] .control-sidebar::before { background: var(--fl-elevated) !important; color: var(--fl-text) !important; }
html[data-theme] .img-circle, html[data-theme] .img-thumbnail { border-color: var(--fl-border) !important; background: var(--fl-surface-2); }
html[data-theme] .well { background: var(--fl-surface-2) !important; border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r) !important; box-shadow: none !important; }
html[data-theme] .callout { background: var(--fl-surface) !important; border-left-color: var(--fl-primary) !important; color: var(--fl-text) !important; border-radius: var(--fl-r-sm); }

/* Reusable building blocks for later phases */
.fl-empty { text-align: center; padding: 40px 16px; color: var(--fl-muted); }
.fl-empty__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--fl-primary-soft); color: var(--fl-primary); font-size: 22px; }
.fl-empty h4 { font-size: var(--fl-fs-md) !important; margin-bottom: 4px; }
.fl-skeleton { background: linear-gradient(90deg, var(--fl-surface-2) 25%, var(--fl-hover) 37%, var(--fl-surface-2) 63%); background-size: 400% 100%; animation: fl-shimmer 1.2s ease infinite; border-radius: 6px; }
@keyframes fl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- 20. Responsive, motion, print --------------------------------- */
@media (max-width: 767.98px) {
    html[data-theme] .content { padding: 0 var(--fl-s2) var(--fl-s4); }
    html[data-theme] .content-header { padding: 14px var(--fl-s3) 8px !important; }
    html[data-theme] .content-header h1 { font-size: var(--fl-fs-lg) !important; }
    html[data-theme] .card-body, html[data-theme] .panel-body { padding: 14px !important; }
    html[data-theme] .modal-dialog { margin: 8px; }
    html[data-theme] .table-responsive { -webkit-overflow-scrolling: touch; }
    html[data-theme] .dataTables_wrapper .dataTables_filter, html[data-theme] .dataTables_wrapper .dataTables_length { text-align: left !important; }
    html[data-theme] .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0; }
    html[data-theme] .btn:not(.btn-sm):not(.btn-xs) { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { transition: none !important; animation-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
    html[data-theme] body, html[data-theme] .content-wrapper, html[data-theme] .card, html[data-theme] .table td, html[data-theme] .table th {
        background: #fff !important; color: #000 !important; box-shadow: none !important;
    }
    .fl-theme-switch, .demo-mode-banner { display: none !important; }
}

/* ==========================================================================
   Fleet-specific layer
   ========================================================================== */

/* ---------- 21. Top bar: theme switch slot + brand in the sidebar --------- */
html[data-theme] .main-header .fl-topbar-tools { display: flex; align-items: center; gap: 6px; }
html[data-theme] .main-header .fl-signout { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fl-fs-sm); }
@media (max-width: 575.98px) { html[data-theme] .main-header .fl-signout span { display: none; } }
html[data-theme] .main-sidebar .brand-link { display: flex !important; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; }
html[data-theme] .main-sidebar .brand-link .brand-image { float: none; margin: 0 0 0 4px; flex: 0 0 auto; background: #fff; }
html[data-theme] .main-sidebar .brand-link .brand-text { margin-left: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-theme] .main-sidebar .brand-link .fl-brand-sub { display: block; font-size: 11px; font-weight: 500; color: var(--fl-side-muted); line-height: 1.2; }
html[data-theme] .main-sidebar .brand-link .fl-brand-name { display: block; line-height: 1.2; }

/* The vendor sidebar used a missing "faa-" icon family for sub-items: show a small dot instead of nothing */
html[data-theme] .nav-sidebar .nav-treeview .nav-icon[class*="faa-"]::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; vertical-align: middle; }

/* ---------- 22. Footer ----------------------------------------------------- */
html[data-theme] .main-footer { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: center; padding: 10px 18px !important; }
html[data-theme] .main-footer a { color: var(--fl-text-2) !important; font-weight: 600; }
html[data-theme] .main-footer strong { font-weight: 600; }

/* ---------- 23. Delete confirmation (header.php #myModal) ----------------- */
html[data-theme] .modal-confirm .modal-content { padding: 8px 4px; }
html[data-theme] .modal-confirm .modal-header { border-bottom: 0 !important; padding-bottom: 0 !important; }
html[data-theme] .modal-confirm .modal-header::before {
    content: "\f1f8"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: grid; place-items: center; margin: 4px auto 10px;
    width: 52px; height: 52px; border-radius: 16px; background: var(--fl-danger-soft); color: var(--fl-danger); font-size: 20px;
}
html[data-theme] .modal-confirm .modal-title b { font-weight: 800; }
html[data-theme] .modal-confirm .modal-footer { border-top: 0 !important; background: transparent !important; gap: 8px; }

/* ---------- 24. Maps -------------------------------------------------------- */
html[data-theme] #map_canvas, html[data-theme] #map, html[data-theme] #hismap, html[data-theme] .fl-map {
    border-radius: var(--fl-r); overflow: hidden; border: 1px solid var(--fl-border); background: var(--fl-surface-2) !important;
}
html[data-theme] .gm-style .gm-style-iw-c { background: var(--fl-elevated) !important; color: var(--fl-text) !important; border-radius: var(--fl-r) !important; box-shadow: var(--fl-shadow) !important; padding: 12px !important; }
html[data-theme] .gm-style .gm-style-iw-d { color: var(--fl-text) !important; overflow: auto !important; }
html[data-theme] .gm-style .gm-style-iw-tc::after { background: var(--fl-elevated) !important; }
html[data-theme] .gm-style .gm-ui-hover-effect > span { background-color: var(--fl-text-2) !important; }
html[data-theme] .gm-style .gm-style-iw-chr { margin-top: -6px; }
html[data-theme="dark"] .gm-style .gm-style-mtc button, html[data-theme="dark"] .gm-style .gm-svpc,
html[data-theme="dark"] .gm-style .gm-control-active, html[data-theme="dark"] .gm-style .gm-fullscreen-control { filter: invert(.88) hue-rotate(180deg); }
html[data-theme] .pac-container { background: var(--fl-elevated) !important; border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r-sm); box-shadow: var(--fl-shadow) !important; font-family: var(--fl-font); }
html[data-theme] .pac-item { color: var(--fl-text-2) !important; border-top-color: var(--fl-divider) !important; padding: 6px 10px; }
html[data-theme] .pac-item:hover, html[data-theme] .pac-item-selected { background: var(--fl-hover) !important; }
html[data-theme] .pac-item-query { color: var(--fl-text) !important; }
html[data-theme="dark"] .pac-logo::after { filter: invert(1); opacity: .6; }

/* ---------- 25. Selectize (vehicle / driver pickers) ---------------------- */
html[data-theme] .selectize-input { background: var(--fl-input) !important; color: var(--fl-text) !important; border: 1px solid var(--fl-border-strong) !important; border-radius: var(--fl-r-sm) !important; box-shadow: none !important; min-height: 38px; }
html[data-theme] .selectize-input.focus { border-color: var(--fl-primary) !important; box-shadow: var(--fl-focus) !important; }
html[data-theme] .selectize-input input { color: var(--fl-text) !important; }
html[data-theme] .selectize-dropdown { background: var(--fl-elevated) !important; color: var(--fl-text) !important; border: 1px solid var(--fl-border) !important; border-radius: var(--fl-r-sm); box-shadow: var(--fl-shadow) !important; }
html[data-theme] .selectize-dropdown .active { background: var(--fl-hover) !important; color: var(--fl-text) !important; }
html[data-theme] .selectize-control.multi .selectize-input > div { background: var(--fl-primary-soft) !important; color: var(--fl-primary) !important; border: 0 !important; border-radius: 6px; }

/* ---------- 26. Status language (used by later phases) --------------------- */
.fl-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--fl-r-pill); font-size: var(--fl-fs-xs); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.fl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fl-status--moving   { background: var(--fl-success-soft); color: var(--fl-success); }
.fl-status--idle     { background: var(--fl-warning-soft); color: var(--fl-warning); }
.fl-status--parked   { background: var(--fl-info-soft);    color: var(--fl-info); }
.fl-status--offline  { background: var(--fl-offline-soft); color: var(--fl-offline); }
.fl-status--alert    { background: var(--fl-danger-soft);  color: var(--fl-danger); }
.fl-status--service  { background: var(--fl-accent-soft);  color: var(--fl-accent-text); }
.fl-status--moving::before { box-shadow: 0 0 0 0 currentColor; animation: fl-pulse 1.8s ease-out infinite; }
@keyframes fl-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- 27. Sign in (login.php) --------------------------------------- */
html[data-theme] body.fl-auth-body { margin: 0; min-height: 100vh; background: var(--fl-bg) !important; }
.fl-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.fl-auth__story {
    position: relative; overflow: hidden; color: #F4EBE1; padding: 48px clamp(28px, 5vw, 72px);
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    background:
        linear-gradient(180deg, rgba(36, 26, 19, .58) 0%, rgba(36, 26, 19, .50) 30%, rgba(36, 26, 19, .66) 55%, rgba(28, 19, 13, .94) 100%),
        linear-gradient(90deg, rgba(194, 65, 12, .28), transparent 60%),
        url("people/driver-tricycle.jpg") 62% center / cover no-repeat;
}
.fl-auth__story > * { position: relative; z-index: 1; }
.fl-auth__brand { display: flex; align-items: center; gap: 12px; font-family: var(--fl-font-head); font-weight: 800; font-size: 1.1rem; color: #fff; }
.fl-auth__brand img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; background: #fff; }
.fl-auth__brand small { display: block; font-family: var(--fl-font); font-weight: 500; font-size: 12px; color: #E4CFB8; }
.fl-auth__pitch h1 { font-family: var(--fl-font-head) !important; color: #fff !important; font-size: clamp(1.8rem, 3vw, 2.6rem) !important; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; max-width: 16ch; }
.fl-auth__pitch h1 em { font-style: italic; color: #F2B85A; }
.fl-auth__pitch p { color: #EADCCB; font-size: 1rem; max-width: 46ch; margin: 0; }
.fl-auth__features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.fl-auth__features li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 244, 230, .09); border: 1px solid rgba(255, 244, 230, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13.5px; color: #F1E4D5; }
.fl-auth__features i { color: #F2B85A; margin-top: 3px; width: 16px; text-align: center; }
.fl-auth__features b { display: block; color: #fff; font-weight: 700; }
.fl-auth__legal { font-size: 12px; color: #CDB9A3; }
.fl-auth__legal a { color: #F4EBE1 !important; }

.fl-auth__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 24px; position: relative; }
.fl-auth__card { width: 100%; max-width: 400px; }
.fl-auth__card h2 { font-size: 1.6rem !important; margin: 0 0 6px; }
.fl-auth__card .fl-auth__lead { color: var(--fl-muted); margin: 0 0 26px; }
.fl-auth__field { margin-bottom: 16px; }
.fl-auth__field label { display: block; }
.fl-auth__input { position: relative; }
.fl-auth__input i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--fl-placeholder); pointer-events: none; font-size: 14px; }
html[data-theme] .fl-auth__input .form-control { padding-left: 38px !important; min-height: 46px; font-size: 15px !important; }
.fl-auth__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--fl-muted); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; }
.fl-auth__toggle:hover { background: var(--fl-hover); color: var(--fl-text); }
html[data-theme] .fl-auth__submit { width: 100%; min-height: 46px; font-size: 15px !important; margin-top: 6px; }
.fl-auth__alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fl-divider); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fl-fs-sm); color: var(--fl-muted); }
.fl-auth__alt a { font-weight: 600; }
html[data-theme] .fl-auth .alert { border-radius: var(--fl-r-sm) !important; margin-bottom: 18px; }
.fl-auth .fl-theme-switch { position: absolute; top: 18px; right: 18px; }
@media (max-width: 991.98px) {
    .fl-auth { grid-template-columns: 1fr; }
    .fl-auth__story { padding: 28px 22px 26px; gap: 18px; }
    .fl-auth__features, .fl-auth__legal { display: none; }
    .fl-auth__pitch h1 { font-size: 1.5rem !important; margin-bottom: 8px; }
    .fl-auth__pitch p { font-size: .9rem; }
    .fl-auth__panel { padding: 28px 18px 40px; justify-content: flex-start; }
    .fl-auth .fl-theme-switch { top: 20px; right: 16px; }
    .fl-auth__story .fl-auth__brand { padding-right: 120px; }
}

/* ---------- 28. Fixes from the signed-in review --------------------------- */
/* sign-in headline sits on the dark story panel in both themes */
html[data-theme] .fl-auth__pitch h1 { color: #fff !important; }
html[data-theme] .fl-auth__pitch h1 em { color: #F2B85A !important; }
html[data-theme] .fl-auth__brand, html[data-theme] .fl-auth__brand span { color: #fff !important; }
html[data-theme] .fl-auth__brand small { color: #EADCCB !important; }
/* AdminLTE offsets the page for a fixed top bar; ours is sticky and already takes its space */
html[data-theme] .layout-navbar-fixed .wrapper .content-wrapper { margin-top: 0 !important; }
html[data-theme] .layout-navbar-fixed .wrapper .main-header { left: auto; right: auto; }
/* long company names in the sidebar brand */
html[data-theme] .main-sidebar .brand-link .brand-text { min-width: 0; flex: 1 1 auto; }
html[data-theme] .main-sidebar .brand-link .fl-brand-name, html[data-theme] .main-sidebar .brand-link .fl-brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dashboard reminders (AdminLTE todo-list) */
html[data-theme] .todo-list > li { background: var(--fl-surface-2) !important; color: var(--fl-text) !important; border: 1px solid var(--fl-border); border-left: 3px solid var(--fl-accent) !important; border-radius: var(--fl-r-sm) !important; padding: 10px 12px !important; margin-bottom: 8px; }
html[data-theme] .todo-list > li .text { color: var(--fl-text) !important; font-weight: 600; margin-left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
html[data-theme] .todo-list > li .tools { display: block !important; float: none; color: inherit; }
html[data-theme] .todo-list > li .tools .btn-block { width: auto; display: inline-flex; }
.fl-map-down { height: 100%; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--fl-muted); background: var(--fl-surface-2); }
.fl-map-down h4 { color: var(--fl-text); font-size: var(--fl-fs-md) !important; margin: 0 0 6px; }
.fl-map-down p { max-width: 46ch; margin: 0 0 6px; }
.fl-map-down__hint { font-size: var(--fl-fs-sm); }

/* ---------- 29. Phase 4: top bar, quick actions, command palette ---------- */
.fl-search-slot { margin-left: 6px; }
.fl-search-trigger {
    display: inline-flex; align-items: center; gap: 10px; min-width: 320px; height: 38px; padding: 0 8px 0 12px;
    border: 1px solid var(--fl-border-strong); border-radius: var(--fl-r-pill); background: var(--fl-surface-2); color: var(--fl-muted);
    font: inherit; font-size: var(--fl-fs-sm); cursor: pointer; transition: border-color var(--fl-speed), background var(--fl-speed);
}
.fl-search-trigger:hover { border-color: var(--fl-primary); background: var(--fl-surface); color: var(--fl-text-2); }
.fl-search-trigger:focus-visible { outline: none; box-shadow: var(--fl-focus); }
.fl-search-trigger__text { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--fl-border-strong); border-bottom-width: 2px; background: var(--fl-surface); color: var(--fl-muted); font: 600 11px/1.5 var(--fl-font); text-align: center; margin-left: 2px; }
@media (max-width: 991.98px) { .fl-search-trigger { min-width: 0; width: 40px; padding: 0; justify-content: center; } .fl-search-trigger__text, .fl-search-trigger .fl-kbd { display: none; } }

html[data-theme] .main-header .fl-new-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--fl-r-pill) !important; padding: 6px 14px !important; margin-right: 4px; color: var(--fl-primary-contrast) !important; }
html[data-theme] .main-header .fl-new-btn::after { display: none; }
@media (max-width: 575.98px) { html[data-theme] .main-header .fl-new-btn span { display: none; } html[data-theme] .main-header .fl-new-btn { padding: 6px 10px !important; } }
.fl-new-menu { min-width: 220px; max-height: 70vh; overflow: auto; }
html[data-theme] .fl-new-menu .dropdown-item i, html[data-theme] .main-header .dropdown-menu .dropdown-item i { color: var(--fl-muted); margin-right: 6px; }
html[data-theme] .main-header .dropdown-header { font-size: var(--fl-fs-xs); line-height: 1.5; white-space: normal; }

html[data-theme] .main-header .fl-user-btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 4px 8px !important; border-radius: var(--fl-r-pill) !important; }
.fl-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--fl-primary-soft); color: var(--fl-primary); font-weight: 800; font-size: 13px; }
.fl-user-btn__name { font-weight: 600; font-size: var(--fl-fs-sm); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-user-btn__caret { font-size: 10px; color: var(--fl-muted); }
@media (max-width: 767.98px) { .fl-user-btn__name, .fl-user-btn__caret { display: none; } }
@media (max-width: 420px) { html[data-theme] .main-header .fl-theme-switch button { width: 26px; } }

/* page header: the "Add ..." button injected by fleet-ui.js */
html[data-theme] .content-header .fl-header-row { flex-wrap: wrap; }
html[data-theme] .content-header .fl-header-row > .col-sm-6 { flex: 1 1 auto; max-width: none; }
.fl-page-add-slot { display: flex; align-items: center; justify-content: flex-end; order: 3; }
@media (max-width: 575.98px) { .fl-page-add-slot { justify-content: flex-start; margin-top: 8px; } .fl-page-add-slot .btn { width: 100%; } }

/* command palette */
.fl-palette { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.fl-palette[hidden] { display: none !important; }
.fl-palette__backdrop { position: absolute; inset: 0; background: var(--fl-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fl-fade .14s ease; }
.fl-palette__panel { position: relative; width: 100%; max-width: 640px; max-height: 76vh; display: flex; flex-direction: column; background: var(--fl-elevated); color: var(--fl-text); border: 1px solid var(--fl-border); border-radius: var(--fl-r-lg); box-shadow: var(--fl-shadow-lg); overflow: hidden; animation: fl-rise .16s ease; }
.fl-palette__search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--fl-divider); }
.fl-palette__search > i { color: var(--fl-muted); }
html[data-theme] .fl-palette__search input { flex: 1 1 auto; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 16px !important; padding: 6px 0; min-height: 0; color: var(--fl-text) !important; outline: none; }
.fl-palette__list { overflow: auto; padding: 6px; flex: 1 1 auto; }
.fl-palette__group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fl-muted); }
.fl-palette__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.fl-palette__item.is-active { background: var(--fl-primary-soft); }
.fl-palette__icon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--fl-surface-2); color: var(--fl-primary); border: 1px solid var(--fl-border); }
.fl-palette__text { display: flex; flex-direction: column; min-width: 0; }
.fl-palette__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-palette__sub { font-size: var(--fl-fs-xs); color: var(--fl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-palette__status { padding: 18px 12px; text-align: center; color: var(--fl-muted); font-size: var(--fl-fs-sm); }
.fl-palette__foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--fl-divider); color: var(--fl-muted); font-size: var(--fl-fs-xs); background: var(--fl-surface-2); }
@media (max-width: 575.98px) { .fl-palette { padding: 12px 8px; } .fl-palette__foot { display: none; } .fl-palette__panel { max-height: 88vh; } }
html.fl-palette-open { overflow: hidden; }
@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fl-rise { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

/* DataTables: search box without the "Search:" label, empty states inside tables */
html[data-theme] .dataTables_wrapper .dataTables_filter input { min-width: 220px; }
html[data-theme] .dataTables_empty { padding: 0 !important; background: transparent !important; }
html[data-theme] .dataTables_empty .fl-empty { padding: 28px 12px; }

/* ---------- 30. Phase 5: Fleet Command Centre ------------------------------ */
.fl-cc-head h1 { font-size: 1.75rem !important; }
.fl-cc-eyebrow { margin: 0 0 4px; font-size: var(--fl-fs-sm); font-weight: 600; color: var(--fl-muted); }
.fl-cc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-theme] .fl-cc-actions .btn { border-radius: var(--fl-r-pill) !important; }
html[data-theme] .card-title > i { color: var(--fl-muted); margin-right: 6px; font-size: .9em; }

.fl-attn-list { list-style: none; margin: 0; padding: 6px 0; }
.fl-attn { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--fl-divider); }
.fl-attn:last-child { border-bottom: 0; }
.fl-attn__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.fl-attn--danger .fl-attn__icon { background: var(--fl-danger-soft); color: var(--fl-danger); }
.fl-attn--warning .fl-attn__icon { background: var(--fl-warning-soft); color: var(--fl-warning); }
.fl-attn--info .fl-attn__icon { background: var(--fl-info-soft); color: var(--fl-info); }
.fl-attn__body { display: flex; flex-direction: column; min-width: 0; }
.fl-attn__body b { font-weight: 700; color: var(--fl-text); }
.fl-attn__body small { color: var(--fl-muted); font-size: var(--fl-fs-xs); }
.fl-attn__go { font-size: var(--fl-fs-sm); font-weight: 600; white-space: nowrap; }
.fl-attn__go i { font-size: .8em; margin-left: 2px; }
@media (max-width: 575.98px) { .fl-attn { grid-template-columns: 34px 1fr; } .fl-attn__go { grid-column: 2; } }

.fl-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fl-success); margin-right: 4px; animation: fl-pulse 1.8s ease-out infinite; color: var(--fl-success); vertical-align: 1px; }
.fl-rules { font-size: var(--fl-fs-sm); color: var(--fl-text-2); background: var(--fl-surface-2); border: 1px solid var(--fl-border); border-radius: var(--fl-r-sm); padding: 10px 12px; margin-bottom: 14px; }
.fl-fleet-grid { display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: center; }
.fl-donut-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto; }
.fl-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.fl-donut-center b { font: 800 2rem/1 var(--fl-font-head); color: var(--fl-text); }
.fl-donut-center span { font-size: var(--fl-fs-xs); color: var(--fl-muted); }
.fl-status-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fl-status-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--fl-border); border-radius: var(--fl-r); background: var(--fl-surface-2); color: var(--fl-text) !important; text-decoration: none !important; transition: border-color var(--fl-speed), transform var(--fl-speed); }
a.fl-status-tile:hover { border-color: var(--fl-primary); transform: translateY(-1px); }
.fl-status-tile b { font: 800 1.5rem/1 var(--fl-font-head); }
.fl-status-tile .fl-status { align-self: flex-start; max-width: 100%; white-space: normal; line-height: 1.25; }
.fl-status-tile .fl-status { align-self: flex-start; }
@media (max-width: 767.98px) { .fl-fleet-grid { grid-template-columns: 1fr; } .fl-status-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fl-kpis { row-gap: 0; }
.fl-kpi { display: flex; flex-direction: column; gap: 4px; height: calc(100% - var(--fl-s5)); margin-bottom: var(--fl-s5); padding: 14px 16px; background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: var(--fl-r); box-shadow: var(--fl-shadow-sm); color: var(--fl-text) !important; text-decoration: none !important; transition: border-color var(--fl-speed), transform var(--fl-speed); }
a.fl-kpi:hover { border-color: var(--fl-primary); transform: translateY(-1px); }
.fl-kpi > span { font-size: var(--fl-fs-xs); font-weight: 700; color: var(--fl-muted); text-transform: uppercase; letter-spacing: .04em; }
.fl-kpi > b { font: 800 1.45rem/1.15 var(--fl-font-head); letter-spacing: -.01em; }
.fl-kpi > b em { font-style: normal; font-size: .6em; color: var(--fl-muted); font-weight: 700; }
.fl-kpi > small { font-size: var(--fl-fs-xs); color: var(--fl-muted); }

.fl-list { list-style: none; margin: 0; padding: 4px 0; }
.fl-list > li { border-bottom: 1px solid var(--fl-divider); }
.fl-list > li:last-child { border-bottom: 0; }
.fl-list > li > a, .fl-list > li:not(:has(> a)) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; color: var(--fl-text) !important; text-decoration: none !important; }
.fl-list > li > a:hover { background: var(--fl-hover); }
.fl-list--flush > li:not(:has(> a)) { padding: 10px 0; }
.fl-list__main { display: flex; flex-direction: column; min-width: 0; }
.fl-list__main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-list__main small { color: var(--fl-muted); font-size: var(--fl-fs-xs); }

.fl-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--fl-r-pill); background: var(--fl-surface-2); border: 1px solid var(--fl-border); flex-wrap: wrap; }
.fl-seg button { border: 0; background: transparent; color: var(--fl-text-2); font: 600 var(--fl-fs-xs)/1 var(--fl-font); padding: 7px 12px; border-radius: var(--fl-r-pill); cursor: pointer; }
.fl-seg button:hover { color: var(--fl-text); }
.fl-seg button.is-on { background: var(--fl-surface); color: var(--fl-primary); box-shadow: var(--fl-shadow-sm); }
.fl-vtable-wrap { max-height: 520px; overflow: auto; }
html[data-theme] .fl-vtable thead th { position: sticky; top: 0; z-index: 1; }
.fl-vtable td { vertical-align: middle !important; }

.fl-timeline { list-style: none; margin: 0; padding: 8px 0; max-height: 560px; overflow: auto; }
.fl-timeline__item { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 8px 18px; }
.fl-timeline__item::before { content: ""; position: absolute; left: 32px; top: 38px; bottom: -8px; width: 2px; background: var(--fl-divider); }
.fl-timeline__item:last-child::before { display: none; }
.fl-timeline__icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--fl-surface-2); border: 1px solid var(--fl-border); color: var(--fl-muted); position: relative; z-index: 1; }
.fl-timeline__item--success .fl-timeline__icon { background: var(--fl-success-soft); color: var(--fl-success); border-color: transparent; }
.fl-timeline__item--primary .fl-timeline__icon { background: var(--fl-primary-soft); color: var(--fl-primary); border-color: transparent; }
.fl-timeline__item--warning .fl-timeline__icon { background: var(--fl-warning-soft); color: var(--fl-warning); border-color: transparent; }
.fl-timeline__item--info .fl-timeline__icon { background: var(--fl-info-soft); color: var(--fl-info); border-color: transparent; }
.fl-timeline__item--service .fl-timeline__icon { background: var(--fl-accent-soft); color: var(--fl-accent-text); border-color: transparent; }
.fl-timeline__item a { display: flex; flex-direction: column; color: var(--fl-text-2) !important; text-decoration: none !important; font-size: var(--fl-fs-sm); line-height: 1.4; padding-top: 4px; }
.fl-timeline__item a b { color: var(--fl-text); }
.fl-timeline__item a:hover span { color: var(--fl-text); }
.fl-timeline__item time { font-size: var(--fl-fs-xs); color: var(--fl-muted); margin-top: 2px; }

.fl-mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.fl-mini-stats > div { padding: 10px 12px; border-radius: var(--fl-r-sm); background: var(--fl-surface-2); border: 1px solid var(--fl-border); display: flex; flex-direction: column; }
.fl-mini-stats b { font: 800 1.2rem/1.2 var(--fl-font-head); color: var(--fl-text); }
.fl-mini-stats span { font-size: var(--fl-fs-xs); color: var(--fl-muted); }
.fl-mini-stats .is-warn { border-color: color-mix(in srgb, var(--fl-warning) 45%, transparent); background: var(--fl-warning-soft); }
@media (max-width: 575.98px) { .fl-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl-ie-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: var(--fl-fs-sm); color: var(--fl-muted); }
.fl-footnote { margin: 0; padding: 10px 18px 14px; font-size: var(--fl-fs-xs); color: var(--fl-muted); }
.fl-chart { position: relative; }
html[data-theme] .text-success { color: var(--fl-success) !important; }
.fl-cc-masonry { column-count: 2; column-gap: var(--fl-s5); }
.fl-cc-masonry > .card { break-inside: avoid; display: inline-block; width: 100%; }
@media (max-width: 991.98px) { .fl-cc-masonry { column-count: 1; } }
/* phones: exceptions before figures */
@media (max-width: 991.98px) { .fl-cc-body { display: flex; flex-direction: column; } .fl-cc-body > .fl-cc-attn-row { order: -1; } }

/* ---------- 31. Maps without a key: live map, trip history, markers --------- */
.flm-layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--fl-s5); height: calc(100vh - 250px); min-height: 520px; }
html[data-theme] .flm-layout > .card { margin-bottom: 0; overflow: hidden; }
.flm-map #flm-map, #flm-map, #flh-map { width: 100%; height: 100%; min-height: 420px; }
.flm-map { position: relative; }
.flm-panel { display: flex; flex-direction: column; min-height: 0; }
.flm-panel__search { position: relative; padding: 12px; border-bottom: 1px solid var(--fl-divider); }
.flm-panel__search i { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--fl-placeholder); }
html[data-theme] .flm-panel__search input { padding-left: 36px !important; }
.flm-list { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1 1 auto; }
.flm-list button { width: 100%; display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--fl-text); text-align: left; cursor: pointer; font: inherit; }
.flm-list button:hover, .flm-list button:focus-visible { background: var(--fl-hover); outline: none; }
.flm-list__main { display: flex; flex-direction: column; min-width: 0; }
.flm-list__main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flm-list__main small { color: var(--fl-muted); font-size: var(--fl-fs-xs); }
.flm-list time { font-size: var(--fl-fs-xs); color: var(--fl-muted); white-space: nowrap; }
.flm-list__dot { width: 10px; height: 10px; border-radius: 50%; }
.flm-list__dot--moving { background: var(--fl-success); } .flm-list__dot--idle { background: var(--fl-warning); } .flm-list__dot--parked { background: var(--fl-info); } .flm-list__dot--offline { background: var(--fl-offline); }
.flm-list__empty { padding: 20px 12px; color: var(--fl-muted); text-align: center; font-size: var(--fl-fs-sm); }
#flm-filter b { font-weight: 800; margin-left: 4px; opacity: .8; }
@media (max-width: 991.98px) { .flm-layout { grid-template-columns: 1fr; height: auto; } .flm-map { height: 60vh; } .flm-panel { max-height: 320px; order: 2; } }

.flm-marker { background: none; border: 0; }
.flm-dot { position: relative; display: block; width: 22px; height: 22px; margin: 2px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.flm-marker--moving .flm-dot { background: #15803D; } .flm-marker--idle .flm-dot { background: #D97706; } .flm-marker--parked .flm-dot { background: #0E7490; } .flm-marker--offline .flm-dot { background: #64748B; }
.flm-marker--moving .flm-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid #15803D; opacity: .5; animation: flm-ping 1.8s ease-out infinite; }
@keyframes flm-ping { from { transform: scale(.6); opacity: .6; } to { transform: scale(1.4); opacity: 0; } }
.flm-arrow { position: absolute; left: 50%; top: -11px; width: 0; height: 0; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #15803D; transform-origin: 5px 19px; }
.flm-pop { display: flex; flex-direction: column; gap: 3px; min-width: 170px; font-family: var(--fl-font); }
.flm-pop b { font-weight: 700; }
.flm-pop small, .flm-pop > span { color: var(--fl-muted); font-size: 12px; }
.flm-pop__row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.flm-pop__links { display: flex; gap: 12px; margin-top: 6px; font-weight: 600; font-size: 12.5px; }
html[data-theme] .leaflet-popup-content-wrapper, html[data-theme] .leaflet-popup-tip { background: var(--fl-elevated); color: var(--fl-text); box-shadow: var(--fl-shadow); }
html[data-theme] .leaflet-container { background: var(--fl-surface-2); font-family: var(--fl-font); }
html[data-theme] .leaflet-control-attribution { background: color-mix(in srgb, var(--fl-surface) 85%, transparent) !important; color: var(--fl-muted); }
html[data-theme] .leaflet-control-attribution a { color: var(--fl-text-2) !important; }
html[data-theme="dark"] .leaflet-bar a { background: var(--fl-elevated); color: var(--fl-text); border-color: var(--fl-border); }
html[data-theme] .leaflet-popup-content a { color: var(--fl-primary) !important; }

.flh-form { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr)) auto; gap: 12px; align-items: end; }
.flh-form .form-group { margin-bottom: 0 !important; }
@media (max-width: 767.98px) { .flh-form { grid-template-columns: 1fr 1fr; } .flh-form .form-group:first-child, .flh-form__go { grid-column: 1 / -1; } .flh-form__go .btn { width: 100%; } }
html[data-theme] .flh-card { overflow: hidden; }
.flh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--fl-divider); }
.flh-bar[hidden] { display: none; }
.flh-bar input[type=range] { flex: 1 1 200px; accent-color: var(--fl-primary); }
.flh-stats { font-size: var(--fl-fs-sm); color: var(--fl-muted); }
#flh-map { height: calc(100vh - 330px); min-height: 440px; }
.flh-pin { display: grid !important; place-items: center; width: 24px !important; height: 24px !important; border-radius: 50%; color: #fff; font: 800 12px/1 var(--fl-font); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.flh-pin--start { background: #C2410C; } .flh-pin--end { background: #C93434; }
.flh-tip { font-weight: 700; font-family: var(--fl-font); }
/* dark map: invert the OpenStreetMap tiles and warm them back to a navy tone */
html[data-theme="dark"] .fl-tiles { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7); }

/* ---------- Human touches: driver initials, road-line motif ------------------ */
html[data-theme] .fl-timeline__icon.fl-avatar { background: linear-gradient(135deg, var(--fl-accent), var(--fl-primary)) !important; color: #fff !important; font: 700 11.5px/1 var(--fl-font); letter-spacing: .02em; }
html[data-theme] .content-header h1 { padding-bottom: 12px; background: repeating-linear-gradient(90deg, var(--fl-accent) 0 12px, transparent 12px 20px) left bottom / 52px 3px no-repeat; }