/* HaulBase — Fleet page (.fl-* prefix, design-system rev)
 *
 * Source: Haulbase_Claude_Design/assets/design/Fleet.html
 *
 * Loaded AFTER assets/fleet.css so the new design's .fl-* rules
 * override the older two-table styling on conflicting class names.
 * Legacy classes (.fl-add-card, .fl-input, .fl-service-card, etc.)
 * still resolve from the older fleet.css and are used by the existing
 * add-form helper, which wasn't redesigned in this pass.
 */

/* status pills — extend the global .pill set with active/shop/retired */
.pill-active {
  color: var(--status-complete-fg); background: var(--status-complete-bg);
  border-color: var(--status-complete-bd);
}
.pill-shop {
  color: var(--status-issue-fg); background: var(--status-issue-bg);
  border-color: var(--status-issue-bd);
}
.pill-retired {
  color: var(--fg-4); background: var(--bg-input); border-color: var(--border-2);
}
.pill-retired::before { background: var(--fg-4); }

/* ===== PAGE ===== */
.fl-page { padding: 24px 28px 64px; }

.fl-page-head {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 22px;
}
.fl-page-head-title { flex: 0 0 auto; }
/* Util card lives between the title and the primary action; takes
 * the remaining horizontal room so the card stretches comfortably
 * without crowding the title or the "+ Add truck" button. Capped
 * by max-width so on ultra-wide screens it doesn't drift away from
 * the actions. */
.fl-page-head-util {
  flex: 1 1 auto;
  max-width: 720px;
  margin-left: auto;
}
.fl-page-head-util .fl-rail-card {
  /* Tighten the in-header card vs the old rail variant — header
   * row reads better at ~118px height than the original 4-row card. */
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  width: 100%;
}
.fl-page-head-util .fl-rail-card .fl-card-head {
  padding: 8px 14px;
}
.fl-page-head-util .fl-util { padding: 12px 14px 14px; }
.fl-page-head-util .fl-util-big .pct { font-size: 24px; }
.fl-page-head-util .fl-util-bar { height: 10px; }
.fl-page-head-util .fl-util-legend { gap: 14px; }
.fl-page-head h1 {
  margin: 0; font: 700 28px/1.05 var(--font-display);
  letter-spacing: -0.015em; color: var(--fg-1);
}
.fl-page-head .sub {
  color: var(--fg-3); font-size: 13.5px; margin-top: 6px;
}
.fl-page-head .sub b { color: var(--fg-2); font-weight: 600; }

.fl-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.fl-btn {
  height: 34px; padding: 0 13px; border-radius: var(--r-md);
  background: var(--bg-card); border: 1px solid var(--border-2);
  color: var(--fg-2);
  font: 600 12.5px/1 var(--font-display);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; text-decoration: none;
}
.fl-btn:hover { color: var(--fg-1); border-color: var(--border-3); }
.fl-btn svg { width: 14px; height: 14px; }
.fl-btn.primary {
  background: var(--brand-cta); color: var(--brand-cta-fg);
  border-color: var(--brand-cta);
}
.fl-btn.primary:hover {
  background: var(--brand-cta-hover); border-color: var(--brand-cta-hover);
}

/* search + chips bar */
.fl-bar {
  display: grid; grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 14px; align-items: center; margin-bottom: 14px;
}
.fl-search { position: relative; display: flex; align-items: center; }
.fl-search svg.glass {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--fg-4);
}
.fl-search input {
  width: 100%; height: 36px; padding: 0 12px 0 36px;
  background: var(--bg-card); border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--fg-1); font: 400 13.5px/1 var(--font-body); outline: none;
}
.fl-search input::placeholder { color: var(--fg-4); }
.fl-search input:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 18%, transparent);
}

.fl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-chip {
  height: 30px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--bg-input); border: 1px solid var(--border-2);
  color: var(--fg-3);
  font: 500 12px/1 var(--font-display);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; white-space: nowrap;
}
.fl-chip:hover { color: var(--fg-1); border-color: var(--border-3); }
.fl-chip.on {
  background: var(--link-active-bg); border-color: var(--link-active-bd);
  color: var(--link-active-fg);
}
.fl-chip .count {
  font: 600 10px/1 var(--font-mono);
  padding: 2px 5px; border-radius: 3px;
  background: var(--bg-card); color: var(--fg-3);
}
.fl-chip.on .count { background: var(--accent-500); color: #0f172a; }
.fl-chip-divider {
  width: 1px; height: 20px; background: var(--border-2);
  margin: 0 6px; align-self: center;
}

/* body grid (legacy; the page now uses .fl-stack — kept for any
 * downstream surfaces that still reference it) */
.fl-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px; align-items: start;
}

/* Body stack — single full-width column. The trucks table sits at the
 * top, in-shop card below. Replaces the previous .fl-grid two-column
 * layout that pinned a 320-px right rail and squeezed the table. */
.fl-stack {
  display: flex; flex-direction: column; gap: 18px; align-items: stretch;
}

/* Top utilization strip — full-width horizontal card. Three regions:
 *   .big    — large pct + "X of Y trucks assigned" subtitle
 *   .bar    — segmented bar (out / idle / shop)
 *   .legend — three labels + counts on the right
 * Card-styled to match .fl-card so the page reads as a coherent stack. */
.fl-util-strip {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  gap: 28px; align-items: center;
  padding: 14px 22px;
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.fl-util-strip .big {
  display: flex; flex-direction: column; gap: 2px;
}
.fl-util-strip .big .pct {
  font: 700 28px/1 var(--font-display); color: var(--accent-300);
  letter-spacing: -0.01em;
}
.fl-util-strip .big .of {
  font: 500 12px/1.2 var(--font-body); color: var(--fg-3);
}
.fl-util-strip .bar {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--bg-input); border: 1px solid var(--border-1);
}
.fl-util-strip .bar .seg { height: 100%; }
.fl-util-strip .bar .out  { background: var(--status-complete-fg); }
.fl-util-strip .bar .idle { background: var(--accent-400); }
.fl-util-strip .bar .shop { background: var(--status-issue-fg); }
.fl-util-strip .legend {
  display: flex; gap: 20px; align-items: center;
}
.fl-util-strip .legend .li {
  display: flex; align-items: center; gap: 8px;
}
.fl-util-strip .legend .li .k {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-3); font: 500 11.5px/1 var(--font-body);
}
.fl-util-strip .legend .li .k::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  display: inline-block;
}
.fl-util-strip .legend .li.out  .k::before { background: var(--status-complete-fg); }
.fl-util-strip .legend .li.idle .k::before { background: var(--accent-400); }
.fl-util-strip .legend .li.shop .k::before { background: var(--status-issue-fg); }
.fl-util-strip .legend .li .v {
  font: 600 13px/1 var(--font-mono); color: var(--fg-1);
}
@media (max-width: 900px) {
  .fl-util-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .fl-util-strip .legend { flex-wrap: wrap; gap: 12px; }
}

.fl-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--r-lg); overflow: hidden;
}
.fl-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-bottom: 1px solid var(--border-1);
  background: var(--bg-card-2);
}
.fl-card-head h3 {
  margin: 0; font: 600 10.5px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .14em; color: var(--fg-3);
}
.fl-card-head .spacer { flex: 1; }
.fl-card-head .meta {
  font: 500 11.5px/1 var(--font-mono); color: var(--fg-4);
}

/* table — overrides the older fleet.css table styling. Selectors
 * apply under both .fl-grid (legacy two-column) and .fl-stack (current
 * full-width layout) so the table renders identically regardless of
 * which container wraps it. */
.fl-grid .fl-table,
.fl-stack .fl-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-card);
}
.fl-grid .fl-table thead th,
.fl-stack .fl-table thead th {
  text-align: left; padding: 10px 14px;
  background: var(--bg-card-2); border-bottom: 1px solid var(--border-1);
  font: 600 9.5px/1 var(--font-body); text-transform: uppercase;
  letter-spacing: .14em; color: var(--fg-4); white-space: nowrap;
}
.fl-grid .fl-table thead th.act,
.fl-stack .fl-table thead th.act { width: 60px; }
.fl-grid .fl-table tbody td,
.fl-stack .fl-table tbody td {
  padding: 12px 14px; vertical-align: middle;
  font: 400 13px/1.4 var(--font-body); color: var(--fg-2);
  background: transparent;
}
.fl-grid .fl-table tbody tr + tr td,
.fl-stack .fl-table tbody tr + tr td { border-top: 1px solid var(--border-1); }
.fl-grid .fl-table tbody tr:hover td,
.fl-stack .fl-table tbody tr:hover td { background: var(--bg-input); }
.fl-grid .fl-table tbody tr:hover .fl-tname b,
.fl-stack .fl-table tbody tr:hover .fl-tname b { color: var(--accent-300); }
.fl-grid .fl-table tbody tr.shop td,
.fl-stack .fl-table tbody tr.shop td { background: rgba(127, 29, 29, 0.06); }
.fl-grid .fl-table tbody tr.shop:hover td,
.fl-stack .fl-table tbody tr.shop:hover td { background: rgba(127, 29, 29, 0.12); }

/* truck cell */
.fl-tcell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fl-ticon {
  width: 44px; height: 32px; border-radius: 4px;
  background: var(--bg-input); border: 1px solid var(--border-2);
  display: inline-grid; place-items: center;
  flex-shrink: 0; color: var(--fg-3);
}
.fl-ticon svg { width: 22px; height: 22px; }
.fl-tname { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fl-tname b {
  font: 700 14px/1.2 var(--font-display); color: var(--fg-1);
  letter-spacing: -0.005em;
}
.fl-tname .id {
  font: 500 11px/1 var(--font-mono); color: var(--fg-4); letter-spacing: .04em;
}

/* mono pills (plate / DOT) */
.fl-mono {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3.5px 7px; border-radius: 3px;
  background: var(--bg-input); border: 1px solid var(--border-2);
  font: 600 11.5px/1 var(--font-mono); color: var(--fg-1);
  letter-spacing: .04em;
}
.fl-mono .pre { color: var(--fg-4); font-weight: 500; }
.fl-mono.empty { color: var(--fg-4); font-style: italic; }

/* "—" placeholder for cells where the field doesn't apply (e.g.
 * compaction ratio on a roll-off truck). Reads as inert so the
 * dispatcher doesn't try to click + edit. */
.fl-mono.fl-cell-na {
  background: transparent;
  border-color: transparent;
  color: var(--fg-4);
  cursor: default;
}

/* type tags */
.fl-types { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fl-type {
  font: 600 10px/1 var(--font-body); text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 7px; border-radius: 3px;
  background: var(--bg-input); border: 1px solid var(--border-2);
  color: var(--fg-2);
}
.fl-type.rolloff {
  color: var(--accent-300);
  border-color: rgba(245, 158, 11, 0.30);
  background: rgba(245, 158, 11, 0.08);
}
.fl-type.dumpster {
  color: var(--status-enroute-fg);
  border-color: var(--status-enroute-bd);
  background: rgba(30, 58, 138, 0.20);
}
.fl-type.scrap {
  color: var(--status-invoiced-fg);
  border-color: var(--status-invoiced-bd);
  background: rgba(76, 29, 149, 0.20);
}
.fl-type.toilets {
  color: var(--status-complete-fg);
  border-color: var(--status-complete-bd);
  background: rgba(6, 78, 59, 0.20);
}

/* Inline service-type dropdown trigger — compact native-style select
   that lives in each truck row's cell. Click → Radix popover opens
   with five options ("—", Roll-off, Dumpster, Scrap, Toilets). Picking
   one fires the FleetState.set_truck_service_type event and the row
   re-renders with the new value. Sized to read as a single-line cell
   (not the multi-row chip cluster the prior iteration showed). */
.fl-type-select {
  min-width: 130px;
  height: 28px;
  padding: 0 8px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .04em;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  border-radius: 4px;
}
.fl-type-select:hover { border-color: var(--border-3); color: var(--fg-1); }

/* Homebase dropdown trigger — wide enough that the longest support-
   location name HaulBase ships ("Greeley Water Pollution Control
   Facility (Wastewater Disposal)") fits on two lines without
   feeling cramped. The button respects Radix's internal layout but
   wraps the text inside when needed. */
.fl-homebase-select {
  min-width: 240px;
  max-width: 320px;
  min-height: 30px;
  padding: 4px 8px;
  font: 500 11.5px/1.3 var(--font-body);
  letter-spacing: .02em;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  border-radius: 4px;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  /* Allow vertical room for two lines of the wider 11.5px font.
     Radix's <span> child inherits these so the trigger label
     wraps with the same line-height. */
  line-height: 1.3;
  align-items: center;
}
.fl-homebase-select:hover { border-color: var(--border-3); color: var(--fg-1); }
/* Radix wraps the trigger label in a span — let it wrap too. */
.fl-homebase-select > span {
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

/* Homebase filter dropdown in the filter strip — same compact look
   as the row picker but a touch wider so longer location names fit. */
.fl-homebase-filter {
  min-width: 180px;
  height: 30px;
  padding: 0 10px;
  font: 600 12px/1 var(--font-body);
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  border-radius: 4px;
}
.fl-homebase-filter:hover { border-color: var(--border-3); color: var(--fg-1); }

/* Capacity numeric input (inline + edit form). Compact spreadsheet-
   style cell — fits a small whole number and aligns right. */
.fl-cap-input {
  width: 56px;
  height: 28px;
  padding: 0 6px;
  font: 600 12px/1 var(--font-mono);
  text-align: right;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  color: var(--fg-1);
  border-radius: 4px;
}
.fl-cap-input:focus { border-color: var(--accent-500); outline: none; }

/* Inline input + static suffix (e.g. "12 yds", "3.0:1"). The input
 * keeps its compact spreadsheet styling; the suffix sits flush to its
 * right in muted mono so it reads as a unit hint, not an editable
 * value. Used for Tank Capacity + Compaction columns on the Fleet
 * table. */
.fl-cap-row {
  display: inline-flex; align-items: center; gap: 4px;
}
.fl-cap-row .suf {
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-3);
  letter-spacing: .03em;
  user-select: none;
}

/* Load summary button — looks like a clickable mono pill. Click to
   open the editor popover. */
.fl-load-btn {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.02em;
  padding: 4px 8px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.fl-load-btn:hover {
  border-color: var(--border-3);
  color: var(--fg-1);
  background: var(--bg-input);
}

.fl-load-edit-lbl {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
  min-width: 110px;
}

/* assigned driver */
.fl-driver { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fl-driver .av {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 700 10px/1 var(--font-display); color: #0f172a;
  flex-shrink: 0;
}
.fl-driver .av.c1 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.fl-driver .av.c2 { background: linear-gradient(135deg, #6ee7b7, #10b981); color: #064e3b; }
.fl-driver .av.c3 { background: linear-gradient(135deg, #93c5fd, #3b82f6); color: #1e3a8a; }
.fl-driver .av.c4 { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); color: #4c1d95; }
.fl-driver .av.c5 { background: linear-gradient(135deg, #fca5a5, #ef4444); color: #7f1d1d; }
.fl-driver a {
  color: var(--fg-1); text-decoration: none; font-weight: 600;
  border-bottom: 1px dashed var(--border-2); font-size: 12.5px;
}
.fl-driver a:hover { color: var(--accent-300); border-color: var(--accent-400); }
.fl-unassigned {
  font: 600 11px/1 var(--font-body); text-transform: uppercase;
  letter-spacing: .12em;
  padding: 4px 7px; border-radius: 3px;
  background: rgba(245, 158, 11, 0.08); color: var(--accent-300);
  border: 1px dashed rgba(245, 158, 11, 0.40);
}
.fl-unassigned.muted {
  background: var(--bg-input); color: var(--fg-3);
  border-color: var(--border-2); border-style: solid;
}

/* today status */
.fl-today { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-today .l1 {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.fl-today .stops {
  font: 500 11.5px/1 var(--font-mono); color: var(--fg-3);
}
.fl-today .stops b { color: var(--fg-1); font-weight: 600; }
.fl-today .stops.danger { color: var(--status-issue-fg); }
.fl-today .empty { color: var(--fg-4); font-style: italic; }
.fl-loc {
  font: 500 11px/1 var(--font-mono); color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 4px;
}
.fl-loc svg { width: 10px; height: 10px; color: var(--accent-400); }
.fl-loc .stale { color: var(--fg-4); }

/* row action — design uses .fl-icon-btn (overrides any older one).
 * Selectors mirrored across .fl-grid (legacy) + .fl-stack (current). */
.fl-grid .fl-icon-btn,
.fl-stack .fl-icon-btn {
  width: 30px; height: 30px; padding: 0;
  border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent;
  color: var(--fg-3);
  display: grid; place-items: center; cursor: pointer;
}
.fl-grid .fl-icon-btn:hover,
.fl-stack .fl-icon-btn:hover {
  background: var(--bg-card); border-color: var(--border-2); color: var(--fg-1);
}
.fl-grid .fl-icon-btn.danger:hover,
.fl-stack .fl-icon-btn.danger:hover {
  color: var(--status-issue-fg); border-color: var(--status-issue-bd);
  background: var(--status-issue-bg);
}
.fl-grid .fl-icon-btn svg,
.fl-stack .fl-icon-btn svg { width: 14px; height: 14px; }
.fl-row-acts { display: flex; gap: 4px; justify-content: flex-end; }

.fl-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; border-top: 1px solid var(--border-1);
  background: var(--bg-card-2);
  color: var(--fg-3); font: 500 12px/1 var(--font-body);
}
.fl-foot b { color: var(--fg-1); font-weight: 600; }

/* ===== RIGHT RAIL ===== */
.fl-rail-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--r-lg); overflow: hidden;
}
.fl-rail-card + .fl-rail-card { margin-top: 18px; }

/* utilization */
.fl-util { padding: 18px; }
.fl-util-big {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px;
}
.fl-util-big .pct {
  font: 800 40px/1 var(--font-display); color: var(--fg-1);
  letter-spacing: -0.02em;
}
.fl-util-big .of {
  font: 500 13px/1 var(--font-body); color: var(--fg-3);
}
.fl-util-bar {
  display: flex; height: 12px; border-radius: var(--r-pill);
  background: var(--bg-input); border: 1px solid var(--border-2);
  overflow: hidden;
}
.fl-util-bar .seg { height: 100%; }
.fl-util-bar .out { background: var(--status-complete-fg); }
.fl-util-bar .idle { background: var(--accent-400); }
.fl-util-bar .shop { background: var(--status-issue-fg); }
.fl-util-legend {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px;
}
.fl-util-legend .li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: var(--r-md);
  background: var(--bg-input); border: 1px solid var(--border-2);
}
.fl-util-legend .li .k {
  font: 600 9px/1 var(--font-body); text-transform: uppercase;
  letter-spacing: .14em; color: var(--fg-4);
  display: flex; align-items: center; gap: 5px;
}
.fl-util-legend .li .k::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
}
.fl-util-legend .li.out .k::before { background: var(--status-complete-fg); }
.fl-util-legend .li.idle .k::before { background: var(--accent-400); }
.fl-util-legend .li.shop .k::before { background: var(--status-issue-fg); }
.fl-util-legend .li .v {
  font: 700 16px/1 var(--font-display); color: var(--fg-1);
}

/* in-shop service queue */
.fl-svc { padding: 8px 8px 12px; }
.fl-svc-empty {
  padding: 18px 14px; text-align: center;
  font: 500 12px/1.4 var(--font-body); color: var(--fg-4);
}
.fl-svc-row {
  display: grid; grid-template-columns: 38px 1fr auto;
  gap: 10px; padding: 10px; border-radius: var(--r-md);
  align-items: center;
}
.fl-svc-row + .fl-svc-row { border-top: 1px dashed var(--border-1); }
.fl-svc-row .mono {
  width: 38px; height: 26px; border-radius: 4px;
  background: var(--bg-input); border: 1px solid var(--border-2);
  display: inline-grid; place-items: center;
  font: 600 11px/1 var(--font-mono); color: var(--fg-1);
}
.fl-svc-row .body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.fl-svc-row .body .desc {
  font: 500 12.5px/1.2 var(--font-body); color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-svc-row .body .sub {
  font: 500 11px/1 var(--font-mono); color: var(--fg-3);
}
.fl-svc-row .age {
  font: 600 11px/1 var(--font-body); color: var(--fg-3);
  padding: 4px 7px; border-radius: 3px;
  background: var(--bg-input); border: 1px solid var(--border-2);
  white-space: nowrap;
}
.fl-svc-row.warn .age {
  color: var(--accent-300);
  border-color: rgba(245, 158, 11, 0.30);
  background: rgba(245, 158, 11, 0.08);
}
.fl-svc-row.bad .age {
  color: var(--status-issue-fg);
  border-color: var(--status-issue-bd);
  background: var(--status-issue-bg);
}

/* mini stats */
.fl-mini { padding: 14px 16px 16px; }
.fl-mini-stat {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 0;
}
.fl-mini-stat + .fl-mini-stat { border-top: 1px dashed var(--border-1); }
.fl-mini-stat .k {
  font: 500 12.5px/1 var(--font-body); color: var(--fg-3);
}
.fl-mini-stat .v {
  font: 600 13px/1 var(--font-mono); color: var(--fg-1);
}
.fl-mini-stat .v .sub {
  color: var(--fg-4); font-weight: 500; margin-left: 5px;
}

/* add-form disclosure card — wraps the existing _add_form helper so
 * the form sits inside a token-styled card without disturbing its
 * inner Tailwind grid. */
.fl-add-disclosure {
  margin-bottom: 18px;
}