/*
  Fleet pages — vehicles, vehicle detail, daily checks, defects, fuel,
  accidents, deep cleans, check templates, renewal reminders.

  All classes are `.fleet-*` prefixed so nothing leaks globally.
  Colours come only from theme tokens (tokens.css) — no hardcoded hex.
  Layout primitives (card, grid-*, table.data, badges, form-grid) live in
  base.css / components.css and are reused as-is.
*/

/* ─── Shared bits ─────────────────────────────────────────────── */

.fleet-card { margin-bottom: var(--sp-5); }
.fleet-mb   { margin-bottom: var(--sp-5); }
.fleet-mt   { margin-top: var(--sp-5); }
.fleet-mt-sm { margin-top: var(--sp-2); }

.fleet-mono { font-family: var(--f-mono); }

/* Form-width cards (max-width was inline per form) */
.fleet-card-sm { max-width: 680px; }
.fleet-card-md { max-width: 760px; }
.fleet-card-lg { max-width: 880px; }
.fleet-card-xl { max-width: 980px; }

/* Card body with no padding (table sits flush inside the card) */
.fleet-flush { padding: 0; }
.fleet-flush > table.data { border-radius: 0; }

/* Tinted icon chips (matches .kpi.tone-* vocabulary in components.css) */
.fleet-icon-blue    { background: var(--tint-blue);    color: var(--brand-600); }
.fleet-icon-amber   { background: var(--tint-amber);   color: var(--accent-amber); }
.fleet-icon-rose    { background: var(--tint-rose);    color: var(--accent-rose); }
.fleet-icon-cyan    { background: var(--tint-cyan);    color: var(--accent-cyan); }
.fleet-icon-emerald { background: var(--tint-emerald); color: var(--accent-emerald); }

/* Ghost button tinted rose (destructive-ish actions: accident, remove) */
.fleet-btn-rose { color: var(--accent-rose); }

/* Push an element to the right inside a flex header/row */
.fleet-push { margin-left: auto; }

/* Badge sitting inside a card-header after the h2 */
.fleet-head-badge { margin-left: var(--sp-2); }

/* Flex rows / toolbars / form action rows */
.fleet-row     { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.fleet-toolbar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.fleet-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-4); }

/* Muted inline empty message inside a flush card body */
.fleet-empty-inline { padding: var(--sp-5); color: var(--fg-muted); font-size: 13px; }

/* Small secondary text inside table cells */
.fleet-cell-sub { font-size: 11px; }
.fleet-cell-sm  { font-size: 12px; }

/* Checkbox rendered as a normal inline label (not the uppercase .field label) */
.fleet-checkbox {
  display: inline-flex; gap: var(--sp-2); align-items: center;
  text-transform: none; letter-spacing: 0; font-size: 13px;
}
.fleet-field-end { display: flex; align-items: flex-end; }

/* Registration inputs — plates read better in mono, stored uppercase */
.fleet-reg-input { font-family: var(--f-mono); text-transform: uppercase; }

/* Inline forms inside table cells */
.fleet-inline-form { display: inline; }

/* "Mark fixed" disclosure inside the defects table */
.fleet-details { display: inline-block; }
.fleet-details > summary { cursor: pointer; font-size: 12px; color: var(--brand-600); }
.fleet-fix-form { margin-top: 6px; display: flex; gap: 4px; }
.fleet-fix-input { font-size: 12px; padding: 4px 6px; width: 200px; }

/* ─── Vehicle detail: hero ────────────────────────────────────── */

.fleet-hero {
  position: relative; overflow: hidden;
  border-radius: var(--card-radius); border: 1px solid var(--border);
  padding: 28px 32px; margin-bottom: var(--sp-5);
  background: var(--card-bg);
}
.fleet-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-500) 18%, transparent), transparent 55%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent-violet) 14%, transparent), transparent 55%);
}
.fleet-hero-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: relative; }
.fleet-hero-main  { flex: 1; min-width: 240px; }
.fleet-hero-sub   { margin-top: 4px; }
.fleet-hero-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

.fleet-reg { font-family: var(--f-mono); font-size: 28px; font-weight: 700; letter-spacing: 0.04em; }
.fleet-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2); }

/* ─── Vehicle detail: due-date tiles ──────────────────────────── */

.fleet-due-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card-bg);
}
.fleet-due-card .due-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-subtle); font-weight: 600;
}
.fleet-due-card .due-val  { font-weight: 600; }
.fleet-due-card .due-sub  { font-size: 11px; }
.fleet-due-card .due-mono { font-size: 11px; font-family: var(--f-mono); }
.fleet-due-card .due-dvla { font-size: 13px; }
.fleet-due-card.is-expired  { border-color: color-mix(in srgb, var(--accent-rose) 40%, var(--border)); }
.fleet-due-card.is-due-soon { border-color: color-mix(in srgb, var(--accent-amber) 40%, var(--border)); }

/* ─── Vehicle detail: kit card ────────────────────────────────── */

.fleet-kit-body { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fleet-kit-text { flex: 1; min-width: 220px; }

/* ─── Check detail: small stat cards ──────────────────────────── */

.fleet-stat { padding: 14px; }

/* ─── Check templates list ────────────────────────────────────── */

.fleet-tpl-card    { padding: var(--sp-5); }
.fleet-tpl-name    { flex: 1; font-size: 14px; }
.fleet-tpl-desc    { margin-top: 6px; font-size: 12px; }
.fleet-tpl-meta    { font-size: 12px; margin-top: var(--sp-2); }
.fleet-tpl-actions { margin-top: var(--sp-3); }

/* ─── Report picker (quick-report vehicle grid) ───────────────── */

.fleet-picker-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.fleet-picker-card { display: block; padding: 16px 18px; text-decoration: none; color: inherit; }
.fleet-picker-card:hover { border-color: var(--border-strong); }
.fleet-picker-head   { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.fleet-picker-reg    { font-family: var(--f-mono); font-size: 1.1rem; font-weight: 700; }
.fleet-picker-sub    { margin-top: 4px; }
.fleet-picker-badges { margin-top: 10px; }

/* ─── Daily check form ────────────────────────────────────────── */

.fleet-intro { margin-bottom: var(--sp-5); }

.fleet-check-category {
  margin: var(--sp-6) 0 10px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-subtle);
}
.fleet-check-items {
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.fleet-check-item {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.fleet-check-item:last-child { border-bottom: 0; }

.fleet-check-label { flex: 1; min-width: 240px; }
.fleet-check-label strong { font-size: 13px; }
.fleet-check-desc { font-size: 11px; margin-top: 2px; }
.fleet-req { color: var(--accent-rose); }

.fleet-radio-group { display: flex; gap: 6px; flex-wrap: wrap; }
.fleet-radio {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.fleet-radio.is-fail { color: var(--accent-rose); }

.fleet-input-reading { width: 160px; }
.fleet-input-note    { width: 200px; font-size: 12px; }
.fleet-input-grow    { flex: 1; }

/* ─── Reminders ───────────────────────────────────────────────── */

.fleet-recipients { font-size: 12px; margin-top: var(--sp-2); }

/* ─── Responsive (breakpoints match base.css / components.css) ── */

@media (max-width: 760px) {
  .fleet-hero { padding: var(--sp-5) var(--sp-4); }
  .fleet-reg  { font-size: 22px; }
}

@media (max-width: 640px) {
  /* Daily-check rows stack: label full width, inputs stretch */
  .fleet-check-label { flex: 1 1 100%; min-width: 0; }
  .fleet-input-reading,
  .fleet-input-note { width: 100%; flex: 1 1 100%; }
  .fleet-input-grow { flex: 1 1 100%; }
  .fleet-radio-group { flex: 1 1 100%; }
}

@media (max-width: 560px) {
  .fleet-hero-main { min-width: 0; flex-basis: 100%; }
  .fleet-kit-text  { min-width: 0; flex-basis: 100%; }
  .fleet-fix-input { width: 100%; flex: 1; }
  .fleet-picker-grid { grid-template-columns: 1fr; }
  .fleet-due-card { padding: 10px 12px; }
}