/* Fleet Maintenance: the one stylesheet for Atlas.Web.RCL/Pages/Fleet.

   Linked beside site.css in the host page (_Host.cshtml). A Fleet screen has no <style> block of its own
   once the kit covers it; what it needs is a class here, or one of the shared components in Comps/
   (OPListToolbar, OPStatTiles, OPEmptyState, OPSegmentedButtons, OPErrorBox, OPLoading, OPMenuButton,
   OPDropdown, OPWindow). Colours come from Bootstrap's variables, never literals, so the theme applies.

   VOCABULARY -- the words every Fleet screen uses, so nothing is said two ways:
   - Primary buttons: "New vehicle", "New work order", "New issue", "New item", "New driver", "Log fuel",
     "Add cost". The icon is fa-plus. One primary button per toolbar, at the far left (first, on a phone too).
   - Filters: "All locations" and "No location"; "All statuses"; the count after every option: "Active (14)".
   - Counts: "12 of 40 vehicles", "3 of 9 work orders".
   - Readings: "Mileage" (the odometer is the device; the number is mileage). "Miles per day".
   - Dates: FleetFormat.Date ("Oct 13, 2026"); money: FleetFormat.Money ("$1,234.00"); FleetBoardFormat.Miles ("12,400 mi").
   - Windows: "Cancel" for a form, "Close" for a read-only window. Titles name the record: "Unit 42: edit".
   - Rows: one click opens the record; the row's commands are in a kebab (OPMenuButton) at its right end,
     in a .flt-menu-col cell. No double-click, no right-click: both are invisible on a touch screen.
   - Loading: OPLoading below the toolbar, never instead of it. Empty: OPEmptyState, Filtered when the
     search or filters hid everything. Failures that stay: OPErrorBox; what just happened: a toast. */

/* ---- Section (a tab's root) and tables ---------------------------------------------------------- */
.flt-section { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.flt-scroll { overflow: auto; min-height: 0; }
.flt-table { margin-bottom: 0; }
.flt-table thead th { white-space: nowrap; }
.flt-row-link { cursor: pointer; }
.flt-num { text-align: right; }
.flt-mono { font-family: var(--opdms-font-mono); font-size: .85rem; }
.flt-menu-col { width: 1%; white-space: nowrap; cursor: default; }
.flt-unit { color: inherit; text-decoration: none; }
.flt-unit:hover { text-decoration: underline; }
.flt-amber { color: color-mix(in srgb, var(--opdms-warning) 85%, black); }
.flt-wrap-360 { max-width: 360px; }

/* ---- Windows (until Part 2 gives every window the one shell) ------------------------------------ */
.flt-confirm { padding: 4px 6px; }
.flt-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---- Board: the one status mark per vehicle (Part 5 replaces it with a chip per service) -------- */
.flt-board-status { min-width: 200px; }
.flt-board-status-icon { font-size: 1.15rem; vertical-align: middle; margin-right: 6px; }
.flt-board-status-text { font-size: .875rem; vertical-align: middle; }

/* ---- Inventory (FleetPartsTab; also hosted by Purchase Orders and the Inventory page) ----------- */
/* The section fills its tab and only the rows scroll, so the views, search and filters stay put. */
.flt-inventory-root { flex: 1 1 auto; }
.flt-inventory-root > * { flex: 0 0 auto; }
.flt-inventory-list { flex: 1 1 auto; }
.flt-inventory-list > * { flex: 0 0 auto; }
.flt-inventory-list > .flt-inventory-body { flex: 1 1 auto; min-height: 120px; overscroll-behavior: contain; }
.flt-inventory-body thead th { position: sticky; top: 0; z-index: 2; background: var(--opdms-surface); box-shadow: inset 0 -1px 0 var(--opdms-border); }
.flt-inventory-counts { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.flt-inventory-tiles { max-width: 360px; }
/* The search box is also a scanner's: room for the camera button at its right end. */
.op-lt-search input.flt-inventory-search { padding-right: 34px; }
.flt-inventory-camera { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none;
                        color: var(--opdms-muted); padding: 2px 8px; }
.flt-inventory-camera:hover { color: var(--opdms-primary); }
.flt-inventory-camera-only { display: none; }
.flt-inventory-bin { border: 1px solid var(--opdms-border); border-radius: 6px; padding: 8px 10px; max-height: 220px; overflow-y: auto; }
.flt-inventory-bin-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 4px 6px; border-radius: 4px; }
.flt-inventory-bin-item:hover { background: var(--opdms-fill); }

/* ---- Setup (FleetSetupTab, FleetServiceTypesSection, FleetTrackersSection)
   ------------------------------------------------------------------------------------------- */
.flt-setup-root { gap: 14px; max-width: 760px; }
.flt-setup-section { display: flex; flex-direction: column; }
.flt-setup-heading { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.flt-setup-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.flt-setup-select { max-width: 360px; }
.flt-setup-map th.flt-setup-key { width: 160px; white-space: nowrap; }
.flt-setup-number { max-width: 120px; }
.flt-setup-wide { flex: 1 1 240px; max-width: 420px; }
.flt-setup-address { max-width: 560px; }
.flt-setup-hour { width: auto; min-width: 8rem; }
.flt-setup-people { max-height: 360px; overflow: auto; }
.flt-setup-role { width: auto; min-width: 9rem; }
/* The one Save for the whole tab, pinned to the foot of the scrolling section: a page footer, so Save
   sits left and Discard right (the title-bar rule is for windows). */
.flt-setup-footer { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 0;
                    background: var(--opdms-surface); border-top: 1px solid var(--opdms-border); }
.flt-setup-footer-spacer { flex: 1 1 auto; }

/* ---- Toolbar extras (Part 2): a picker and date inputs inside OPListToolbar's Filters; paging; row states -------- */
.flt-pick { width: 14rem; max-width: 100%; }
.flt-pick .op-dd-trigger { padding: .25rem .5rem; font-size: .875rem; }
.flt-date { width: auto; }
.flt-more { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.flt-row-void td { text-decoration: line-through; color: var(--opdms-muted); }
.flt-row-past td { color: var(--opdms-muted); }

/* ---- Map: the canvas beside its list; one column on a narrow screen -------------------------------------------- */
.flt-map-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.flt-map-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.flt-map-list { max-height: 520px; }
@media (max-width: 900px) {
    .flt-map-layout { grid-template-columns: minmax(0, 1fr); }
    .flt-map-list { max-height: none; }
}

/* ---- Drivers ------------------------------------------------------------------------------------ */
.flt-drivers-inactive td { color: var(--opdms-muted); }

/* ---- Tires: the chosen-casings bar, the send/receive panel, and the Show more foot --------------- */
.flt-tires-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
                 background: var(--opdms-surface-secondary); border-radius: 6px; padding: 6px 10px; }
.flt-tires-action { border: 1px solid var(--opdms-border); border-radius: 6px; padding: 10px 12px; }
.flt-tires-foot { display: flex; align-items: center; gap: 12px; }

/* ---- Fuel window (FleetFuelWindow): a phone-first form, big controls on purpose ------------------ */
.flt-fuel { display: flex; flex-direction: column; gap: 4px; }
.flt-fuel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.flt-fuel-wide { grid-column: 1 / -1; }
.flt-fuel-hint { grid-column: 1 / -1; margin-top: -4px; }
.flt-fuel-label { font-weight: 600; margin: 6px 0 2px; }
.flt-fuel-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.flt-fuel-buttons .btn { min-width: 6rem; min-height: 2.5rem; }
.flt-fuel-receipt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flt-fuel-receipt img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--opdms-border); }
.flt-fuel-photo-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 6px 12px; border-radius: 8px; cursor: pointer;
                      border: 2px dashed var(--opdms-border); font-weight: 600; margin: 0; }
.flt-fuel-void { border: 1px solid var(--opdms-danger-line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.flt-fuel-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.flt-fuel-save { min-width: 8rem; min-height: 2.75rem; font-weight: 600; }

/* ---- Fuel-card import window (FleetFuelImportWindow) -------------------------------------------- */
.flt-fuelimport { display: flex; flex-direction: column; gap: 4px; }
.flt-fuelimport-file { max-width: 360px; }
.flt-fuelimport-map { border: 1px solid var(--opdms-border); border-radius: 8px; padding: 8px 12px; }
.flt-fuelimport-map-grid { display: grid; grid-template-columns: minmax(10rem, max-content) minmax(10rem, 18rem); gap: 6px 12px; align-items: center; margin-top: 6px; }
.flt-fuelimport-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flt-fuelimport-rows { max-height: 46vh; overflow: auto; }
.flt-fuelimport-problem td { background: var(--opdms-danger-bg); }
.flt-fuelimport-quiet td { color: var(--opdms-muted); }

/* ---- Issue window (FleetIssueWindow) ------------------------------------------------------------ */
.flt-issue { min-height: min(440px, 70vh); }
.flt-issue-title { margin: 0 0 8px; }
.flt-issue-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 0 0 12px; padding: 10px 12px; background: var(--opdms-subtle); border: 1px solid var(--opdms-border); border-radius: 6px; }
.flt-issue-fact-wide { grid-column: 1 / -1; }
.flt-issue-facts dt { font-size: .75rem; font-weight: 400; color: var(--opdms-muted); }
.flt-issue-facts dd { margin: 0; font-size: 1rem; font-weight: 600; }
.flt-issue-facts dd .text-muted { font-weight: 400; }
.flt-issue-desc { white-space: pre-wrap; }
.flt-issue-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.flt-issue-photos img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--opdms-border); }
.flt-issue-act { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--opdms-border); }
.flt-issue-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---- New issue (FleetReportIssue): a phone-first form, big controls on purpose ------------------- */
.flt-report { display: flex; flex-direction: column; gap: 4px; }
.flt-report-label { font-weight: 600; margin: 10px 0 2px; }
.flt-report-input { font-size: 1rem; }
.flt-report-odo { max-width: 200px; }
.flt-report-urgency { display: flex; flex-wrap: wrap; gap: 8px; }
.flt-report-big { flex: 1 1 8rem; min-height: 3.25rem; padding: 8px 12px; border-radius: 8px; font-weight: 600;
                  border: 2px solid var(--opdms-border); background: var(--opdms-surface); color: var(--opdms-text); }
.flt-report-big.is-on { background: var(--opdms-primary); border-color: var(--opdms-primary); color: var(--opdms-on-primary); }
.flt-report-big.is-on.flt-report-big-stop { background: var(--opdms-danger); border-color: var(--opdms-danger); }
.flt-report-photo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 8px 16px; border-radius: 8px;
                        border: 2px dashed var(--opdms-border); cursor: pointer; font-weight: 600; }
.flt-report-photo-btn.disabled { opacity: .5; cursor: default; }
.flt-report-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.flt-report-thumb { position: relative; }
.flt-report-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--opdms-border); }
.flt-report-thumb-x { position: absolute; top: 2px; right: 2px; padding: 0 6px; }
.flt-report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.flt-report-send { min-height: 3rem; min-width: 10rem; font-weight: 600; }

/* ---- Driver and cost windows -------------------------------------------------------------------- */
.flt-driver-heading { font-weight: 600; margin-top: 6px; border-bottom: 1px solid var(--opdms-border); }
.flt-cost-void { border-top: 1px solid var(--opdms-border); margin-top: 12px; padding-top: 8px; }

/* ---- Windows on OPEditWindow (Part 2, second sitting): each window's own layout bits ----------------------------- */
/* Print labels */
.flt-labels-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flt-labels-scan { flex: 1 1 240px; }
.flt-labels-select { width: auto; min-width: 10rem; }
.flt-labels-newbin { width: 12rem; }
.flt-labels-scroll { max-height: 38vh; overflow: auto; }
.flt-labels-num { max-width: 80px; margin-left: auto; }
.flt-labels-settings { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.flt-labels-qr { margin-bottom: 4px; }
/* Import items */
.flt-import-file { display: flex; align-items: center; gap: 8px; }
.flt-import-list { max-height: 40vh; overflow: auto; }
/* Fit a tire */
.flt-fittire-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Order parts */
/* Nothing here may change size while someone searches for a vendor: the window is centred, so any change moves all of it.
   Fixed columns, room kept for the scrollbar and for the line under each vendor box (Looking... / Matched / no match). */
.flt-orderparts-win .op-ew-body { min-height: min(640px, 76vh); }
.flt-orderparts-scroll { max-height: 45vh; overflow: auto; scrollbar-gutter: stable; position: relative; }
.flt-orderparts-table { table-layout: fixed; min-width: 880px; }
.flt-orderparts-table td { overflow-wrap: anywhere; }
.flt-orderparts-table td { vertical-align: top; }
td.flt-orderparts-vendor { height: 5.6rem; }
.flt-orderparts-win .aplp-state { line-height: 1.2; }
.flt-orderparts-win .aplp { min-height: 4rem; }
.flt-orderparts-off td { color: var(--opdms-muted); }
.flt-orderparts-num { max-width: 100px; margin-left: auto; }
/* Cycle count */
.flt-count-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.flt-count-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.flt-count-scan { flex: 1 1 260px; max-width: 420px; }
.flt-count-filter { width: auto; }
.flt-count-scroll { max-height: 55vh; overflow: auto; }
.flt-count-num { max-width: 110px; margin-left: auto; }
.flt-count-state { width: 28px; text-align: center; }
.flt-count-hit td { background: var(--opdms-warning-bg); }
.flt-count-new-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flt-count-new-types { max-height: 120px; overflow: auto; }
/* Core or claim */
.flt-credit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.flt-credit-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0 0 12px; font-size: .9rem; }
.flt-credit-facts dt { font-weight: 500; color: var(--opdms-muted); }
.flt-credit-facts dd { margin: 0; }
.flt-credit-section { margin-bottom: 14px; }
.flt-credit-heading { font-weight: 600; margin-bottom: 6px; }
.flt-credit-action { border: 1px solid var(--opdms-border); border-radius: 6px; padding: 10px 12px; }
.flt-credit-history { max-height: 200px; overflow-y: auto; }
.flt-credit-apref { max-width: 14rem; }
/* Tire */
.flt-tire-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.flt-tire-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 12px 0; }
.flt-tire-facts dt { font-weight: 600; font-size: .85rem; }
.flt-tire-facts dd { margin: 0; font-size: .9rem; }
.flt-tire-box { border: 1px solid var(--opdms-border); border-radius: 6px; padding: 10px 12px; }
.flt-tire-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.flt-tire-history { max-height: 220px; overflow-y: auto; }
.flt-tire-event { padding: 4px 0; border-bottom: 1px solid var(--opdms-border-translucent); }
.flt-tire-event:last-child { border-bottom: 0; }
/* Part (item) */
.flt-part-section { margin-bottom: 16px; }
.flt-part-heading { font-weight: 600; margin-bottom: 8px; }
.flt-part-box { border: 1px solid var(--opdms-border); border-radius: 6px; padding: 10px 12px; }
.flt-part-tabs { margin-bottom: 10px; }
.flt-part-tabs .nav-link { padding: 6px 12px; font-size: .9rem; }
.flt-part-tab-count { margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: .75rem; background: var(--opdms-fill); color: var(--opdms-muted); }
.flt-part-tab-pane { min-height: 120px; }
.flt-part-barcode-add { display: flex; gap: 8px; max-width: 420px; }
.flt-part-vendor { min-width: 16rem; }
.flt-part-ledger { max-height: 280px; overflow-y: auto; }
.flt-part-term { max-width: 110px; }

/* ---- Windows on the OPEditWindow shell (Part 2): what each window's body needs beyond the kit --------------- */
/* History */
.flt-pastwo { display: flex; gap: 14px; min-height: 0; height: 65vh; }
.flt-pastwo-list { flex: 0 0 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.flt-pastwo-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid var(--opdms-border); border-radius: 6px; background: var(--opdms-surface); color: var(--opdms-text); cursor: pointer; }
.flt-pastwo-row:hover { border-color: var(--opdms-primary); }
.flt-pastwo-row.is-on { background: var(--opdms-primary); border-color: var(--opdms-primary); color: var(--opdms-on-primary); }
.flt-pastwo-rowhead { display: flex; justify-content: space-between; gap: 8px; }
.flt-pastwo-snippet { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flt-pastwo-detail { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.flt-pastwo-title { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.flt-pastwo-heading { font-size: .8125rem; font-weight: 600; color: var(--opdms-muted); margin: 10px 0 2px; }
.flt-pastwo-text { margin: 0; white-space: pre-wrap; }
.flt-pastwo-lines { font-size: .875rem; }
.flt-pastwo-costs { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .875rem; }
.flt-pastwo-signature { display: block; max-height: 70px; max-width: 240px; background: var(--opdms-surface); border: 1px solid var(--opdms-border); border-radius: 4px; }
@media (max-width: 768px) {
    .flt-pastwo { flex-direction: column; height: auto; }
    .flt-pastwo-list { flex: 0 0 auto; max-height: 30vh; }
}
.flt-history-scroll { max-height: 65vh; overflow: auto; }
.flt-history-voided td { color: var(--opdms-muted); }
.flt-history-voided td:nth-child(3) { text-decoration: line-through; }
.flt-history-notes { min-width: 160px; white-space: pre-wrap; }
/* Services for a vehicle */
.flt-applies-list { max-height: 55vh; overflow: auto; }
.flt-applies-num { width: 105px; }
/* Tread and pressure */
.flt-tread-num { width: 6rem; }
/* Vehicle edit */
.flt-vehicle-fields { min-width: 0; }
.flt-vehicle-section { margin-top: 10px; padding-bottom: 2px; font-weight: 600; font-size: .85rem; border-bottom: 1px solid var(--opdms-border); }
.flt-vehicle-vin-result { border: 1px solid var(--opdms-border); border-radius: 6px; padding: 6px 10px; background: var(--opdms-subtle); }
.flt-vehicle-reading { padding-top: 4px; }
/* Vehicle labels */
.flt-vlabels-skip { width: 6rem; }
.flt-vlabels-search { max-width: 14rem; }
.flt-vlabels-list { max-height: 44vh; overflow: auto; border: 1px solid var(--opdms-border); border-radius: 6px; padding: 4px 8px; margin-top: 6px; }
.flt-vlabels-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; margin: 0; cursor: pointer; }
/* Activity log */
.flt-activity-words { width: auto; min-width: 12rem; }
.flt-activity-body { max-height: 60vh; }
.flt-activity-summary { min-width: 14rem; }
/* Inspection checklists */
.flt-checklists-scroll { max-height: 48vh; overflow: auto; }
.flt-checklists-move { width: 44px; }
.flt-checklists-section { width: 190px; }
/* Work-order form gallery: the previews are paper, so they stay white whatever the theme */
.flt-gallery-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.flt-gallery-card { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--opdms-surface); color: inherit;
                    border: 1px solid var(--opdms-border); border-radius: 6px; padding: 8px; }
.flt-gallery-card:hover { border-color: var(--opdms-primary); }
.flt-gallery-selected { border-color: var(--opdms-primary); box-shadow: 0 0 0 2px rgba(var(--opdms-primary-rgb), .25); }
.flt-gallery-thumb { width: 229px; height: 296px; max-width: 100%; margin: 0 auto; overflow: hidden; background: var(--opdms-surface); border: 1px solid var(--opdms-border); pointer-events: none; }
.flt-gallery-name { font-weight: 600; }
.flt-gallery-desc { font-size: .8rem; color: var(--opdms-muted); }
.flt-gallery-detail { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--opdms-border); }
.flt-gallery-big { width: 492px; max-width: 100%; height: 636px; overflow: auto; background: var(--opdms-surface); border: 1px solid var(--opdms-border); }
.flt-gallery-form { flex: 1 1 260px; min-width: 240px; }
/* Service programs */
.flt-programs-scroll { max-height: 50vh; overflow: auto; }
.flt-programs-num { width: 110px; }
/* Tire positions (layouts) */
.flt-layouts-code-col { width: 8rem; }
.flt-layouts-code { text-transform: uppercase; }

/* ---- Dashboard (FleetDashboardTab): tiles, then the attention list beside the chart and what is coming up ---- */
.flt-dash-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.flt-dash-panel { border: 1px solid var(--opdms-border); border-radius: 8px; padding: 10px 12px; }
.flt-dash-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.flt-dash-panel-head h6 { margin: 0; font-weight: 600; }
.flt-dash-list { list-style: none; margin: 0; padding: 0; }
.flt-dash-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--opdms-border);
                 color: inherit; text-decoration: none; border-radius: 4px; }
.flt-dash-item:first-child { border-top: 0; }
.flt-dash-item:hover { background: var(--opdms-fill); color: inherit; }
.flt-dash-item-icon { flex: 0 0 1.4rem; text-align: center; opacity: .75; padding-top: 2px; }
.flt-dash-item-body { flex: 1 1 auto; min-width: 0; }
.flt-dash-item-title { font-weight: 500; }
.flt-dash-item-detail { font-size: .85rem; color: var(--opdms-muted); }
.flt-dash-item-when { flex: 0 0 auto; font-size: .8rem; color: var(--opdms-muted); white-space: nowrap; }
.flt-dash-kpis { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .875rem; margin-top: 6px; }
.flt-dash-kpis strong { font-weight: 600; }
@media (max-width: 992px) {
    .flt-dash-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Vehicle edit window: sections down the left, the chosen one's fields on the right ---------- */
.flt-vehicle-edit { display: flex; gap: 16px; align-items: flex-start; min-height: 360px; }
.flt-vehicle-edit-nav { flex: 0 0 170px; display: flex; flex-direction: column; gap: 2px; }
.flt-vehicle-edit-tab { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent;
                        border-radius: 6px; background: none; color: inherit; padding: 7px 10px; font-size: .9rem; }
.flt-vehicle-edit-tab:hover { background: var(--opdms-fill); }
.flt-vehicle-edit-tab.active { background: var(--opdms-primary-bg); color: var(--opdms-ink-primary); font-weight: 600; border-left-color: var(--opdms-primary); }
.flt-vehicle-edit-flag { margin-left: auto; min-width: 1.2em; text-align: center; border-radius: 999px; background: var(--opdms-danger); color: var(--opdms-on-primary);
                         font-size: .7rem; font-weight: 700; line-height: 1.5; }
.flt-vehicle-edit-hint { padding: 6px 10px 0; }
.flt-vehicle-edit-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 768px) {
    .flt-vehicle-edit { flex-direction: column; gap: 10px; }
    .flt-vehicle-edit-nav { flex: 0 0 auto; width: 100%; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
    .flt-vehicle-edit-tab { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; }
    .flt-vehicle-edit-tab.active { border-bottom-color: var(--opdms-primary); }
    .flt-vehicle-edit-hint { flex: 0 0 100%; }
}

/* ---- Setup nav: the sections down the left, one shown at a time; a dot = changes not saved ------- */
.flt-setup-root { max-width: none; }
.flt-setup-layout { display: flex; gap: 18px; align-items: flex-start; min-height: 0; }
.flt-setup-nav { flex: 0 0 210px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.flt-setup-nav-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-left: 3px solid transparent;
    border-radius: 6px; background: none; color: inherit; font-size: .875rem;
}
.flt-setup-nav-item:hover { background: var(--opdms-fill); }
.flt-setup-nav-item.active { background: var(--opdms-primary-bg); color: var(--opdms-ink-primary); font-weight: 600; border-left-color: var(--opdms-primary); }
.flt-setup-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flt-setup-nav-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--opdms-warning); }
.flt-setup-body { flex: 1 1 auto; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.flt-setup-subheading { font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.flt-setup-services-scroll { overflow-x: auto; }
.flt-setup-services-table th { white-space: nowrap; font-size: .85rem; }
.flt-setup-services-name { min-width: 180px; }
.flt-setup-services-num { min-width: 90px; }
.flt-setup-services-kind { min-width: 130px; }
/* The services table has eleven columns: let its section use the width the form sections are kept from. */
.flt-setup-body:has(.flt-setup-services-table) { max-width: 1200px; }
.flt-setup-services-inactive { opacity: .6; }
.flt-setup-trackers-body { overflow: auto; }
@media (max-width: 768px) {
    .flt-setup-layout { flex-direction: column; gap: 10px; }
    .flt-setup-nav { flex: 0 0 auto; flex-direction: row; width: 100%; overflow-x: auto; position: static; gap: 4px; padding-bottom: 4px; }
    .flt-setup-nav-item { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; }
    .flt-setup-nav-item.active { border-bottom-color: var(--opdms-primary); }
}

/* ---- Vehicle page: a header that stays put, tabs under it, the tab's blocks scrolling below --------------- */
.flt-vehicle { height: calc(100dvh - 45px); box-sizing: border-box; padding: 10px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.flt-vehicle-head { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.flt-vehicle-links { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.flt-vehicle-links a { text-decoration: none; }
.flt-vehicle-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flt-vehicle-photo { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--opdms-border); }
.flt-vehicle-nophoto { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--opdms-border);
                       display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--opdms-muted);
                       background: var(--opdms-subtle); }
.flt-vehicle-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flt-vehicle-title h4 { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flt-vehicle-sub { color: var(--opdms-muted); display: flex; gap: 10px; flex-wrap: wrap; font-size: .9rem; }
.flt-vehicle-figures { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.flt-vehicle-figure { border: 1px solid var(--opdms-border); border-radius: 6px; padding: 4px 10px; min-width: 120px;
                      color: inherit; text-decoration: none; display: block; }
a.flt-vehicle-figure:hover { border-color: var(--opdms-primary); color: inherit; }
.flt-vehicle-figure-label { font-size: .72rem; color: var(--opdms-muted); white-space: nowrap; }
.flt-vehicle-figure-value { font-weight: 700; line-height: 1.25; white-space: nowrap; }
.flt-vehicle-figure-sub { font-size: .72rem; color: var(--opdms-muted); white-space: nowrap; }
.flt-vehicle-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.flt-action-group { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--bs-border-color); }
.flt-action-group:last-of-type { border-right: 0; }
.flt-log-now { color: var(--bs-secondary-color); }
.flt-log-now:hover { color: var(--bs-primary); }
.flt-vehicle-tabs { flex: 0 0 auto; display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--opdms-border); scrollbar-width: thin; }
.flt-vehicle-tab { border: 0; background: none; color: inherit; padding: 6px 12px; white-space: nowrap; border-bottom: 3px solid transparent;
                   border-radius: 4px 4px 0 0; font-size: .9rem; }
.flt-vehicle-tab:hover { background: var(--opdms-fill); }
.flt-vehicle-tab.active { border-bottom-color: var(--opdms-primary); font-weight: 600; }
.flt-vehicle-tab-count { margin-left: 5px; font-size: .78rem; opacity: .7; }
/* position: relative keeps absolute children (a table's hidden column labels) inside this scroller, not the window's. */
.flt-vehicle-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 0 16px; }
.flt-vehicle-photos { border: 1px solid var(--opdms-border); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.flt-vehicle-term { max-width: 110px; }
@media (max-width: 768px) {
    .flt-vehicle { padding: 8px 10px 0; }
    .flt-vehicle-figures { margin-left: 0; width: 100%; }
    .flt-vehicle-figure { flex: 1 1 45%; min-width: 0; }
    .flt-vehicle-actions .btn { min-height: 40px; }
}
button.flt-vehicle-figure { text-align: left; font: inherit; background: var(--opdms-surface); cursor: pointer; }
button.flt-vehicle-figure:hover { border-color: var(--opdms-primary); }

/* ---- Board chips (Part 5): one per service due, with how much of its interval is used ------------ */
.flt-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; max-width: 520px; }
.flt-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 7rem; padding: 3px 8px 4px;
            border: 1px solid var(--opdms-border); border-radius: 6px; background: var(--opdms-surface); font: inherit;
            font-size: .78rem; line-height: 1.2; color: inherit; text-align: left; }
button.flt-chip { cursor: pointer; }
button.flt-chip:hover { border-color: var(--opdms-primary); }
.flt-chip-name { font-weight: 600; white-space: nowrap; }
.flt-chip-text { color: var(--opdms-muted); white-space: nowrap; }
.flt-chip-bar { display: block; width: 100%; height: 3px; margin-top: 2px; border-radius: 2px; background: var(--opdms-fill); overflow: hidden; }
.flt-chip-fill { display: block; height: 100%; background: var(--opdms-muted); }
.flt-chip-overdue { border-color: var(--opdms-danger); background: var(--opdms-danger-bg); }
.flt-chip-overdue .flt-chip-text, .flt-chip-overdue .flt-chip-fill { color: var(--opdms-ink-danger); background-color: var(--opdms-danger); }
.flt-chip-overdue .flt-chip-text { background: none; }
.flt-chip-soon { border-color: color-mix(in srgb, var(--opdms-warning) 85%, black); background: var(--opdms-warning-bg); }
.flt-chip-soon .flt-chip-fill { background: color-mix(in srgb, var(--opdms-warning) 85%, black); }
.flt-chip-later .flt-chip-fill { background: var(--opdms-primary); }
.flt-chip-ok, .flt-chip-muted { flex-direction: row; align-items: center; min-width: 0; color: var(--opdms-muted); }
.flt-chip-ok { border-style: dashed; }

/* ---- Work order editor (touch): the tablet in the bay and the phone at the truck ------------------- */
/* A hint that is a tooltip with a mouse and a line of text under the control on a touch screen. */
.flt-hint { display: none; }
@media (hover: none) {
    .flt-hint { display: block; font-size: .8rem; color: var(--opdms-muted); margin-top: 2px; }
}
.flt-wo-scan { flex: 0 1 260px; }
@media (max-width: 768px) {
    .flt-wo .btn-sm { min-height: 44px; padding: .5rem .75rem; font-size: 1rem; }
    .flt-wo .form-control-sm, .flt-wo .form-select-sm { min-height: 44px; font-size: 1rem; }
    .flt-wo .fwo-header .btn-link { min-height: 0; }
    /* The status, in/out-of-service and clock buttons: two to a row, the full width. */
    .flt-wo .fwo-bigbar { flex-direction: column; gap: 10px; }
    .flt-wo .fwo-bigbuttons .fwo-big { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .flt-wo .fwo-bigbuttons .fwo-reason { flex: 1 1 calc(50% - 4px); }
    .flt-wo .fwo-bigbar .fwo-big { flex-direction: column; min-height: 4.25rem; font-size: 1rem; padding: 8px 14px; }
    .flt-wo .fwo-bigbar .fwo-big-icon { font-size: 1.25rem; }
    .flt-wo .fwo-w-sm, .flt-wo .fwo-w-md, .flt-wo .fwo-w-lg, .flt-wo .fwo-vehicle-field, .flt-wo .fwo-complaint { width: 100%; max-width: none; }
    .flt-wo .op-datepicker .form-control, .flt-wo .op-datepicker .btn { min-height: 44px; font-size: 1rem; }
    /* Scanning is how a part gets on the work order with the truck in front of you: the scan box comes first. */
    .flt-wo .flt-wo-addbar { flex-direction: column; }
    .flt-wo .flt-wo-addbar .btn { width: 100%; }
    .flt-wo .flt-wo-scan { order: -1; flex: 1 1 100%; }
    .flt-wo .fwo-what { min-width: 0; }
    .flt-wo .fwo-num { width: auto; }
    .flt-wo .fwo-totals { justify-content: flex-start; gap: 10px 18px; }
    .flt-wo .fwo-fee input { width: 7rem; }
    .flt-wo .fwo-outside-vendor { min-width: 0; }
}

/* ---- Touch (Part 6): a tablet in the shop, a phone at the truck ---------------------------------------------
   Under 768px every Fleet list becomes cards (fleettables.js puts each column's header on its cell as data-label;
   a th marked data-priority="low" hides with its cells, "menu" keeps the kebab without a label), controls grow to a
   44px target, and an edit window (OPEditWindow, .op-ew) fills the screen. Scoped to Fleet's roots so the rest of the
   app is untouched. */
@media (max-width: 768px) {
    .flt-table thead { display: none; }
    .flt-table, .flt-table tbody, .flt-table tr, .flt-table td { display: block; width: 100%; box-sizing: border-box; }
    .flt-table tr { position: relative; border: 1px solid var(--opdms-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
                    background: var(--opdms-surface); }
    .flt-table tr.table-active { background: var(--opdms-primary-bg); }
    .flt-table td { border: 0; padding: 2px 0; display: flex; gap: 8px; align-items: baseline; text-align: left !important; white-space: normal !important; max-width: none !important; }
    .flt-table td::before { content: attr(data-label); flex: 0 0 38%; color: var(--opdms-muted); font-size: .8rem; }
    .flt-table td:first-child { display: block; font-size: 1.05rem; font-weight: 600; padding: 0 2.6rem 4px 0; }
    .flt-table td:first-child::before { display: none; }
    .flt-table td[data-priority="low"] { display: none; }
    .flt-table td[data-priority="menu"] { position: absolute; top: 4px; right: 4px; width: auto; padding: 0; }
    .flt-table td[data-priority="menu"]::before, .flt-table td[data-label=""]::before { content: none; }
    .flt-table td .flt-chips { max-width: none; }
    .flt-board-status { min-width: 0; }

    /* 44px targets, the rule of thumb for a finger. */
    .flt-page .btn-sm, .flt-vehicle .btn-sm, .op-ew .btn-sm, .flt-page .form-select-sm, .flt-page .form-control-sm,
    .op-ew .form-select-sm, .op-ew .form-control-sm, .flt-page .op-dd-trigger, .op-ew .op-dd-trigger {
        min-height: 44px; font-size: 1rem; padding-top: .45rem; padding-bottom: .45rem;
    }
    .flt-page .op-lt-primary { width: 100%; order: -1; }
    .flt-page .op-lt-search { max-width: none; flex-basis: 100%; }
    .flt-page .op-lt-filters > select, .flt-page .flt-pick { max-width: none; width: 100%; }
    .op-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* An edit window is the whole screen: the title bar stays, the body scrolls. */
    .op-window-overlay.op-ew .op-window { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
}

/* ---- Activity log (Part 7): sentences, with the raw action behind Details ------------------------ */
.flt-activity-details summary { cursor: pointer; font-size: .8rem; }
.flt-activity-details span { font-size: .8rem; white-space: pre-wrap; }

/* ---- Round 2: my dashboard ---- */
/* The row above the tiles: the "as of" date and Customize. One panel hidden: the grid drops to a single column. */
.flt-dash-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.flt-dash-grid.flt-dash-grid-one { grid-template-columns: minmax(0, 1fr); }
.flt-dash-pick { display: flex; flex-direction: column; gap: 4px; }
.flt-dash-pick-group { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--opdms-muted); margin-bottom: 2px; }
.flt-dash-pick-row { display: flex; align-items: center; gap: 10px; min-height: 2.25rem; margin: 0; cursor: pointer; }
.flt-dash-pick-row .form-check-input { margin: 0; }

/* ---- Round 2: thumbs + avatars ------------------------------------------------------------------
   FleetUnitThumb: a vehicle's first photo (or its asset kind's icon in a grey square) beside the unit number in Vehicles,
   on the Board and in the vehicle page header. OPAvatar (Comps, its own style) sits in .flt-person beside a name. */
.flt-thumb { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden;
    border-radius: 6px; border: 1px solid var(--opdms-border); background: var(--opdms-fill); vertical-align: middle; }
.flt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flt-thumb-none { color: var(--opdms-muted); }
.flt-thumb-sm { width: 32px; height: 32px; font-size: .9rem; }
.flt-thumb-md { width: 48px; height: 48px; font-size: 1.25rem; border-radius: 8px; }
.flt-thumb-lg { width: 72px; height: 72px; font-size: 1.75rem; border-radius: 8px; }
.flt-unit-cell { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.flt-person { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; min-width: 0; }
.flt-person > span, .flt-person > strong { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
    /* The card layout: the first cell is the title; the thumb stays at its left, text wraps after it. */
    table.flt-table td .flt-unit-cell { display: inline-flex; }
    .flt-thumb-lg { width: 56px; height: 56px; }
}

/* ---- Round 2: search + keys ------------------------------------------------------------------------ */
/* The rail's search box (FleetSearchBox): the popup is position: fixed and placed by fleetKeys.anchor, so the
   rail's own scrolling never clips it. */
.flt-search { position: relative; display: flex; align-items: center; padding: 0 4px; }
.flt-search-icon { position: absolute; left: 12px; opacity: .5; pointer-events: none; font-size: .8rem; }
.flt-search-input { padding-left: 1.9rem; padding-right: 1.6rem; }
.flt-search-clear {
    position: absolute; right: 8px; border: 0; background: none; color: inherit; opacity: .55; font-size: 1.1rem;
    line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.flt-search-clear:hover { opacity: 1; background: var(--opdms-fill); }
.flt-search-collapsed { border: 0; background: none; width: 100%; }
.flt-search-pop {
    position: fixed; z-index: 1060; width: 360px; max-width: calc(100vw - 16px); max-height: min(70vh, 480px); overflow-y: auto;
    background: var(--opdms-surface); border: 1px solid var(--opdms-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 4px 0;
}
.flt-search-group {
    padding: 8px 12px 3px; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .65;
}
.flt-search-hit {
    display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 40px; color: inherit; text-decoration: none;
}
.flt-search-hit:hover, .flt-search-hit.active { background: var(--opdms-primary-bg); color: inherit; }
.flt-search-hit-icon {
    flex: 0 0 32px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; background: var(--opdms-subtle); color: var(--opdms-muted); overflow: hidden;
}
.flt-search-hit-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flt-search-hit-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.flt-search-hit-title, .flt-search-hit-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flt-search-hit-detail { font-size: .8rem; }
.flt-search-hit-status { flex: 0 0 auto; font-weight: 500; }
.flt-search-note { padding: 8px 12px; font-size: .875rem; }

/* The shortcuts window (FleetShortcutsWindow): keycaps. */
.flt-keys { width: 100%; font-size: .875rem; }
.flt-keys td { padding: 4px 6px; vertical-align: top; }
.flt-keys td:first-child { white-space: nowrap; width: 5.5rem; }
.flt-keys-head { padding-top: 12px !important; font-weight: 600; }
.flt-kbd {
    display: inline-block; min-width: 1.6em; padding: 1px 6px; font-family: inherit; font-size: .8rem; line-height: 1.4;
    color: inherit; background: var(--opdms-subtle); border: 1px solid var(--opdms-border); border-bottom-width: 2px;
    border-radius: 4px; text-align: center;
}

@media (max-width: 767.98px) {
    .flt-search-pop { left: 8px !important; right: 8px; width: auto; }
    .flt-search-hit { min-height: 44px; }
}
@media (hover: none) {
    .flt-search-hit { min-height: 44px; }
}

/* ---- Check-out window (Fleet-Customer Part 9): three big condition buttons, thumb-sized on a phone ---------- */
.flt-checkout-conditions { display: flex; gap: 6px; }
.flt-checkout-conditions .btn { flex: 1 1 0; min-height: 44px; font-weight: 600; }

/* ---- Attachments on a unit's page (Fleet-Customer Part 7) ---------------------------------------------- */
.flt-attachments { display: flex; flex-direction: column; gap: 6px; }
.flt-attachment { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--opdms-border); border-radius: 8px; }
.flt-attached-to { font-size: .75rem; color: var(--opdms-muted); }

/* ---- Order parts: a vendor per line (one draft order per vendor) ----------------------------------------- */
.flt-orderparts-summary { padding-left: 1.1rem; }