/* The Fleet page (admin-fleet.js). Linked after every other admin stylesheet and scoped to #fleetView, so the
   cascade traps of the older sheets (app-labels, mobile-enhancements…) cannot undo it. Logical properties keep
   Arabic and English mirrored. The car rows and the type header respond to the width of the cars pane
   (container queries), not the window: at 1280px the pane is only ~650px wide beside the sidebar and the types.
   The page itself is a container too (fleetpage): what is too narrow for both lists side by side is decided by the
   page's own width, not the window's, because the sidebar keeps 200px of a tablet window. */
#fleetView {
  container:fleetpage / inline-size;
  --fleet-edge:#e7e9ee;
  --fleet-ok:#15803d; --fleet-ok-soft:#e3f5e9;
  --fleet-rented:var(--blue,#0057ff); --fleet-rented-ink:var(--blue-dark,#073fc4); --fleet-rented-soft:var(--blue-soft,#dce9ff);
  --fleet-late:#b22d3b; --fleet-late-soft:#fff1f0;
  --fleet-fix:#d99a1e; --fleet-fix-ink:#765000; --fleet-fix-soft:#fff4d6;
  --fleet-off:#8a929c; --fleet-off-ink:#56606b; --fleet-off-soft:#eceef1;
  --fleet-row:84px 108px minmax(64px,1fr) 84px minmax(140px,1.6fr) 44px; /* the last track is the 44px calendar link; action-icons.css forces that minimum */
}
#fleetView .fleet-head { display:flex; align-items:flex-end; gap:16px; margin-bottom:16px; }
#fleetView .fleet-head > div { flex:1; min-width:0; }
#fleetView .fleet-eyebrow { margin:0; color:var(--blue); font-weight:700; font-size:13px; }
#fleetView .fleet-head h2 { margin:0; font-size:28px; line-height:1.3; }
#fleetView .fleet-meta { margin:2px 0 0; color:var(--muted); font-size:14px; }
#fleetView .fleet-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
#fleetView .fleet-pill { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--fleet-edge); background:#fff; color:var(--ink); font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; }
#fleetView .fleet-pill b { font-weight:800; font-variant-numeric:tabular-nums; }
#fleetView .fleet-pill:hover { border-color:var(--card-hover-line,#c5d4f7); }
#fleetView .fleet-pill[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
#fleetView .fleet-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; background:var(--fleet-off); }
#fleetView .fleet-dot.is-available { background:var(--fleet-ok); }
#fleetView .fleet-dot.is-rented { background:var(--fleet-rented); }
#fleetView .fleet-dot.is-overdue { background:var(--fleet-late); }
#fleetView .fleet-dot.is-maintenance { background:var(--fleet-fix); }
#fleetView .fleet-filters { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin-bottom:18px; }
#fleetView .fleet-search { flex:1 1 260px; min-width:0; }
/* The browser's own search field is square with a 2px inset border; it is dressed like the class select beside it. */
#fleetView .fleet-search input { box-sizing:border-box; width:100%; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#fff; font:inherit; font-size:15px; }
#fleetView .fleet-search input:focus-visible { outline:3px solid #4f7cff; outline-offset:3px; border-color:var(--blue); }
#fleetView .fleet-panes { display:grid; grid-template-columns:minmax(262.5px,315px) minmax(0,1fr); gap:18px; align-items:start; }
#fleetView :is(.fleet-types,.fleet-cars) { min-width:0; background:#fff; border:1px solid var(--fleet-edge); border-radius:22px; box-shadow:0 12px 32px rgba(15,33,61,.06); }
#fleetView .fleet-cars { container:fleetcars / inline-size; }
/* the site header is 72px and sticky; the types list stays in view while a long type is scrolled */
#fleetView .fleet-types { padding:8px; position:sticky; top:88px; max-height:calc(100vh - 104px); overflow:auto; }
#fleetView .fleet-type { position:relative; display:grid; grid-template-columns:83.2px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px; border-radius:16px; color:inherit; text-decoration:none; }
#fleetView .fleet-type + .fleet-type { margin-top:2px; }
#fleetView .fleet-type:hover { background:var(--cloud); }
#fleetView .fleet-type[aria-current="page"] { background:var(--fleet-rented-soft); }
#fleetView .fleet-type[aria-current="page"]::before { content:""; position:absolute; inset-inline-start:0; top:12px; bottom:12px; width:4px; border-radius:4px; background:var(--blue); }
#fleetView .fleet-type.is-all { margin-bottom:6px; }
#fleetView .fleet-type.is-inactive:not([aria-current]) { opacity:.62; }
#fleetView .fleet-type img { display:block; width:83.2px; height:52px; object-fit:cover; object-position:center; border-radius:8px; }
#fleetView .fleet-type-icon { width:64px; height:40px; }
#fleetView .fleet-type-icon { display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--cloud); color:var(--muted); }
#fleetView .fleet-type-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; }
#fleetView .fleet-type-text { display:grid; gap:1px; min-width:0; }
/* A type is named with its model year, and the year comes last: on one clipped line it was the part that got lost. Two lines,
   then an ellipsis (the full label is also the entry's title). */
#fleetView .fleet-type-text b { font-size:13px; font-weight:800; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; }
#fleetView .fleet-type-text small { color:var(--muted); font-size:13px; }
#fleetView .fleet-type-text .fleet-type-attention { color:var(--ink); font-weight:600; }
#fleetView .fleet-count { min-width:34px; padding:3px 8px; border-radius:10px; background:var(--cloud); text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
#fleetView .fleet-type[aria-current="page"] .fleet-count { background:var(--blue); color:#fff; }
#fleetView .fleet-bar { display:flex; height:5px; margin-top:6px; border-radius:5px; overflow:hidden; background:var(--cloud); }
#fleetView .fleet-bar.is-wide { flex:1; height:8px; margin:0; min-width:80px; }
#fleetView .fleet-seg { display:block; min-width:3px; }
#fleetView .fleet-seg.is-available { background:var(--fleet-ok); }
#fleetView .fleet-seg.is-rented { background:var(--fleet-rented); }
#fleetView .fleet-seg.is-overdue { background:var(--fleet-late); }
#fleetView .fleet-seg.is-maintenance { background:var(--fleet-fix); }
#fleetView .fleet-seg.is-offline { background:var(--fleet-off); }
#fleetView .fleet-hero { display:grid; grid-template-columns:240px minmax(0,1fr) auto; gap:20px; align-items:center; padding:20px; border-bottom:1px solid var(--fleet-edge); }
#fleetView .fleet-hero-photo { height:116px; border-radius:18px; overflow:hidden; background:radial-gradient(120% 90% at 50% 70%,#fff 0%,#eef2f8 70%); display:flex; align-items:center; justify-content:center; }
#fleetView .fleet-hero-photo img { display:block; width:100%; height:100%; max-width:100%; max-height:none; object-fit:cover; object-position:center; }
#fleetView .fleet-hero h3 { margin:0 0 6px; font-size:24px; line-height:1.3; display:flex; flex-wrap:wrap; align-items:center; gap:10px; overflow-wrap:anywhere; }
#fleetView .fleet-state { font:700 12px/1.6 var(--body); border-radius:8px; padding:2px 9px; }
#fleetView .fleet-state.is-active { background:var(--fleet-ok-soft); color:var(--fleet-ok); }
#fleetView .fleet-state.is-inactive { background:var(--fleet-off-soft); color:var(--fleet-off-ink); }
#fleetView .fleet-specs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
#fleetView .fleet-specs span { background:var(--cloud); border-radius:9px; padding:2px 9px; font-size:13px; }
#fleetView .fleet-price { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; color:var(--muted); }
#fleetView .fleet-price b { color:var(--ink); font-size:22px; font-weight:800; direction:ltr; unicode-bidi:isolate; }
#fleetView .fleet-hero-actions { display:grid; grid-template-columns:repeat(2,auto) 44px; gap:8px; }
#fleetView .fleet-hero-actions .primary-action { grid-column:1 / -1; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; color:#fff; text-decoration:none; }
#fleetView .fleet-action { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-weight:700; text-decoration:none; cursor:pointer; }
/* apple-buttons.css has a ":root :is(…):not([data-preserve-button-style])" rule that out-ranks any class selector (the same trap
   admin-calendar.css documents), which left the delete control grey-on-transparent; an id in the selector restores the
   warning colours. */
#fleetView .fleet-hero-actions .danger-action { min-height:44px; padding:0; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#b42318; background:#fff1f0; border:1px solid #f4c7c3; }
#fleetView .fleet-hero-actions .danger-action:hover { background:#ffe4e1; border-color:#eba9a3; }
#fleetView .fleet-back { display:none; grid-column:1 / -1; }
#fleetView .fleet-all-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; padding:18px 20px; border-bottom:1px solid var(--fleet-edge); }
#fleetView .fleet-all-head h3 { margin:0; font-size:22px; }
#fleetView .fleet-all-head small { color:var(--muted); font-size:14px; }
#fleetView .fleet-summary { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:14px 20px; border-bottom:1px solid var(--fleet-edge); }
#fleetView .fleet-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; font-size:14px; }
#fleetView .fleet-legend span { display:inline-flex; align-items:center; gap:6px; }
#fleetView .fleet-list { padding:12px 14px 16px; }
#fleetView .fleet-list-head { display:grid; grid-template-columns:var(--fleet-row); gap:10px; padding:0 15px 6px; color:var(--muted); font-size:13px; font-weight:700; }
#fleetView .fleet-cars-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
#fleetView .fleet-car { position:relative; display:grid; grid-template-columns:var(--fleet-row); grid-template-areas:"code plate color year status cal"; gap:10px; align-items:center; padding:12px 14px; border:1px solid var(--fleet-edge); border-radius:16px; background:#fff; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }

#fleetView .fleet-car:hover { border-color:var(--card-hover-line,#c5d4f7); box-shadow:var(--card-hover-shadow,0 12px 32px rgba(15,33,61,.08)); transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce) { #fleetView .fleet-car, #fleetView .fleet-car:hover { transition:none; transform:none; } }
#fleetView .fleet-car-type { grid-area:type; display:flex; align-items:center; gap:8px; min-width:0; }
#fleetView .fleet-car-link { grid-area:code; color:inherit; text-decoration:none; }
#fleetView .fleet-plate { grid-area:plate; }
#fleetView .fleet-color { grid-area:color; }
#fleetView .fleet-year { grid-area:year; }
#fleetView .fleet-status { grid-area:status; }
#fleetView .fleet-calendar { grid-area:cal; }
/* the whole card opens the car; the calendar link sits above that cover */
#fleetView .fleet-car-link::after { content:""; position:absolute; inset:0; border-radius:16px; }
#fleetView .fleet-car-link:focus-visible { outline:0; }
#fleetView .fleet-car:has(.fleet-car-link:focus-visible) { outline:3px solid #4f7cff; outline-offset:2px; }
#fleetView .fleet-code { font-weight:800; font-size:15px; letter-spacing:.3px; }
#fleetView .fleet-plate { display:inline-flex; justify-self:start; border:1.5px solid var(--ink); border-radius:7px; padding:1px 8px; background:#fff; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#fleetView .fleet-plate.is-commercial { border-color:#1b6b3e; background:#e9f6ee; color:#12472a; }
#fleetView .fleet-color { display:inline-flex; align-items:center; gap:7px; min-width:0; overflow-wrap:anywhere; }
#fleetView .fleet-swatch { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex:none; }
#fleetView .fleet-year { display:grid; }
#fleetView :is(.fleet-year,.fleet-status) small { color:var(--muted); font-size:13px; }
#fleetView .fleet-status { display:grid; justify-items:start; gap:3px; min-width:0; }
#fleetView .fleet-chip { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:2px 11px; font-weight:700; font-size:13px; }
#fleetView .fleet-chip.is-available { background:var(--fleet-ok-soft); color:var(--fleet-ok); }
#fleetView .fleet-chip.is-rented { background:var(--fleet-rented-soft); color:var(--fleet-rented-ink); }
#fleetView .fleet-chip.is-overdue { background:var(--fleet-late-soft); color:var(--fleet-late); }
#fleetView .fleet-chip.is-maintenance { background:var(--fleet-fix-soft); color:var(--fleet-fix-ink); }
#fleetView .fleet-chip.is-offline { background:var(--fleet-off-soft); color:var(--fleet-off-ink); }
#fleetView .fleet-status .fleet-warn { color:var(--fleet-fix-ink); background:var(--fleet-fix-soft); border-radius:8px; padding:1px 8px; font-weight:700; }
#fleetView .fleet-status .fleet-warn.is-expired { color:var(--fleet-late); background:var(--fleet-late-soft); }
#fleetView .fleet-calendar { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--cloud); color:var(--muted); }
#fleetView .fleet-calendar:hover { color:var(--blue); }
#fleetView .fleet-car-type img { width:48px; height:30px; object-fit:contain; flex:none; }
#fleetView .fleet-car-type span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; font-weight:700; }
#fleetView .fleet-empty { display:grid; justify-items:center; gap:12px; padding:40px 20px; text-align:center; color:var(--muted); }
#fleetView .fleet-empty p { margin:0; font-size:16px; }
#fleetView .fleet-empty .primary-action { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:#fff; text-decoration:none; }
/* The cars pane narrower than the row's six columns: the header goes under the photo, the rows stack. A row needs 604px
   (524px of columns + 5 x 10px gaps + 28px padding + 2px border) inside the list's 14px side padding, so a pane of at
   least 632px; the rows stack up to 640px to leave a margin. */
@container fleetcars (max-width: 900px) {
  #fleetView .fleet-hero { grid-template-columns:168px minmax(0,1fr); }
  #fleetView .fleet-hero-actions { grid-column:1 / -1; grid-template-columns:auto auto auto 44px; justify-content:start; }
  #fleetView .fleet-hero-actions .primary-action { grid-column:auto; }
}
@container fleetcars (max-width: 640px) {
  #fleetView .fleet-list-head { display:none; }
  #fleetView .fleet-list { padding:10px; }
  #fleetView .fleet-car { grid-template-columns:auto minmax(0,1fr) 44px; grid-template-areas:"code plate cal" "color year cal" "status status status"; gap:6px 10px; }
  #fleetView .fleet-year { display:flex; align-items:baseline; gap:6px; }
  #fleetView .fleet-calendar { align-self:start; }
}
@container fleetcars (max-width: 520px) {
  #fleetView .fleet-hero { grid-template-columns:115.2px minmax(0,1fr); gap:12px; padding:14px; }
  #fleetView .fleet-hero-photo { height:64px; border-radius:14px; }
  #fleetView .fleet-hero h3 { font-size:19px; }
  #fleetView .fleet-price b { font-size:18px; }
  #fleetView .fleet-hero-actions { grid-template-columns:1fr 1fr 44px; }
  #fleetView .fleet-hero-actions .primary-action { grid-column:1 / -1; }
  #fleetView .fleet-all-head, #fleetView .fleet-summary { padding:12px 14px; }
}
/* Two steps, whatever the window: the types, then one type's cars (data-step on #fleetPanes). "Room for both" is the
   types list (300px, 250px at the least) + the 18px gap + a cars pane of about 412px at the switch, so a page narrower
   than 730px steps. A 900px window still shows the 200px sidebar and lands here; a phone always does. */
@container fleetpage (max-width: 729px) {
  #fleetView .fleet-pills { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  #fleetView .fleet-pill { flex:none; min-height:44px; } /* the id selector out-ranks the shared 44px button rule */
  #fleetView .fleet-panes { grid-template-columns:minmax(0,1fr); }
  #fleetView .fleet-panes[data-step="types"] .fleet-cars, #fleetView .fleet-panes[data-step="cars"] .fleet-types { display:none; }
  #fleetView .fleet-types { position:static; max-height:none; overflow:visible; }
  #fleetView .fleet-back { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--blue); font-weight:700; text-decoration:none; }
  #fleetView .fleet-back::before { content:"›"; font-size:20px; line-height:1; }
  html[dir="ltr"] #fleetView .fleet-back::before { content:"‹"; }
}
/* Phone screens: a smaller title (the layout above follows the page's width, this follows the screen's) */
@media (max-width:760px) {
  #fleetView .fleet-head h2 { font-size:24px; }
}

/* All-car cards keep every detail after the photo in either reading direction. */
#fleetView .fleet-list.has-type .fleet-list-head { display:none; }
#fleetView .fleet-list.has-type .fleet-car { grid-template-columns:100.8px minmax(0,1fr) minmax(0,1fr) 88px; grid-template-areas:"photo type type cal" "photo code plate status" "photo color year status"; gap:8px 12px; }
#fleetView .fleet-list.has-type .fleet-car-type { display:contents; }
#fleetView .fleet-list.has-type .fleet-car-type img { grid-area:photo; align-self:start; width:100.8px; height:63px; object-fit:cover; object-position:center; border-radius:8px; }
#fleetView .fleet-list.has-type .fleet-car-type > span { grid-area:type; min-width:0; }
#fleetView .fleet-list.has-type .fleet-calendar { align-self:start; justify-self:center; }
#fleetView .fleet-list.has-type .fleet-status { align-self:start; justify-items:center; text-align:center; overflow-wrap:anywhere; }
#fleetView .fleet-list.has-type .fleet-year { display:flex; flex-wrap:wrap; gap:6px; }
@container fleetcars (max-width:380px) {
  #fleetView .fleet-list.has-type .fleet-car { grid-template-columns:100.8px minmax(0,1fr) 80px; grid-template-areas:"photo type cal" "photo code status" "photo plate status" "photo color status" "photo year status"; gap:8px; padding:12px; }
}