/* fleetora — app layer on the Ownware UI kit (assets/ui/ownware-ui.css).
   Accent tokens + the few rules the kit does not already cover. Everything generic — tables, tabs,
   pills, KPIs, empty states, the rail — comes from the kit and is not restated here. */
:root{--accent:#0f766e;--accent-dark:#115e59;--accent-soft:#d7f2ee;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#5eead4;--accent-dark:#99f6e4;--accent-soft:#0d3b37;--on-accent:#062023;--accent-ink:var(--on-accent)}

/* ── deadline states. Semantic colour on the state, never on the chrome: a row is red because the
      thing is expired, not because it is a row. The muted pill is deliberate for "unknown" — an
      unknowable state must not look like a good one. */
.pill.bad{background:var(--badbg);color:var(--bad)}
.pill.warn{background:var(--warnbg);color:var(--warn)}
.pill.good{background:var(--okbg);color:var(--ok)}
.pill.muted{background:var(--chip);color:var(--sub)}

/* ── the hero list. A row that has just been dealt with fades back rather than vanishing: the
      operator should see what they did, in place, before the next reload reorders everything. */
[data-fleet-hero] tr.is-done td{opacity:.55;transition:opacity .35s ease}
[data-fleet-hero] td .sub{display:block;font-size:.76rem;color:var(--sub);margin-top:1px}
[data-fleet-hero] td form{margin:0}

/* ── odometer and interval figures line up as numbers, because they are compared down a column.
      Selectors are `.tbl table …` because the kit's contract is a .tbl WRAPPER around a bare
      <table>: putting the class on the table itself loses the kit's sort, filter and — the one
      that shows — the phone min-width that makes a wide table scroll instead of crushing. */
.tbl td.right,.tbl th.right{text-align:right;font-variant-numeric:tabular-nums}
.tbl .sub{display:block;font-size:.76rem;color:var(--sub);margin-top:1px}

/* ── the record page's inline "add" strips: a form that lives at the foot of a table should read
      as part of it, not as a second card stacked underneath. A GRID rather than a wrapping flex
      row, because flex-wrap leaves the last field stranded on its own line at the exact widths a
      rail creates — which is precisely where these forms live. */
.card > form.pad-sm{background:var(--chip);border-radius:0 0 var(--radius) var(--radius);
                    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
                    gap:10px 12px;align-items:end}
.card > form.pad-sm .field{margin:0;min-width:0}
.card > form.pad-sm .field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);font-weight:700}
.card > form.pad-sm > .btn{align-self:end;justify-self:start;white-space:nowrap}

/* A native date input reserves room for its own picker glyph and refuses to shrink; left alone it
   is what pushes a five-field row into an ugly wrap. */
input[type="date"],input[type="number"]{min-width:0}
.tbl input[type="date"]{max-width:165px}
/* the kit's 640px phone min-width is not enough for a row carrying two inputs and a button */
@media(max-width:700px){.tbl table{min-width:760px}}
.tbl input[type="number"]{max-width:110px}
.tbl td select{max-width:150px}
.tbl td input[type="text"],.tbl td input:not([type]){max-width:180px}
/* An in-cell action form stays on ONE line at desk width — the table scrolls inside its card
   below 700px, so there is no width at which wrapping is the better answer. nowrap also stops a
   date input being rendered 10px too narrow, which clips its own picker glyph ("08/22/202"). */
.tbl td form{display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-end;margin:0;align-items:center}

/* ── the record layout: the paper on the left, the rail on the right. minmax(0,1fr) rather than
      1fr so a wide table inside scrolls in its own box instead of stretching the whole page. */
.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media(max-width:980px){.grid-side{grid-template-columns:minmax(0,1fr)}}

/* ── two-column form grid, collapsing whole at phone width (the kit's minmax(0,1fr) rule) */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@media(max-width:720px){.grid2{grid-template-columns:minmax(0,1fr)}}

/* ── checkbox rows in settings: the label carries the sentence, so it must not be a narrow column */
.field label.check{display:flex;gap:8px;align-items:flex-start;font-weight:500;text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink)}
.field label.check input{width:auto;margin-top:3px;flex:none}

/* ── the kit draws a 96px sparkline pinned bottom-right inside the tile. A caption that runs the
      full width slides underneath it, so a tile that HAS a spark reserves the space. */
.kpi[data-spark] .d{padding-right:104px}

/* ── the standing note. The kit converts a neutral `.alert` under `.main` into a toast, which is
      right for a flash and wrong for a permanent statement of scope — so a note that must still be
      on the page in six months is not an alert at all. */
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--chip);
      border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;font-size:.9rem;color:var(--sub);line-height:1.55}
.note strong{color:var(--ink)}
.note.attn{border-left-color:var(--warn);background:var(--warnbg)}
.note.attn strong{color:var(--warn)}

/* ── the kit's .search padding loses to the base input rule's specificity */
.search input{padding-left:34px!important}

/* fix wave 2026-09-24: the sidebar is a flex column that scrolls; with a long nav the brand (overflow:hidden,
   so its min-height is 0) was shrunk to 0px and the business name vanished from the top of every page. */
.side .brand{flex-shrink:0} /* fix wave */