/* ===== dr_vehicle_review_modal_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Anvil strips a
   template's <style> text, so these rules cannot live in form_template.html.

   Scoped on #dr-vehicles-overlay rather than on the form's root class, and
   that is deliberate: pxShowOverlay PORTALS a .px-modal-overlay into
   #px-modal-portal on the first open, so from then on the overlay is no longer
   a descendant of .dr-vehicles and a rule scoped on the root class would stop
   applying. The id is unique document-wide, which the Drivers screen's other
   two overlays already rely on.

   .px-modal, .px-table and the --px-* tokens come from the shared theme and
   the dependency's runtime injection, so the designer canvas shows this modal
   as an unstyled text stack. */

.dr-vehicles { min-width: 0; }

#dr-vehicles-overlay .px-modal { width: 93vw; max-height: 90vh; }
#dr-vehicles-overlay th,
#dr-vehicles-overlay .dr-vehicles-keyline,
#dr-vehicles-overlay .dr-vehicles-quiet,
#dr-vehicles-overlay .dr-vehicles-source { color: var(--px-text-muted); font-size: 12px; }
#dr-vehicles-overlay .dr-vehicles-message { color: var(--px-warning-ink); }
#dr-vehicles-overlay .dr-vehicles-empty { color: var(--px-text-secondary); font-size: 13px; line-height: 1.6; }
#dr-vehicles-overlay .dr-vehicles-retry { margin: 8px 0; }
#dr-vehicles-overlay .dr-vehicles-choice { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-size: 13px; cursor: pointer; }
#dr-vehicles-overlay .dr-vehicles-choice input { margin: 0; }
#dr-vehicles-overlay .dr-vehicles-choice input:disabled + span { color: var(--px-text-disabled); }
#dr-vehicles-overlay tr.dr-vehicles-dirty td,
#dr-vehicles-overlay tr.dr-vehicles-dirty th { background: var(--px-accent-soft); }
#dr-vehicles-overlay td, #dr-vehicles-overlay th { vertical-align: top; }
#dr-vehicles-overlay [hidden] { display: none !important; }

@media (max-width: 600px) {
  #dr-vehicles-overlay .px-modal-body { padding: 12px; }
  #dr-vehicles-overlay td { overflow-wrap: anywhere; }
  #dr-vehicles-overlay .dr-vehicles-choice { display: flex; margin: 0 0 8px; min-height: 44px; }
}