/* =====================================================================
   TAFI — UI consistency layer
   ---------------------------------------------------------------------
   WHY THIS FILE EXISTS

   `dashboard-v2.css` already is the design system: it normalises cards,
   tables, buttons, inputs, badges, modals and tabs onto the `--v2-*`
   tokens. The problem is load ORDER. `_head_scripts.html` runs early in
   <head>, so every page's own stylesheet (`admin-dashboard.css`,
   `programare.css`, …) and every inline <style> block — 108 of the 139
   templates carry one — is parsed AFTER it and wins every equal-specificity
   tie. The result is ~137 separately-invented toggle/tab/pill treatments
   and a different chrome on every screen.

   This sheet is the last word. It re-asserts the v2 primitives at a
   specificity page CSS cannot reach (`html body …`), and uses `!important`
   only on the handful of properties that must not be negotiable
   (font-family, the segmented-control chrome, leftover glassmorphism).

   TWO HARD RULES FOR ANYONE EDITING THIS FILE

   1. NO SIDEBAR RULES. `sidebar-modern.css` owns the sidebar's active and
      hover state and must keep out-ordering `dashboard-v2.css`. Nothing
      here may select `.sidebar` or anything inside it — that invariant is
      documented in CLAUDE.md and in `_head_scripts.html`.
   2. APPEARANCE ONLY. Never set `display`, `visibility`, `position` or
      width/height on anything stateful. `.tab-content.active`,
      `.tab-panel.active` and friends use `.active` to control *visibility*;
      touching that would break every tabbed page. This file only ever
      changes colour, border, background, shadow, radius, weight and font.
   ===================================================================== */


/* =====================================================================
   1 — SEGMENTED CONTROLS: TEXT ONLY
   ---------------------------------------------------------------------
   Period pickers, view switchers and tab bars lose their pill/box chrome
   entirely — no container background, no outline, no fill behind the
   selected item. The selection is carried by the text alone: muted for the
   inactive options, full-strength and semibold for the active one. This is
   the "Azi / 7 zile / Luna aceasta / An" control, and every one of its ~20
   re-inventions across the other pages.

   Deliberately NOT included: chips whose fill encodes data rather than
   selection (`.severity-pill`, `.currency-chip`, `.cc-chip`, `.color-option`,
   `.country-btn`, `.vc-toll-chip`, status chips), and the floating widgets
   (`.chat-widget-*`, `.tafi-ai-*`, `.tafi-hub-*`), which are their own
   self-contained surfaces.
   ===================================================================== */

/* --- 1a. The containers, enumerated ------------------------------------
   The well-known wrappers. Kept as a plain list (no :has()) so this still
   applies on any engine, however old. */
html body .period-btn-group,
html body .time-filters,
html body .view-toggle,
html body .fleet-view-toggle,
html body .fleet-toggle,
html body .segmented,
html body .segment-control,
html body .tabs,
html body .tab-list,
html body .tab-bar,
html body .tab-container,
html body .nav-tabs,
html body .exp-pills,
html body .filter-pills,
html body .pill-group,
html body .preset-group,
html body .view-options {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Stripped of their padding and dividers, the options need real air or
       they read as one run-on string. The spacing lives on the container,
       not on the items: these rows routinely open with a label ("Status:",
       "Tip Ruta:") that is a sibling of the buttons, and an item-side margin
       leaves that label jammed against the first option.

       `flex-wrap` is deliberately NOT set: forcing wrap on here stacked the
       two-icon view switcher in soferi_list onto two rows. Pages that need
       to wrap already do; row-gap is here to space them when they do. */
    column-gap: 18px !important;
    row-gap: 8px;
}

/* --- 1b. The containers, structurally ----------------------------------
   The long tail is styled inline, per page, under names no shared sheet
   knows (`.rtpd-filters`, `.ist-presets`, …). Rather than chase 139
   templates, match any element that directly parents one of the items.

   The pair form (`> .x + .x`) is the guard that makes this safe: it fires
   only where TWO of the buttons sit side by side, which is what a switcher
   is. A card that merely happens to contain one stray `.filter-btn` keeps
   its own background and border.

   This block is kept SEPARATE from 1a on purpose: an engine without
   `:has()` support discards a whole rule when one selector in its list is
   invalid, which would take the enumerated containers down with it. */
html body :has(> .period-btn + .period-btn),
html body :has(> .quick-period-btn + .quick-period-btn),
html body :has(> .filter-btn + .filter-btn),
html body :has(> .tab-btn + .tab-btn),
html body :has(> .tab-button + .tab-button),
html body :has(> .toggle-btn + .toggle-btn),
html body :has(> .view-toggle-btn + .view-toggle-btn),
html body :has(> .view-option-btn + .view-option-btn),
html body :has(> .fleet-view-btn + .fleet-view-btn),
html body :has(> .vc-view-btn + .vc-view-btn),
html body :has(> .acte-view-btn + .acte-view-btn),
html body :has(> .ist-preset + .ist-preset),
html body :has(> .btn-preset + .btn-preset),
html body :has(> .fp-preset-btn + .fp-preset-btn),
html body :has(> .exp-pill + .exp-pill),
html body :has(> .fexp-pill + .fexp-pill),
html body :has(> .filter-pill + .filter-pill),
html body :has(> .rtpd-filter-btn + .rtpd-filter-btn),
html body :has(> .compliance-filter-btn + .compliance-filter-btn),
html body :has(> .hf-btn + .hf-btn),
html body :has(> .yr-btn + .yr-btn),
html body :has(> .interval-btn + .interval-btn),
html body :has(> .fuel-range-btn + .fuel-range-btn),
html body :has(> .rs-seg-btn + .rs-seg-btn),
html body :has(> .fc-tab + .fc-tab),
html body :has(> .tp-tab + .tp-tab) {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    column-gap: 18px !important;
    row-gap: 8px;
}

/* --- 1c. The items ------------------------------------------------------
   Every switcher button, in its resting state: bare text. */
html body .period-btn,
html body .quick-period-btn,
html body .filter-btn,
html body .tab-btn,
html body .tab-button,
html body .toggle-btn,
html body .view-toggle-btn,
html body .view-option-btn,
html body .fleet-view-btn,
html body .vc-view-btn,
html body .acte-view-btn,
html body .ist-preset,
html body .btn-preset,
html body .fp-preset-btn,
html body .exp-pill,
html body .fexp-pill,
html body .filter-pill,
html body .rtpd-filter-btn,
html body .compliance-filter-btn,
html body .hf-btn,
html body .yr-btn,
html body .interval-btn,
html body .fuel-range-btn,
html body .rs-seg-btn,
html body .rs-chip-btn,
html body .sort-btn,
html body .status-filter-btn,
html body .route-filter-btn,
html body .th-filter-btn,
html body .user-filter-btn,
html body .inv-filter-btn,
html body .fa-filter-btn,
html body .fa-listing-filter,
html body .top-tab-btn,
html body .fa-tab-btn,
html body .report-tab-button,
html body .tab,
html body .ac-tab,
html body .af-tab,
html body .bp-tab,
html body .br-tab,
html body .cp-tab,
html body .dds-tab,
html body .detail-tab,
html body .docs-tab,
html body .ds-tab,
html body .fc-tab,
html body .hl-tab,
html body .ia-tab,
html body .inc-tab,
html body .m-tab,
html body .mc-tab,
html body .mk-tab,
html body .og-tab,
html body .planner-tab,
html body .pr-tab,
html body .profile-tab,
html body .requirements-tab,
html body .rs-tab,
html body .sal-tab,
html body .sarcini-tab,
html body .sp-tab,
html body .sp-subtab,
html body .tp-tab,
html body .up-tab,
html body .vd-tab,
html body .workspace-tab,
html body .notification-tab,
html body .island-panel-tab,
html body .fexp-modal-tab {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    color: var(--v2-text-2, var(--text-color-secondary, #6e6e73));
    font-family: var(--v2-sans, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.15s ease;
    /* No lift, no scale — a switcher that moves reads as a button. */
    transform: none !important;
    text-shadow: none !important;
}

/* --- 1d. Hover: colour only --------------------------------------------- */
html body .period-btn:hover,
html body .quick-period-btn:hover,
html body .filter-btn:hover,
html body .tab-btn:hover,
html body .tab-button:hover,
html body .toggle-btn:hover,
html body .view-toggle-btn:hover,
html body .view-option-btn:hover,
html body .fleet-view-btn:hover,
html body .vc-view-btn:hover,
html body .acte-view-btn:hover,
html body .ist-preset:hover,
html body .btn-preset:hover,
html body .fp-preset-btn:hover,
html body .exp-pill:hover,
html body .fexp-pill:hover,
html body .filter-pill:hover,
html body .rtpd-filter-btn:hover,
html body .compliance-filter-btn:hover,
html body .hf-btn:hover,
html body .yr-btn:hover,
html body .interval-btn:hover,
html body .fuel-range-btn:hover,
html body .rs-seg-btn:hover,
html body .rs-chip-btn:hover,
html body .sort-btn:hover,
html body .status-filter-btn:hover,
html body .route-filter-btn:hover,
html body .th-filter-btn:hover,
html body .user-filter-btn:hover,
html body .inv-filter-btn:hover,
html body .fa-filter-btn:hover,
html body .fa-listing-filter:hover,
html body .top-tab-btn:hover,
html body .fa-tab-btn:hover,
html body .report-tab-button:hover,
html body .tab:hover,
html body .ac-tab:hover,
html body .af-tab:hover,
html body .bp-tab:hover,
html body .br-tab:hover,
html body .cp-tab:hover,
html body .dds-tab:hover,
html body .detail-tab:hover,
html body .docs-tab:hover,
html body .ds-tab:hover,
html body .fc-tab:hover,
html body .hl-tab:hover,
html body .ia-tab:hover,
html body .inc-tab:hover,
html body .m-tab:hover,
html body .mc-tab:hover,
html body .mk-tab:hover,
html body .og-tab:hover,
html body .planner-tab:hover,
html body .pr-tab:hover,
html body .profile-tab:hover,
html body .requirements-tab:hover,
html body .rs-tab:hover,
html body .sal-tab:hover,
html body .sarcini-tab:hover,
html body .sp-tab:hover,
html body .sp-subtab:hover,
html body .tp-tab:hover,
html body .up-tab:hover,
html body .vd-tab:hover,
html body .workspace-tab:hover,
html body .notification-tab:hover,
html body .island-panel-tab:hover,
html body .fexp-modal-tab:hover {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--v2-text, var(--text-color-primary, #1d1d1f));
}

/* --- 1e. Active: weight and colour, nothing else ------------------------ */
html body .period-btn.active,
html body .quick-period-btn.active,
html body .quick-period-btn.is-active,
html body .filter-btn.active,
html body .tab-btn.active,
html body .tab-button.active,
html body .toggle-btn.active,
html body .view-toggle-btn.active,
html body .view-option-btn.active,
html body .fleet-view-btn.is-active,
html body .vc-view-btn.active,
html body .acte-view-btn.active,
html body .ist-preset.active,
html body .btn-preset.active,
html body .fp-preset-btn.active,
html body .exp-pill.active,
html body .fexp-pill.active,
html body .filter-pill.active,
html body .rtpd-filter-btn.active,
html body .compliance-filter-btn.active,
html body .hf-btn.active,
html body .yr-btn.active,
html body .interval-btn.active,
html body .fuel-range-btn.active,
html body .rs-seg-btn.active,
html body .rs-chip-btn.active,
html body .sort-btn.active,
html body .status-filter-btn.active,
html body .route-filter-btn.active,
html body .th-filter-btn.active,
html body .user-filter-btn.is-active,
html body .inv-filter-btn.active,
html body .fa-filter-btn.active,
html body .fa-listing-filter.active,
html body .top-tab-btn.active,
html body .fa-tab-btn.active,
html body .report-tab-button.active,
html body .tab.active,
html body .tab.is-active,
html body .ac-tab.active,
html body .af-tab.active,
html body .bp-tab.active,
html body .br-tab.active,
html body .cp-tab.active,
html body .dds-tab.active,
html body .detail-tab.active,
html body .docs-tab.active,
html body .ds-tab.active,
html body .fc-tab.is-active,
html body .hl-tab.active,
html body .ia-tab.active,
html body .inc-tab.active,
html body .m-tab.active,
html body .mc-tab.is-active,
html body .mk-tab.active,
html body .og-tab.active,
html body .planner-tab.active,
html body .pr-tab.active,
html body .profile-tab.active,
html body .requirements-tab.active,
html body .rs-tab.active,
html body .sal-tab.active,
html body .sarcini-tab.active,
html body .sp-tab.active,
html body .sp-subtab.active,
html body .tp-tab.active,
html body .up-tab.is-active,
html body .vd-tab.active,
html body .workspace-tab.active,
html body .notification-tab.active,
html body .island-panel-tab.active,
html body .fexp-modal-tab.active {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--v2-text, var(--text-color-primary, #1d1d1f)) !important;
    font-weight: 600;
}

/* Counters and badges riding inside a switcher stay subordinate to it. */
html body .tab-count,
html body .filter-count,
html body .pill-count,
html body .tab-badge {
    background: none !important;
    border: 0 !important;
    padding: 0 0 0 4px !important;
    color: var(--v2-text-3, var(--text-color-tertiary, #86868b));
    font-weight: 500;
}


/* =====================================================================
   2 — ONE CHROME EVERYWHERE
   ---------------------------------------------------------------------
   Everything below re-asserts what `dashboard-v2.css` already decided, at
   a specificity page CSS cannot out-order. Scoped to `body.dashboard-v2`
   (the default skin for every user) so an explicit v1 opt-out still gets
   the v1 look.
   ===================================================================== */

/* --- 2a. One typeface --------------------------------------------------
   Pages variously hardcode Inter, the system stack, or inherit whatever.
   Controls and headings all speak in the v2 sans; the mono stack is left
   alone, since plates, money and scores still want tabular figures. */
html body.dashboard-v2 button,
html body.dashboard-v2 input,
html body.dashboard-v2 select,
html body.dashboard-v2 textarea,
html body.dashboard-v2 h1,
html body.dashboard-v2 h2,
html body.dashboard-v2 h3,
html body.dashboard-v2 h4 {
    font-family: var(--v2-sans) !important;
}

/* --- 2b. No leftover glass --------------------------------------------
   v2 is a flat, opaque skin. Several pages still blur and float their
   panels, which is what makes moving between screens feel like moving
   between apps. */
html body.dashboard-v2 .card,
html body.dashboard-v2 .panel,
html body.dashboard-v2 .glass-card,
html body.dashboard-v2 .stat-card,
html body.dashboard-v2 .widget,
html body.dashboard-v2 .section-card,
html body.dashboard-v2 .content-card,
html body.dashboard-v2 .table-container,
html body.dashboard-v2 .table-wrapper,
html body.dashboard-v2 .table-wrap {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none;
}

/* --- 2c. One card ------------------------------------------------------
   Same surface, same hairline, same corner. `box-shadow: none` here clears
   the drop shadows individual pages invented; it does NOT flatten the
   design system's own light-theme hairline shadow, which is set further
   down dashboard-v2.css under `html[data-theme="light"] body.dashboard-v2`
   and deliberately out-specifies this rule. */
html body.dashboard-v2 .card,
html body.dashboard-v2 .panel,
html body.dashboard-v2 .glass-card,
html body.dashboard-v2 .section-card,
html body.dashboard-v2 .content-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    box-shadow: none;
}

/* A card must not grow, lift or glow on hover — half the pages did one of
   the three, and the page jumped as the cursor crossed it. */
html body.dashboard-v2 .card:hover,
html body.dashboard-v2 .panel:hover,
html body.dashboard-v2 .glass-card:hover,
html body.dashboard-v2 .stat-card:hover,
html body.dashboard-v2 .section-card:hover,
html body.dashboard-v2 .content-card:hover {
    transform: none;
    border-color: var(--v2-line-2);
}
/* NB: no `box-shadow` in the hover rule on purpose. The resting rule above
   already suppresses page-invented shadows at a specificity `.card:hover`
   cannot reach, so repeating it here would buy nothing — and it would
   out-order the light-theme hairline shadow, making every card visibly drop
   its shadow the moment the cursor touched it. */

/* --- 2d. One corner radius --------------------------------------------
   Two steps only: 6px on controls, 8px on surfaces. Pages had shipped 4,
   7, 10, 12, 14, 16 and 999px. */
html body.dashboard-v2 .modal,
html body.dashboard-v2 .modal-content,
html body.dashboard-v2 .modal-box,
html body.dashboard-v2 .dropdown-menu,
html body.dashboard-v2 .popup,
html body.dashboard-v2 .table-container,
html body.dashboard-v2 .table-wrapper,
html body.dashboard-v2 .table-wrap {
    border-radius: var(--v2-r-lg);
}

html body.dashboard-v2 .btn,
html body.dashboard-v2 input[type="text"],
html body.dashboard-v2 input[type="search"],
html body.dashboard-v2 input[type="number"],
html body.dashboard-v2 input[type="date"],
html body.dashboard-v2 input[type="email"],
html body.dashboard-v2 input[type="tel"],
html body.dashboard-v2 select,
html body.dashboard-v2 textarea {
    border-radius: var(--v2-r);
}

/* --- 2e. One field ----------------------------------------------------- */
html body.dashboard-v2 input[type="text"],
html body.dashboard-v2 input[type="search"],
html body.dashboard-v2 input[type="number"],
html body.dashboard-v2 input[type="date"],
html body.dashboard-v2 input[type="email"],
html body.dashboard-v2 input[type="tel"],
html body.dashboard-v2 select,
html body.dashboard-v2 textarea {
    background: var(--v2-surface-3);
    border: 1px solid var(--v2-line);
    color: var(--v2-text);
    font-size: 13px;
}

/* One focus ring, brand-coloured, on everything focusable. */
html body.dashboard-v2 input:focus,
html body.dashboard-v2 select:focus,
html body.dashboard-v2 textarea:focus {
    border-color: var(--v2-brand);
    box-shadow: 0 0 0 3px rgba(224, 112, 26, 0.15);
    outline: none;
}

/* --- 2f. One table ----------------------------------------------------
   Headers were variously bold-dark, uppercase-tiny, or styled like body
   text. One treatment: small, tracked-out, tertiary. */
html body.dashboard-v2 table th {
    background: var(--v2-surface-2);
    border-bottom: 1px solid var(--v2-line);
    color: var(--v2-text-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html body.dashboard-v2 table td {
    border-bottom: 1px solid var(--v2-line);
    color: var(--v2-text);
    font-size: 13px;
}

html body.dashboard-v2 table tr:hover td {
    background: var(--v2-hover);
}

/* --- 2g. One page header ----------------------------------------------
   Titles ranged from 1.1rem to 2rem across pages. */
html body.dashboard-v2 .header h1,
html body.dashboard-v2 .page-header h1,
html body.dashboard-v2 .header-title-section h1 {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--v2-text);
    margin: 0;
}

html body.dashboard-v2 .header-subtitle,
html body.dashboard-v2 .page-subtitle {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--v2-text-2);
}

/* The header rule sits under the title on some pages and not others. */
html body.dashboard-v2 .header,
html body.dashboard-v2 .page-header {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* =====================================================================
   3 — PAGE EXCEPTIONS
   ---------------------------------------------------------------------
   Section 1 makes switchers text-only, which is right where the options
   are a handful of mutually-exclusive views. It is NOT right everywhere,
   and this section is where a page says so. Rules here come last in the
   file on purpose: they out-order Section 1 by document order at equal
   specificity, so an exception is a local edit, not a fight.
   ===================================================================== */

/* --- 3a. /soferi — filters are outlined pills --------------------------
   Four stacked rows of filters (status, route type, country, sort) — 21
   options in all, several of them multi-word, and they sit directly above
   the results they cut down. As plain text that many options read as a
   paragraph and the eye can't find the selected one; as bordered pills
   each option is its own target and the row scans. Andreea asked for
   outlined pills here (19.08.2026).

   `.status-filter-controls` and `.sort-controls` exist ONLY on this page,
   so they scope the exception without a body class or a template edit. */
html body .status-filter-controls,
html body .sort-controls {
    /* Boxes need less air between them than bare words do. */
    column-gap: 8px !important;
    row-gap: 8px;
}

html body .status-filter-controls .status-filter-btn,
html body .status-filter-controls .route-filter-btn,
html body .status-filter-controls select.status-filter-btn,
html body .sort-controls .sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px !important;
    border: 1px solid var(--v2-line-2, rgba(0, 0, 0, .10)) !important;
    border-radius: 999px !important;
    background: var(--v2-surface, #fff) !important;
    color: var(--v2-text-2, #6e6e73);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

html body .status-filter-controls .status-filter-btn:hover,
html body .status-filter-controls .route-filter-btn:hover,
html body .sort-controls .sort-btn:hover {
    background: var(--v2-hover, #f0f2f5) !important;
    border-color: var(--v2-line-2, rgba(0, 0, 0, .18)) !important;
    color: var(--v2-text, #1d1d1f);
}

/* Selected: still an outlined pill — the brand outline and a tinted ground
   mark it, rather than a solid orange fill. A filled chip at this count
   turns the row into a traffic light, and orange-on-orange text is the
   one combination that fails contrast at 12.5px. */
html body .status-filter-controls .status-filter-btn.active,
html body .status-filter-controls .route-filter-btn.active,
html body .sort-controls .sort-btn.active {
    background: var(--t-orange, rgba(224, 112, 26, .10)) !important;
    border-color: var(--c-orange, #e0701a) !important;
    color: var(--v2-text, #1d1d1f) !important;
    font-weight: 600;
}

/* The route rows carry a count on each pill; keep it subordinate. */
html body .status-filter-controls .route-filter-btn .rf-count {
    color: var(--v2-text-3, #86868b);
    font-weight: 500;
}

/* The country filter is a <select> wearing the same class — give it room
   for its own dropdown arrow so the caret doesn't sit on the text. */
html body .status-filter-controls select.status-filter-btn {
    padding-right: 26px !important;
}


/* --- 3b. The fleet toolbar --------------------------------------------
   /soferi and /camioane open with one long row: a result count, a search
   field, a view switcher and up to six action buttons. On a laptop that
   row has more in it than fits, and since the search box is the only
   flexible item it is the one that collapsed — down to about the width of
   its own magnifying glass, which is why it read as decorative rather
   than as somewhere you can type. */

/* Let the row wrap instead of crushing one member of it. */
html body.dashboard-v2 .card-header > div:has(> .fleet-count) {
    flex-wrap: wrap;
    row-gap: 10px;
}

/* The search keeps a usable width no matter how many buttons follow it. */
html body.dashboard-v2 .fleet-search {
    min-width: 240px;
}

html body.dashboard-v2 .fleet-search input[type="search"],
html body.dashboard-v2 .fleet-search input[type="text"] {
    height: 34px;
    border-radius: 999px;
    background: var(--v2-surface-3);
    border: 1px solid var(--v2-line-2);
    color: var(--v2-text);
    font-size: 13px;
    padding: 0 14px 0 34px;
}

html body.dashboard-v2 .fleet-search input::placeholder {
    color: var(--v2-text-3);
}

html body.dashboard-v2 .fleet-search > i {
    left: 13px;
    color: var(--v2-text-3);
    font-size: 12px;
}

/* The count is a label, not a headline. It was set at nearly the size of
   the page's own controls and, being first in the row, read as the title
   of the page. Same pill, quieter. */
html body.dashboard-v2 .fleet-count {
    padding: 0 12px !important;
    height: 34px;
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-text-2);
    background: var(--v2-surface-3);
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

html body.dashboard-v2 .fleet-count strong {
    font-size: 13px;
    font-weight: 650;
    color: var(--v2-text);
}

/* The action buttons all sit at the same height as the field and the
   count, so the row reads as one strip rather than three. */
html body.dashboard-v2 .card-header > div:has(> .fleet-count) > .btn {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    padding: 0 14px;
}
