defaults to block) -- forced
`inline` here so its "Home"/sep/current children flow as one
continuous run of inline content instead of each getting their own
box, which is what lets .topbar-breadcrumb's own
overflow:hidden/text-overflow:ellipsis (needed in the narrow
769-1100px tablet range -- see .topbar-brand's own comment below)
produce a real "…" glyph instead of a hard clip; the sep/current
spans get their own visual spacing from their own margin (see
.crumb-sep), not from a flex gap. */
.topbar-breadcrumb .breadcrumb { display: inline; }
.topbar-breadcrumb .crumb-sep { margin: 0 6px; }
.topbar-breadcrumb a { color: var(--muted); }
.topbar-breadcrumb a:hover { color: var(--ink); }
.topbar-breadcrumb .crumb-sep { opacity: .5; }
.topbar-breadcrumb .crumb-current { color: var(--ink); font-weight: 700; }
@media (min-width: 769px) {
/* .topbar-brand's base rule is `justify-self: start` (fine when its
only content was the near-zero-width mobile button) -- "start"
means the grid item sizes to fit its own content instead of
filling its 1fr track, so once a real breadcrumb lives here it
rendered at its full intrinsic width and visually overlapped the
centered search box next to it instead of being constrained by the
track and truncating. `stretch` (the grid default, just re-stated
since the base rule overrides it) makes it actually fill the track,
so .topbar-breadcrumb's own overflow:hidden/ellipsis has a real
width to truncate against. */
.topbar-brand { justify-self: stretch; min-width: 0; }
.topbar.hero-bg {
/* A visible border instead of relying on the (now uniform, not
gradient) overlay to imply where the topbar's controls end and
the hero's title begins -- direct feedback: "que se usen
divisiones de borde en el header y no un overlay opaco." Light,
low-opacity white reads as a division on the photo the same way
--border reads as a division on the site's normal white cards. */
border-bottom: 1px solid rgba(255,255,255,.25);
}
.topbar.park-hero-bg {
background-image: linear-gradient(rgba(10,12,16,.4), rgba(10,12,16,.4)), url('../img/park-hero.avif');
/* 100% auto + 42% -- see .dashboard-hero.hero-park's own comment for
the full math; these two values are the solved pair that makes
this element's bottom edge and the hero's top edge show the same
row of the source image, AT THE HERO HEIGHT THEY WERE MEASURED
AGAINST. That height isn't actually constant (.page-sub can wrap
to a second line in some viewport widths, growing the hero taller
and throwing this fixed percentage off) -- app.js's
alignHeroPhotoSeam() overwrites this via inline style with the
exact value for the hero's REAL rendered height, on every render
and on resize. This CSS value only matters as the fallback shown
for the instant before that JS runs (or if it doesn't, e.g.
scripting disabled) -- close enough to correct not to flash
obviously wrong, not required to be pixel-exact itself anymore. */
background-size: 100% auto; background-position: center 42%;
}
.topbar.street-hero-bg {
background-image: linear-gradient(rgba(10,12,16,.4), rgba(10,12,16,.4)), url('../img/street-hero.avif');
/* NOT center center -- direct feedback: "se nota el salto de la
imagen, esta mal cuadrada." Using the same 50% on both elements
doesn't produce continuity, it produces *overlap*: with
background-size:100% auto, .dashboard-hero.hero-street's own 50%
reveals rows [381,532] of the rendered image (measured at this
width) while topbar's 50% would reveal [431,482] -- entirely
*inside* that range, not adjacent to it. Scrolling from topbar's
bottom edge (row 482) into the hero's top edge (row 381) means
jumping backwards 101 rows, a real, visible discontinuity, not a
subtle mismatch. Solved the same way as Park's pair (CSS spec's
offset=(container-image)*P%): kept the hero at the requested
center/50% and solved backwards for the one topbar percentage
(~38.3%) whose bottom edge lands exactly on the hero's own top
edge at 50% -- "center" stays honored for the hero itself, the
topbar just isn't independently centered anymore.
Same caveat as .park-hero-bg above: 38.3% was solved for one
specific hero height, and that height isn't actually constant
(confirmed -- this exact seam broke again once .page-sub wrapped
to 2 lines in the 769-849px range). app.js's alignHeroPhotoSeam()
recomputes and overwrites this via inline style for whatever the
hero's real rendered height is; this value is just the fallback
shown before that runs. */
background-size: 100% auto; background-position: center 38.3%;
}
.topbar.pending-hero-bg { background-image: none; background-color: #23262e; }
.topbar.hero-bg .sidebar-filter-icon { color: rgba(255,255,255,.75); }
.topbar.hero-bg .dd-trigger { color: rgba(255,255,255,.92); }
.topbar.hero-bg .dd-trigger:hover, .topbar.hero-bg .dd-trigger[aria-expanded="true"] { color: #fff; }
.topbar.hero-bg .topbar-search { border-bottom-color: rgba(255,255,255,.4); color: rgba(255,255,255,.75); }
.topbar.hero-bg .topbar-search input { color: #fff; }
.topbar.hero-bg .topbar-search input::placeholder { color: rgba(255,255,255,.6); }
.topbar.hero-bg .topbar-breadcrumb, .topbar.hero-bg .topbar-breadcrumb a { color: rgba(255,255,255,.85); }
.topbar.hero-bg .topbar-breadcrumb a:hover { color: #fff; }
.topbar.hero-bg .topbar-breadcrumb .crumb-current { color: #fff; }
}
.section-title { font-family: var(--font-sans); font-weight: 800; font-size: 23px; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; letter-spacing: -.1px; }
.section-title .bar { width: 4px; height: 19px; background: linear-gradient(180deg, var(--brand-red), var(--brand-red-hover)); border-radius: 3px; display: inline-block; }
.grid { display: grid; gap: 16px; }
/* .grid-5 (2026-08-25): Street Dashboard's Fleet Status row only, once
Tire Rotation joins Unit Status/Service Reminders/Belt Replacement/
Unresolved Issues -- same breakpoint behavior as .grid-4 (2-up under
1100px, 1-up under 700px), just one more column at full width. */
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-5, .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 700px) { .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
/* 2026-08-05: cards got a diagonal gradient + a pronounced two-layer shadow
(10px offset, 28px blur) to read as "real depth" against the page's own
gradient. 2026-08-24 product feedback: with 10+ of these stacked on one
screen (Dashboard), that shadow plus --radius-lg's 16px corners plus the
gradient compounded into a heavy, "abultado" page -- every card looked
like it was floating a full centimeter off the surface. Flattened to a
near-white surface with only the faintest top-left/bottom-right tint (a
card still isn't flat-flat, just no longer the dominant visual event),
a single tight contact shadow instead of the wide ambient one, and a
tighter radius so cards read as cards, not pills. */
/* 2026-08-27: flattened the rest of the way, so the whole app speaks the
language the Dashboard settled on ("aplica este diseño a las demás
páginas"). The de-bulk pass above got .card from "floating a centimeter
off the page" down to a soft card, but soft was still a different
component than a Dashboard tile: side by side, a chart panel cast a
shadow and curved its corners while the tiles beside it were square
hairline cells. Three properties carried that difference and all three
are gone -- the diagonal gradient (a flat white surface now), the
contact shadow (none), and the radius (square, the same reasoning the
tiles were squared for on 2026-08-26: a data surface is a table, and
tables have square cells). What remains is exactly what a tile is: white
fill, one hairline border. Panels and tiles are now one component with
two sizes instead of two components that happen to sit together. */
.card {
background: var(--surface-white);
border: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
padding: 20px;
/* Every card fades/lifts in on its own mount — since mount.innerHTML is
replaced wholesale on each route render, this is genuinely fresh DOM
each time, so it also doubles as a page-transition cue for free, no JS
involved. Purely decorative -- opacity/transform only, nothing that
affects layout while it plays.
2026-08-24: shortened from 16px/.55s/70ms-steps -- Apple's own Motion
guidance is explicit that frequent interactions should generally skip
added motion entirely, and this dashboard gets looked at many times a
day. Kept as a brief, barely-there settle instead of removing outright
(still "a page transition happened", just not a show every time). */
animation: card-in .22s var(--ease) both;
}
@keyframes card-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Staggered by position, but compressed into ~120ms total instead of ~500ms
-- enough for the row to read as one soft wave, not a wait. */
.grid > .card:nth-child(1), .table-wrap.card:nth-child(1) { animation-delay: 0ms; }
.grid > .card:nth-child(2) { animation-delay: 20ms; }
.grid > .card:nth-child(3) { animation-delay: 40ms; }
.grid > .card:nth-child(4) { animation-delay: 60ms; }
.grid > .card:nth-child(5) { animation-delay: 80ms; }
.grid > .card:nth-child(6) { animation-delay: 100ms; }
.grid > .card:nth-child(7) { animation-delay: 120ms; }
.grid > .card:nth-child(n+8) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
.card { animation: none; }
}
.section { margin-bottom: 32px; }
/* 2026-08-25 content-design pass ("interfaces reales" product feedback,
the two reference dashboards): border-radius only, scoped to kpi-card --
.card's own --radius-md (12px)/padding/shadow were already tuned soft
and generous in the 2026-08-24 de-bulk pass (see .card above), squarely
inside the reference's "12-16px, soft/no border" range, so those stay
untouched. This nudges just the radius to the top of that range for a
slightly softer/rounder read, matching the reference's own cards. */
.kpi-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.kpi-card::after {
content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border);
}
/* A subtle top-to-bottom gradient instead of a flat fill -- same two colors
either way, just given a little life instead of reading as a static
sticker on the card's edge. */
.kpi-card.accent-critical::after { background: linear-gradient(180deg, var(--critical), color-mix(in srgb, var(--critical) 70%, black)); }
.kpi-card.accent-ok::after { background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 70%, black)); }
/* 2026-08-25 product feedback: a tinted background + tinted border on
accent-critical (from an earlier iteration of this hierarchy pass) read
as decorative red overuse, not "this needs attention" -- reverted.
Rule 6 (CLAUDE.md) stays as-is: --brand-red is reserved for critical
state + the page's one primary CTA, nothing else. The edge bar above
is kept exactly as it landed after that revert -- untouched below. */
/* Icon+label row (kpiIconHtml() in app.js). The "Attention" chip that used
to live here was removed 2026-08-25 per product feedback ("no sirve") --
the red edge bar (.kpi-card.accent-critical::after) plus the bold dark
value already carry the critical signal. flex-wrap stays: a source tag
(.source-tag, see sourceTag() in app.js) can still share this row with a
long label at kpi-compact's ~150-180px width (Vehicle Detail) or the
2-up grid breakpoint below, and should wrap rather than get clipped. */
.kpi-card .kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; }
.kpi-card .kpi-icon { width: 13px; height: 13px; flex-shrink: 0; margin-right: 6px; vertical-align: -2px; color: var(--muted); }
/* Click-through cards (kpi()'s opts.href — Dashboard summary tiles linking
to the real page that owns that detail) get a visible affordance so they
don't look identical to the plain, non-interactive KPI cards elsewhere. */
.kpi-card.kpi-clickable { cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.kpi-card.kpi-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* The KPI card currently driving a table filter (Parts' inventory coverage
modes). A border, not a fill: a tinted card was rejected for status
colour 2026-08-25, and the same reasoning applies to selection -- the
card must read as "this one is active", not as "this one is alarming". */
.kpi-card.kpi-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kpi-card.kpi-clickable:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
/* 2026-08-24: eased from 700 to 600, same "just a pinch lighter" product
feedback as .kpi-value below -- still bold enough to read as a label
at 11.5px, one step down from the card's heaviest text.
2026-08-25: now a flex row (icon + text) instead of plain block text --
see .kpi-icon above. */
.kpi-card .kpi-label { display: inline-flex; align-items: center; min-width: 0; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
/* Montserrat/--font-sans, weight 700 (2026-08-24: eased back from 800 --
"just a pinch" lighter, per product feedback -- still the heaviest
text on the card so it reads as the clear visual anchor).
30px -> clamp(18px, 3.2vw, 24px), same reasoning as .page-title just
above -- replaces the two fixed breakpoint overrides that used to live
in the media queries below (removed, they'd fight the clamp at those
exact widths otherwise). */
/* font-variant-numeric: tabular-nums removed 2026-08-25 -- this is a
standalone display value (dataviz's stat-tile contract), not a column of
numbers that needs vertical digit alignment; tabular figures give every
digit a fixed '0'-width and read loose at display sizes. Proportional
(the font's default) is the correct figure style here -- table columns
elsewhere in the app keep tabular-nums on their own rules, untouched. */
.kpi-card .kpi-value { font-family: var(--font-sans); font-weight: 700; font-size: clamp(18px, 3.2vw, 24px); line-height: 1.2; margin-top: 6px; letter-spacing: -.3px; color: var(--ink); }
/* 2026-08-25 content-design pass: dropped the red color this used to carry
("Numbers default to bold black/dark-ink, not color" -- product
direction after rejecting the accent-critical wash). Weight alone is
the number's own emphasis now; the red edge bar next to the card
(.kpi-card.accent-critical::after) is the "needs attention" signal --
keeping color/weight as separate tools instead of stacking both on the
one element rule 6 is strictest about. */
.kpi-card .kpi-value.critical { font-weight: 800; }
.kpi-card .kpi-foot { font-size: 12px; color: var(--muted); margin-top: 8px; }
/* Real-content list (2026-08-25, e.g. Belt Replacement's worst-overdue
units on the Street Dashboard) -- a couple of short rows of actual data
under the footer instead of only a count + link, same "who/what exactly"
pattern as the reference dashboard's named-customer/product rows. Kept
deliberately spare (no card, no icons of its own) so it reads as part of
this KPI card, not a second component bolted underneath. */
.kpi-card .kpi-reallist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.kpi-card .kpi-reallist-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; }
.kpi-card .kpi-reallist-name { flex: 1 1 auto; min-width: 0; color: var(--text-dim); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-card .kpi-reallist-meta { color: var(--critical); font-weight: 700; font-size: 11px; flex-shrink: 0; }
/* Compact breakdown chips (e.g. Unresolved Issues' per-store counts) --
replaces a run-on "Store A 32 · Store B 3 · ..." sentence tacked onto the
footer, which made that one card's footer wrap to several lines while
every sibling stayed one line (2026-08-25 "se ve ... desbalanceado"
product feedback). Chips read as discrete tags at a glance instead of
dense prose, wrap independently of the sentence above, and don't force
the card taller than a sibling with a short footer. */
.kpi-card .kpi-breakdown { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.kpi-card .kpi-chip { display: inline-flex; align-items: baseline; gap: 4px; font-size: 11px; font-weight: 500; color: var(--text-dim); background: var(--surface); border-radius: 999px; padding: 2px 8px; line-height: 1.4; }
.kpi-card .kpi-chip b { font-weight: 700; color: var(--ink); }
/* Small color dot inside a chip when the chip is naming one segment of a
colored breakdown above it (Unit Status) -- the chip text itself always
stays a text token (never the series color, per dataviz's own rule),
this dot is the one place identity color actually shows. */
.kpi-card .kpi-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
/* Same reallist row markup as the belt-replacement worst-overdue list
above, reused for Tech Performance's top-3 leaderboard -- but a rank +
completion count isn't a problem the way "mi over" is, so it must not
inherit .kpi-reallist-meta's default --critical red (that would read as
an alert on a purely informational ranking). */
.kpi-card .kpi-reallist-meta.neutral { color: var(--muted); font-weight: 600; }
/* ---------- card sparklines/mini-charts (2026-08-25 content-design pass,
sparklineSvg()/statusBarSvg()/miniBarRow() in dashboardShared.js) --
only ever appended via kpi()'s existing opts.extra slot, so every rule
below sits inside the same "block under the footer" spot .kpi-reallist/
.kpi-breakdown already established -- no new slot on the card itself. */
.kpi-card .kpi-spark-wrap { margin-top: 8px; }
.kpi-card .kpi-spark { display: block; width: 100%; height: 36px; }
.kpi-card .kpi-segbar-wrap { margin-top: 8px; }
.kpi-card .kpi-segbar { display: block; width: 100%; height: 5px; }
.kpi-card .kpi-minibar-block, .kpi-card .kpi-meter-block { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.kpi-card .kpi-minibar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.kpi-card .kpi-minibar-label { flex: 0 0 auto; min-width: 56px; max-width: 110px; color: var(--text-dim); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-card .kpi-minibar { flex: 1 1 auto; min-width: 40px; }
.kpi-card .kpi-minibar-value { flex: 0 0 auto; font-weight: 600; color: var(--text-dim); font-size: 11px; }
/* Period-over-period trend badge — color follows whether the direction of
change is desirable for that specific metric (set by the caller via
`deltaGood`), not just the raw sign of the number: e.g. spend going down
is "good" (green), open work orders going down is "good", active
vehicles going down is "bad".
2026-08-25: `.kpi-delta` itself is now a small soft-background pill
(same shape as the reference admin dashboard's "↓36.8%" chip) instead of
plain colored text -- the caption ("vs last month") stays a separate
plain-gray sibling in `.kpi-delta-row`, not inside the colored pill, so
the pill stays exactly as small/specific as the reference's (just the
arrow + percentage, never a colored sentence). */
.kpi-delta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.kpi-delta-arrow { font-size: 9px; }
.kpi-delta-good { color: var(--ok); background: var(--ok-soft); }
.kpi-delta-bad { color: var(--critical); background: var(--critical-soft); }
.kpi-delta-flat { color: var(--muted); background: var(--neutral-soft); }
.kpi-delta-caption { font-weight: 500; color: var(--muted); font-size: 11.5px; }
/* Vehicle Detail's 4 KPI cards sit in a narrower column (next to the
viewer, not the full page width like Dashboard/Financials' grid-4 rows),
so the default kpi-value would crowd or wrap in ~150-180px of card
width. Same card, same label/foot sizing — just a smaller number.
2026-08-24: 22px -> clamp(14px, 2.4vw, 18px), same proportional scale
as the base .kpi-value's own clamp() just above. */
.kpi-card.kpi-compact .kpi-value { font-size: clamp(14px, 2.4vw, 18px); margin-top: 4px; }
/* Tighter than the base .kpi-card's 20px/22px padding + 6px/8px inner
margins — at kpi-compact's smaller 28px value there was visible dead air
below the foot text (2026-08-04 product feedback: "the KPI row on
Vehicle Detail feels too airy"). Scoped to .kpi-compact only (also used
by Work Orders' "By Priority" row, see workorders.js) so
Dashboard/Financials/Bookings/Parts' regular .kpi-card sizing is
untouched. */
.kpi-card.kpi-compact { padding: 13px 16px 11px; }
.kpi-card.kpi-compact .kpi-foot { margin-top: 5px; }
/* Vehicle Detail's own KPI row sits noticeably tighter than the page-wide
.grid-4 rows used elsewhere (Dashboard etc.) — same reasoning as above,
scoped via the ancestor class so other pages' 16px .grid gap is
untouched. */
.vehicle-top-grid .grid-4 { gap: 12px; }
/* Slightly less breathing room below the whole top grid than the site-wide
30px .section default — this specific compound selector (not a bare
`.section` override) only fires here, other pages' `.section` spacing is
untouched. */
.vehicle-top-grid.section { margin-bottom: 24px; }
/* Vehicle Detail's top section: viewer (narrower) + KPI row/usage chart
(wider) side by side. Below 1000px the two columns get too tight for
4 KPI cards plus a chart to stay readable, so it drops to a single
stacked column — same breakpoint spirit as .grid-4's own collapse. */
@media (max-width: 1000px) {
.vehicle-top-grid { grid-template-columns: 1fr !important; }
}
/* Rental Frequency + $ Generated side by side, each taking half the width
the single Rental Frequency card used to occupy (2026-08-04 product ask).
This used to stack based on a viewport media query (max-width: 640px) —
but that breakpoint was picked around "narrow phone", while the actual
width available to these two cards is set by .vehicle-top-grid's own
0.8fr/1.2fr split above (see vehicle.js), which shrinks this column
continuously as the viewport narrows well before hitting 640px or even
before .vehicle-top-grid itself collapses at 1000px. Two independent
viewport breakpoints (1000px for the outer grid, 640px for this one)
fought each other: in the ~640-1000px viewport range the outer grid was
still side-by-side, so this column only ever got its narrow 1.2fr share
(as little as ~330-420px), yet the 640px rule never fired because the
*viewport* was still wide — result: two ~150-200px-wide charts crammed
into a column that was already too narrow for them, confirmed with
Playwright ("sigue comprimido" follow-up, 2026-08-04).
Fixed by switching to a container query on the actual column that sizes
these cards (`.vehicle-top-right-col`, see vehicle.js) instead of the
viewport — the two charts now stack based on how much width THEY
actually have, regardless of which state the outer grid happens to be
in. This also means the transition reads as one continuous rule instead
of two breakpoints landing at different times by coincidence. */
.usage-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; min-height: 0; }
.vehicle-top-right-col { container-type: inline-size; }
/* 600px chosen (not the round 640px carried over from the old viewport
rule) because it's specifically wide enough to cover the case Playwright
caught at a 900px browser viewport: .vehicle-top-grid has already
collapsed to one column there (below its own 1000px breakpoint), handing
this column ~590px — comfortably below 600px, so it correctly stacks
instead of splitting into two ~230px "cuadrado chico" halves. */
@container (max-width: 600px) {
.usage-split-grid { grid-template-columns: 1fr; }
}
/* Rental Frequency / Revenue Generated each got noticeably more cramped
once they went from one full-width card to sharing a row (2026-08-04
product feedback: "se siente comprimido"). The two-column split itself
stays — just loosen up what's inside each half: a touch more internal
padding than the site's base .card (20px/22px) so the chart isn't flush
against the card edge, plus the wider 22px gap above between the two
halves so they read as two distinct, unhurried cards rather than one
crowded row. */
.usage-card { padding: 22px 26px 20px; }
.pill {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 7px;
font-size: 11.5px; font-weight: 700; white-space: nowrap; letter-spacing: .1px;
/* max-width:100% + overflow/text-overflow below is the fix for a Fleet-
table bug (2026-08-25 screenshot: "PARTS UNIT"/"Active (Observed)"
bleeding into the Meter/Location text next to them) -- a longer status
label's pill has no width of its own, so at a narrower table width
(fixed-layout column % gets smaller in absolute px, or the fleet-table
min-width breakpoint) the pill just kept growing past its 's
boundary and visually sat on top of the next cell's content, since a
table cell's default overflow is visible. Capping the pill to its own
cell's width and ellipsis-truncating instead means it can never grow
wider than the column that contains it, at any viewport -- the
long-label cases now truncate in place ("PARTS UNI…") with the full
text still available via pill()'s own `title` (see app.js), rather
than overlapping the next column illegibly. Safe everywhere else
.pill is used (Work Orders, Vehicle Detail, Financials POs...) too --
this only ever engages when a pill's container is actually narrower
than its content, which previously just silently overflowed there too.
*/
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.status-good { background: var(--ok-soft); color: var(--ok); }
.pill.status-warn { background: var(--warn-soft); color: var(--warn); }
.pill.status-critical { background: var(--critical-soft); color: var(--critical); }
.pill.status-neutral { background: var(--neutral-soft); color: var(--neutral); }
/* ---------- brand wordmark chip (brandBadge() in app.js) ---------- */
/* brandBadge() is only called from vehicle.js's header today (list views —
Fleet roster, Dashboard's Cost & Reliability table — print the make as
plain text via normalizeMake(), no chip/logo, per design decision: the
logo only earns its place where a single vehicle is the whole point of
the screen). Typographic stand-in for a real brand logo — bold
Montserrat over a flat brand-accent color (see --brand-* tokens above)
— for makes without a sourced logo file (ROXOR, Unknown). */
.brand-badge {
display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px 4px; border-radius: 5px;
font-family: var(--font-sans); font-weight: 700; font-size: 13px; line-height: 1.1;
letter-spacing: .2px; color: #fff; white-space: nowrap; vertical-align: middle;
}
.brand-badge.brand-unknown { background: var(--neutral-soft); color: var(--muted); font-family: var(--font-sans); font-weight: 600; }
.brand-badge.brand-sm { padding: 2px 7px 3px; font-size: 11.5px; }
.brand-badge.brand-lg { padding: 8px 16px 9px; font-size: 22px; border-radius: 7px; }
/* Real brand logo (brandBadge() in app.js, when /img/brands/{slug}.{svg|png}
exists) — sits inline where the typographic chip otherwise would. The six
sourced files have very different aspect ratios (Honda near-square,
Polaris ~8:1 wide) — fixing only `height` (old approach) left wildly
different rendered widths, which reads as visually inconsistent in a row
of badges. Instead `.brand-logo` is a fixed-WIDTH box and the so their OPEN
option list is themed too (a native 's popup is OS-painted, no
matter what CSS targets the closed control — see mountDropdown()'s own
comment in app.js). 2026-08-25 product ask ("arregla el diseño de
fleet, que se vea mas uniforme"): Fleet's Type/Status filters were the
plain version; this lets them become real .dd instances that
look identical closed AND match every other themed dropdown in the app
once open (same light .dd-menu popup as the topbar's Period/Fleet Mode
filters, now that .dd-menu itself is light-themed — see its own
comment above). */
.filter-row .dd-trigger {
display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 150px;
border: 1px solid var(--border); background: var(--surface-white); color: var(--text-dim);
border-radius: var(--radius-sm); padding: 9px 12px 9px 14px; font-size: 12.5px; font-weight: 600;
outline: none; transition: border-color .15s var(--ease), color .15s var(--ease);
}
.filter-row .dd-trigger:hover, .filter-row .dd-trigger[aria-expanded="true"] { border-color: var(--brand-red); color: var(--ink); }
.filter-row .dd-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-row .dd-trigger-chevron { flex: none; width: 13px; height: 13px; color: #86868f; transition: transform .2s var(--ease); }
.filter-row .dd-trigger[aria-expanded="true"] .dd-trigger-chevron { transform: rotate(180deg); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Fleet roster's table only — table-layout:auto (the site default above)
sizes each column off its own widest cell across all 150 rows in the
DOM at once (no virtualization), so one long Model/Trim string anywhere
in the list could blow the Make/Model column out disproportionately,
squeezing Type/Status/Location/Meter into uneven leftover gaps (2026-08-05
product feedback: "el espaciado de las columnas se ve raro"). Fixed
layout + an explicit colgroup (see fleet.js) makes column widths
deterministic regardless of content length. Scoped to this one table,
not the base `table` rule above — other pages' tables still want
auto-sizing (their content doesn't vary this wildly row to row). */
.fleet-table { table-layout: fixed; }
/* Only the two columns whose content can realistically run long
(Make/Model incl. Trim, and Location — e.g. "Sevierville Off-Road Park")
get nowrap+ellipsis; the rest (Unit/Type/Status/Meter) are short enough
at these fixed widths that forcing an ellipsis everywhere would just
hide values with no visual cue why. fleet.js sets a `title` attribute
on both so the full text is still available on hover. */
.fleet-table td:nth-child(2), .fleet-table td:nth-child(5) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-table .fleet-row-make span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Solid header band (2026-08-24, TrackHawk-inspired detail) -- was
transparent, sitting flush with the card's own white background with
only the bottom border to separate it from row 1. A filled header row
gives every table the same clear "this is the header" band TrackHawk's
tables have, without touching row striping/hover or the pill/badge
system elsewhere. */
th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 45%, transparent); }
tbody tr:hover { background: var(--critical-soft); cursor: pointer; }
.table-wrap { overflow-x: auto; }
/* Scrolling variant, ported 2026-08-27: ~460px = a sticky header (~35px)
plus 10 body rows at ~42px each, so a long table shows a consistent
window instead of running the page down. The header stays pinned, or a
scrolled list loses its column labels. */
.table-wrap-scroll { max-height: 460px; overflow-y: auto; }
.table-wrap-scroll thead th { position: sticky; top: 0; background: var(--surface-white); z-index: 1; }
/* Opt-in modifier (2026-08-25 product ask, Work Orders' two tables) --
caps a table to roughly 10 visible rows with its own internal vertical
scroll instead of letting a long table push the rest of the page down
indefinitely. Scoped as a modifier, not a change to .table-wrap
itself, since most other tables on the site (Fleet, Financials, Parts)
are fine growing to their natural height. `th`'s own background is
already opaque (see its rule above), so sticky headers need no extra
background override here to stay readable over scrolling rows. */
.table-wrap.table-wrap-capped { max-height: 500px; overflow-y: auto; }
.table-wrap.table-wrap-capped thead th { position: sticky; top: 0; z-index: 1; }
/* Most Used Parts (parts.js) — one per part instead of a flat
table row, since each part's usage breakdown (which vehicles, how much
spent on each) is itself a small table. Native / gets
expand/collapse for free with zero JS and no new dependency. */
.most-used-parts-list { display: flex; flex-direction: column; gap: 10px; }
.most-used-part { padding: 0; }
.most-used-part summary {
list-style: none; cursor: pointer; padding: 14px 22px; font-size: 14px;
display: flex; align-items: center; gap: 6px;
}
.most-used-part summary::-webkit-details-marker { display: none; }
.most-used-part summary::before {
content: '\25B8'; color: var(--muted); font-size: 11px; transition: transform .15s var(--ease); flex: none;
}
.most-used-part[open] summary::before { transform: rotate(90deg); }
.most-used-part summary:hover { background: var(--surface); border-radius: var(--radius-lg); }
.table-nested { margin: 0 22px 16px; width: calc(100% - 44px); }
.table-nested th, .table-nested td { padding: 8px 10px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 13px; }
/* Work Orders' two by-technician charts (2026-08-25 product ask: "que
estos dos graficos tambien sean clickeables sus partes") -- a whole
row (Completed by Technician, one bar = one tech = one filter) or one
segment within a row (Workload by Technician, each color = a
different status for that tech) filters the table below. Brightening
on hover (not a background swap, which would fight the bar's own
color) is the same affordance direction as .kpi-clickable without
copying its card-specific shadow/lift, which wouldn't read right on a
thin bar segment. */
.bar-row-clickable { cursor: pointer; border-radius: 4px; transition: background .12s var(--ease); }
.bar-row-clickable:hover { background: var(--surface); }
.workload-seg { cursor: pointer; transition: filter .12s var(--ease); }
.workload-seg:hover { filter: brightness(1.15); }
.bar-row .label { width: 150px; flex: none; color: var(--text-dim); }
.bar-row .track { flex: 1; height: 7px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 4px; }
.bar-row .val { width: 40px; text-align: right; flex: none; font-weight: 700; }
/* Denser variant of .bar-row — additive modifier, base .bar-row rules above
(used as-is by financials.js's spend-by-category chart) are untouched.
Used by Dashboard's "Fleet Composition" block, which is deliberately the
lowest-priority/most-reference-only section on that page (see
dashboard.js) — smaller type, thinner track, tighter spacing so it reads
as a footnote rather than another full-size chart. */
.bar-row.compact { margin-bottom: 7px; font-size: 12px; }
.bar-row.compact .label { width: 118px; }
.bar-row.compact .track { height: 5px; }
.bar-row.compact .val { width: 32px; }
/* Small uppercase sub-header used above a compact bar-row group when two
of them share one card/section-title (see "Fleet Composition" on
Dashboard) — same visual language as .kpi-label, not a second
.section-title (that stays reserved for one per section, per CLAUDE.md). */
/* Same role as .kpi-label (small uppercase eyebrow) -- was .5px vs .6px
for no reason other than being added separately; now one shared value. */
.compo-subhead { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
/* Data-source tag (sourceTag() in app.js). Peek Pro renders its own real
wordmark (.source-logo, an (that's meant for clickable data rows, not a row that
just hosts 3 independent buttons) — the buttons already carry their own
hover/selected state above. */
.avail-table tbody tr:hover { background: transparent; cursor: default; }
/* ---------- 2026-08-07 rewrite: occupancy % + mini progress bar inside
each grid cell (replaces the old bare "free/total" count) — every cell
now shows the number that actually drives the color (occupancy), not
just a derived count, per the "muy soso" feedback that the old grid was
text-only with no sense of degree. ---------- */
.avail-cell-pct { font-size: 19px; line-height: 1; }
.avail-occ-track { height: 4px; border-radius: 3px; background: rgba(0,0,0,.1); overflow: hidden; }
.avail-occ-fill { height: 100%; background: currentColor; border-radius: 3px; transition: width .3s var(--ease); }
.avail-cell-sub { font-family: var(--font-sans); font-size: 11px; font-weight: 600; opacity: .85; }
/* ---------- Street unit timeline (per-store/day detail) — the main visual
of the Street section: one row per in-service unit, a 9am-9pm track with
colored blocks wherever that unit is booked. Replaces the old plain
free/reserved table — a glance down the column of tracks shows which
units are busy all day vs. mostly open, which a text table couldn't. */
.avail-timeline-hours { position: relative; height: 14px; margin: 0 0 6px 202px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.avail-timeline-hours span { position: absolute; transform: translateX(-50%); }
.avail-timeline-hours span:first-child { transform: translateX(0); }
.avail-timeline-hours span:last-child { transform: translateX(-100%); }
.avail-timeline-list { display: flex; flex-direction: column; }
.avail-timeline-row {
display: flex; align-items: center; gap: 14px; padding: 8px 4px;
border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s var(--ease);
}
.avail-timeline-row:hover { background: var(--surface); }
.avail-timeline-row:last-child { border-bottom: none; }
.avail-timeline-unit { flex: 0 0 188px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.avail-timeline-id { font-weight: 700; font-size: 12.5px; }
.avail-timeline-model { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avail-timeline-track { position: relative; flex: 1; height: 24px; background: var(--surface); border-radius: 5px; overflow: hidden; }
.avail-timeline-seg { position: absolute; top: 0; bottom: 0; background: var(--critical-soft); border-left: 3px solid var(--critical); }
.avail-timeline-badge { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; width: 96px; text-align: right; }
.avail-timeline-badge-ok { color: var(--ok); }
.avail-timeline-badge-warn { color: var(--warn); }
.avail-timeline-badge-critical { color: var(--critical); }
/* ---------- Off-Road Park / ATV Park shift + unit-chip detail ---------- */
.avail-subhead { font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; margin: 18px 0 8px; }
.avail-subhead:first-child { margin-top: 0; }
.avail-shift-list { display: flex; flex-direction: column; }
.avail-shift-row { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.avail-shift-row:last-child { border-bottom: none; }
.avail-shift-time { flex: 0 0 76px; font-weight: 700; font-size: 12.5px; }
.avail-shift-track { position: relative; flex: 1; height: 14px; background: var(--surface); border-radius: 5px; overflow: hidden; }
.avail-shift-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 5px; }
.avail-shift-fill-ok { background: var(--ok); }
.avail-shift-fill-warn { background: var(--warn); }
.avail-shift-fill-critical { background: var(--critical); }
.avail-shift-count { flex: 0 0 auto; width: 110px; text-align: right; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.avail-unit-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avail-unit-chip {
display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 6px;
padding: 6px 12px 6px 6px; font-size: 12px; cursor: pointer; transition: background .12s var(--ease);
}
.avail-unit-chip:hover { background: var(--border); }
.avail-unit-thumb, .avail-unit-thumb-ph { flex: none; width: 36px; height: 25px; border-radius: 4px; background: #fff; object-fit: cover; }
.avail-unit-chip-sub { color: var(--muted); font-size: 10.5px; }
/* =====================================================================
Mobile (phones) — the site previously only handled tablet/desktop grid
collapse (1100px/700px breakpoints above). Charts (.linechart-wrap svg)
and tables (.table-wrap) already scale/scroll on their own via
viewBox+100% width and overflow-x:auto respectively — nothing to add
there. The sidebar becomes a full-screen overlay below (see comment
right above that block) rather than the desktop icon-rail collapse,
since a permanently-visible narrow rail was still reported as not
feeling right on a phone -- floating menu, full screen when open, empty
otherwise, was the actual ask.
===================================================================== */
/* Reachable at any width, but only actually visible on phones (below) --
lives in .topbar-brand, a sibling of .sidebar rather than a child of it,
specifically so it stays clickable even while the sidebar itself is
transformed off-screen (a position:fixed descendant of a transformed
ancestor is positioned relative to THAT ancestor, not the viewport --
this button had to live outside .sidebar entirely to avoid that trap). */
.mobile-menu-btn {
display: none;
width: 34px; height: 34px; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface-white); color: var(--ink);
transition: background .15s var(--ease);
}
.mobile-menu-btn:hover { background: var(--surface); }
@media (max-width: 768px) {
.mobile-menu-btn { display: flex; }
/* 2026-08-24 product ask: mobile header "se ve caotico" -- the old
2-row layout (hamburger+search, then filters right-aligned with a
big dead gap to their left) plus a separately-chromed
.breadcrumb-bar row below it read as three disconnected pieces each
following a different alignment rule, not one organized header.
Rebuilt as 3 left-aligned rows sharing one flow direction:
hamburger+search, breadcrumb, filters. `display: contents` on
.topbar-brand (a flex wrapper that would otherwise force
.mobile-menu-btn and #topbarBreadcrumb to share ONE grid cell)
makes its box disappear for layout purposes so its two children
become direct grid items of .topbar instead, each independently
placed into its own row via grid-area -- no DOM changes needed,
desktop's structure (where .topbar-brand stays a normal flex
container) is untouched. #topbarBreadcrumb used to be hidden below
769px entirely (mobile had its own separate .breadcrumb-bar/
#breadcrumbSlot instead, now deleted from index.html/app.js
entirely) -- shown here too now, one render target for both screen
sizes instead of two parallel ones. */
.topbar {
height: auto;
grid-template-columns: auto 1fr;
grid-template-areas: "hamburger search" "breadcrumb breadcrumb" "filters filters";
row-gap: 8px;
padding: 8px 12px;
}
.topbar-brand { display: contents; }
.mobile-menu-btn { grid-area: hamburger; }
.topbar-breadcrumb { grid-area: breadcrumb; display: block; }
.topbar-search-wrap { grid-area: search; }
.topbar-filters {
/* flex-start, not flex-end -- the old right-alignment was the one
row breaking the left-to-right flow every other row in the
header follows, which read as arbitrary rather than organized. */
grid-area: filters; justify-self: stretch; justify-content: flex-start;
flex-wrap: wrap; gap: 8px 10px;
}
.topbar-search { width: 100%; min-width: 0; }
.topbar-search input { min-width: 0; }
.sidebar-filter .dd-trigger { max-width: 130px; }
.page { padding: 16px 14px 40px; }
/* .page-title/.kpi-value font-size no longer set here -- both are
clamp()-based now (see their own rules) and already scale smoothly
through this breakpoint; a fixed override here would fight the
clamp exactly at 768px instead of the two ever agreeing. */
.page-sub { font-size: 12px; margin-bottom: 18px; }
.section-title { font-size: 19px; }
.grid { gap: 10px; }
.card { padding: 16px 16px; }
/* Filter rows (Fleet/Work Orders/Inspections' Type/Status s)
already wrap (flex-wrap: wrap) -- just let each take the full row
instead of a cramped half-width, and drop the search-results preview
to the input's own width instead of a fixed 500px overflowing the
viewport. */
.filter-select { flex: 1 1 140px; }
.search-results { width: min(500px, calc(100vw - 24px)); }
/* ---------- sidebar becomes a full-screen floating overlay ---------- */
/* position:fixed pulls it out of .app-shell's flex flow entirely, so
.main naturally takes the full viewport width underneath with no
extra override needed, in either state -- open or closed, the content
column never shifts, only what's stacked visually on top of it. */
.sidebar {
position: fixed; inset: 0;
/* Leaflet's own control panes sit around z-index 1000 too -- tied at
the same value, the map's #map div (later in the DOM than )
won every stacking tie, so its zoom control rendered ON TOP of the
drawer instead of under it, open or not. High enough to beat that
and anything else on the page outright, not just nudge past it. */
z-index: 3000;
width: 100vw !important; min-width: 100vw !important; max-width: 100vw;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s var(--ease);
}
/* Shadow only while actually open -- box-shadow travels with the element
under transform, and blur radius extends past its own edge regardless
of position. At exactly translateX(-100%) the (now off-screen)
element's right edge sits precisely at the viewport's left boundary,
so a shadow declared unconditionally on .sidebar was bleeding a faint
permanent strip into view along the left edge even while "hidden". */
.app-shell:not(.sidebar-collapsed) .sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
.sidebar > * { width: 100% !important; min-width: 0 !important; }
/* Same class the desktop icon-rail collapse already uses (rule 10/11 --
one toggle button, one meaning: "the menu is out of the way" — this
media query is what changes *how* that's expressed at this width, not
a second, separate mobile mode). Not-collapsed = open, full screen;
collapsed = the default, fully off-canvas. */
.app-shell:not(.sidebar-collapsed) .sidebar { transform: translateX(0); }
.app-shell.sidebar-collapsed .sidebar { transform: translateX(-100%); }
/* The sidebar's own internal toggle (top of the drawer) becomes the
close button once the drawer covers the whole screen -- the icon
already flips to the "collapse" glyph in this state (rule 10), which
reads correctly as "close" here too. */
.sidebar-nav { padding: 22px 16px; gap: 6px; }
.nav-group-label, .sidebar-nav a { font-size: 15px; padding: 12px 10px; }
/* Fleet's table-layout:fixed (see the comment on .fleet-table above) is a
deliberate desktop choice -- those same percentage widths just have no
room to resolve into at phone widths, so cell text was overflowing its
own column into the next one (Status "Out of Service" bleeding into
Location, etc.) instead of the clean truncation .fleet-table was
designed around. A min-width lets the columns resolve at a size that
actually fits their content again, same as a desktop tab -- .table-wrap
already scrolls horizontally (overflow-x:auto), so this is genuinely
viewable, just sideways, instead of visually broken in place. */
.fleet-table { min-width: 620px; }
/* Every OTHER data table on the site (Vehicle Detail's Work
Orders/Service History/Inspections/Financials/Rentals tabs, and any
other page whose table isn't .fleet-table specifically) had no
mobile min-width at all -- unlike .fleet-table above, these just
shrank to fit the phone width, squeezing multi-word cells like
"Replace door handle and reinstall door skin" or a full date into a
column a few characters wide instead of scrolling. Same fix, same
reasoning, applied generally: .table-wrap already scrolls
horizontally, so a min-width here means genuinely viewable (sideways)
instead of squeezed. :not(.fleet-table) so this doesn't fight the
more deliberate 620px above -- .table-nested (parts.js's per-part
asset breakdown) isn't inside a .table-wrap at all, so it's
unaffected either way. */
.table-wrap table:not(.fleet-table) { min-width: 560px; }
/* GPS's live-vehicles panel was sized (300px, absolute top:16px/left:16px)
for a desktop map with room to spare -- on a phone that's most of the
screen, leaving almost no map visible underneath it. Turned into a
bottom sheet instead: full width, capped height, so the map actually
fills the top of the screen like the page's own full-bleed layout
intends, and the vehicle list becomes a scrollable strip you pull up
rather than a panel eclipsing the one thing (the map) this page is for. */
.float-panel {
left: 8px; right: 8px; top: auto; bottom: 8px;
width: auto; max-height: 42vh;
}
.float-panel.live-panel { width: auto; }
/* Vehicle Detail's "#ID / model name / thumb / brand logo" row
(.vehicle-identity) is a desktop-width assumption -- .vehicle-thumb
(96px) + .brand-logo.brand-lg (148px) + two 16px gaps eat ~276px
before the title group (flex:1, min-width:0, so it obediently
shrinks instead of overflowing) gets anything, leaving it maybe
80-90px wide on a 390px phone. A long, unhyphenatable trim string
like "Talon 1000R FOX Live Valve" has no way to fit that other than
wrapping after nearly every word, reading as broken rather than
just narrow. Forcing the title group to its own full-width line
(flex-basis:100% inside a wrapping row) gives it the whole content
width to work with; the thumb + logo wrap onto their own second
line together, still comfortably sized at ~260px combined. */
.vehicle-identity { flex-wrap: wrap; row-gap: 10px; }
.vehicle-title-group { flex-basis: 100%; }
}
/* .page-title/.kpi-value no longer need a sub-420px override -- both are
clamp()-based (see their own rules) and already reach their floor
(20px/18px) well before this width. */
/* ---------- Issues modal (Inspections' "Open Issues" card, 2026-08-26) ---
The first real modal/dialog on this site -- everything "floating" so far
(.dd-menu, .float-panel) is a small anchored popover, not a full
page-blocking dialog, so there's nothing to reuse wholesale here. Follows
the same token vocabulary those already use (--shadow-lg for the panel,
var(--surface-white)/var(--border)/var(--radius-md)) so it still reads as
the same design system, just a new component shape. Issues has no
dedicated page of its own yet, so this is how its full list is reached
from Inspections instead of a route. */
.modal-overlay {
position: fixed; inset: 0; z-index: 4000;
background: rgba(21, 21, 26, .5);
display: flex; align-items: center; justify-content: center;
padding: 24px;
animation: modal-overlay-in .16s var(--ease) both;
}
@keyframes modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
background: var(--surface-white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%; max-width: 1100px; max-height: 85vh;
padding: 24px;
overflow-y: auto;
display: flex; flex-direction: column; gap: 16px;
animation: modal-panel-in .18s var(--ease) both;
}
@keyframes modal-panel-in {
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-close {
flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm);
background: var(--surface); border: 1px solid var(--border); color: var(--muted);
font-size: 20px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .13s var(--ease), color .13s var(--ease);
}
.modal-close:hover { background: var(--critical-soft); color: var(--critical); }
/* Row grain matches inspections.js's other clickable table rows (cursor +
hover), plus an expand-in-place affordance since there's no per-issue
detail page to route to. */
.issues-row { cursor: pointer; transition: background .13s var(--ease); }
.issues-row:hover { background: var(--surface); }
.issues-row.is-expanded { background: var(--surface); }
.issues-detail-row td { padding: 0; }
.issues-detail {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px;
padding: 16px 14px; background: var(--surface); border-top: 1px solid var(--border);
}
.issues-detail-full { grid-column: 1 / -1; }
.issues-detail-label {
display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; color: var(--muted); margin-bottom: 2px;
}
@media (max-width: 700px) {
.modal-panel { padding: 16px; max-height: 90vh; }
.issues-detail { grid-template-columns: repeat(2, 1fr); }
}
/* prefers-reduced-motion for the sidebar chrome (web-interface-guidelines:
"honor prefers-reduced-motion"). The collapse still works -- it just
snaps instead of easing, and hover feedback stays instant rather than
fading. */
@media (prefers-reduced-motion: reduce) {
.sidebar, .sidebar > *, .sidebar-nav, .sidebar-context, .sidebar-foot,
.dim-option, .dim-label, .dim-count, .dim-icon,
.sidebar-filter, .sidebar-filter .dd-trigger, .sidebar-filter .dd-trigger-label {
transition: none;
}
}
/* =====================================================================
The dimension flyout (2026-08-28)
=====================================================================
The store list hangs off its dimension row to the right, on hover or
focus ("el dropdown que se vea a la derecha al hacer hover en offroad
park"). Clicking the ROW itself means the whole dimension; clicking a
row IN here means that dimension narrowed to one location.
Fixed-positioned and portaled onto by app.js, because .sidebar
has overflow:hidden for its collapse animation and would clip it. */
.dim-flyout {
position: fixed; z-index: 1000; display: none;
min-width: 190px; max-width: 260px; padding: 5px;
background: #1b1b21; border: 1px solid rgba(255,255,255,.10);
border-radius: 0;
/* The one place in this app that carries a shadow, and it is not
decoration: this panel floats over page content that is already
white and bordered, so a hairline alone would not separate it from
whatever is behind. Rule E/J govern surfaces IN the layout; a
transient overlay is a different case, same as .dd-menu's own. */
box-shadow: 0 6px 16px -6px rgba(0,0,0,.5);
}
.dim-flyout.open { display: block; }
.dim-flyout-item {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 9px 10px; border: none; border-radius: 0; background: transparent;
color: rgba(255,255,255,.72); font: inherit; font-size: 12.5px; font-weight: 500;
text-align: left; cursor: pointer;
transition: background .12s var(--ease), color .12s var(--ease);
}
.dim-flyout-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.dim-flyout-item:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.dim-flyout-item.active { color: #fff; font-weight: 600; }
.dim-flyout-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim-flyout-check { width: 13px; height: 13px; flex: none; color: var(--ok); }
/* Touch and other hover-less pointers get no flyout at all -- there is no
hover to open it with, and a tap has to stay unambiguous ("tap the row =
this whole dimension"). They keep the plain store dropdown instead,
which is why that control still exists rather than having been deleted
when the flyout replaced it on the desktop. */
@media (hover: hover) and (pointer: fine) {
.sidebar-context .sidebar-filter { display: none; }
}
@media (hover: none), (pointer: coarse) {
.dim-flyout { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.dim-flyout, .dim-flyout-item, .dim-more { transition: none; }
}
/* =====================================================================
The reporting-window bar (2026-08-28)
=====================================================================
Replaced the plain "Monthly" dropdown. Two problems it had: the span
name never said WHICH month you were looking at, and the window could
only ever end today -- "how did last month compare" was unanswerable
except through a card's own vs-prior delta. Arrows step a whole span at
a time; the dates in the middle are the dropdown's trigger, so picking
a span is still one click.
The arrows sit OUTSIDE the label rather than as a second menu, so
stepping costs one click and never hides where you are. */
.period-bar { gap: 2px; }
.period-step {
flex: none; width: 26px; height: 26px; padding: 0;
display: flex; align-items: center; justify-content: center;
border: none; background: transparent; border-radius: var(--radius-sm);
color: var(--muted); cursor: pointer;
transition: background .14s var(--ease), color .14s var(--ease);
}
.period-step svg { width: 15px; height: 15px; }
.period-step:hover:not(:disabled) { background: rgba(17,17,17,.06); color: var(--ink); }
.period-step:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
/* Disabled rather than hidden at the current window: a control that
vanishes leaves the row jumping by 26px every time you reach the
present, and a greyed arrow says "this is the edge" where a missing one
says nothing. */
.period-step:disabled { opacity: .28; cursor: default; }
/* Tabular figures so the dates don't reflow the bar as the window steps --
"Jul 30 – Aug 28" and "Jul 1 – Jul 30" must occupy the same width, or
the arrows shift under the cursor between clicks. */
.period-bar .dd-trigger-label { font-variant-numeric: tabular-nums; }
.topbar.hero-bg .period-step { color: rgba(255,255,255,.75); }
.topbar.hero-bg .period-step:hover:not(:disabled) { background: rgba(255,255,255,.12); color: #fff; }
@media (prefers-reduced-motion: reduce) { .period-step { transition: none; } }
/* The window picker panel: presets on top, two real date fields under them
("tienes que seleccionar manualmente la fecha"). Portaled onto and
clamped to the viewport's right edge, since this control sits at the far
right of the topbar. */
.period-trigger {
display: flex; align-items: center; gap: 6px; min-width: 0;
border: none; background: transparent; color: rgba(255,255,255,.62);
font: inherit; font-weight: 500; font-size: 13.5px;
padding: 9px 4px 9px 6px; border-radius: var(--radius-sm); cursor: pointer; outline: none;
}
.topbar .period-trigger { color: var(--muted); }
.topbar.hero-bg .period-trigger { color: rgba(255,255,255,.92); }
.period-trigger:hover { color: var(--ink); }
.topbar.hero-bg .period-trigger:hover { color: #fff; }
.period-trigger:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.period-trigger-label { font-variant-numeric: tabular-nums; white-space: nowrap; }
.period-trigger[aria-expanded="true"] .dd-trigger-chevron { transform: rotate(180deg); }
.period-panel {
position: fixed; z-index: 1000; display: none;
width: 452px; padding: 0; overflow: hidden;
background: var(--surface-white); border: 1px solid var(--border);
border-radius: 0;
box-shadow: 0 6px 16px -6px rgba(17,17,17,.22);
}
.period-panel.open { display: block; }
.period-preset {
padding: 7px 4px; border: 1px solid var(--border); border-radius: 5px;
background: var(--surface-white); color: var(--text-dim);
font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.period-preset:hover { background: var(--surface); color: var(--ink); }
.period-preset.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.period-preset:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .period-preset { transition: none; } }
/* ---- window picker: shortcuts beside a range calendar ---------------- */
/* Two columns, because the two ways of answering "which window" are not
the same size of decision: a shortcut is one click and covers the common
case, the calendar is for the specific range. Stacking them made the
panel tall and made the calendar look like an afterthought. */
.period-body { display: grid; grid-template-columns: 138px 1fr; }
.period-shortcuts {
display: flex; flex-direction: column; gap: 2px;
padding: 10px; border-right: 1px solid var(--border); background: var(--surface);
}
.period-preset {
padding: 8px 10px; border: none; border-radius: 0; background: transparent;
color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 600;
text-align: left; cursor: pointer; white-space: nowrap;
transition: background .12s var(--ease), color .12s var(--ease);
}
.period-preset:hover { background: rgba(17,17,17,.06); color: var(--ink); }
.period-preset.active { background: var(--ink); color: #fff; }
.period-preset:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.period-cal { padding: 10px 12px 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--ink); }
.cal-nav {
width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
border: none; background: transparent; border-radius: 0; color: var(--muted); cursor: pointer;
transition: background .12s var(--ease), color .12s var(--ease);
}
.cal-nav svg { width: 14px; height: 14px; }
.cal-nav:hover:not(:disabled) { background: rgba(17,17,17,.06); color: var(--ink); }
.cal-nav:disabled { opacity: .28; cursor: default; }
.cal-nav:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow span {
text-align: center; font-family: var(--font-sans); font-size: 10px; font-weight: 700;
letter-spacing: .04em; color: var(--muted); padding-bottom: 4px;
}
.cal-grid { gap: 1px 0; }
.cal-pad { display: block; }
.cal-day {
height: 30px; border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 500; color: var(--text-dim);
font-variant-numeric: tabular-nums;
/* Square, and edge-to-edge within its cell, so a selected span reads as
one continuous bar across the week instead of a row of separate pills. */
border-radius: 0;
transition: background .1s var(--ease), color .1s var(--ease);
}
.cal-day:hover:not(:disabled) { background: rgba(17,17,17,.07); color: var(--ink); }
.cal-day.in-range { background: var(--surface); color: var(--ink); }
.cal-day.is-edge { background: var(--ink); color: #fff; font-weight: 700; }
/* Today is marked even when it is outside the window, so the calendar
always says where "now" is relative to what you are looking at. */
.cal-day.is-today:not(.is-edge) { box-shadow: inset 0 0 0 1px var(--border); }
.cal-day.is-future { opacity: .25; cursor: default; }
.cal-day:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.period-foot {
padding: 9px 12px; border-top: 1px solid var(--border); background: var(--surface-white);
font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.period-hint.picking { color: var(--brand-red); }
/* The flyout names its own dimension, which is what tells you what you are
looking at in the collapsed icon rail, where the row's label is hidden. */
.dim-flyout-head {
padding: 6px 10px 8px; margin-bottom: 3px;
border-bottom: 1px solid rgba(255,255,255,.08);
font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: rgba(255,255,255,.45);
}
@media (prefers-reduced-motion: reduce) { .period-preset, .cal-day, .cal-nav { transition: none; } }
/* The basemap is OpenStreetMap desaturated to grey here rather than a
ready-made grey tile service -- see gps.js for the two providers that
failed first (CARTO now needs a key; Esri's grey canvas has no tiles
past zoom 16 at this fleet's coordinates).
Scoped to .leaflet-tile-pane, NOT the map container: markers, popups and
the vehicle pills live in their own panes and must keep their colour --
a stopped unit and a speeding one are told apart by it. */
.leaflet-tile-pane { filter: grayscale(1) brightness(1.06) contrast(.92); }
@media (prefers-reduced-motion: reduce) { .leaflet-tile-pane { filter: grayscale(1); } }
/* Marketing's scope line, standing in for the private From/To fields it
used to carry (see marketing.js). States which window the chart is
drawing and points at the one control that changes it. */
.revenue-scope { margin: 0; font-size: 12.5px; color: var(--muted); }
.revenue-scope b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* The Daily/Cumulated switch and the store tabs were the last rounded
controls on this page; squared to match every other control in the app. */
.tabbar, .tabbar button { border-radius: 0; }
.store-tab { border-radius: 0; }
/* Occupancy legend -- a sequential ramp is unreadable without one. */
.occ-legend { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 11px; color: var(--muted); font-family: var(--font-sans); font-weight: 600; }
.occ-legend-swatches { display: flex; }
.occ-legend-swatches i { width: 26px; height: 10px; display: block; border: 1px solid var(--border); border-right: none; }
.occ-legend-swatches i:last-child { border-right: 1px solid var(--border); }
/* A stale-extract warning, not an error: the number isn't wrong, it just
stops earlier than the window asked for. Warning tone, and it removes
itself when the data catches up (:empty / [hidden]). */
.revenue-stale {
margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--warn);
}
.revenue-stale[hidden] { display: none; }
/* Neutral, not warning: nothing is wrong, the chart is explaining which
window it could actually superimpose. */
.revenue-wrap-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.revenue-wrap-note[hidden] { display: none; }
/* Cross-check: the count beside a section heading. Inherits the heading's
own weight but sits in muted ink -- it is scale, not the subject. */
.cc-count {
font-size: 14px; font-weight: 700; color: var(--muted);
font-variant-numeric: tabular-nums; margin-left: 2px;
}
/* Rows drill through to the vehicle, so they need to look like it. */
#pageMount .fleet-table tr[data-asset] { cursor: pointer; }