/* Admin live map, driver map, markers and Leaflet theming.
   Layer 4 of 5. Leaflet's own leaflet.css loads before this file. */

/* ── Admin Live Map ──────────────────────────────── */
#order-42,#driver-7,#vendor-3,[id^="order-"],[id^="driver-"],[id^="vendor-"]{scroll-margin-top:72px;}
.admin-map-page{display:flex;flex-direction:column;gap:0.8rem;}
.map-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.map-page-header h1{margin:0;}
.map-page-subtitle{margin:0.2rem 0 0;}
.map-summary{display:flex;align-items:center;gap:0.45rem;flex-wrap:wrap;}
.map-summary-item{min-height:32px;display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border:1px solid var(--border);border-radius:7px;background:var(--card-bg);color:var(--muted);font-size:.75rem;}
.map-summary-item strong{color:var(--text);}
.map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding:.55rem;}
.map-filter-group,.map-toolbar-actions,.map-history-actions{display:flex;align-items:center;gap:0.45rem;flex-wrap:wrap;}
.map-filter-title{margin-right:0.2rem;font-size:0.9rem;}
.map-check{min-height:32px;display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .48rem;border:1px solid var(--border);border-radius:6px;background:var(--surface-subtle);cursor:pointer;font-size:.76rem;}
.map-check input{width:17px;height:17px;margin:0;accent-color:var(--primary);}
.map-select-label{display:inline-flex;align-items:center;gap:0.4rem;color:var(--muted);font-size:0.82rem;}
.map-stage{position:relative;min-height:520px;height:calc(100vh - 300px);max-height:820px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--card-bg);}
#admin-map{width:100%;height:100%;min-height:520px;background:var(--card-bg);}
.map-loading{position:absolute;z-index:500;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;min-height:36px;padding:0.45rem 0.8rem;border:1px solid var(--border);border-radius:999px;background:var(--card-bg);color:var(--muted);box-shadow:0 3px 14px rgba(0,0,0,0.12);}
.map-loading[hidden]{display:none;}
.map-loading-error{color:var(--danger);border-color:var(--danger);}
.map-drawer{position:absolute;z-index:600;top:0;right:0;bottom:0;width:min(410px,92%);display:flex;flex-direction:column;background:var(--card-bg);border-left:1px solid var(--border);box-shadow:-8px 0 24px rgba(0,0,0,0.16);transform:translateX(105%);transition:transform 0.22s ease;visibility:hidden;}
.map-drawer.open{transform:translateX(0);visibility:visible;}
.map-drawer-handle{display:none;}
.map-drawer-header{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.55rem 0.75rem;border-bottom:0;}
.map-drawer-header h2{margin:0;font-size:1.05rem;}
.map-drawer-content{flex:1;overflow-y:auto;padding:0.9rem;}
.map-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:0.6rem;margin-bottom:0.8rem;}
.map-detail-header h3{margin:0 0 0.1rem;font-size:1.08rem;}
.map-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.55rem;margin-bottom:0.9rem;}
.map-detail-grid>div{min-width:0;overflow-wrap:anywhere;}
.map-detail-wide{grid-column:1/-1;}
.map-detail-header .status{flex-shrink:0;}
.map-freshness{display:inline-flex;align-items:center;min-height:28px;padding:0.2rem 0.6rem;border-radius:999px;font-size:0.78rem;font-weight:600;white-space:nowrap;}
.map-freshness-live{background:rgba(43,138,62,0.14);color:var(--success);}
.map-freshness-stale{background:rgba(241,196,15,0.18);color:#8a6400;}
.map-freshness-offline,.map-freshness-off,.map-freshness-unlocated,.map-freshness-disabled{background:var(--border);color:var(--muted);}
:root[data-theme="dark"] .map-freshness-stale{color:#f1c40f;}
.map-related-list{display:flex;flex-direction:column;gap:0.35rem;margin-bottom:0.9rem;}
.map-related-list a{display:block;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);overflow-wrap:anywhere;}
.map-history-control{padding:0.7rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);margin:0.8rem 0;}
.map-history-actions{align-items:flex-end;}
.map-history-summary{margin:0.5rem 0 0;font-size:0.8rem;}
.map-route-control{display:flex;align-items:center;gap:0.55rem;flex-wrap:wrap;padding:0.65rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);margin:0.8rem 0;}
.map-route-summary{font-size:0.8rem;}
.map-detail-link,.map-detail-links{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.8rem;}
.map-detail-link{width:fit-content;}
.map-legend{display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap;padding:0.55rem 0.7rem;color:var(--muted);font-size:0.78rem;}
.map-legend>span,.map-legend-item{display:inline-flex;align-items:center;gap:0.3rem;}
.map-legend-dot--pickup{background:#fff4e6;}
.map-legend-dot--deliver{background:#e7f0ff;}
:root[data-theme="dark"] .map-legend-dot--pickup{background:#5a4026;}
:root[data-theme="dark"] .map-legend-dot--deliver{background:#2e4668;}

/* ── Driver available map (single map for every stop) ── */
.full-map{height:calc(100vh - 260px);min-height:400px;border-radius:10px;border:1px solid var(--border);}
.map-hint{margin:0.4rem 0 0;font-size:0.78rem;}
.map-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  max-height:55vh;overflow-y:auto;
  padding:1rem;background:var(--card-bg);
  border-top:1px solid var(--border);border-radius:12px 12px 0 0;
  box-shadow:0 -4px 20px rgba(0,0,0,0.15);
  transform:translateY(100%);transition:transform 0.25s ease;
}
.map-sheet-handle{width:36px;height:4px;margin:0 auto 0.8rem;background:var(--border);border-radius:999px;}
.map-sheet-close{width:100%;background:var(--card-bg);color:var(--text);border:1px solid var(--border);}
.map-sheet .order-card{margin:0;}
.map-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;border:2px solid var(--card-bg);box-shadow:0 0 0 1px var(--border);}
.map-legend-live{background:var(--success);}
.map-legend-stale{background:#f1c40f;}
.map-legend-offline{background:var(--muted);}
.map-unlocated[hidden]{display:none;}
.map-unlocated summary{cursor:pointer;font-weight:600;}
.map-unlocated-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0.4rem;margin-top:0.7rem;}
.map-unlocated-row{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.45rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);}
.map-unlocated-row>span{min-width:0;overflow-wrap:anywhere;font-size:0.82rem;color:var(--muted);}
.map-pin{display:grid!important;place-items:center;width:30px!important;height:30px!important;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);border:2px solid var(--card-bg);box-shadow:0 2px 7px rgba(0,0,0,0.28);background:var(--card-bg);}
.map-pin>*{transform:rotate(45deg);}
.map-pin-driver{background:#e7f5ea;}
.map-pin-live{box-shadow:0 0 0 4px rgba(43,138,62,0.28),0 2px 7px rgba(0,0,0,0.28);}
.map-pin-stale{box-shadow:0 0 0 4px rgba(241,196,15,0.3),0 2px 7px rgba(0,0,0,0.28);}
.map-pin-offline,.map-pin-off,.map-pin-unlocated,.map-pin-disabled{opacity:0.62;}
.map-pin-vendor{background:#fff4e6;}
.map-pin-delivery{background:#e7f0ff;}
.map-pin-tracked-user{background:#f0e9ff;}
.map-pin-recorded{opacity:0.78;box-shadow:0 0 0 3px rgba(121,80,242,0.22),0 2px 7px rgba(0,0,0,0.28);}
:root[data-theme="dark"] .map-pin-driver{background:#31543a;}
:root[data-theme="dark"] .map-pin-tracked-user{background:#49386b;}
:root[data-theme="dark"] .map-pin-vendor{background:#5a4026;}
:root[data-theme="dark"] .map-pin-delivery{background:#2e4668;}
/* Simple emoji markers used by the driver map and the order detail map. They
   need a surface behind the glyph, or the emoji sits directly on the
   inverted tiles and loses contrast. */
.vendor-marker,.dest-marker,.me-marker{
  display:grid!important;place-items:center;
  width:24px!important;height:24px!important;
  border-radius:50%;
  border:2px solid var(--card-bg);
  background:var(--card-bg);
  box-shadow:0 2px 7px rgba(0,0,0,0.28);
  font-size:.8rem;line-height:1;
}
.me-marker{width:28px!important;height:28px!important;font-size:.9rem;}

.map-trail-point{display:grid!important;place-items:center;border-radius:50%;color:#fff;border:2px solid #fff;box-shadow:0 2px 7px rgba(0,0,0,0.3);}
.map-trail-start{background:var(--success);}
.map-trail-end{background:var(--danger);}
.leaflet-tooltip{border:1px solid var(--border);background:var(--card-bg);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.12);}
.map-dashboard-tile .count{font-size:1.55rem;}

@media (max-width:720px){
  .map-page-header{align-items:stretch;}
  .map-summary{width:100%;}
  .map-summary-item{flex:1 1 auto;justify-content:center;}
  .map-toolbar,.map-toolbar-actions{width:100%;}
  .map-toolbar-actions{align-items:flex-end;}
  .map-select-label{flex:1 1 180px;}
  .map-select-label .select{flex:1;}
  .map-stage{min-height:480px;height:68vh;}
  #admin-map{min-height:480px;}
  .map-drawer{top:auto;left:0;width:100%;max-height:72%;border-left:0;border-top:0;border-radius:14px 14px 0 0;transform:translateY(105%);}
  .map-drawer.open{transform:translateY(0);}
  .map-drawer-handle{display:block;width:42px;height:4px;margin:0.45rem auto 0;border-radius:999px;background:var(--border);}
  .map-detail-grid{grid-template-columns:1fr;}
  .map-detail-wide{grid-column:auto;}
  .map-history-actions{align-items:stretch;flex-direction:column;}
  .map-history-actions .map-select-label{display:flex;}
  .map-unlocated-list{grid-template-columns:1fr;}
}

.map-related-list a,
.map-history-control,
.map-route-control,
.map-unlocated-row{background:var(--surface-subtle);}
.map-loading{border-radius:7px;box-shadow:var(--shadow-md);}

/* ── Leaflet theming (applies to every map) ─────────
   OSM raster tiles have no dark variant, so invert them under the dark
   theme. Scoped to the theme attribute rather than a per-map class, so the
   driver available map, route maps in order cards, and the admin live map
   all follow the toggle with no per-instance wiring. */
:root[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.55);}
:root[data-theme="dark"] .leaflet-container{background:var(--card-bg);}
:root[data-theme="dark"] .leaflet-control-attribution{background:rgba(18,26,35,.88);color:var(--muted);}
:root[data-theme="dark"] .leaflet-control-attribution a{color:var(--primary);}
:root[data-theme="dark"] .leaflet-bar a{background:var(--surface-subtle);color:var(--text);border-color:var(--border);}
:root[data-theme="dark"] .leaflet-bar a:hover{background:var(--surface-hover);}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip{background:var(--card-bg);color:var(--text);}
:root[data-theme="dark"] .leaflet-popup-close-button{color:var(--muted);}
:root[data-theme="dark"] .leaflet-popup-close-button:hover{color:var(--text);}
/* Popup content is authored inline in driver JS, so give it the same
   font handling as the rest of the app rather than Leaflet's defaults. */
.leaflet-popup-content{font-family:inherit;font-size:.82rem;line-height:1.45;color:var(--text);}
.leaflet-container{font-family:inherit;}