/* #103 Shared Maple close button. ONE definition, mirrored byte-for-byte to:
   crm.maple-360.uk/system/ui/public/maple-close.css and driver.maple-360.uk/v1/assets/maple-close.css
   Usage: <button class="maple-close maple-close--26|--36" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   Not wired to existing closes yet: Jason picks 26 or 36 first. */
.maple-close {
  --maple-close-size: 26px;
  --maple-close-glyph: 20px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--maple-close-size);
  height: var(--maple-close-size);
  min-width: var(--maple-close-size);
  min-height: var(--maple-close-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #17362c;
  color: #fff;
  font: 400 var(--maple-close-glyph)/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .1s ease;
}
.maple-close > span { display: block; line-height: 1; transform: translateY(-1px); }
/* 44px touch target whatever the visual size */
.maple-close::after { content: ""; position: absolute; inset: calc((var(--maple-close-size) - 44px) / 2); border-radius: 999px; }
.maple-close:hover { background: #1f4a3c; }
.maple-close:active { transform: scale(.94); }
.maple-close:focus { outline: none; }
.maple-close:focus-visible { outline: 2px solid #1f8a4d; outline-offset: 2px; }
.maple-close--26 { --maple-close-size: 26px; --maple-close-glyph: 20px; }
.maple-close--36 { --maple-close-size: 36px; --maple-close-glyph: 26px; }
.maple-close--corner { position: absolute; top: 10px; right: 10px; }

/* ===== #103 (Jason picked 26px, 10 Oct 2026): every Maple close uses .maple-close--26 =====
   Existing close buttons across the CRM and driver app are mapped onto the same 26px look here,
   so this file stays the single definition. Their position (header row / corner) is unchanged. */html body .maple-close-circle,
html body .da-close-circle,
html body .pipeline2-card .pipeline2-card-close,
html body .wf-induction-frame-close,
html body .wf-induction-close,
html body .pipeline2-add-lead-close,
html body .pipeline2-driver-app-frame-close,
html body .pipeline-person-head-row > .pipeline-person-close.maple-icon-button,
html body .pipeline-perf-close,
html body .pes-settings-modal-close,
html body #pes-history-modal .pes-modal-close,
html body .tele-vehicles-modal-close,
html body .fleet-modal-close,
html body .users-modal-close,
html body #rl-root .rl-drawer-close,
html body .maple-ws-waiting-close,
html body .maple-ws-person-inbox-close,
html body .maple-ws-setup-qr-close,
html body .maple-ws-devices-modal-close,
html body .maple-ws-chrome-modal-close,
html body .maple-ws-security-modal-close,
html body .maple-ws-admin-modal-close,
html body .da-secure-modal-sheet > .da-secure-modal-header-actions .pipeline2-card-close.da-secure-modal-close,
html body .da-secure-modal-close,
html body .da-logout-modal-close,
html body .leaflet-container a.leaflet-popup-close-button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important;
  width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important;
  max-width: 26px !important; max-height: 26px !important;
  padding: 0 !important; border: 0 !important; border-radius: 999px !important;
  background: #17362c !important; color: #fff !important; box-shadow: none !important;
  font-size: 0 !important; line-height: 1 !important; text-decoration: none !important; overflow: hidden;
  cursor: pointer;
}html body .maple-close-circle > *,
html body .da-close-circle > *,
html body .pipeline2-card .pipeline2-card-close > *,
html body .wf-induction-frame-close > *,
html body .wf-induction-close > *,
html body .pipeline2-add-lead-close > *,
html body .pipeline2-driver-app-frame-close > *,
html body .pipeline-person-head-row > .pipeline-person-close.maple-icon-button > *,
html body .pipeline-perf-close > *,
html body .pes-settings-modal-close > *,
html body #pes-history-modal .pes-modal-close > *,
html body .tele-vehicles-modal-close > *,
html body .fleet-modal-close > *,
html body .users-modal-close > *,
html body #rl-root .rl-drawer-close > *,
html body .maple-ws-waiting-close > *,
html body .maple-ws-person-inbox-close > *,
html body .maple-ws-setup-qr-close > *,
html body .maple-ws-devices-modal-close > *,
html body .maple-ws-chrome-modal-close > *,
html body .maple-ws-security-modal-close > *,
html body .maple-ws-admin-modal-close > *,
html body .da-secure-modal-close > *,
html body .da-logout-modal-close > *,
html body .leaflet-container a.leaflet-popup-close-button > * {
  display: none !important;
}html body .maple-close-circle::before,
html body .da-close-circle::before,
html body .pipeline2-card .pipeline2-card-close::before,
html body .wf-induction-frame-close::before,
html body .wf-induction-close::before,
html body .pipeline2-add-lead-close::before,
html body .pipeline2-driver-app-frame-close::before,
html body .pipeline-person-head-row > .pipeline-person-close.maple-icon-button::before,
html body .pipeline-perf-close::before,
html body .pes-settings-modal-close::before,
html body #pes-history-modal .pes-modal-close::before,
html body .tele-vehicles-modal-close::before,
html body .fleet-modal-close::before,
html body .users-modal-close::before,
html body #rl-root .rl-drawer-close::before,
html body .maple-ws-waiting-close::before,
html body .maple-ws-person-inbox-close::before,
html body .maple-ws-setup-qr-close::before,
html body .maple-ws-devices-modal-close::before,
html body .maple-ws-chrome-modal-close::before,
html body .maple-ws-security-modal-close::before,
html body .maple-ws-admin-modal-close::before,
html body .da-secure-modal-close::before,
html body .da-logout-modal-close::before,
html body .leaflet-container a.leaflet-popup-close-button::before {
  content: "\00d7" !important; position: static !important; display: block !important;
  inset: auto !important; width: auto !important; height: auto !important; background: none !important; border: 0 !important;
  font: 400 20px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important; color: #fff !important;
  transform: translateY(-1px); opacity: 1 !important;
}html body .maple-close-circle:hover,
html body .da-close-circle:hover,
html body .pipeline2-card .pipeline2-card-close:hover,
html body .da-secure-modal-close:hover,
html body .da-logout-modal-close:hover { background: #1f4a3c !important; }