/* Navy and gold (2026-10-11): repaints the surfaces other stylesheets hard-code, on top of the tokens in
   app-theme.css. Loaded just before mobile-enhancements.css on every page. Paper (contracts, invoices, receipts,
   inspection sheets) is scoped back to white in the "paper" section. Sections are appended to as the audit finds
   leftovers; keep each rule in its section. */

/* Everything outside the "paper" and "status" sections is wrapped in @media screen: the theme is a screen design, and what
   the site prints (the confirmation page, the invoice and receipt pages around their paper) keeps its pre-theme colours.
   The "print" block in the paper section puts the pre-theme tokens back for app-theme.css's own rules. */
@media screen {
/* == base == */
/* Every rule here that colours generic elements ends its subject with :not(:is(.contract-sheet, .modern-invoice,
   .inspection-annex, .payment-receipt) *), so nothing in this file reaches inside paper (see "paper"). */
:root body { color: var(--ink); }
:root :is(.panel, .card, .screen-box, .operation-field-card, .settings-card--compact, .promotion-settings-form, .modal, dialog, .dialog, .selection-drawer, .reservation-context, .journey-panel):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) {
  background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--card-glow), 0 0 0 1px var(--line);
}
:root a:not(.primary-action):not([class*="button"]):not([class*="action"]):not([role="button"]):not(.skip-link):not(.payment-receipt-link):not(.reservation-open):not(.customer-phone-call):not(.location-map-open):not(.fleet-calendar):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--accent); }
:root .skip-link { background: var(--card); color: var(--ink); }
:root :is(small, .field-help, .field-card-hint, .muted, .eyebrow, .reservation-action-hint):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--muted); }
:root hr:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { border-color: var(--line); }
:root table:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--ink); }
:root th:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--muted); border-color: var(--line); }
:root td:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { border-color: var(--line); }

/* == buttons == */
:root :is(.primary-action, .primary-button, .auth-submit, .save-trip, .show-cars-button, .continue-button, form button[type="submit"]):not(.danger):not(.danger-action):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); border-radius: 999px; font-weight: 700;
}
:root :is(.primary-action, .primary-button, .auth-submit, .save-trip, .show-cars-button, .continue-button, form button[type="submit"]):not(.danger):not(.danger-action):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *):is(:hover, :focus-visible) {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);
}
:root :is(.secondary-action, .text-button, button.secondary):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; }
:root :is(.secondary-action, .text-button, button.secondary):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *):is(:hover, :focus-visible) { background: rgba(255,255,255,.08); }
:root :is(.danger, .danger-action):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--danger-ink); border-color: var(--red-line); }

/* == fields == */
:root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .fancy-select-trigger):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) {
  background-color: var(--field); color: var(--field-ink); border-color: var(--field-line);
}
:root :is(input, select, textarea):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *)::placeholder { color: #5e686b; }
:root :is(input, select, textarea, .fancy-select-trigger):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *):focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--control-focus); }
:root :is(label, legend):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--ink); }

/* == tabs-chips == */
/* Only real tabs and the two segmented switches that toggle a class on top of aria-selected. Not .view panels,
   listbox options, list items or status pills, which also carry .active / .is-active. */
:root :is([role="tab"][aria-selected="true"], [role="tab"][aria-pressed="true"], .auth-mode-switch > button.active, .reservation-tabs > button.active):not(.nav-item):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
:root [role="tab"]:not([aria-selected="true"]):not([aria-pressed="true"]):not(.nav-item):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* == headings == */
:root :is(h1, h2, h3, h4):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--ink); }
:root .operation-field-card > h2:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *)::before, :root .contract-workspace section:not(.contract-sheet) > h2:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *)::before { background: var(--accent); }

}

/* == paper == */
/* Paper (contracts, invoices, payment receipts, inspection sheets) keeps its own colours on screen and in print: it
   is read as a document lying on the navy page. Two things make that so. (1) The shared tokens are re-declared here
   with their pre-theme values, so every var() a paper stylesheet uses resolves exactly as before. (2) The rules
   above skip anything inside paper. The values are copied from app-theme.css at cb84af4. */
:root :is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) {
  --canvas: #ffffff;
  --surface-dark: #ffffff;
  --surface-raised: #f9f9fb;
  --line-dark: #d5d7dc;
  --on-dark: #17191c;
  --muted-dark: #626975;
  --accent: #0057ff;
  --accent-hover: #1f71ff;
  --ink: #1c2426;
  --muted: #5e686b;
  --slate: #5e686b;
  --line: #d5d7dc;
  --cloud: #f0f2f5;
  --card: #f0f2f5;
  --white: #fff;
  --blue: #0057ff;
  --blue-dark: #073fc4;
  --blue-soft: #dce9ff;
  --green: #0057ff;
  --red: #b22d3b;
  --amber: #9c690e;
  --red-soft: #fff1f0;
  --red-soft-hover: #ffe3e0;
  --red-line: #f4c7c3;
  --amber-ink: #765000;
  --amber-soft: #fff4d6;
  --card-hover-line: #c5d4f7;
  --card-hover-shadow: 0 12px 32px rgba(15,33,61,.08);
  --radius: 22px;
  --control-radius: 12px;
  --control-border: #868d97;
  --control-border-hover: #5f6670;
  --control-fill: #f9f9fb;
  --control-focus: #4f7cff80;
  --control-shadow: none;
  --action-shadow: none;
  --app-max-width: 1320px;
  /* Tokens the theme ADDED (absent from :root at cb84af4). Paper never used them before, but a rule that reaches paper
     through var() must not resolve them to navy, so each gets the closest pre-theme light value. */
  --canvas-deep: #ffffff;
  --card-raised: #f9f9fb;
  --card-glow: none;
  --on-accent: #fff;
  --field: #f9f9fb;
  --field-ink: #1c2426;
  --field-line: #868d97;
  --danger-ink: #b22d3b;
  --success: #0057ff;
  --info: #0057ff;
  --glow: 0 87 255;
  color-scheme: light;
}
:root body.contract-pdf-mode, :root body.contract-pdf-mode .contract-workspace { background: #fff; color: #1c2426; }
/* What the site prints keeps its pre-theme look: the page is not paper, but app-theme.css paints it from the same tokens, so in
   print the whole page gets the pre-theme token values the paper block above declares (a copy of that list: a rule cannot
   be both a media block and a selector of paper), and the theme rules themselves are screen-only (see the top of this file). */
@media print {
  :root html, :root body { background: #fff !important; } /* the gradient and the navy canvas never reach the page */
  :root .confirmation-logo-screen { display: none; } /* the printed confirmation keeps the original logo (its sibling, hidden on screen) */
  :root {
    --canvas: #ffffff;
    --surface-dark: #ffffff;
    --surface-raised: #f9f9fb;
    --line-dark: #d5d7dc;
    --on-dark: #17191c;
    --muted-dark: #626975;
    --accent: #0057ff;
    --accent-hover: #1f71ff;
    --ink: #1c2426;
    --muted: #5e686b;
    --slate: #5e686b;
    --line: #d5d7dc;
    --cloud: #f0f2f5;
    --card: #f0f2f5;
    --white: #fff;
    --blue: #0057ff;
    --blue-dark: #073fc4;
    --blue-soft: #dce9ff;
    --green: #0057ff;
    --red: #b22d3b;
    --amber: #9c690e;
    --red-soft: #fff1f0;
    --red-soft-hover: #ffe3e0;
    --red-line: #f4c7c3;
    --amber-ink: #765000;
    --amber-soft: #fff4d6;
    --card-hover-line: #c5d4f7;
    --card-hover-shadow: 0 12px 32px rgba(15,33,61,.08);
    --radius: 22px;
    --control-radius: 12px;
    --control-border: #868d97;
    --control-border-hover: #5f6670;
    --control-fill: #f9f9fb;
    --control-focus: #4f7cff80;
    --control-shadow: none;
    --action-shadow: none;
    --app-max-width: 1320px;
    /* Tokens the theme ADDED (absent from :root at cb84af4). Paper never used them before, but a rule that reaches paper
       through var() must not resolve them to navy, so each gets the closest pre-theme light value. */
    --canvas-deep: #ffffff;
    --card-raised: #f9f9fb;
    --card-glow: none;
    --on-accent: #fff;
    --field: #f9f9fb;
    --field-ink: #1c2426;
    --field-line: #868d97;
    --danger-ink: #b22d3b;
    --success: #0057ff;
    --info: #0057ff;
    --glow: 0 87 255;
    color-scheme: light;
  }
}

@media screen {
/* == public == */
/* Header, search form, fleet list, cards, booking-journey drawer and support strip of index.html. */
/* confirmation.html's header carries both logos: the light one on screen, the original (white wordmark would vanish on paper) in print */
:root .confirmation-logo-print { display: none; }
:root .site-header, :root .mobile-menu { background: rgba(8,26,63,.92); color: var(--ink); border-color: var(--line); backdrop-filter: blur(8px); }
:root :is(.site-header, .mobile-menu) :is(a, button, .menu-label) { color: var(--ink); }
:root .reservation-promotion { background: var(--card); border-color: var(--line); }
:root .page-breadcrumbs :is(a, span) { color: var(--muted); }
:root .page-breadcrumbs [aria-current] { color: var(--ink); }
:root main section > h2:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { position: relative; padding-bottom: 10px; }
:root main section > h2:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *)::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 48px; height: 3px; border-radius: 3px; background: var(--accent); }

/* search form: the "different drop-off" switch (#6f86b8 / #8fa3cc: switch edge and knob, no token sits between --line and --muted) and the contact buttons beside the photo */
:root .different-location-toggle .toggle-track { background: var(--card-raised); border-color: #6f86b8; box-shadow: none; }
:root .different-location-toggle .toggle-track i { background: #8fa3cc; box-shadow: none; }
:root .different-location-toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
:root .different-location-toggle input:checked + .toggle-track i { background: var(--on-accent); }
:root .reservation-contact-link, :root .reservation-contact-link.whatsapp { background: var(--card-raised); color: var(--ink); border-color: var(--line); }
:root .reservation-contact-link :is(span, bdi) { color: var(--ink); }
:root .reservation-contact-link svg { color: var(--accent); }
:root .reservation-contact-link.whatsapp svg { color: var(--success); }
:root .reservation-contact-link:hover { filter: none; border-color: var(--accent); }
:root .promotion-brand { background: rgba(8,26,63,.78); box-shadow: 0 5px 15px rgba(3,10,30,.35); }

/* fleet list: the section is the page itself, the cards are the raised surfaces */
:root .fleet-section { background: transparent; border: 0; }
:root #fleetHeading, :root .fleet-heading h2, :root #fleetResultSummary, :root #fleetResultSummary span, :root .currency-control, :root .currency-control span, :root .currency-control strong { color: var(--ink); }
/* Search, filter and sort boxes: LIGHT fields on navy (owner decision), shell and inner control as one box. The inner
   input/select/trigger get var(--field) from the base field rule; the shell, its captions and its icons are set here. */
:root :is(.reservation-input-shell, .filter-control, .sort-control):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--field); color: var(--field-ink); border-color: var(--field-line); }
:root :is(.reservation-input-shell, .filter-control, .sort-control):hover { border-color: var(--card-hover-line); }
/* app-theme.css restates the gold focus ring on the shell; the two rules above would out-rank it, so it is repeated last */
:root :is(.reservation-input-shell, .filter-control, .sort-control):focus-within:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { border-color: var(--blue); box-shadow: 0 0 0 3px var(--control-focus); }
/* The rounded shell owns focus; its borderless inner control must not draw a second square ring. */
:root :is(.reservation-input-shell, .filter-control, .sort-control) :is(input, select, textarea, .fancy-select-trigger):focus-visible:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { outline: 0; box-shadow: none; }
:root :is(.filter-control, .sort-control) > span { color: #5e686b; } /* dark muted caption, 5.5:1 on --field (no token: --muted is the light navy-page muted) */
:root :is(.reservation-input-shell, .filter-control, .sort-control) svg { stroke: var(--on-accent); }
:root :is(.reservation-input-shell, .filter-control, .sort-control) .fancy-select-chevron { color: var(--on-accent); } /* its path draws in currentColor, which fancy-select.css sets to the light --muted */

/* car cards: navy card, the photo sits in a rounded light panel (the photos have a studio grey backdrop; #eef1f6 matches it, no token) */
:root :is(.car-card, .fleet-card, .vehicle-card, .customer-reservation-card) { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--card-glow), 0 0 0 1px var(--line); }
:root .car-card:is(:hover, :focus-within) { border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow), 0 0 0 1px var(--card-hover-line); }
:root .car-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
:root :is(.car-card, .fleet-card, .vehicle-card) :is(img, .car-photo-frame) { background: #eef1f6; border-radius: 16px; }
:root .car-card .car-visual::after { display: none; }
/* Dusk scenes fill a consistent landscape frame without cropping the vehicle. */
:root .car-card .car-visual:has(img[src*="/cars/dusk/"]) { height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; }
:root img[src*="/cars/dusk/"] { background: #081a3f; }
:root .car-card .card-head h3 { color: var(--ink); }
:root .car-card .card-head p:last-child { background: var(--card-raised); color: var(--ink); border-color: var(--line); }
:root .car-card .feature { background: var(--card-raised); color: var(--ink); }
:root .car-card :is(.daily-rate, .price-value, .currency-symbol) { color: var(--ink); }
:root .car-card :is(.per-day, .total-rate) { color: var(--muted); }

/* Keep the daily rate above the total and action, with the full card width for its label. */
#carGrid .card-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
#carGrid .card-footer > div { display: contents; }
#carGrid .daily-rate { grid-column: 1 / -1; flex-wrap: wrap; margin: 0; }
#carGrid .per-day { white-space: nowrap; flex-shrink: 0; }
#carGrid .total-rate { grid-column: 1; margin: 0; align-self: center; }
#carGrid .select-button { grid-column: 2; grid-row: 2; }
:root .car-card .select-button { background: var(--accent); color: var(--on-accent); }
:root .car-card .select-button:hover { background: var(--accent-hover); }

/* booking-journey drawer */
:root .booking-journey { background: var(--card); border-color: var(--line); box-shadow: var(--card-glow); }
:root .booking-journey-where { color: var(--ink); }
:root .booking-journey-percent { color: var(--accent); }
:root .booking-journey-bar { background: var(--card-raised); }
:root .booking-journey .booking-journey-step { color: var(--muted); }
:root .booking-journey-step i { background: var(--card-raised); border-color: var(--line); color: var(--ink); }
:root .booking-journey li[data-state="done"] .booking-journey-step i { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root .booking-journey li[data-state="current"] .booking-journey-step i { background: var(--card-raised); border-color: var(--accent); color: var(--accent); }
:root .booking-journey button.booking-journey-step:hover { background: var(--card-raised); }

:root .booking-journey .booking-journey-toggle { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; box-shadow: none; }
/* the chosen car in the drawer: the photo's studio backdrop is light, so it gets its own light panel (no multiply on navy) */
:root .selection-drawer .drawer-car img { background: #eef1f6; border-radius: 16px; mix-blend-mode: normal; filter: none; }
:root .selection-drawer .drawer-car-visual::after { display: none; }

/* support strip. #support beats the base link-colour rule, which counts a dozen :not() terms. */
#support .support-actions a { color: var(--ink); border-color: var(--line); background: transparent; }
#support .support-actions a:first-child { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#support .support-actions a:first-child:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
#support .support-actions a span { color: inherit; }

/* the four booking screens of index.html (review, driver details, sign in, my reservations): sections shown in place of the
   page, once <dialog>s, so the dialog rules above never reached them (app-theme.css paints .trip-dialog white) */
:root .booking-screen { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--card-glow), 0 0 0 1px var(--line); }
/* the trail of levels and the pale hover tile app-theme/breadcrumbs.css give it */
:root :is(.dialog-head, .modal-head, .selection-drawer) .flow-trail button:hover { background: var(--card-raised); }
/* review: the car and trip are a raised card; the duration chip and the time pills read as gold on navy */
:root .review-vehicle { background: var(--card-raised); border-color: var(--line); }
:root .review-vehicle img, :root .customer-reservation-photo img { background: #eef1f6; border-radius: 12px; mix-blend-mode: normal; filter: none; } /* the photo's studio backdrop is light: it keeps a light panel, as on the car cards */
:root .customer-reservation-photo::after { display: none; }
:root .review-trip-summary-head > strong { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root .review-vehicle .time-pill { background: var(--card); }
/* driver details: the age note under the date of birth, and the add-driver button */
:root .driver-age-status { background: rgba(185,198,224,.14); color: var(--muted); }
:root .driver-age-status[data-status="adult"] { background: rgba(74,222,128,.14); color: var(--success); }
:root .driver-age-status[data-status="underage"] { background: rgba(255,122,122,.14); color: var(--danger-ink); border-color: var(--danger-ink); }
:root #additionalDrivers button { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); border-radius: 999px; }
:root #additionalDrivers button:is(:hover, :focus-visible) { background: rgba(255,255,255,.08); }
/* sign in: the hint and footnote were grey for a white page */
:root :is(.field-hint, .auth-footnote) { color: var(--muted); }
/* my reservations: the profile strip, the two tabs with their counters, and the booking cards (a step above the screen, with the trip points a step below) */
:root .customer-profile-initial { background: var(--accent); color: var(--on-accent); }
:root .customer-signout { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); border-radius: 999px; }
:root .customer-signout:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); }
:root .reservation-tabs b { background: rgba(255,255,255,.14); color: var(--ink); }
:root .account-dialog .reservation-tabs button[aria-selected="true"] b, :root .reservation-tabs button.active b { background: rgba(11,29,69,.16); color: var(--on-accent); animation: none; }
:root .booking-screen .customer-reservation-card { background: var(--card-raised); border-color: var(--line); }
:root .customer-reservation-point { background: var(--card); }
:root .account-reservations-message.error { color: var(--danger-ink); }
:root .account-empty-state { background: var(--card-raised); border-color: var(--line); color: var(--muted); }
/* error and validation text (the search form's trip error, the driver form's message, the per-field problem notes that
   form-problems.js adds here and in the admin's new-reservation form): the danger ink, #b42318 / --red read about 2.1:1 on navy */
:root .reservation-search-form .trip-search-error, :root .form-message:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *), :root .field-problem:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--danger-ink); }
/* the "no cars" block: also what shows while the fleet request is still out (the list is empty until it answers) */
:root .empty-state { background: var(--card); border-color: var(--line); color: var(--ink); }
:root .empty-state button { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; }
:root .empty-state button:hover { background: rgba(255,255,255,.08); }
/* == admin == */
/* Shell, overview, bookings list, calendar, fleet page, settings tables of admin.html. Status and stage colours keep
   their hues here (the "status" section re-tints them); only the text on them is made readable. */

/* the site header of signed-in staff pages (admin-site-header.js on admin, confirmation and contract pages): the navy bar of the
   public header, its icon buttons and name in white, the menu a raised navy card. #adminSiteMenu out-ranks the generic link colour. */
:root .admin-site-header { background: rgba(8,26,63,.92); color: var(--ink); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
:root .admin-site-header button { color: var(--ink); }
:root .admin-site-header button:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--card-raised); }
:root .admin-site-header nav { background: var(--card-raised); border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow); }
:root #adminSiteMenu a { color: var(--ink); }
:root #adminSiteMenu a:hover { background: #1b3f86; }
:root .admin-site-header :is(a, button):focus-visible { outline-color: var(--accent); }

/* shell: gold selected item, quiet hover; the count pill flips to navy on gold (admin.css restates the selected
   state as a blue gradient, hence the shorthand that also resets the image) */
:root .nav-item { color: var(--muted); border-radius: 12px; }
:root .nav-item:not(.active):hover { background: rgba(255,255,255,.06); color: var(--ink); }
:root .nav-item.active[aria-selected="true"]:not([data-preserve-button-style]) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* out-ranks apple-buttons.css, which paints every selected tab blue */
:root .nav-item.active b { background: var(--on-accent); color: var(--accent); }
:root .sidebar { border-color: var(--line); }
:root .admin-user > span { background: var(--card-raised); color: var(--accent); }
:root .side-bottom > a:hover, :root .side-bottom > button:hover { color: var(--ink); }
:root .admin-search { background: var(--field); color: var(--field-ink); border-color: var(--field-line); }

/* overview: the gold revenue card carries navy ink (app-theme.css gives it white), cards, empty states, meter */
:root .stat-grid article:first-child :is(p, span, b, strong, i) { color: var(--on-accent); }
:root :is(.stat-grid > *, .dashboard-card-link, .health-row-link) { border-color: var(--line); }
:root .stat-grid article:not(:first-child) { background: var(--card); color: var(--ink); }
:root :is(.table-empty, .data-table-wrap) { background: var(--card-raised); color: var(--muted); border-color: var(--line); }
:root .data-table-wrap { background: var(--card); color: var(--ink); }
:root .panel .data-table-wrap { border-color: var(--line); }
:root th:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card-raised); }
:root :is(tbody tr:nth-child(even), .reservation-list-card):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card-raised); }
:root tbody tr:hover:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: rgba(255,255,255,.05); }
:root .compact-booking { border-color: var(--line); }
:root a.compact-booking:hover { background: var(--card-raised); }
:root .fleet-health dl div { border-color: var(--line); }
:root .health-meter > div { background: var(--card-raised); }
:root .health-meter button:nth-child(3) { background: #8fa3cc; }
:root .fleet-health i.gray { background: #8fa3cc; }
:root :is(.form-error, .auth-error):not(:empty) { color: var(--danger-ink); }
:root .inline-select { background-color: var(--field); color: var(--field-ink); border-color: var(--field-line); }
:root .icon-action { background: transparent; color: var(--ink); border-color: var(--line); }
:root .icon-action:hover { border-color: var(--card-hover-line); }

/* compact icon actions: apple-buttons.css colours them for a white page (brown edit, dark-blue view...); on navy they take the
   light tints of the same meanings */
:root .app-icon-action[data-action-icon="edit"] { color: var(--accent); background: rgba(246,194,28,.12); border-color: rgba(246,194,28,.45); }
:root .app-icon-action[data-action-icon="view"], :root .app-icon-action:is([data-action-icon="retry"], [data-action-icon="calculate"]) { color: var(--info); background: rgba(127,178,255,.12); border-color: rgba(127,178,255,.45); }
:root .app-icon-action[data-action-icon="copy"] { color: #c4b5fd; background: rgba(196,181,253,.12); border-color: rgba(196,181,253,.45); }
:root .app-icon-action[data-action-icon="delete"], :root button[data-delete-vehicle] { color: var(--danger-ink); background: rgba(255,122,122,.12); border-color: var(--red-line); }
:root .app-icon-action[data-action-icon="check"] { color: var(--success); }
:root .app-icon-action[data-action-icon="close"]:not(.primary-action) { color: var(--ink); }
:root .app-icon-action { color: var(--ink); }
:root a.app-icon-action { color: var(--accent); border-color: var(--line); }
:root .panel-head > button:not(.primary-action):not(.panel-title-link) { color: var(--accent); }
:root .assignment-button { background: transparent; color: var(--muted); border-color: var(--line); }
:root .assignment-button.assigned { background: var(--card-raised); color: var(--success); border-color: var(--success); }

/* the shared quiet buttons: apple-buttons.css turns every secondary, danger, loyalty, confirm-bar and calendar action into a
   light-grey pill with near-black ink; on navy they are outlined like the other secondary actions. Danger buttons are not
   quiet (spec: they keep red): they are left out here, in a modal's action row too, and take the red tint below. */
:root :is(.secondary-action, .change-button, .loyalty-actions > button, .cal-confirm-bar > button, .cal-details-actions > button, .modal-actions > button):not(.primary-action):not(.danger-action):not([type="submit"]):not([data-preserve-button-style]) { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); box-shadow: none; }
:root :is(.secondary-action, .change-button, .loyalty-actions > button, .cal-confirm-bar > button, .cal-details-actions > button, .modal-actions > button):not(.primary-action):not(.danger-action):not([type="submit"]):not([data-preserve-button-style]):is(:hover, :focus-visible):not(:disabled) { background: rgba(255,255,255,.08); }
/* danger buttons and delete icons: the danger ink on a faint red tint, 4.8:1 on the navy card. apple-buttons.css's grey pill counts
   (0,3,2) (its list holds form button[type="submit"]), so the :not(.primary-action) is what lifts this one above it. */
:root :is(.danger-action, button[data-action-icon="delete"]):not(.primary-action):not([data-preserve-button-style]) { color: var(--danger-ink); border-color: var(--red-line); background: rgba(255,122,122,.1); }
:root :is(.danger-action, button[data-action-icon="delete"]):not(.primary-action):not([data-preserve-button-style]):hover:not(:disabled) { background: rgba(255,122,122,.2); }
/* the calendar's details sheet and booking page: admin-calendar.css restates its labelled actions as grey pills and its cancel as a
   pale red one, at (0,5,1) for the cancel (with its icon); these tie it and come later */
:root .cal-details-actions > button.app-icon-action[data-action-icon]:not(.danger-action) { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); }
:root :is(.cal-details-dialog .cal-details-actions > button.danger-action, .cal-details-actions > button.danger-action.app-icon-action[data-action-icon]) { color: var(--danger-ink); border-color: var(--red-line); background: rgba(255,122,122,.1); }
:root .app-icon-action:disabled { color: var(--muted); }
:root :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); } /* app-theme.css hard-codes #0057ff */
:root input[type="file"]::file-selector-button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; margin-inline-end: 10px; }
:root .promotion-upload-control { background: var(--card-raised); border-color: var(--line); color: var(--ink); }

/* customers: the directory cards are navy already; the buttons, tier badges and loyalty picker were white or pale */
:root :is(.customer-tools button:not(.primary-action), .customer-detail-head > button, .customer-blacklist-dialog header > button, .customer-side-panel button:not(.primary-action)) { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); }
:root :is(.customer-tools button:not(.primary-action), .customer-detail-head > button, .customer-side-panel button:not(.primary-action)):hover { background: rgba(255,255,255,.08); }
:root .customer-empty { background: var(--card-raised); border-color: var(--line); color: var(--muted); } /* the directory's empty, loading and failed states (admin-customers.css: --white) */
:root .customer-card-block { background: transparent; color: var(--muted); }
:root .customer-card-block:is(:hover, :focus-visible):not(:disabled) { background: rgba(255,122,122,.14); border-color: var(--red-line); color: var(--danger-ink); }
:root .customer-card-block:disabled { background: rgba(255,122,122,.14); color: var(--danger-ink); }
:root .customer-badge.danger { color: var(--danger-ink); }
:root .loyalty-badge { border-color: currentColor; }
:root .loyalty-bronze { background: rgba(255,178,122,.14); color: #ffb27a; }
:root .loyalty-silver { background: rgba(212,219,230,.14); color: #d4dbe6; }
:root .loyalty-gold { background: rgba(246,194,28,.14); color: var(--accent); }
:root .loyalty-platinum { background: rgba(127,224,239,.14); color: #7fe0ef; }
:root .customer-loyalty-field select { background: var(--field); color: var(--field-ink); border-color: var(--field-line); }
:root .loyalty-picker :is([role=listbox], .loyalty-picker-empty) { background: var(--card); border-color: var(--line); color: var(--ink); box-shadow: var(--card-hover-shadow); }
:root .loyalty-picker [role=option]:is(:hover, .is-active) { background: var(--card-raised); color: var(--accent); }
:root .loyalty-picker [role=option] bdi { color: var(--muted); }
:root .loyalty-example { background: var(--card-raised); color: var(--accent); }

/* the car photos ship on white and were multiplied into a grey card; on navy they sit in a rounded light panel instead
   (same treatment as the public cards) */
:root :is(.reservation-car-photo, .vehicle-cell) img { background: #eef1f6; border-radius: 16px; mix-blend-mode: normal; filter: none; }

/* Unit calendar events use a navy surface with readable event details. */
:root #unitCalendarView .calendar-event { background:var(--card-raised); color:var(--ink); border-color:var(--line); border-radius:14px; }
:root #unitCalendarView .calendar-event > div { min-width:0; overflow-wrap:anywhere; gap:6px; }
:root #unitCalendarView .calendar-event > div > span { color:var(--accent); font-size:12px; }
:root #unitCalendarView .calendar-event strong { color:var(--ink); font-size:14px; line-height:1.5; }
:root #unitCalendarView .calendar-event small { color:var(--muted); font-size:13px; line-height:1.5; }

/* deliveries and returns reports (Bookings tabs) */
:root .deliveries-range { background: var(--card-raised); border-color: var(--line); }
:root .deliveries-range button { color: var(--muted); }
:root .deliveries-range button:hover { background: rgba(255,255,255,.08); color: var(--ink); }
:root .deliveries-range button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
:root .deliveries-notice { background: rgba(246,194,28,.12); border-color: rgba(246,194,28,.5); color: var(--accent); }
:root .deliveries-notice button { background: transparent; color: var(--accent); }
:root .deliveries-notice button:hover { background: rgba(246,194,28,.18); }

/* calendar. The booking bars and blocks keep their stage hue and pale tint (re-tinted in "status"); only the text on them
   is made to follow the stage colour, because their customer name was white-on-pale. */
:root .cal-toolbar .cal-modes { background: var(--card-raised); }
:root .cal-toolbar .cal-nav button { background: var(--card-raised); color: var(--ink); border-color: var(--line); }
:root .cal-toolbar .cal-nav-today { color: var(--accent); border-color: var(--accent); background: transparent; }
:root .cal-toolbar .cal-new-booking { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root .cal-toolbar .cal-new-booking:hover { background: var(--accent-hover); filter: none; }
:root .cal-toolbar .cal-range-label { color: var(--ink); }
:root .cal-toolbar :is(input[type="search"], input[type="text"]) { background: var(--field); color: var(--field-ink); border-color: var(--field-line); }
:root .cal-legend-item { color: var(--ink); } /* the stage colour stays on the dot; coloured text on navy missed 4.5:1 */
:root .cal-legend-item i { background: var(--stage, var(--muted)); }
:root .cal-combo-options { background: var(--card); border-color: var(--line); box-shadow: var(--card-hover-shadow); }
:root .cal-combo-options li { color: var(--ink); }
:root .cal-combo-options li:hover { background: var(--card-raised); color: var(--accent); }
:root .cal-combo-options li[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
:root .cal-combo-options li[aria-selected="true"] span { color: var(--on-accent); }
:root .cal-stat { background: var(--card); border-color: var(--line); color: var(--ink); box-shadow: var(--card-glow); }
:root .cal-stat strong { color: var(--ink); }
:root .cal-stat-live strong { color: var(--success); }
:root .cal-stat-alert strong, :root .cal-stat-alert span { color: var(--danger-ink); }
:root .cal-month, :root .cal-grid-scroll { background: var(--card); border-color: var(--line); }
:root :is(.cal-month-heads, .cal-corner, .cal-time-header) { background: var(--card-raised); border-color: var(--line); }
:root .cal-week { border-color: var(--line); }
:root .cal-month-cell { border-color: var(--line); }
:root .cal-month-cell.cal-weekend { background: #0c2350; }
:root .cal-month-cell.cal-other-month { background: #0a1e48; }
:root .cal-month-cell.cal-month-today { background: var(--card-raised); }
:root .cal-month-cell.cal-other-month .cal-month-date { opacity: 1; color: #8fa3cc; }
:root .cal-month-cell.cal-month-today .cal-month-date { background: var(--accent); color: var(--on-accent); }
:root .cal-month-cell:not(.cal-other-month):hover { background: var(--card-raised); box-shadow: inset 0 0 0 2px var(--card-hover-line); }
:root .cal-month-cell.cal-cell-selected { background: #1b3f86; box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
:root .cal-month-cell:not(.cal-other-month):hover::after { background: var(--accent); color: var(--on-accent); }
:root .cal-month-head.cal-weekend, :root .cal-month-head-today { color: var(--accent); }
:root .cal-month-head-today i { background: var(--accent); color: var(--on-accent); }
:root .cal-month-bar span { color: inherit; opacity: .85; }
:root .cal-block small { color: var(--stage, inherit); opacity: .85; }
:root .cal-month-more { background: var(--card-raised); color: var(--ink); }
:root .cal-month-more:hover { background: #1b3f86; }
:root .cal-row-header { background: var(--card); border-color: var(--line); color: var(--ink); }
:root .cal-row-group-head { background: var(--card-raised); border-color: var(--line); color: var(--ink); }
:root .cal-group-label b { background: var(--accent); color: var(--on-accent); }
:root .cal-row-group-head:hover .cal-group-label { color: var(--accent); }
:root .cal-row-track { border-color: var(--line); background-image: repeating-linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px, transparent var(--cal-hour-px, 150px)); }
:root .cal-row-track:hover { background-color: rgba(255,255,255,.03); }
:root .cal-row-track.cal-row-target { background-color: #163a7a; }
:root .cal-row-track.cal-row-invalid { background-color: #3a1a2c; }
:root .cal-dayhead-today i { background: var(--accent); color: var(--on-accent); }
:root .cal-dayhead-today b { color: var(--accent); }
:root .cal-ghost-badge, :root .cal-undo-pill { background: var(--card-raised); color: var(--ink); }
:root .cal-undo-pill button { background: var(--accent); color: var(--on-accent); }
:root .cal-confirm-bar { background: var(--card); border-color: var(--line); color: var(--ink); box-shadow: 0 -6px 20px rgba(3,10,30,.45); }
:root .cal-confirm-bar .cal-confirm-summary .cal-changed { color: var(--accent); }
:root .cal-zoom-sheet { background: var(--canvas); }

/* a booking opened from the board (a routed page in the admin shell) */
:root .cal-booking-page { background: var(--card); border-color: var(--line); box-shadow: var(--card-glow); }
:root .cal-side-when > div { background: var(--card-raised); border-color: var(--line); }
:root :is(.cal-side-rows > div, .cal-pay-rows li) { border-color: var(--line); }
:root .cal-pay-totals { background: var(--card-raised); }

/* fleet page: admin-fleet.css loads after this file and is scoped to #fleetView, so its colour variables are
   re-pointed here (the extra :root out-ranks its #fleetView rule) and the few hard-coded whites are restated.
   Stage hues stay: green available, blue rented, red overdue, amber maintenance, grey off; the pale tints become
   translucent fills with the lighter ink of the same hue. */
:root #fleetView {
  --fleet-edge: var(--line);
  --fleet-ok: var(--success); --fleet-ok-soft: rgba(74,222,128,.16);
  --fleet-rented: var(--info); --fleet-rented-ink: var(--info); --fleet-rented-soft: rgba(127,178,255,.18);
  --fleet-late: var(--danger-ink); --fleet-late-soft: rgba(255,122,122,.16);
  --fleet-fix: var(--accent); --fleet-fix-ink: var(--accent); --fleet-fix-soft: rgba(246,194,28,.16);
  --fleet-off: #8fa3cc; --fleet-off-ink: var(--muted); --fleet-off-soft: rgba(185,198,224,.14);
}
:root #fleetView :is(.fleet-types, .fleet-cars) { background: var(--card); box-shadow: var(--card-glow); }
:root #fleetView .fleet-pill { background: var(--card); color: var(--ink); border-color: var(--line); }
:root #fleetView .fleet-pill:hover { border-color: var(--card-hover-line); }
:root #fleetView .fleet-pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root #fleetView .fleet-search input { background: var(--field); color: var(--field-ink); border-color: var(--field-line); }
:root #fleetView .fleet-search input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-color: var(--accent); }
:root #fleetView .fleet-type:hover { background: var(--card-raised); }
:root #fleetView .fleet-type[aria-current="page"] { background: var(--card-raised); }
:root #fleetView .fleet-type[aria-current="page"] .fleet-count { background: var(--accent); color: var(--on-accent); }
:root #fleetView :is(.fleet-count, .fleet-type-icon, .fleet-specs span, .fleet-calendar) { background: var(--card-raised); }
:root #fleetView :is(.fleet-type-icon, .fleet-calendar) { color: var(--muted); }
:root #fleetView .fleet-calendar:hover { color: var(--accent); }
:root #fleetView .fleet-bar { background: var(--card-raised); }
:root #fleetView .fleet-car { background: var(--card-raised); border-color: var(--line); }
:root #fleetView .fleet-car:hover { border-color: var(--card-hover-line); }
:root #fleetView .fleet-car:has(.fleet-car-link:focus-visible) { outline-color: var(--accent); }
:root #fleetView .fleet-plate { background: transparent; color: var(--ink); border-color: var(--ink); }
:root #fleetView .fleet-plate.is-commercial { background: rgba(74,222,128,.12); border-color: var(--success); color: var(--success); }
:root #fleetView .fleet-hero-photo { background: #eef1f6; }
:root #fleetView .fleet-action { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); }
:root #fleetView .fleet-action:hover { background: rgba(255,255,255,.08); }
:root #fleetView .fleet-hero-actions .primary-action { color: var(--on-accent); }
:root #fleetView .fleet-hero-actions .danger-action { color: var(--danger-ink); background: rgba(255,122,122,.12); border-color: var(--red-line); }
:root #fleetView .fleet-hero-actions .danger-action:hover { background: rgba(255,122,122,.2); }
:root #fleetView .fleet-empty .primary-action { color: var(--on-accent); }
:root #fleetView .fleet-back { color: var(--accent); }
:root #fleetView .fleet-eyebrow { color: var(--accent); }

/* deliveries and returns rows (pale "today" and "late" tints and the WhatsApp button were built for a white table) */
:root .deliveries-table tr.is-today td { background: rgba(127,178,255,.12); }
:root .deliveries-table tr.is-late td { background: rgba(255,122,122,.12); }
:root .deliveries-table .today-tag { background: var(--card-raised); color: var(--accent); }
:root .deliveries-table .today-tag.is-late { background: rgba(255,122,122,.16); color: var(--danger-ink); }
:root .whatsapp-send { background: transparent; color: var(--success); border-color: var(--success); }
:root .whatsapp-send:hover:not(:disabled) { background: rgba(74,222,128,.12); }
:root .whatsapp-state.is-sent { color: var(--success); }
:root .whatsapp-state.is-failed { color: var(--danger-ink); }

/* error text: the bookings lookup's message and the "not reservable" note (both #b42318 / --red, about 2.1:1 on navy) */
:root :is(.reservation-lookup-error, .not-reservable) { color: var(--danger-ink); }

/* settings tables and promotion preview */
:root .promotion-preview-frame { background: var(--card-raised); border-color: var(--line); }
/* == staff == */
/* Step 1 (renter & booking boxes) and Step 2 (the contract workspace frame). Paper sheets render on the same page as the
   workspace, so every generic-element rule here carries the paper exclusion. */
:root .has-reservation-screen .reservation-context { background: var(--card); border-color: var(--line); }
:root .reservation-context-car > span, :root .reservation-context-price > :is(span, small), :root .reservation-context-trip h3 { color: var(--muted); }
:root :is(.screen-trip-group > h3, .reservation-context-car small) { color: var(--muted); }
:root .reservation-context-trip strong, :root .reservation-context-car h2 { color: var(--ink); }
:root .reservation-context-price > strong { color: var(--accent); }
:root .reservation-context-trip section { border-color: var(--line); }
:root .reservation-context-price { border-color: var(--line); }
:root .reservation-context-car > .screen-trip-change { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); }
:root .reservation-context-car > .screen-trip-change:is(:hover, :focus-visible) { background: rgba(255,255,255,.08); }
/* the reference strip shows on the customer view and in the fixture; the staff journey hides it */
:root .reference-panel { background: var(--card); border-color: var(--line); }
:root .reference-panel strong { color: var(--ink); }
:root .reference-panel span { color: var(--accent); }
:root .reference-panel p { color: var(--muted); }
:root .screen-box > legend, :root .has-reservation-screen #reservationScreen fieldset.screen-box > legend { color: var(--accent); }
:root .has-reservation-screen #reservationScreen fieldset.screen-box, :root .new-reservation-screen .screen-box { background: var(--card); border-color: var(--line); }
:root .screen-field > :is(label, .screen-label) { color: var(--muted); }
:root .screen-box [role="status"] { color: var(--muted); }
:root #reservationDrivers .driver-editor-record > legend { color: var(--ink); }
:root #reservationDrivers .driver-action-row > button:not(.driver-save-action) { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); box-shadow: none; }
:root #reservationDrivers .driver-action-row > button:not(.driver-save-action):not(:disabled):is(:hover, :focus-visible) { background: rgba(255,255,255,.08); }
:root #reservationDrivers .driver-action-row > .driver-save-action { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root #reservationDrivers .driver-action-row > .driver-save-action:not(:disabled):is(:hover, :focus-visible) { background: var(--accent-hover); border-color: var(--accent-hover); }
:root #reservationDrivers .driver-action-row > button:focus-visible { outline-color: var(--accent); }

/* Step 2: the workspace frame, its two tabs and its steps */
:root .contract-embedded, :root:has(> body.contract-embedded) { background: var(--card); color: var(--ink); } /* the frame sits inside a card, so its page is card-coloured and its sections are raised */
:root :is(.reservation-operation-tabs, .contract-step-tabs) button:not([aria-selected="true"]) { background: transparent; color: var(--ink); border: 1px solid var(--line); }
:root .contract-no-print:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card); border-color: var(--line); color: var(--ink); }
:root .contract-no-print :is(h1, p):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--ink); }
:root .contract-data-hint:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--muted); }
:root .contract-paper-adjust:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { border-color: var(--line); }
:root .contract-workspace .missing:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--amber-soft); color: var(--amber-ink); }
:root .contract-history li:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { border-color: var(--line); }
:root .contract-history li:hover:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card-raised); }
:root .payment-delete-form:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--red-soft); border-color: var(--red-line); }
:root .rental-contract-page:not(.contract-embedded) .contract-workspace section:not(.contract-sheet):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card); border-color: var(--line); }
/* Step 1 driver cards (one per driver, side by side) */
:root .has-reservation-screen #reservationScreen .driver-columns fieldset[data-driver-card] { background: var(--card-raised); border-color: var(--line); }
:root .has-reservation-screen #reservationScreen .driver-columns fieldset[data-driver-card] > legend { color: var(--ink); }

/* Step 2 surfaces: every workspace section and field card is a navy card; the sheets lying on the page are paper and are skipped */
:root .contract-workspace section:not(.contract-sheet):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card); border-color: var(--line); color: var(--ink); }
:root .contract-workspace #contractDetailsForm > .operation-field-card:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card); border-color: var(--line); }
:root .contract-workspace .operation-field-card h2:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--ink); }
:root .contract-workspace :is(.field-card-hint, .contract-fields label > small, .inspection-block label > span, .contract-send-status, .invoice-discounts .field-help):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--muted); }
:root .contract-workspace .contract-step-note.is-error:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--danger-ink); } /* the failed-save note beside its button: #b42318 on the navy --red-soft was 2.3:1 */
:root .contract-send-status.is-error:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *), :root .contract-workspace .payment-delete-note:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--danger-ink); }
:root .contract-workspace .inspection-block:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card-raised); border-color: var(--line); }
:root .contract-workspace .inspection-block h3:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--ink); }
/* buttons and button-like links inside the workspace: quiet outline, as everywhere else; .primary stays gold */
:root .contract-workspace :is(button, .payment-invoice-action, .payment-receipt-link, .contract-actions a, .inspection-upload):not(.primary):not(.danger):not(.payment-delete):not(.contract-copy-delete):not([role="tab"]):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *),
:root .contract-no-print .contract-actions :is(button, a):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); }
:root .contract-workspace :is(button, .payment-invoice-action, .payment-receipt-link, .contract-actions a, .inspection-upload):not(.primary):not(.danger):not(.payment-delete):not(.contract-copy-delete):not([role="tab"]):not(:disabled):is(:hover, :focus-visible):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: rgba(255,255,255,.08); }
:root .contract-workspace :is(.inspection-add, .inspection-upload):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { border-style: dashed; }
:root .contract-workspace .primary:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
:root .contract-workspace :is(.payment-delete, .contract-copy-delete):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: transparent; color: var(--danger-ink); border-color: var(--red-line); }
:root .contract-workspace :is(.payment-delete, .contract-copy-delete):is(:hover, :focus-visible):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--red-soft); }
:root .contract-history li .contract-copy-current:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: rgba(246,194,28,.14); color: var(--accent); }
:root .contract-history li:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--ink); }
:root .contract-history li > a:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--accent); }
:root .contract-history .payment-delete-form textarea:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--field); color: var(--field-ink); border-color: var(--field-line); }
:root .contract-workspace .payment-delete-actions button.danger:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *), :root .contract-workspace .payment-delete-actions button.danger:is(:hover, :focus-visible):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--red); border-color: var(--red); color: #fff; }

:root :is(.contract-fields, #reservationDrivers) label > span:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--ink); }
:root :is(#reservationDrivers, #newReservationDrivers) .driver-column-field > .screen-label { color: var(--muted); }
:root :is(.inspection-hint, .inspection-empty):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--muted); }

:root #reservationDrivers .fancy-select-trigger { background-color: var(--field); color: var(--field-ink); border-color: var(--field-line); } /* reservation-operations.css paints every #reservationDrivers button white and blue */
:root .contract-embedded .contract-workspace :is(section:not(.contract-sheet), #contractDetailsForm > .operation-field-card):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card-raised); }
:root .contract-embedded .contract-workspace .inspection-block:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card); }

/* Step 1 with data. The booking-rate card sits in the booking box; the two document cards sit in the documents box (and on the
   customer view, where the same panel rule paints them white, so the rule is the panel's own). Both read as raised cards on the box. */
:root .has-reservation-screen #reservationScreen .screen-booking-facts > :is(#confirmationRateEditor, .summary-item) { background: var(--card-raised); color: var(--ink); }
:root #confirmationCard > [data-confirmation-panel] .document-card { background: var(--card-raised); border-color: var(--line); color: var(--ink); }
:root .document-card .document-message { color: var(--muted); }
:root .document-preview { background: var(--card); border-color: var(--line); }
:root :is(.document-retry, .document-download) { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); border-radius: 999px; }
:root :is(.document-retry, .document-download):hover { background: rgba(255,255,255,.08); }

/* The customer's view of confirmation.html (no staff mode). reservation-detail-layout.css paints the summary tiles and the two trip
   cards white (#reservationSummaryPanel, an id, so these carry it too) and reservation-workspace.css gives their figures near-black
   ink; on navy they are raised cards with white figures and muted labels. The tab strip is the card's own segmented control: the
   selected tab is gold with navy text (owner decision; confirmation-tabs.css paints it blue at (1,2,1), hence the [role]), the
   others muted. */
:root #reservationSummaryPanel :is(.summary-item, .summary-item.vehicle-summary, .trip-columns > div) { background: var(--card-raised); border-color: var(--line); color: var(--ink); }
:root #reservationSummaryPanel :is(.summary-item, .trip-columns > div) > strong { color: var(--ink); }
:root #reservationSummaryPanel :is(.summary-item, .trip-columns > div) > :is(span, small) { color: var(--muted); }
:root #confirmationCard > #confirmationTabs { background: var(--card-raised); border: 1px solid var(--line); }
:root #confirmationTabs > button[role="tab"]:not([aria-selected="true"]) { background: transparent; color: var(--muted); }
:root #confirmationTabs > button[role="tab"]:not([aria-selected="true"]):hover { color: var(--ink); }
:root #confirmationTabs > button[role="tab"][aria-selected="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
:root #confirmationTabs > button[role="tab"]:focus-visible { outline-color: var(--accent); }

/* Step 2, a recorded inspection (vehicle-inspection.js): the damage rows are cards on the block, the notes under them are muted, the
   fuel note is a gold notice, the marking panel is a card around the (light) car artwork. */
:root .contract-workspace :is(.inspection-damage, .dd-marking):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card); border-color: var(--line); color: var(--ink); }
:root .contract-workspace .inspection-damage:hover:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { border-color: var(--card-hover-line); }
:root .contract-workspace .inspection-damage:focus-within:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--control-focus); }
:root .contract-workspace :is(.inspection-meta, .inspection-legend, .dd-marking-head p):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { color: var(--muted); }
:root .contract-workspace .inspection-fuel-gap:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: rgba(246,194,28,.12); border-color: rgba(246,194,28,.5); color: var(--accent); }
:root .contract-workspace .inspection-damage .inspection-remove:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: transparent; color: var(--muted); border-color: transparent; }
:root .contract-workspace .inspection-damage .inspection-remove:is(:hover, :focus-visible):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: rgba(255,122,122,.12); color: var(--danger-ink); border-color: var(--red-line); }
:root .contract-workspace .inspection-shot:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card); border-color: var(--line); }
:root .contract-workspace .inspection-shot-wait:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card-raised); }
:root .contract-workspace .inspection-shot .inspection-remove:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: rgba(255,122,122,.2); color: var(--danger-ink); border-color: var(--red-line); }
:root .contract-workspace :is(.dd-full, .dd-close):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); }
/* == overlays == */
/* Dialogs, menus and the date picker are navy surfaces; fields inside them stay light (the fields section). Menus and the
   picker use the raised navy so they stand out from the card they open over. Row hover/selected is #1b3f86. */
:root :is(dialog, .confirm-dialog, .reservation-unit-dialog, .customer-access-dialog, .customer-detail-dialog, .customer-blacklist-dialog):not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) {
  background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--card-glow), 0 0 0 1px var(--line);
}
:root :is(dialog, .confirm-dialog, .reservation-unit-dialog, .customer-access-dialog, .customer-detail-dialog, .customer-blacklist-dialog)::backdrop { background: rgba(3,10,30,.65); backdrop-filter: blur(3px); }
:root :is(.reservation-unit-dialog, .customer-access-dialog) :is(h2, h3, label, legend) { color: var(--ink); }
:root :is(.reservation-unit-dialog, .customer-access-dialog) p { color: var(--muted); }
:root .reservation-unit-dialog [role="status"] { color: var(--danger-ink); }

/* pop-ups that became routed pages (admin.css .shell-page: new reservation, assign a car, unit calendar) are the same navy card */
:root .shell-page:not(:is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) *) { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--card-glow), 0 0 0 1px var(--line); }
:root .shell-page .modal-head > button { background: transparent; color: var(--ink); border-color: var(--line); }
:root .car-type-chip { background: var(--card-raised); color: var(--ink); border-color: var(--line); }
:root .car-type-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
:root .driver-action-row > button.driver-add-action:not([data-preserve-button-style]) { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.7); }
:root .driver-action-row > button.driver-add-action:not([data-preserve-button-style]):hover { background: rgba(255,255,255,.08); }

/* ConfirmDialog (confirm-dialog.js): outlined Cancel, gold primary, red danger with white text */
:root .confirm-dialog-actions button { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); }
:root .confirm-dialog-actions button:hover { background: rgba(255,255,255,.08); }
:root .confirm-dialog-actions button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
:root .confirm-dialog-actions button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
:root .confirm-dialog-actions button.danger { background: var(--red); color: #fff; border-color: var(--red); }
:root .confirm-dialog-actions button.danger:hover { background: #c93a49; border-color: #c93a49; }
:root .confirm-dialog-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the delete button of the car page wears the same red tint as the car type page's delete (the shared danger look) */
:root #unitDialog .modal-actions > #deleteUnitButton { color: var(--danger-ink); background: rgba(255,122,122,.12); border-color: var(--red-line); }
:root #unitDialog .modal-actions > #deleteUnitButton:not(:disabled):hover { background: rgba(255,122,122,.2); border-color: var(--red-line); }

/* Fleet filters fit their labels instead of stretching across the toolbar. */
@media (min-width: 761px) {
  #fleet .controls-bar { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  #fleet .filters { flex: 0 1 auto; flex-wrap: wrap; gap: 6px; }
  #fleet .filter-control { flex: 0 0 auto; width: auto; min-width: 0; }
  #fleet .filter-control .fancy-select { flex: 0 1 auto; }
  #fleet .filter-control .fancy-select-trigger { width: auto; gap: 8px; padding: 0; }
  #fleet .sort-control { flex: 0 1 auto; width: auto; min-width: 0; max-width: 240px; padding-inline: 10px 30px; }
  #fleet .currency-control { margin-inline-start: 4px; }
  #fleet .fancy-select-menu { padding: 4px; }
  #fleet .fancy-select-option { padding: 6px 10px; }
}

/* the custom select menu (fancy-select.js) and the assignment pickers' rows */
:root :is(.fancy-select-menu, .nationality-options) {
  background: var(--card-raised); color: var(--ink); border: 1px solid var(--card-hover-line); box-shadow: var(--card-hover-shadow);
}
:root .fancy-select .fancy-select-menu:is(:focus, :focus-visible) { box-shadow: var(--card-hover-shadow); }
:root .fancy-select-option { color: var(--ink); }
:root .fancy-select-option.is-active, :root .fancy-select-option:hover { background: #1b3f86; color: var(--ink); }
:root .fancy-select-option[aria-selected="true"] { color: var(--accent); font-weight: 700; }
:root .fancy-select-option[aria-disabled="true"] { color: var(--muted); opacity: .8; }
:root .assignment-select .fancy-select-option + .fancy-select-option { border-top-color: var(--line); }
:root .assignment-select .fancy-select-option:is(:hover, .is-active, [aria-selected="true"]) { background: #1b3f86; }
/* the country / nationality dropdown (nationality-picker.js) */
:root .nationality-options [role="option"] { color: var(--ink); }
:root .nationality-options [role="option"]:hover, :root .nationality-options [role="option"].is-active, :root .nationality-options [aria-selected="true"] { background: #1b3f86; color: var(--ink); }
:root .nationality-options [aria-selected="true"] { color: var(--accent); font-weight: 700; }
:root .nationality-empty { color: var(--muted); }
/* the native list of a status select: light like every field, so the options read */
:root .inline-select option, :root select option { background: var(--field); color: var(--field-ink); }

/* the assign-a-car dialog (reservation-actions.js) */
:root .reservation-unit-list, :root .assignment-type-panel { background: var(--card-raised); border-color: var(--line); }
:root .reservation-unit-option + .reservation-unit-option, :root .assignment-type-option + .assignment-type-option { border-top-color: var(--line); }
:root .reservation-unit-option:hover, :root .assignment-type-option:is(:hover, .is-active), :root .assignment-type-option[aria-selected="true"] { background: #1b3f86; }
:root .reservation-unit-option:has(input:checked) { background: #1b3f86; box-shadow: inset 3px 0 0 var(--accent); }
:root .reservation-unit-option:has(input:focus-visible), :root .assignment-type-trigger:focus-visible { outline-color: var(--accent); }
:root .reservation-unit-option input[type="radio"] { accent-color: var(--accent); }
:root :is(.reservation-unit-details small, .assignment-type-details small, .reservation-unit-dialog .assignment-type-status) { color: var(--muted); }
:root .assignment-type-price { color: var(--accent); }
:root .reservation-unit-dialog .assignment-type-trigger { background: var(--field); color: var(--field-ink); border-color: var(--field-line); }
:root .assignment-type-row img { mix-blend-mode: normal; background: #fff; }

:root .reservation-unit-dialog .contract-actions > button:not(.primary-action) { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; }
:root .reservation-unit-dialog .assignment-type-trigger .assignment-type-price { color: #175dcc; }
:root .reservation-unit-dialog .assignment-type-trigger .assignment-type-details small { color: #5e686b; }

:root .blacklist-entry button { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; } /* the block dialog's Remove: a generic grey button before */

/* the customer-access PIN dialog (customer-access.js) */
:root .customer-access-dialog button { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.7); border-radius: 999px; }
:root .customer-access-dialog button[data-save] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
:root .customer-access-dialog :focus-visible { outline-color: var(--accent); }

/* the date picker (date-picker.js) */
:root .date-picker { background: var(--card-raised); color: var(--ink); border-color: var(--card-hover-line); box-shadow: var(--card-hover-shadow); }
:root .date-picker .date-picker-day { color: var(--ink); }
:root .date-picker .date-picker-day:hover { background: #1b3f86; }
:root .date-picker .date-picker-day.is-today { background: var(--accent); color: var(--on-accent); }
:root .date-picker .date-picker-day.is-today:hover { background: var(--accent-hover); }
:root .date-picker .date-picker-day.is-selected { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
:root .date-picker .date-picker-day.is-today.is-selected { color: var(--on-accent); box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px var(--card-raised); }
:root .date-picker .date-picker-nav { color: var(--accent); }
:root .date-picker .date-picker-nav:hover { background: #1b3f86; }
:root .date-picker-weekday { color: var(--muted); }
:root .date-picker-foot { border-top-color: var(--line); }
:root .date-picker .date-picker-today { background: #1b3f86; color: var(--accent); }
:root .date-picker .date-picker-done { background: var(--accent); color: var(--on-accent); }
:root .date-picker .date-picker-time { background: var(--field); color: var(--field-ink); border-color: var(--field-line); }

}

/* == status == */
/* Same meanings and hues, dark tinted fills with bright text. stage-styles.css reads these on :root: the booking
   pills, the calendar bars and blocks, the status dropdown and the stage bar all follow. Each text colour is at least
   4.5:1 on its own fill and on the card behind it; the fill is lighter than the card so a bar still reads as a bar. */
:root {
  --stage-pending: #f6c21c;   --stage-pending-soft: #3b3010;
  --stage-review: #ffa65c;    --stage-review-soft: #40250f;
  --stage-confirmed: #9cc5ff; --stage-confirmed-soft: #143a7d;
  --stage-active: #4ade80;    --stage-active-soft: #0f4130;
  --stage-completed: #cfd8ea; --stage-completed-soft: #2a3a5c;
  --stage-cancelled: #ff8f8f; --stage-cancelled-soft: #4a1d30;
}
/* paper and print are white: the pre-theme palette comes back there */
:root :is(.contract-sheet, .modern-invoice, .inspection-annex, .payment-receipt) {
  --stage-pending: #9c690e;   --stage-pending-soft: #fff4d6;
  --stage-review: #b4540a;    --stage-review-soft: #ffedd9;
  --stage-confirmed: #0057ff; --stage-confirmed-soft: #dce9ff;
  --stage-active: #0a7a45;    --stage-active-soft: #dcf5e7;
  --stage-completed: #5e686b; --stage-completed-soft: #e9edf1;
  --stage-cancelled: #b22d3b; --stage-cancelled-soft: #fdecee;
}
@media print {
  :root {
    --stage-pending: #9c690e;   --stage-pending-soft: #fff4d6;
    --stage-review: #b4540a;    --stage-review-soft: #ffedd9;
    --stage-confirmed: #0057ff; --stage-confirmed-soft: #dce9ff;
    --stage-active: #0a7a45;    --stage-active-soft: #dcf5e7;
    --stage-completed: #5e686b; --stage-completed-soft: #e9edf1;
    --stage-cancelled: #b22d3b; --stage-cancelled-soft: #fdecee;
  }
}

/* Solid stage fills: the calendar's "now" tag and the head band of a booking page are filled with the bright stage ink,
   so they take dark navy ink (7.5:1 or better on every stage); white on them was 1.4:1 to 2.2:1. The close button is a
   translucent navy disc for the same reason. */
:root :is(.cal-now-head, .cal-side-head) { color: var(--on-accent); }
:root .cal-side-head button { background: rgba(11,29,69,.16); color: var(--on-accent); }
:root .cal-side-head button:hover { background: rgba(11,29,69,.28); }

/* Stage tracker (customer confirmation page): a raised navy card. Its own --white and --line are redefined, because
   stage-styles.css paints the card and every todo dot with --white and the rails with --line. Rails and todo dot edges
   are a lighter blue (3.6:1 on the card) so the unreached part of the line is still seen; labels are muted (7:1) or white,
   the current one in its stage ink, and the tick on a finished dot is navy on the bright stage fill. */
:root .stage-tracker { --white: var(--card-raised); --line: #6a8cc9; background: var(--card-raised); box-shadow: 0 0 0 1px #24478f; }
:root .stage-tracker li[data-state="done"] i::after { border-color: var(--on-accent); }
:root .stage-tracker .stage-tracker-note::before { display: none; } /* the note under a cancelled tracker is not a step, so it gets no rail stub */

/* The initials circle on a booking page sits outside the stage-coloured head, so --stage is not set there and it fell back
   to the paper blue (#dce9ff with #0057ff): a light disc on navy. It keeps that blue, as the navy confirmed pair. */
:root .cal-side-avatar { background: var(--stage-confirmed-soft); color: var(--stage-confirmed); }

/* Deliberately dimmed, so exempt from the 4.5:1 rule (about 2.7:1): a cancelled booking on the calendar
   (.cal-block.cal-cancelled at .5 opacity, .cal-month-bar.cal-cancelled at .55) is meant to recede. Left as it is. */

/* In print the old stage palette is dark again, so the solid tags above get their white ink back (last, to out-order them). */
@media print {
  :root :is(.cal-now-head, .cal-side-head), :root .cal-side-head button { color: #fff; }
  :root .cal-side-head button { background: rgba(255,255,255,.18); }
}