/**
 * Fleet map surfaces (fleet-telematics#13).
 *
 * Only what the inline markup cannot express: the expand state, the marker
 * card, and the shell that makes in-page fullscreen possible.
 */

.fleet-telematics-map-shell {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

#fleet-telematics-map-canvas {
    height: 60vh;
    min-height: 420px;
    width: 100%;
}

/*
 * IN-PAGE expand, not the browser's device fullscreen.
 *
 * Google's own control calls requestFullscreen(), which leaves the page
 * entirely — the admin chrome disappears and on macOS it can throw the window
 * onto its own Space (Ethan: it "opens a full device screen in another
 * window"). Fixed positioning keeps the map inside the app, so the tabs and
 * the vehicle list are still one Escape away.
 */
.fleet-telematics-map-shell.is-expanded {
    /*
     * 85% INSET, not edge to edge (Ethan, 2026-08-13). Full bleed reads as "the
     * app broke out of the page" and leaves nothing to click to get back; a
     * framed layer gives the outside a target. The dim is a huge spread
     * box-shadow rather than a backdrop node — one fewer thing to keep in sync.
     */
    position: fixed;
    inset: 7.5vh 7.5vw;
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 45%, transparent);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .62), 0 20px 60px rgba(0, 0, 0, .5);
    z-index: 100000;
    border-radius: 0;
}

.fleet-telematics-map-shell.is-expanded #fleet-telematics-map-canvas {
    height: 100%;
    min-height: 0;
}

#fleet-telematics-expand {
    /*
     * Given a panel of its own. It was a bare glyph on map tiles, so it
     * disappeared over anything pale and read as an artefact over anything dark
     * (Ethan: "the expand is also hard to see"). Same treatment as the
     * hamburger, so the two map controls look like a pair.
     */
    background: var(--fleet-background-panel, #1f1f23) !important;
    color: var(--fleet-primary-color, #c9a227) !important;
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 38%, transparent) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    font-size: 15px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    line-height: 1;
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
}

/* The card a marker opens. Google's InfoWindow ships a white bubble, so the
   text has to hold its own contrast rather than inherit the dark admin. */
.ff-tm-card {
    min-width: 170px;
    color: #1f1f23;
    font-size: 13px;
    line-height: 1.5;
}

.ff-tm-card-meta {
    color: #50575e;
    margin: 2px 0 6px;
}

.ff-tm-card a {
    font-weight: 600;
    text-decoration: none;
}

/* A vehicle photo used as a pin needs a shape, or it reads as a floating
   rectangle pasted onto the map. */
.fleet-telematics-map-shell img[src*="wp-content/uploads"] {
    border-radius: 50%;
}

/* ---- match review dialog (#19) ---- */
/*
 * `.fleet-modal` sets padding and radius but no height bound — it was built for
 * short confirm dialogs, and this one lists every unmatched tracker. Without a
 * cap the Apply button lands below the fold with no way to scroll to it.
 */
#fleet-telematics-match .fleet-modal {
    position: relative;
    width: min(920px, 94vw);
    max-height: 86vh;
    overflow-y: auto;
}

#fleet-telematics-match .fleet-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
    color: var(--fleet-text-light, #e8e8e8);
    opacity: .6;
}

#fleet-telematics-match .fleet-modal-close:hover,
#fleet-telematics-match .fleet-modal-close:focus {
    opacity: 1;
    color: var(--fleet-primary-color, #c9a227);
}

/* Room for the ×, so a long heading never runs under it. */
#fleet-telematics-match .fleet-modal > h3 {
    padding-right: 36px;
}

/* The select is the disagree-cheaply control — give it room to show a name. */
.fleet-tm-match select {
    width: 100%;
    max-width: 320px;
}

/* ---- Google's InfoWindow, on the tenant's palette (#18) ---- */
/*
 * Clicking a car opened a WHITE bubble with black text on a dark fleet admin —
 * Google renders the InfoWindow chrome itself, so none of our panel styling
 * reached it (Ethan, 2026-08-13: "make sure the tenant's CSS is used across the
 * board even when clicking on vehicles").
 *
 * These are Google's own class names. They are not a public API and can change
 * between Maps releases, which is exactly why every rule here is cosmetic: if a
 * class is renamed the bubble reverts to Google's default and still WORKS. No
 * layout or behaviour is built on them.
 *
 * `!important` is unavoidable — Google sets these inline on elements it owns.
 */
.gm-style .gm-style-iw-c {
    background: var(--fleet-background-panel, #1f1f23) !important;
    color: var(--fleet-text-light, #e8e8e8) !important;
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 40%, transparent) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45) !important;
    padding: 4px !important;
}

.gm-style .gm-style-iw-d {
    background: transparent !important;
    overflow: hidden !important;   /* Google adds a scrollbar we do not need */
    color: inherit !important;
}

/* The little pointer under the bubble is a separate element, and leaving it
   white is worse than not theming at all — it reads as a rendering fault. */
.gm-style .gm-style-iw-t::after,
.gm-style .gm-style-iw-tc::after {
    background: var(--fleet-background-panel, #1f1f23) !important;
}

/* Google's close button is a dark SVG that vanishes on a dark panel. */
.gm-style .gm-ui-hover-effect > span {
    background-color: var(--fleet-text-light, #e8e8e8) !important;
}

.gm-style .gm-style-iw-c a {
    color: var(--fleet-primary-color, #c9a227) !important;
}

/* ---- vehicle condition tiles (#18) ---- */
/*
 * ONE ROW. Five tiles wrapping into a 3+2 grid made the card taller than the
 * information justified, and the second row read as a separate group rather
 * than more of the same. Equal columns, scrolling sideways if a narrow panel
 * cannot hold them, so the row never becomes two.
 */
/*
 * WRAPS, NEVER SCROLLS (Ethan, 2026-08-13: *"I don't like the X overflow on the
 * Card… We have to scroll right to see the rest of the stats and even some of
 * the trips"*).
 *
 * A scrolling row with its scrollbar hidden is an invisible affordance, and the
 * tile it hid was SPEED — which only appears while the vehicle is moving, so the
 * one tile exclusive to a live trip was the one you could not see.
 */
.ff-tm-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.ff-tm-status > .ff-tm-stat {
    /*
     * 68px, matching the peek card. At 82 the four tiles plus their gaps
     * exceeded the panel width, so the row scrolled and the last tile sat
     * half-cut at the edge — it read as a rendering fault rather than as
     * scrollable content. The collapsed card already proved 68 fits all four
     * with the label wrapping, so the open panel uses the same number instead
     * of a second answer to the same question.
     */
    /*
     * FOUR PER ROW, and the fifth wraps beneath at the same width rather than
     * stretching across. `flex: 1 0 0` was the bug: shrink 0 with a 68px floor
     * means five tiles demand 372px inside a ~304px panel and cannot compress,
     * so the row overflowed — and because `.ff-tm-side-body` had no
     * `min-width: 0`, that overflow widened the WHOLE PANEL and took the trip
     * list scrolling sideways with it.
     */
    flex: 0 1 calc(25% - 6px);
    min-width: 68px;
}

.ff-tm-stat {
    background: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 22%, transparent);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ff-tm-stat-v {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fleet-text-light, #e8e8e8);
}

.ff-tm-stat-l {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .65;
}

.ff-tm-meter {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: rgba(128, 128, 128, .25);
    margin-top: 6px;
    overflow: hidden;
}

.ff-tm-meter > span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

/* ---- vehicle side panel (replaces the InfoWindow) ---- */
/*
 * Google's InfoWindow was cramped, carried chrome we do not own, and could not
 * hold trip history. This is our own surface, so it takes the tenant palette
 * for free and has room for the condition tiles and a trip list.
 */
.fleet-telematics-map-shell {
    position: relative;
}

.ff-tm-side {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: min(340px, 46%);
    background: var(--fleet-background-panel, #1f1f23);
    color: var(--fleet-text-light, #e8e8e8);
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 38%, transparent);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
    padding: 16px 18px;
    overflow-y: auto;
    z-index: 5;
    /* Closed state: out of the layer entirely, so it cannot swallow a click on
       a marker sitting underneath where the panel would be. */
    display: none;
}

.ff-tm-side.is-open {
    display: block;
}

@media (max-width: 700px) {
    /* On a narrow screen a 46% panel leaves no map. Take the bottom half
       instead — the map stays legible above it. */
    .ff-tm-side {
        left: 12px;
        width: auto;
        top: auto;
        max-height: 55%;
    }
}

.ff-tm-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.ff-tm-panel-head h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: var(--fleet-primary-color, #c9a227);
}

.ff-tm-panel-close {
    background: none;
    border: 0;
    color: var(--fleet-text-light, #e8e8e8);
    font-size: 24px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: .6;
}

.ff-tm-panel-close:hover,
.ff-tm-panel-close:focus {
    opacity: 1;
    color: var(--fleet-primary-color, #c9a227);
}

.ff-tm-panel-meta,
.ff-tm-panel-empty {
    font-size: 12px;
    opacity: .7;
    margin: 0 0 10px;
}

.ff-tm-side h4 {
    margin: 16px 0 6px;
    font-size: 13px;
    color: var(--fleet-primary-color, #c9a227);
}

.ff-tm-trips {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ff-tm-trips li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    font-size: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 14%, transparent);
}

.ff-tm-trips li:last-child { border-bottom: 0; }
.ff-tm-trip-when { opacity: .85; }
.ff-tm-trip-far  { font-weight: 600; }
.ff-tm-trip-top  { opacity: .6; }

.ff-tm-panel-device {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    opacity: .7;
    margin: 14px 0 10px;
}

/*
 * ONE TILE GRID FOR BOTH STATES. The open panel used to keep a roomier grid
 * than the collapsed card — bigger padding, 16px values — so expanding a
 * vehicle visibly re-flowed the tiles you were already reading, and the two
 * views of one card looked like two different components.
 *
 * Ethan, 2026-08-13: *"can we have the open vehicle logic match the closed
 * vehicle logic? (match the style for closed for open so it doesnt show as
 * overflow)"*. The card's metrics win: they are the tighter ones, they were
 * tuned against a real four-tile row, and they are what stops the fourth tile
 * clipping in a 340px panel.
 */
.ff-tm-side .ff-tm-status {
    gap: 6px;
    margin: 8px 0 4px;
}

.ff-tm-side .ff-tm-stat   { padding: 7px 9px; }
.ff-tm-side .ff-tm-stat-v { font-size: 14px; }
.ff-tm-side .ff-tm-stat-l { font-size: 10px; }

/* ---- defending the panel's own controls from the page's button styles ---- */
/*
 * Elementor styles bare `button` elements site-wide, so our close control
 * inherited a pink border and box-shadow that made it look like a form error
 * (Ethan, 2026-08-13: "elementor is intercepting some with the pink"). This is
 * the same class of problem as it hijacking the vehicle titles.
 *
 * Injected UI has to defend its own styling: we render into a page whose theme
 * we do not control, so anything that inherits from a bare element selector
 * must be reset explicitly rather than assumed. `!important` is warranted —
 * Elementor's own rules carry it, and this is a reset back to OUR baseline, not
 * a competing opinion about how buttons should look.
 */
/*
 * SCOPED TO OUR OWN CONTROLS. `.fleet-telematics-map-shell button` swept up
 * Google's buttons too — their zoom, camera and pan controls are <button>
 * elements inside our shell, so an `!important` reset aimed at Elementor was
 * landing on THEM (Ethan saw our border-radius on Google's +/-). A defence
 * against a theme must not become an attack on a third-party widget: name our
 * own elements instead of every button in a subtree we do not fully own.
 */
.ff-tm-side button,
.ff-tm-menu button,
.ff-tm-menu-btn,
#fleet-telematics-expand,
.ff-tm-side .ff-tm-side-nav button {
    background: transparent !important;
    color: var(--fleet-text-light, #e8e8e8) !important;
    padding: 2px 8px !important;
}

.ff-tm-side .ff-tm-panel-close:focus,
.ff-tm-side .ff-tm-side-nav button:hover,
.ff-tm-side .ff-tm-side-nav button:focus {
    background: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 16%, transparent) !important;
    color: var(--fleet-primary-color, #c9a227) !important;
    outline: none !important;
}

/* ---- the hamburger + its menu ---- */
.ff-tm-menu-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    background: var(--fleet-background-panel, #1f1f23) !important;
    color: var(--fleet-primary-color, #c9a227) !important;
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 38%, transparent) !important;
    border-radius: 8px !important;
    font-size: 17px;
    line-height: 1;
    padding: 7px 11px !important;
    cursor: pointer;
}

.ff-tm-menu-btn:hover,
.ff-tm-menu-btn:focus {
    background: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 18%, var(--fleet-background-panel, #1f1f23)) !important;
}

.ff-tm-menu {
    position: absolute;
    top: 54px;
    left: 12px;
    z-index: 6;
    min-width: 226px;
    background: var(--fleet-background-panel, #1f1f23);
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 38%, transparent);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

/* `hidden` alone loses to the flex above — an author display always wins. */
.ff-tm-menu[hidden] {
    display: none;
}

.ff-tm-menu a,
.ff-tm-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent !important;
    color: var(--fleet-text-light, #e8e8e8) !important;
    text-decoration: none !important;
    padding: 9px 11px !important;
    font-size: 13px;
    cursor: pointer;
}

.ff-tm-menu a:hover,
.ff-tm-menu a:focus,
.ff-tm-menu button:hover,
.ff-tm-menu button:focus {
    background: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 15%, transparent) !important;
    color: var(--fleet-primary-color, #c9a227) !important;
}

/* ---- vehicle flipper ---- */
.ff-tm-side-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -4px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 18%, transparent);
}

.ff-tm-side-nav button {
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ff-tm-side-count {
    font-size: 11px;
    letter-spacing: .06em;
    opacity: .6;
}

/* ---- vehicles & trackers dialog (moved off the page, into the map menu) ---- */
/*
 * The roster used to sit as a slab under the map, which pushed the map itself
 * into a strip on any normal screen. It is the same table, relocated — so it
 * needs the height bound the shared component does not ship, and a wide max so
 * four columns do not wrap.
 */
#fleet-telematics-vehicles-host .fleet-modal {
    position: relative;
    width: min(1100px, 94vw);
    max-height: 86vh;
    overflow-y: auto;
}

#fleet-telematics-vehicles-host .fleet-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
    color: var(--fleet-text-light, #e8e8e8);
    opacity: .6;
}

#fleet-telematics-vehicles-host .fleet-modal-close:hover,
#fleet-telematics-vehicles-host .fleet-modal-close:focus {
    opacity: 1;
    color: var(--fleet-primary-color, #c9a227);
}

/* The table is wide; let it scroll inside the dialog rather than the page. */
#fleet-telematics-vehicles-host table {
    width: 100%;
}

/* ---- day-grouped trips + drawable routes (#20) ---- */
.ff-tm-day {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 14px 0 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 22%, transparent);
}

.ff-tm-day-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--fleet-primary-color, #c9a227);
}

.ff-tm-day-sum {
    font-size: 11px;
    opacity: .6;
}

/* A row with a route is clickable; one without must not pretend to be. */
.ff-tm-trips li.is-drawable {
    cursor: pointer;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: -5px;
    margin-right: -5px;
}

.ff-tm-trips li.is-drawable:hover,
.ff-tm-trips li.is-drawable:focus {
    background: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 12%, transparent);
    outline: none;
}

.ff-tm-trips li.is-drawn {
    background: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 20%, transparent);
}

.ff-tm-trips li.is-drawn .ff-tm-trip-when {
    color: var(--fleet-primary-color, #c9a227);
    font-weight: 600;
}

/* Idle / mpg / harsh events — the stats we used to fetch and discard. */
.ff-tm-trip-extra {
    flex-basis: 100%;
    font-size: 11px;
    opacity: .55;
    margin-top: 2px;
}

.ff-tm-trips li {
    flex-wrap: wrap;
}


/* ---- panel nav split: collapse on top, flipper at the foot ---- */
.ff-tm-side {
    display: none;
    flex-direction: column;   /* body scrolls between a fixed head and foot */
}

.ff-tm-side.is-open { display: flex; }

.ff-tm-side-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;            /* without this a flex child refuses to shrink */
    /*
     * And without THIS, a flex child refuses to NARROW: `min-width` defaults to
     * `auto` on a flex item, so anything too wide inside pushes the panel out
     * instead of being contained. That is how an over-wide tile row made the
     * trip list scroll horizontally.
     */
    min-width: 0;
    overflow-x: hidden;
}

.ff-tm-side-nav { flex: 0 0 auto; }

.ff-tm-side-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    padding-top: 7px;
    margin-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 18%, transparent);
}

/* Big targets: stepping through nine cars is a repeated action. */
.ff-tm-side-foot button {
    /*
     * Smaller. Full-width chevrons at 20px read as primary actions competing
     * with the vehicle name; stepping between cars is frequent but not the
     * point of the card.
     */
    flex: 1 1 0;
    background: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 26%, transparent) !important;
    color: var(--fleet-text-light, #e8e8e8) !important;
    font-size: 14px !important;
    line-height: 1;
    padding: 5px 0 !important;
    cursor: pointer;
}

.ff-tm-side-foot button:hover,
.ff-tm-side-foot button:focus {
    background: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 22%, transparent) !important;
    color: var(--fleet-primary-color, #c9a227) !important;
}

.ff-tm-side-nav {
    justify-content: space-between;
}

/* Google's controls now sit bottom-LEFT, so the card can return to the corner. */
@media (max-width: 700px) {
    }

/* ---- peek: the same panel, collapsed to a card ---- */
/*
 * Not a second widget. The panel is always populated for the current vehicle;
 * `is-peek` simply hides everything below the condition tiles. One state
 * machine and one fetch, so the collapsed and expanded views cannot disagree —
 * which is exactly what a separate corner card would eventually have done.
 */
.ff-tm-side.is-peek {
    top: auto;                      /* hug the bottom rather than fill the side */
    /*
     * Clear of Google's attribution strip, which is ~26px and non-negotiable —
     * their terms require it visible, so the card yields rather than overlaps.
     */
    bottom: 34px;
    max-height: none;
    cursor: pointer;                /* the whole card expands */
}

/* Everything after the tiles belongs to the expanded view. */
.ff-tm-side.is-peek .ff-tm-trips,
.ff-tm-side.is-peek .ff-tm-day,
.ff-tm-side.is-peek .ff-tm-side-body h4,
.ff-tm-side.is-peek .ff-tm-panel-device,
.ff-tm-side.is-peek .ff-tm-side-body p:last-of-type,
.ff-tm-side.is-peek .ff-tm-side-body .button {
    display: none;
}

.ff-tm-side.is-peek .ff-tm-side-body {
    overflow: hidden;               /* no scrollbar on a card this size */
}

/* A hint that there is more, without a second control to learn. */
.ff-tm-side.is-peek .ff-tm-panel-head h3::after {
    content: ' ⌃';
    font-size: 11px;
    opacity: .5;
}

/* The collapse chevron means nothing when already collapsed. */
.ff-tm-side.is-peek .ff-tm-collapse {
    display: none;
}

/*
 * The peek-specific tile overrides that used to live here are GONE: the base
 * `.ff-tm-side` rules above now carry exactly these values for both states.
 * Keeping a byte-identical copy under `.is-peek` would be two statements of
 * one decision, and the next tune would land on only one of them.
 */

/* ---- specificity, because Elementor outranked the first attempt ---- */
/*
 * The earlier reset was `.ff-tm-side button` (0,1,1). Elementor styles buttons
 * through `body.admin-theme-enabled .fleet-form-tab-content button` (0,2,2), so
 * with `!important` on both sides SPECIFICITY decides and ours lost — the pink
 * border kept showing on the collapse control.
 *
 * Prefixed with the map wrapper to outrank it. `!important` alone is not a
 * trump card when the other side has it too; that is the thing worth
 * remembering, and it is why the first fix looked right and changed nothing.
 */
.fleet-telematics-map .ff-tm-side button,
.fleet-telematics-map .ff-tm-menu button,
.fleet-telematics-map .ff-tm-menu-btn,
.fleet-telematics-map #fleet-telematics-expand,
.fleet-telematics-map .ff-tm-collapse {
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    outline: none !important;
}

.fleet-telematics-map .ff-tm-menu-btn,
.fleet-telematics-map #fleet-telematics-expand {
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 38%, transparent) !important;
    border-radius: 8px !important;
}

.fleet-telematics-map .ff-tm-side-foot button {
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 26%, transparent) !important;
}

/* ---- Google's zoom control, on the tenant palette ---- */
/*
 * COLOUR ONLY. Their controls are Google's widget and their geometry is theirs
 * — an earlier blanket rule here restyled the lot and broke them. These touch
 * background, text and the divider, nothing structural, so a Maps update that
 * renames a class degrades to their default rather than to something broken.
 */
.gm-style .gm-bundled-control .gmnoprint > div {
    background: var(--fleet-background-panel, #1f1f23) !important;
    border: 1px solid color-mix(in srgb, var(--fleet-primary-color, #c9a227) 34%, transparent) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important;
}

.gm-style .gm-bundled-control button {
    background: transparent !important;
}

/* Their +/- are dark SVGs; invert so they read on a dark panel. */
.gm-style .gm-bundled-control button img {
    filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg) brightness(.95);
}

/* The hairline between + and - is a hardcoded light grey. */
.gm-style .gm-bundled-control .gmnoprint > div > div {
    background-color: color-mix(in srgb, var(--fleet-primary-color, #c9a227) 26%, transparent) !important;
}

/* ── Live refresh: a reading we could not renew (#26) ──────────────────────
   Dimmed and labelled rather than hidden. Removing the tiles would say the
   vehicle reports nothing; leaving them bright would say the numbers are
   current. Both are false — the true statement is "this is the last thing we
   heard, and we could not check it just now". */
.fleet-telematics-map .ff-tm-live.is-stale { opacity: .55; }
.fleet-telematics-map .ff-tm-live.is-stale::after {
    content: attr(data-stale-label);
    display: block;
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #dba617;
}

/* ── A trip that is still running (#25) ────────────────────────────────────
   Amber rather than the neutral weight a finished distance gets: "In progress"
   is a state, not a measurement, and it should not sit in the column where the
   eye is scanning for numbers to compare. */
.fleet-telematics-map .ff-tm-trip-far.is-live {
    color: var(--fleet-primary-color, #c9a227);
    font-weight: 500;
    font-variant-numeric: normal;
}

/* A soft pulse on the row, so a glance at the list finds the live trip without
   reading it. Kept to opacity — a moving border would fight the map. */
@keyframes ff-tm-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.fleet-telematics-map .ff-tm-trips li.is-live .ff-tm-trip-far {
    animation: ff-tm-live-pulse 2.4s ease-in-out infinite;
}

/* Anyone who has asked not to see motion gets the colour and nothing else. */
@media (prefers-reduced-motion: reduce) {
    .fleet-telematics-map .ff-tm-trips li.is-live .ff-tm-trip-far { animation: none; }
}