/* =============================================================================
   Custom widget styles — concept-5
   These are the NEW/replaced widgets (Available balance, Fleet status, and the
   "Active" status chip reused on Tax refund) built on top of the real EWO
   SingleFile capture (dashboard.html). Everything else on the page (sidebar,
   topbar, Tax refund body, Live map, Plan route, Latest news) is the authentic
   MUI capture and is intentionally left untouched for pixel fidelity.

   Tokens mirror ../styles.css (navy/primary/status colors, 8px card radius,
   Inter body + Gilroy 600 headings) so future widgets can extend this file
   instead of growing inline styles.
   ============================================================================= */

:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;

  /* Reused brand/status colors (see ../styles.css for the canonical set) */
  --ew-navy: #00004B;
  --ew-navy-87: rgba(0, 0, 75, 0.87);
  --ew-navy-60: rgba(0, 0, 75, 0.6);
  --ew-navy-16: rgba(0, 0, 75, 0.16);
  --ew-primary: #0067E6;
  --ew-primary-light: #AACBFF;
  --ew-success: #11884E;
  --ew-success-tint: rgba(23, 186, 107, 0.12);
  --ew-warning: #FFB24C;
  /* Vehicle status colors — must stay identical to live-map.js `var C`. */
  --ew-active-blue: #2AABEB;
  --ew-idle-amber: #F59E0B;
  --ew-stopped-grey: #8A8AA3;
  --ew-offline-grey: #B4B4C8;
  /* Categorical series — for parts-of-a-whole charts only, never for status.
     Two existing brand blues, one added violet, and a neutral for the residual bucket. */
  --ew-cat-1: #0067E6;
  --ew-cat-2: #2AABEB;
  --ew-cat-3: #7B61D9;
  --ew-cat-rest: #C7C7D4;
  --ew-cat-mute: #E4E4EC;

  --ew-surface-soft: #F5F5FA;
  --ew-surface-mint: #EAF7EF;

  --ew-r-card: 8px;
  --ew-r-tile: 8px;
}

/* NOTE: no grid/breakpoint overrides here on purpose. All 7 widgets share the
   captured MUI grid class (xs=12 sm=6 md=6 lg=4) and lay out consistently:
   3-across at >=1200px, 2-across 600-1200px, stacked below 600px. A previous
   "fix" here forced only these 3 widgets to a different breakpoint, which
   misaligned them against the Live map / Plan route / Latest news row. The
   actual cause of that misalignment was a stray </div> in dashboard.html
   (it closed the MuiGrid container early, ejecting the last 4 widgets from
   the grid) — fixed in the markup, not with CSS. */

/* Card shell shared by every custom widget */
.ew-card {
  background: #fff;
  border: 1px solid var(--ew-navy-16);
  border-radius: var(--ew-r-card);
  /* 16px block / 20px inline — matches the captured widget cards
     (Tax refund, Cost calculator, Latest news) so headers and pinned CTAs
     line up across a row. */
  padding: var(--space-4) var(--space-5);
  height: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: Inter, Arial, sans-serif;
}
.ew-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.ew-h6 {
  margin: 0;
  font-family: Gilroy, Inter, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  display: flex;
  align-items: center;
  color: var(--ew-navy-87);
  flex: none;
}

/* Chip/Filled — reusable "Active" status chip (Available balance + Tax refund) */
.ew-chip {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 78px;
  height: 24px;
  padding: 3px 4px;
  border-radius: 100px;
  flex: none;
}
.ew-chip--active { background: var(--ew-success-tint); }
.ew-chip-icon { flex: none; }
.ew-chip-label {
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.16px;
  color: var(--ew-navy-87);
  white-space: nowrap;
}

/* Currency select pill (e.g. "EUR ⌄") */
.ew-select-pill {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--ew-navy-16);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  flex: none;
}
.ew-select-pill-label { font-size: 13px; font-weight: 600; color: var(--ew-navy-87); }

/* Available balance figure */
.ew-figure-row { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.ew-figure { font-family: Gilroy, Inter, sans-serif; font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.5px; color: var(--ew-navy); }
.ew-figure-currency { font-size: 16px; font-weight: 600; color: var(--ew-navy-60); }

.ew-subtle-block { margin-bottom: var(--space-3); }
.ew-subtle-label { display: block; font-size: 13px; color: var(--ew-navy-60); }
.ew-subtle-value { font-size: 14px; font-weight: 600; color: var(--ew-navy); }

/* Progress bar (Available vs Spent).
   Not a slider: the blue fill is a pill carrying a 3px white ring, which reads
   as a clean gap where it meets the light-blue track. The ring's top/bottom/left
   sides fall outside the track onto the white card, so only the right-hand
   separator is visible. */
.ew-legend-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); }
/* The balance legend is one inline row, so it can sit tighter under the bar than
   the Tax refund legend, whose 20px flags need more air. */
#eWalletAccountBalance .ew-share-bar { margin-bottom: var(--space-1); }
/* Concept 6: room for the "Open balance dashboard" CTA within the 430px card. */
#eWalletAccountBalance .ew-legend-row { margin-bottom: var(--space-1); }
/* Static legend (no hover-to-reveal amounts). */
#eWalletAccountBalance .ew-legend-item { cursor: default; }
#eWalletAccountBalance .ew-tile { height: 56px; }
.ew-legend-amt { font-weight: 600; color: var(--ew-navy);
  white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  opacity: 0; transition: opacity .12s ease; }
.ew-legend-item.is-on .ew-legend-amt { opacity: 1; }
.ew-legend-item.is-on { color: var(--ew-navy); }
/* Mirrors the Tax refund legend: label on top, amount revealed beneath it. Keeping
   the amount inline would reserve width beside the label and stop `Spent` sitting
   flush right at rest. */
.ew-legend-item { display: flex; flex-direction: column; gap: 1px; font-size: 13px;
  color: var(--ew-navy-60); cursor: pointer; transition: color .12s ease; }
.ew-legend-item:last-child { align-items: flex-end; }
.ew-legend-head { display: flex; align-items: center; gap: 6px; }
.ew-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Shared 64px tile component — used by Fleet status KPIs AND the
   Available-balance mini-cards (Nothing overdue / All unpaid / Not yet invoiced) */
.ew-tiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2-5); margin-top: auto; }
.ew-tile {
  height: 64px;
  box-sizing: border-box;
  border-radius: var(--ew-r-tile);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ew-tile--soft { background: var(--ew-surface-soft); transition: background .12s ease; }
.ew-tile--soft:hover { background: #ECECF3; cursor: pointer; }
.ew-tile--mint { background: var(--ew-surface-mint); }
.ew-tile--row { justify-content: space-between; }
.ew-tile-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.ew-tile-title { font-size: 14px; font-weight: 700; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-tile-subtitle { font-size: 14px; line-height: 17px; }
.ew-tile-subtitle--muted { color: var(--ew-navy-60); }

.ew-badge-check {
  flex: none; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.ew-badge-count {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--ew-warning); color: var(--ew-navy); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Fleet status */
/* Segmented control — Status/Map, Saved/Potential */
.ew-seg {
  display: flex;
  gap: 2px;
  flex: none;
  padding: 2px;
  border-radius: 8px;
  background: rgba(0, 0, 75, 0.06);
}
.ew-seg-btn {
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 75, 0.5);
}
.ew-seg-btn.is-active {
  background: #fff;
  color: var(--ew-navy);
  box-shadow: 0 1px 3px rgba(0, 0, 75, 0.12);
}

/* Stacked panes. The inactive pane is hidden with visibility/opacity rather than
   display:none so it keeps its box — MapLibre needs a non-zero canvas at all
   times, otherwise the map initialises (or resizes) to 0x0 and renders blank. */
.ew-panes { position: relative; flex: 1 1 auto; min-height: 0; }
.ew-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.ew-pane.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.ew-pane--map > [data-test="live-map-widget"] { flex: 1 1 auto; }

/* Map view is full-bleed: the card drops its padding so the map fills the whole
   widget, and the segmented control floats over the map instead of sitting in a
   header row. The card's radius clips the map, so the map block carries no
   border/radius of its own. */
.ew-card.is-map-view { padding: 0; overflow: hidden; }
.ew-card.is-map-view .ew-card-header {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  z-index: 5;
  margin: 0;
}
.ew-card.is-map-view .ew-card-header .ew-h6 { display: none; }
/* Over the map the track must stay opaque, otherwise the white active pill sits
   on 92%-white and the two are indistinguishable. #F0F0F4 is exactly what the
   normal rgba(0,0,75,.06) track composites to on a white card, so the control
   looks identical in both views. */
/* Concept 6: × back to Overview, only in map view (replaces the Overview/Map tabs). */
.ew-map-close { display: none; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
  align-items: center; justify-content: center; background: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 75, 0.28); }
.ew-map-close:hover { background: #f0f0f4; }
.ew-map-close:focus-visible { outline: 2px solid var(--ew-primary); outline-offset: 2px; }
.ew-card.is-map-view .ew-map-close { display: flex; }

.ew-fleet-subtitle { margin: 0 0 var(--space-4); font-size: 13px; color: var(--ew-navy-60); }
.ew-kpi-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.ew-kpi-icon--active,
.ew-kpi-icon--driving { background: var(--ew-active-blue); }
.ew-kpi-icon--idling { background: var(--ew-idle-amber); }
.ew-kpi-icon--stopped { background: var(--ew-stopped-grey); }
.ew-kpi-icon--offline { background: var(--ew-offline-grey); }
.ew-kpi-value { display: block; font-size: 20px; font-weight: 800; color: var(--ew-navy); line-height: 1.1; }
.ew-kpi-value--warn { color: #C77A05; }
.ew-kpi-label { font-size: 12px; color: #6B6B8A; }

/* Concept 6 — linked Fleet status (plans/fleet-status-widget-strategy.md).
   Overview leads with exceptions, then drive time left, then a compact status
   row. Every count is a button: Count → List (#fsDrill) → Place (Map tab).
   The shared filter lives in fleet-data.js; .is-selected mirrors it. */
.ew-ov { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.ew-ov-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.ew-ov-head {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 2px;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; color: var(--ew-navy);
}
.ew-ov-head img { opacity: .5; }
.ew-ov-head:hover img { opacity: 1; }
.ew-ov-head--static { cursor: default; }
.ew-ov-meta { font-weight: 400; color: var(--ew-navy-60); margin-left: 4px; }
button.ew-ov-head:focus-visible, .ew-attn-chip:focus-visible, .ew-ov-link:focus-visible,
.ew-status:focus-visible, .ew-drill-row:focus-visible,
.ew-drill-back:focus-visible { outline: 2px solid var(--ew-primary); outline-offset: 2px; }

.ew-attn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ew-attn-chip {
  --c: var(--ew-navy);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  border: 1.5px solid transparent; background: var(--ew-surface-soft);
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; color: var(--ew-navy);
  cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease;
}
.ew-attn-chip:hover { background: #ECECF3; }
.ew-attn-chip--delayed { --c: #E5484D; }
.ew-attn-chip--lowDrive { --c: #F5A201; }
.ew-attn-chip--lowFuel { --c: #7A5AF8; }
.ew-attn-n { font-weight: 800; color: var(--c); }
/* Active = inverse: solid category fill, white content. --c-solid is a darker tone
   where needed so white text stays legible (amber in particular). */
.ew-attn-chip--delayed { --c-solid: #DC3E42; }
.ew-attn-chip--lowDrive { --c-solid: #B86E00; }
.ew-attn-chip--lowFuel { --c-solid: #6E4FF0; }
.ew-attn-chip.is-selected, .ew-attn-chip.is-selected:hover { background: var(--c-solid, var(--c)); border-color: var(--c-solid, var(--c)); color: #fff; }
.ew-attn-chip.is-selected .ew-attn-n { color: #fff; }
.ew-attn-chip.is-selected img { filter: brightness(0) invert(1); }
.ew-ov-ok { margin: 0; font-size: 13px; color: var(--ew-navy-60); }

/* Drive time left: the drivers running out first (top 3), sorted ascending */
.ew-ov-row { display: flex; align-items: center; justify-content: space-between; }
.ew-ov-link { padding: 0; border: none; background: none; cursor: pointer;
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; color: var(--ew-primary); }
.ew-ov-link:hover { text-decoration: underline; }
.ew-ov-link.is-selected { text-decoration: underline; }
/* Attention rows: plate · driver / why it matters, reason headline right */
.ew-ar-all { height: 18px; display: flex; align-items: center; margin-top: -4px; }
/* Fixed height for 5 rows so filtering by a chip (fewer rows) never shifts the layout */
.ew-ar-rows { display: flex; flex-direction: column; margin: 0 -8px; min-height: 239px; }
.ew-ar-row { display: flex; align-items: center; gap: var(--space-2-5); width: 100%;
  padding: 5px 8px; border: none; border-bottom: 1px solid rgba(0, 0, 75, 0.07); border-radius: 0; background: none; cursor: pointer;
  font-family: Inter, sans-serif; font-size: 13px; line-height: 18px; color: var(--ew-navy); text-align: left; }
.ew-ar-row:last-child { border-bottom: none; }
.ew-ar-row:hover { background: rgba(0, 0, 75, 0.02); }
.ew-ar-row:focus-visible { outline: 2px solid var(--ew-primary); outline-offset: -2px; }
.ew-ar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ew-ar-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ew-ar-name, .ew-ar-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-ar-name b { font-weight: 600; }
.ew-ar-sub { font-size: 12px; color: var(--ew-navy-60); }
.ew-ar-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
/* Slimmer tag inside list rows so 5 rows keep their height */
.ew-ar-head .ew-tag, .ew-drill-metric .ew-tag { padding: 1px 7px; }
/* Inline next action on a row (e.g. low fuel → Find station on the full Live map) */
.ew-act { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600;
  color: var(--ew-primary); text-decoration: none; white-space: nowrap; }
.ew-act:hover { text-decoration: underline; }
.ew-act:focus-visible { outline: 2px solid var(--ew-primary); outline-offset: 2px; border-radius: 3px; }
.ew-ar-head { flex: none; display: flex; align-items: center; height: 18px; font-weight: 700; color: var(--c); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ew-ar-more { margin-left: 4px; padding: 0 5px; border-radius: 8px; background: rgba(0,0,75,.06);
  font-size: 11px; font-weight: 600; color: var(--ew-navy-60); }

/* Compact status row — the production tiles, demoted to secondary context */
.ew-status-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; }
.ew-status {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 8px; border: 1.5px solid transparent; border-radius: var(--ew-r-tile);
  background: var(--ew-surface-soft); cursor: pointer; text-align: left;
  font-family: Inter, sans-serif; color: var(--ew-navy); transition: background .12s ease;
}
.ew-status:hover { background: #ECECF3; }
.ew-status .ew-kpi-icon { width: 28px; height: 28px; }
.ew-status-n { display: block; font-size: 16px; font-weight: 800; line-height: 1.1; }
.ew-status-l { display: block; font-size: 11.5px; color: #6B6B8A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-status[data-fleet-list="status:move"] { --c: var(--ew-active-blue); }
.ew-status[data-fleet-list="status:idle"] { --c: var(--ew-idle-amber); }
.ew-status[data-fleet-list="status:stop"] { --c: var(--ew-stopped-grey); }
.ew-status[data-fleet-list="status:off"] { --c: var(--ew-offline-grey); }
.ew-status.is-selected { background: #fff; border-color: var(--c); }
.ew-ov-foot { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; }

/* Drill-down list (Count → List). Covers the Overview pane. */
.ew-drill { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.ew-drill[hidden] { display: none; }
.ew-drill-head { display: flex; align-items: center; gap: 6px; padding-bottom: var(--space-2); border-bottom: 1px solid rgba(0, 0, 75, 0.08); }
.ew-drill-back {
  width: 28px; height: 28px; margin-left: -6px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: none; cursor: pointer;
}
.ew-drill-back img { transform: rotate(180deg); }
.ew-drill-back:hover { background: var(--ew-surface-soft); }
.ew-drill-title { font-size: 14px; font-weight: 700; color: var(--ew-navy); }
.ew-drill-count { font-size: 13px; color: var(--ew-navy-60); }
.ew-drill-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -8px; }
.ew-drill-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px;
  border: none; border-bottom: 1px solid rgba(0, 0, 75, 0.07); border-radius: 0; background: none; cursor: pointer; text-align: left;
  font-family: Inter, sans-serif; color: var(--ew-navy);
}
.ew-drill-row:last-child { border-bottom: none; }
.ew-drill-row:hover { background: rgba(0, 0, 75, 0.02); }
.ew-drill-row.is-stale { opacity: .55; }
.ew-drill-ico { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.ew-drill-main { flex: 1 1 auto; min-width: 0; }
.ew-drill-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-drill-sub { font-size: 11px; color: rgba(0, 0, 75, 0.55); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-drill-metric { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; font-weight: 700; line-height: 16px; }
.ew-drill-metric .ew-act { line-height: 16px; }
.ew-drill-flags { display: flex; gap: 2px; }
/* Same used/left bar as the Work time page (office.eurowag.com/worktime/summary) */
.ew-worktime { width: 64px; height: 6px; border-radius: 3px; background: #E4E4EE; overflow: hidden; display: flex; justify-content: flex-end; }
.ew-worktime > span { display: block; height: 100%; border-radius: 3px; background: #2AABEB; }
.ew-drill-foot { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-3); }

/* Small button — dashboard widgets use compact, auto-width CTAs sized to their
   label. Full-width "bar" buttons are reserved for forms/modals, not widgets. */
.ew-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  align-self: flex-start; /* never stretch inside the card's flex column */
  width: auto;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.ew-btn--primary { background: var(--ew-primary); color: #fff; }
.ew-btn--primary:hover { background: #0058c4; }
/* Text-only variant for secondary widget actions */
.ew-btn--text { background: transparent; color: var(--ew-primary); padding-left: 0; padding-right: 0; }

/* Pins the CTA to the bottom of a widget card, left-aligned */
.ew-btn--pin { margin-top: auto; }
/* CTA floating over the map view. Hidden while a vehicle detail card is open —
   that card is anchored bottom:14px/left:14px and would sit right on top of it. */
.ew-btn--overlay {
  position: absolute;
  /* Match the pinned CTA exactly (card content inset) so the button does not
     shift when switching Overview <-> Map. */
  left: var(--space-5);
  bottom: calc(var(--space-4) - 1px);
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 75, 0.28);
}
.ew-btn--overlay.is-hidden { display: none; }

/* Overrides for buttons that live in the original captured markup.
   ID-scoped so they beat the capture's own inline <style> rules, which are
   parsed after this stylesheet. */
#costCalculator .cc-calc-btn {
  width: auto;
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 8px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  border-radius: 4px;
}
#marketingNews [data-test="cms-news-widget-all-news-btn"] {
  min-width: 0;
  height: 28px;
  padding: 5px 8px;
  background: var(--ew-primary);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  border-radius: 4px;
  text-transform: none;
}
#marketingNews [data-test="cms-news-widget-all-news-btn"]:hover { background: #0058c4; }

/* ── Latest news: fit 430px card so the "All news" CTA is never clipped ─────── */
/* The capture ships 6 news rows (52 + 342 + 60 = 454px) inside a 428px card,
   which pushed the CTA below the overflow:hidden edge. Show 5 rows and pin the
   footer to the bottom instead of clipping a row in half. */
#marketingNews .MuiTableBody-root tr:nth-child(n + 6) { display: none; }
#marketingNews .MuiTableBody-root tr:nth-child(5) td { border-bottom: 0; }
/* The captured cells carry `padding: 0 10px`, which indented every headline 10px
   past the widget title and the "All news" CTA. Drop the outer padding only, so
   the gap between the headline and date columns is preserved. */
#marketingNews table td:first-child,
#marketingNews table th:first-child { padding-left: 0; }
#marketingNews table td:last-child,
#marketingNews table th:last-child { padding-right: 0; }
#marketingNews .mui-style-1lrvkhh { margin-top: auto; }

/* ── Refueling widget ───────────────────────────────────────────────────────── */
/* Neutral, auto-width variant of the fixed 78px status chip (used for "Pro prices"). */
.ew-chip--auto { width: auto; }
.ew-chip--neutral { background: rgba(0, 0, 75, 0.06); }

.ew-fuel-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.ew-fuel-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex: none;
  height: 42px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 75, 0.07);
  text-decoration: none;
  color: inherit;
}
.ew-fuel-row:last-child { border-bottom: none; }
.ew-fuel-row:hover { background: rgba(0, 0, 75, 0.02); }
.ew-fuel-ico { flex: none; display: inline-flex; }
.ew-fuel-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--ew-navy-87);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-fuel-name b { font-weight: 600; }
.ew-fuel-age, .ew-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
/* Shared status tag (Fleet status rows, drill list, map card): tint of the reason colour, darker ink for contrast */
.ew-tag { display: inline-block; color: var(--t); background: color-mix(in srgb, var(--tb) 14%, transparent); font-variant-numeric: tabular-nums; }
.ew-fuel-age--today { background: rgba(255, 171, 0, 0.14); color: #B25E00; }
.ew-fuel-age--old { background: rgba(255, 171, 0, 0.24); color: #96501F; }
.ew-fuel-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  flex: none;
  /* Fixed column so prices (and therefore the freshness chips) line up down the
     list instead of shifting with each chip's width. */
  min-width: 86px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--ew-navy);
  white-space: nowrap;
}
.ew-fuel-price span { margin-left: 3px; font-size: 12px; font-weight: 400; color: var(--ew-navy-60); }
.ew-fuel-chev { flex: none; display: inline-flex; color: rgba(0, 0, 75, 0.32); }

/* Tax refund status icons — full-color 24px glyphs, no tinted bubble. */
.ew-tr-ico { flex: 0 0 auto; }

/* ---- Tax refund widget ------------------------------------------------- */
#taxRefundWidget { font-family: Inter, sans-serif; }
.ew-tr-hero { margin-bottom: var(--space-5); }
.ew-tr-hero-line { display: flex; align-items: baseline; gap: var(--space-1); }
.ew-tr-big { font-family: Gilroy, Inter, sans-serif; font-size: 32px; font-weight: 600;
  line-height: 1; letter-spacing: -.5px; color: #00004B; }
.ew-tr-bigcur { font-size: 14px; color: rgba(0,0,75,.5); }
.ew-tr-sub { font-size: 12px; color: rgba(0,0,75,.5); margin-top: 6px; }

.ew-tr-rows { display: flex; flex-direction: column; gap: 6px; }
.ew-tr-row { display: flex; align-items: center; gap: var(--space-2-5); }
.ew-tr-label { flex: 1 1 auto; font-size: 14px; line-height: 20px; color: #00004B; }
.ew-tr-label span { color: rgba(0,0,75,.55); margin-left: 2px; }
.ew-tr-amt { font-size: 15px; line-height: 20px; font-weight: 600; color: #00004B; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ew-cur { font-size: 12px; font-weight: 400; color: rgba(0,0,75,.45); margin-left: var(--space-1); }

.ew-tr-div { height: 1px; background: rgba(0,0,75,.10); margin: var(--space-4) 0; }
.ew-tr-heading { font-size: 13px; font-weight: 600; color: rgba(0,0,75,.55); margin-bottom: var(--space-3); }

/* 100%-stacked share bar. The four country rows sum exactly to the hero total,
   so one bar shows both the ranking and each country's share of the whole. */
/* Literally the same construction as .ew-progress in Available balance: a rounded
   track with cumulative fills stacked on top, widest first. Each fill carries
   box-shadow: 0 0 0 3px #fff, which follows its border-radius — so the separator is a
   3px crescent hugging the cap and the next colour reads with a concave edge.
   A flex `gap` cannot do this: it gives a straight vertical slit. */
.ew-share { position: relative; }
.ew-share-bar { position: relative; height: 14px; flex: none; border-radius: 999px;
  margin-bottom: var(--space-2); overflow: visible; }
.ew-share-seg { position: absolute; top: 0; left: 0; height: 100%; background: var(--c);
  border-radius: 999px; box-shadow: 0 0 0 3px #fff; transition: background .12s ease; }
/* Transparent slices on top of the fills; each covers only its own visible band,
   so hover maps to the segment you actually see rather than the widest pill under
   the cursor. Extended vertically to make a 14px bar comfortable to hit. */
.ew-share-hit { position: absolute; top: -5px; height: calc(100% + 10px); cursor: pointer; }

/* Amounts are revealed on hover. Each fill carries its colour in --c and the muted
   state swaps in a flat token — the fills overlap, so anything semi-transparent
   would let the colour beneath bleed through. */
.ew-share.is-hover .ew-share-seg { background: var(--ew-cat-mute); }
.ew-share.is-hover .ew-share-seg.is-on { background: var(--c); }

.ew-tr-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2) var(--space-3); }
.ew-tr-litem { min-width: 0; cursor: pointer; }
.ew-tr-lhead { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 1px; }
/* The flag doubles as the legend swatch: its outline ring carries the series color,
   so there is no second marker to read. */
.ew-tr-lflag { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.ew-tr-lname { font-size: 13px; color: var(--ew-navy-60); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ew-tr-lamt { padding-left: 28px; font-size: 13px; font-weight: 600; color: var(--ew-navy);
  white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  opacity: 0; transition: opacity .12s ease; }
/* Kept in flow while hidden so revealing it never shifts the layout. */
.ew-tr-litem.is-on .ew-tr-lamt { opacity: 1; }
.ew-tr-lname { transition: color .12s ease; }
.ew-tr-litem.is-on .ew-tr-lname { color: var(--ew-navy); }

/* Concept 6: Top countries without the share bar — two columns of flag · name · amount
   (DOM order is row-wise; display:contents lets names/amounts align across rows). */
.ew-tr-countries { display: grid; grid-template-columns: 20px auto 1fr 20px auto 1fr;
  align-items: center; gap: var(--space-3) var(--space-2-5); }
.ew-tr-country { display: contents; }
.ew-tr-countries .ew-tr-lname { font-size: 14px; color: var(--ew-navy-60); margin-right: var(--space-3); }
.ew-tr-camt { font-size: 14px; font-weight: 600; color: var(--ew-navy); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.ew-tr-info { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-1);
  padding: var(--space-2-5) var(--space-3); background: rgba(0,103,230,.06); border-radius: 8px;
  font-size: 12px; line-height: 1.4; color: rgba(0,0,75,.6); }
.ew-tr-foot { margin-top: auto; padding-top: var(--space-2); display: flex; justify-content: flex-start; }

/* Concept 6: breathing room below the last card when the page is scrolled to the end.
   The container is a fixed-height flex column, so its content box shrank to fit and the cards
   overflowed it; keep children at natural height so the padding/spacer below scrolls into view. */
[data-test="appshell-page-container"][data-test] > .MuiBox-root + .MuiBox-root { flex-shrink: 0; height: auto; }
[data-test="appshell-page-container"]::after { content: ""; display: block; flex: none; height: 24px; }

/* Concept 6: the tracking "Live" badge sits left of the × (it used to hide under the tabs). */
.ew-card.is-map-view #ewLiveBadge { top: 17px !important; right: 72px !important; }

/* Concept 6: an active chip is a toggle filter; the others step back */
.ew-attn-chips:has(.is-selected) .ew-attn-chip:not(.is-selected) { opacity: .6; }
.ew-attn-chips:has(.is-selected) .ew-attn-chip:not(.is-selected):hover { opacity: 1; }

/* Concept 6: the map uses the Overview chip component; overlay surface + compact when inactive */
.ew-attn-chip--map { background: rgba(255,255,255,.92); backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(0,0,75,.18); }
.ew-attn-chip--map:hover { background: #fff; }
.ew-attn-chip--map:not(.is-selected) { padding-right: 9px; }
.ew-attn-chip--map:not(.is-selected) .ew-attn-l { display: none; }

/* Concept 6: Requires attention | Work time switch (hidden over the map, × only there) */
.ew-card.is-map-view #fsModeSeg { display: none; }
#fsModeSeg .ew-seg-btn:focus-visible { outline: 2px solid var(--ew-primary); outline-offset: 1px; }
/* Work time chips = drive-time buckets; a dot instead of an icon, same inverse active state */
.ew-chip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin: 0 2px 0 1px; }
.ew-attn-chip.is-selected .ew-chip-dot { background: #fff; }
.ew-attn-chip--d-out { --c: #E5484D; --c-solid: #DC3E42; }
.ew-attn-chip--d-low { --c: #F59E0B; --c-solid: #B86E00; }
.ew-attn-chip--d-half { --c: #2AABEB; --c-solid: #0B7FC0; }
.ew-attn-chip--d-full { --c: #11884E; --c-solid: #11884E; }
.ew-ar-all { justify-content: space-between; gap: 8px; }
.ew-ar-note { font-size: 12px; color: var(--ew-navy-60); white-space: nowrap; margin-left: auto; }
.ew-attn-chips[hidden] { display: none; }
/* The switch makes the header 36px tall: win the 12px back so the foot keeps the card's bottom padding */
#fleetStatusWidget .ew-card-header { margin-bottom: var(--space-2); }
#fleetStatusWidget .ew-ov { gap: 14px; }
/* Map Work time chips keep their label (bucket name is the meaning) */
.ew-attn-chip--map.ew-attn-chip--map-lbl:not(.is-selected) .ew-attn-l { display: inline; }
.ew-attn-chip--map-lbl { gap: 4px; padding-left: 9px; }
/* No room for the dot over the map: the coloured count carries the bucket colour */
.ew-attn-chip--map-lbl .ew-chip-dot { display: none; }
.ew-attn-chip--map-lbl, .ew-attn-chip--map.ew-attn-chip--map-lbl:not(.is-selected) { padding: 5px 9px; }
/* Concept 6: no vehicle-count / list toggle on the map – the chips are the filter, the list lives in the widget ("Show all") */
#fleetStatusWidget [data-test="fleet-toggle"] { display: none !important; }