/* da-close.css - ONE shared close button for the whole Driver App (ticket-parity-modal-close-style phase 2, 26 Oct 2026).
   Copy of the CRM staff Preview header close (crm assets maple-close.css .maple-close-circle--card-corner +
   pipeline-panel.css .pipeline2-driver-app-frame-close): 26px, plain white x (400 20px/1 system-ui), no ring, no outline,
   hover #1f4a3c, keyboard focus #1f4a3d.
   Use:  <button type="button" class="da-x" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         .da-x            on a dark green / dark header or overlay (white x)
         .da-x--light     on a white / light background (same x in dark green #17362c)
         .da-x--icon      icon button in the same header (keeps its SVG, e.g. the viewer rotate) - like the CRM refresh icon
   The class is repeated so it wins over the older per-modal rules in maple-close.css / driver-app.css. */
html body .da-x.da-x.da-x.da-x.da-x {
  box-sizing: border-box; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 26px; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important;
  padding: 0 !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; color: #fff !important; box-shadow: none !important; outline: none !important;
  font-size: 0 !important; line-height: 1 !important; text-indent: 0 !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html body .da-x.da-x.da-x.da-x.da-x > * { display: none !important; }
html body .da-x.da-x.da-x.da-x.da-x::before {
  content: "\00d7" !important; display: block !important; font: 400 20px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: inherit !important; transform: translateY(-1px) !important; background: none !important; width: auto !important; height: auto !important;
  border: 0 !important; box-shadow: none !important; position: static !important;
}
html body .da-x.da-x.da-x.da-x.da-x:hover:not(:disabled) { background: #1f4a3c !important; box-shadow: none !important; }
html body .da-x.da-x.da-x.da-x.da-x:focus { outline: none !important; }
html body .da-x.da-x.da-x.da-x.da-x:focus-visible { background: #1f4a3d !important; outline: none !important; box-shadow: none !important; }
/* light backgrounds: same glyph in dark green, soft green tint on hover/focus */
html body .da-x.da-x--light.da-x.da-x.da-x { color: #17362c !important; }
html body .da-x.da-x--light.da-x.da-x.da-x:hover:not(:disabled),
html body .da-x.da-x--light.da-x.da-x.da-x:focus-visible { background: rgba(23, 54, 44, 0.1) !important; }
/* icon buttons in the same header (CRM refresh icon style) */
html body .da-x.da-x--icon.da-x.da-x.da-x::before { content: none !important; display: none !important; }
html body .da-x.da-x--icon.da-x.da-x.da-x > span[aria-hidden="true"] { display: flex !important; align-items: center; justify-content: center; width: 26px; height: 26px; transform: none; }
html body .da-x.da-x--icon.da-x.da-x.da-x svg { display: block; width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
html body .da-x.da-x--icon.da-x.da-x.da-x:hover:not(:disabled),
html body .da-x.da-x--icon.da-x.da-x.da-x:focus-visible:not(:disabled) { background: #1f4a3d !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) !important; }
html body .da-x.da-x--icon.da-x.da-x.da-x:disabled { opacity: 0.6; cursor: progress; }