/* ===== drivers: the rules the SHELL declares and the CHILDREN use =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what styles the
   designer canvas.

   Eight of the ten drivers forms carry markup styled from here: .dr-info and #dr-tip (the one
   tooltip component), .dr-chip-label / .dr-chips / .dr-chips .px-pill / .dr-route-dot (the
   route and driver chip strips), .dr-note, .dr-control and .dr-warning. Each is declared once,
   in this shared sheet, rather than copied per form.

   ORDER. drivers.css sorts before drivers_analytics_html.css, so the shell's own rules win a
   tie against this file. */

/* --dr-accent is declared on the three roots a reader can be under, not on :root, because an
   unscoped :root rule in a head link would declare it app-wide. The two overlay ids are in it
   because pxShowOverlay portals those overlays out of .dr-dashboard into #px-modal-portal and
   copies only --accent* and --px-loading-accent across.
   [data-theme="dark"] sits on <html>, an ancestor of all three, so it prefixes the selector and
   never goes inside a :where() on it. drAccent(root) resolves the token by inheritance from
   whichever of the three the caller sits under. */
.dr-dashboard,
#dr-drill-overlay,
#dr-mapping-overlay { --dr-accent: #f68b1f; }

:where(.dr-dashboard) .px-print-ink { --dr-accent: #f68b1f; }

[data-theme="dark"] .dr-dashboard,
[data-theme="dark"] #dr-drill-overlay,
[data-theme="dark"] #dr-mapping-overlay { --dr-accent: #f9a94f; }

#dr-mapping-save, #dr-vehicles-save { --accent-text: var(--px-ink-on-bright); }

/* The tooltip icon. Scoped to the union of the two roots a .dr-info button can be under: the
   drill modal has them and is portalled out of .dr-dashboard; the rota mapping modal has none. */
:where(.dr-dashboard, #dr-drill-overlay) .dr-info { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px; padding:0; border:1px solid var(--px-border-strong); border-radius:50%; background:none; color:var(--px-text-muted); font-family:var(--px-font); font-size:11px; font-weight:700; line-height:1; cursor:help; vertical-align:middle; flex:none; }
:where(.dr-dashboard, #dr-drill-overlay) .dr-info::before { content:'i'; }
:where(.dr-dashboard, #dr-drill-overlay) .dr-info:hover,
:where(.dr-dashboard, #dr-drill-overlay) .dr-info[aria-expanded="true"] { border-color:var(--dr-accent); color:var(--dr-accent); }

/* drBindShell moves this panel to document.body, outside every form root, so the rule cannot be
   root-scoped and stays a bare id. One id, drivers-owned. */
#dr-tip { position:fixed; z-index:2147483000; max-width:320px; padding:10px 12px; border:1px solid var(--px-border-strong); border-radius:8px; background:var(--px-bg-card); color:var(--px-text-primary); box-shadow:var(--px-shadow-lg); font-size:12px; line-height:1.6; pointer-events:none; }

:where(.dr-dashboard) .dr-note { margin:6px 0; font-size:11px; color:var(--px-text-muted); line-height:1.6; }
:where(.dr-dashboard) .dr-control { min-height:38px; }
:where(.dr-dashboard) .dr-chip-label { color:var(--px-text-muted); font-size:11px; margin-top:10px; }
/* The chip strips carry class="px-pill-group dr-chips", and theme.css declares
   .px-pill-group { gap:0.5rem } at (0,1,0). A head link loses that tie on document order,
   so the class the element already wears is doubled to win on specificity instead, as in
   dr_kpis_html.css. */
:where(.dr-dashboard) .px-pill-group.dr-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
:where(.dr-dashboard) .dr-chips .px-pill { display:inline-flex; align-items:center; gap:6px; }
:where(.dr-dashboard) .dr-route-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
:where(.dr-dashboard) .dr-warning { background:var(--px-warning-bg); color:var(--px-warning-text); border:1px solid var(--px-warning-border); border-radius:8px; padding:12px 15px; font-size:12px; line-height:1.6; }