/*
 * VehicleStatusComponent (/fleet-status) — pixel/color values below are
 * copied from the reference app's own compiled output
 * (http://172.16.0.15:9020 — read-only: fetched its index.html/CSS via curl,
 * nothing submitted or changed there), specifically its fs-* class rules
 * (.fs-toolbar, .fs-select, .fs-btn, .fs-icon-btn, .fs-search, .fs-switch,
 * .fs-table*, .fs-pill, .fs-pager*) and its [data-theme=light] CSS custom
 * properties, since this account runs that theme. Not estimated from a
 * screenshot.
 *
 * Color tokens below map the reference's --accent/--border/--text-* custom
 * properties onto this app's own established equivalents (var(--color-primary)
 * is already #4e78ff here, matching what the reference's live theme actually
 * renders as — confirmed visually in shell-redesign.css — even though the
 * static [data-theme=light] stylesheet block itself has a different fallback
 * --accent of #0ba8b8; the account's live theme overrides that at runtime).
 * Structural numbers (heights, radii, paddings, font-sizes) are copied
 * verbatim since those aren't theme-dependent.
 *
 * Our grid is DevExtreme's DataGrid, not a plain <table>, so the reference's
 * .fs-table/.fs-toolbar markup can't be adopted 1:1 — instead these exact
 * values are applied to the DevExtreme-generated equivalents
 * (.dx-datagrid-headers, .dx-data-row, .dx-pager, etc.) and to our own
 * wrapper elements (which DO carry the real fs-* class names directly, see
 * VehicleStatusComponent.jsx's toolbarItemRender).
 */

.fleet-status-page {
  /* Same fix as .rd-page-wrap (page-head-redesign.css), applied here too so
     the two pages look uniform: the shared layout's flat gray body
     background (custom.css) shows through below the page content whenever
     it's shorter than the viewport. Giving this page its own background and
     letting it stretch the full height keeps that gray from ever showing.
     Same gradient values as .rd-page-wrap, copied verbatim for a uniform
     look across pages rather than redefined per page. */
  background:
    radial-gradient(circle at top, rgba(78, 120, 255, 0.08), transparent 35%),
    linear-gradient(180deg, #f0f4ff 0%, #e8edf8 100%);
  min-height: 100%;
  --fs-accent: var(--color-primary);
  --fs-accent-soft: rgba(78, 120, 255, 0.08);
  --fs-accent-border: rgba(78, 120, 255, 0.35);
  --fs-accent-mark-text: #ffffff;
  /* Exact value from the reference's light-theme --border token
     (rgba(0,0,0,.08)) rather than this app's own --color-border (#e7e9f3)
     — close, but not byte-identical, and this grid's border is meant to
     match the reference precisely rather than the rest of the app's
     generic border color. */
  --fs-border: rgba(0, 0, 0, 0.1);
  --fs-border-strong: #cbd5e1;
  --fs-surface: #ffffff;
  --fs-surface-sunken: #f8fafc;
  --fs-input-bg: #f8fafc;
  --fs-text-primary: #1f2430;
  --fs-text-secondary: #475569;
  --fs-text-muted: #64748b;
}

/* ---- Page title row ----
   Copied verbatim from the reference's actual page-header JSX (not guessed):
   found by fetching its compiled bundle (assets/main-BccIfvB4.js, read-only
   curl) and locating the literal "Fleet Status" header markup. Exact
   structure: icon(16px,#7c3aed) + title(700/1rem/var(--text)) + a pill badge
   whose background/border/text are a NEUTRAL gray (var(--surface-2)/
   var(--border-strong)/var(--text)) — only the NUMBER inside it is purple,
   not the whole pill (an earlier pass here wrongly tinted the entire badge
   purple). Action buttons are plain "btn secondary icon-only" (7px padding,
   1px var(--border-strong) border, var(--bg-surface) bg, default dark icon
   color) — CSV and Excel buttons use the exact same icon glyph, recolored
   only for Excel (#22c55e), not two different icons as an earlier pass here
   assumed. */

.fleet-status-pagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 24px;
  margin: 0 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #d8dde8;
  font-family: var(--font-family-base);
}

.fleet-status-pagehead-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fleet-status-pagehead-title i {
  color: #7c3aed;
  font-size: 16px;
}

.fleet-status-pagehead-title h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.fleet-status-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f9fafc;
  border: 1px solid #d8dde8;
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
}

.fleet-status-count-badge__num {
  color: #7c3aed;
  font-weight: 700;
}

.fleet-status-pagehead-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fleet-status-pagehead-actions .fleet-status-icon-btn {
  padding: 7px;
  height: auto;
  width: auto;
  border-radius: 8px;
  border: 1px solid #d8dde8;
  background: #ffffff;
  color: var(--fs-text-primary);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fleet-status-pagehead-actions .fleet-status-icon-btn i {
  font-size: 14px;
}

.fleet-status-pagehead-actions .fleet-status-icon-btn:hover {
  background: #f9fafc;
  border-color: var(--fs-text-muted);
}

.fleet-status-pagehead-actions .fleet-status-icon-btn__excel {
  color: #22c55e;
}

/* ---- Grid card shell ----
   The reference keeps the toolbar and the table as two separate, clearly
   distinct boxes (.fs-toolbar and .fs-table-wrap each have their own
   border/radius), not one outer card wrapping both. Our markup wraps both
   in a vendor ".card card-grid" div that was ALSO adding its own
   box-shadow + border-radius around the pair — nesting a card inside a
   card made the toolbar look fused to the table rather than two separate
   containers. Removing just that outer shadow/radius/background here (but
   keeping the card-body's normal padding, so spacing around the content
   stays the same) leaves the toolbar and table as the only two visible
   boxes, each still with their own chrome, cleanly separated. */
.fleet-status-grid-card {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  font-family: var(--font-family-base);
}

/* The vendor ".card-body" wrapper's default padding (20px top/bottom,
   25px left/right, from style.css) was asymmetric and came from a generic
   Bootstrap-ish card rule, not sized for this layout — replaced with a
   plain, equal 20px on all four sides so the toolbar+table always has
   even breathing room inside this container, regardless of what the
   vendor default happened to be. */
.fleet-status-grid-card > .card-body {
  padding: 8px 20px 20px;
}

/* ---- fs-toolbar: Project / Group selects, Configure Headers, CSV export,
   Auto Refresh — our own markup, carrying the real fs-* class names. ---- */

.fleet-status-grid-card .fs-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: 10px;
  padding: 10px 14px;
}

.fleet-status-grid-card .fs-toolbar__spacer {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Project/Group DevExtreme SelectBox -> same visual envelope as a plain
   .fs-select (height 38px, radius 8px, border-strong, input bg, .85rem). */
.fleet-status-grid-card .fs-select-box.dx-selectbox .dx-editor-outlined,
.fleet-status-grid-card .fs-select-box.dx-selectbox .dx-texteditor-input-container {
  height: 38px;
  border-radius: 8px !important;
  border-color: var(--fs-border-strong) !important;
  background: var(--fs-input-bg);
}

.fleet-status-grid-card .fs-select-box .dx-texteditor-input {
  font-size: 0.85rem;
  color: var(--fs-text-primary);
}

.fleet-status-grid-card .fs-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--fs-border-strong);
  background: var(--fs-surface);
  color: var(--fs-text-secondary);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fleet-status-grid-card .fs-btn:hover {
  border-color: var(--fs-accent-border);
  color: var(--fs-text-primary);
}

.fleet-status-grid-card .fs-btn--primary {
  background: var(--fs-accent-soft);
  border-color: var(--fs-accent-border);
  color: var(--fs-accent);
}

.fleet-status-grid-card .fs-icon-btn {
  height: 38px;
  width: 38px;
  border-radius: 8px;
  border: 1px solid var(--fs-border-strong);
  background: var(--fs-surface);
  color: var(--fs-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.fleet-status-grid-card .fs-icon-btn:hover {
  border-color: var(--fs-accent-border);
  color: var(--fs-text-primary);
}

.fleet-status-grid-card .fs-refresh-label {
  font-size: 0.82rem;
  color: var(--fs-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.fleet-status-grid-card .fs-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 12px;
  background: var(--fs-border-strong);
  transition: background 0.15s;
  flex-shrink: 0;
  cursor: pointer;
}

.fleet-status-grid-card .fs-switch--on {
  background: var(--fs-accent);
}

.fleet-status-grid-card .fs-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: left 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.fleet-status-grid-card .fs-switch--on .fs-switch__thumb {
  left: 18px;
}

/* Custom search box — replaces DevExtreme's own auto-generated search panel
   (hidden below) so it can live inside our own fs-toolbar card next to Auto
   Refresh, matching the reference's single-card toolbar exactly. Wired to
   the grid via instance.searchByText(), the same built-in DevExtreme method
   the native search panel itself calls — functionality is unchanged, only
   which element renders the input. */
.fleet-status-grid-card .fs-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.fleet-status-grid-card .fs-search-wrap i {
  position: absolute;
  left: 11px;
  color: var(--fs-text-muted);
  font-size: 0.8rem;
  pointer-events: none;
}

.fleet-status-grid-card .fs-search {
  height: 38px;
  padding: 0 12px 0 34px;
  border-radius: 8px;
  min-width: 240px;
  border: 1px solid var(--fs-border-strong);
  background: var(--fs-input-bg);
  color: var(--fs-text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
}

.fleet-status-grid-card .fs-search:focus {
  border-color: var(--fs-accent-border);
}

/* DevExtreme's own toolbar-injected items (native search panel, Excel
   export button) are superseded by our own fs-toolbar controls (custom
   search box above, page-head Excel-export icon) — hidden rather than
   removed from the DataGrid config so the underlying features (onExporting,
   searchByText) stay fully wired. Column chooser is already visible={false}
   at the component level, and the refresh button was dropped from
   handleToolbarPreparing entirely (page-head's refresh icon covers it), so
   nothing native is left needing a style here. */
.fleet-status-grid-card .dx-datagrid-search-panel,
.fleet-status-grid-card .dx-datagrid-export-button {
  display: none !important;
}

/* DevExtreme's toolbar has its own adaptive/overflow behavior — when it
   thinks its items don't fit the available width, it collapses some into a
   "..." menu button, rendered above/beside our content regardless of our
   own fs-toolbar flex-wrap already handling the layout. We don't use this
   menu at all (everything lives in our own template), so it's just hidden. */
.fleet-status-grid-card .dx-datagrid .dx-toolbar-menu-container {
  display: none !important;
}

/* The toolbar (fs-toolbar) and the table live INSIDE the same DevExtreme
   root element (.dx-datagrid), which is what was making them look fused —
   margin on our own inner fs-toolbar div wasn't enough since the real,
   guaranteed-to-apply gap needs to sit on DevExtreme's own block-level
   wrapper around it. !important here because this needs to win regardless
   of whatever layout rules DevExtreme itself puts on this element. */
.fleet-status-grid-card .dx-datagrid .dx-datagrid-header-panel {
  border-bottom: none;
  margin-bottom: 24px !important;
}

.fleet-status-grid-card .dx-datagrid .dx-toolbar {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.fleet-status-grid-card .dx-datagrid .dx-toolbar-before {
  align-items: center;
  width: 100%;
}

/* toolbar-after only ever contains items we've hidden (native search panel,
   export button, overflow menu) — forcing it to width:100% too (an earlier,
   overly-defensive pass here) served no purpose and risked it sitting as an
   invisible full-width layer stacked over toolbar-before, silently eating
   clicks on the controls underneath. Left to its natural (now effectively
   zero) width instead. */
.fleet-status-grid-card .dx-datagrid .dx-toolbar-after {
  align-items: center;
}

/* ---- Table (DevExtreme's generated markup standing in for .fs-table). ---- */

.fleet-status-grid-card .dx-datagrid {
  font-family: var(--font-family-base) !important;
  color: var(--fs-text-primary);
  font-size: calc(0.73rem + 1px);
}

/* .dx-datagrid-content wraps JUST the headers+rows (not the toolbar, which
   is a separate sibling .dx-datagrid-header-panel) — the border/radius goes
   here instead of on the whole .dx-datagrid root so the table renders as
   its own distinct box, not one shared border wrapping the toolbar too. */
.fleet-status-grid-card .dx-datagrid-content {
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

.fleet-status-grid-card .dx-datagrid-headers {
  background: var(--fs-surface-sunken);
  border-bottom: 1px solid var(--fs-border) !important;
}

.fleet-status-grid-card .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
  color: var(--fs-text-secondary);
  text-align: left;
  padding: 7px 12px !important;
  font-family: var(--font-family-base) !important;
  font-weight: 700;
  font-size: calc(0.73rem + 1px);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: none !important;
}

/* DevExtreme computes and locks each row's height via an inline style once
   on initial render (based on whatever content/font happened to be in play
   at that moment) — a plain CSS padding/line-height change alone doesn't
   shrink it back down since the inline height still wins over a
   non-important external rule. height:auto here, with !important, forces
   the row to actually recompute against our tighter padding instead of
   keeping its originally-measured (taller) height. */
.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row,
.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td {
  height: auto !important;
}

.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td {
  padding: 4px 12px !important;
  color: var(--fs-text-primary);
  font-family: var(--font-family-base) !important;
  font-size: calc(0.73rem + 1px) !important;
  line-height: 1 !important;
  border-bottom: 1px solid var(--fs-border) !important;
  white-space: nowrap;
  vertical-align: middle;
}

.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td i {
  font-size: calc(0.73rem + 1px);
  line-height: 1;
}

/* Custom cellRender columns (e.g. Vehicle No's <NavLink>, which renders a
   plain <a>) don't inherit the grid's own font-family — anchor tags pick up
   a different default font in some browsers unless explicitly told
   otherwise, which is why text in those columns could look visually
   different from plain-text columns (District, Base Location, etc). Forces
   every cell's content to the exact same font as the reference's .fs-table
   (https://fleettracking.utwiz.com/fleet-status — read-only, fetched its
   compiled CSS via curl). */
.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td,
.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td a,
.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td span,
.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td div {
  font-family: var(--font-family-base) !important;
}

/* The Vehicle No/Ambulance column's <NavLink> (reactstrap) carries
   Bootstrap's own .nav-link font-weight by default, which reads bolder than
   the plain-text columns next to it — the reference's equivalent (.fs-link)
   declares no font-weight of its own, i.e. the same regular weight as the
   rest of the row. Scoped to the anchor itself only, not every span/div in
   a cell, so intentionally-bold things (status pills, the speed gauge
   value) are untouched. */
.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td > div > a {
  font-weight: 400 !important;
}

.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row > td img {
  height: 16px !important;
  width: auto;
  vertical-align: middle;
}

.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row {
  background: var(--fs-surface);
}

.fleet-status-grid-card .dx-datagrid-rowsview .dx-data-row:hover > td {
  background: var(--fs-accent-soft);
}

.fleet-status-grid-card .fs-gauge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1;
}

.fleet-status-grid-card .fs-gauge__val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.62rem;
  margin-top: -1px;
}

.fleet-status-grid-card .fs-cell-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fleet-status-grid-card .dx-datagrid-rowsview a {
  color: var(--fs-accent);
  font-weight: 600;
  text-decoration: none !important;
}

.fleet-status-grid-card .dx-datagrid-rowsview a:hover {
  text-decoration: underline !important;
}

/* ---- Status pills — exact colors from the reference's .status-badge--*
   variants (which already happen to match this app's own Moving/Idle/
   Stopped/No-Response palette used on the Live Map status bar). ---- */

.fleet-status-grid-card .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 2px 10px;
  line-height: 1.2;
  border-radius: 999px;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Exact colors copied from the reference's own status->pill map (found in
   its compiled JS: Hw = {Moving:{bg:"#22c55e",fg:"#fff"}, Idle:{bg:"#f59e0b",
   fg:"#fff"}, Stopped:{bg:"#ef4444",fg:"#fff"}, Offline:{bg:"#64748b",
   fg:"#fff"}, NoService:{bg:"#e2e8f0",fg:"#475569"}}) — these are SOLID
   fills with white text for every status except "Out Of Service", not the
   translucent/soft tint an earlier pass here guessed from a different,
   unrelated CSS class (.status-badge--*, which belongs to a different
   screen entirely, not this one). */
.fleet-status-grid-card .badge.badge-success {
  background-color: #22c55e !important;
  color: #ffffff !important;
}

.fleet-status-grid-card .badge.badge-danger {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

.fleet-status-grid-card .badge.badge-warning {
  background-color: #f59e0b !important;
  color: #ffffff !important;
}

.fleet-status-grid-card .badge.badge-primary {
  background-color: #64748b !important;
  color: #ffffff !important;
}

/* All Project / All Group dropdown list — DevExtreme portals this popup to
   <body> (not nested inside .fleet-status-grid-card), so it can't be scoped
   under our page classes. Only z-index is touched here: forcing
   position:absolute in an earlier pass overrode DevExtreme's own
   JS-computed inline position (it expects to control position itself,
   typically fixed), which broke the dropdown's placement entirely —
   it was technically opening, just rendered somewhere invisible/wrong,
   which looked like "not opening" at all. z-index alone is enough to float
   it above the grid without interfering with DevExtreme's own positioning
   logic. Unscoped on purpose. */
.dx-selectbox-popup-wrapper {
  z-index: 15000 !important;
}

/* ---- Pager ---- */

.fleet-status-grid-card .dx-datagrid-pager {
  border-top: 1px solid var(--fs-border);
  margin-top: 14px;
  padding-top: 10px;
  font-size: 0.85rem;
  color: var(--fs-text-secondary);
}

.fleet-status-grid-card .dx-pager .dx-page-sizes .dx-selection,
.fleet-status-grid-card .dx-pager .dx-pages .dx-page {
  min-width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--fs-border-strong);
  background: var(--fs-surface);
  color: var(--fs-text-secondary);
  font-size: 0.82rem;
}

.fleet-status-grid-card .dx-pager .dx-pages .dx-selection {
  background: var(--fs-accent) !important;
  border-color: var(--fs-accent) !important;
  color: var(--fs-accent-mark-text) !important;
  font-weight: 700;
}