/* =========================================================
   TRACKME MAP SYSTEM
   Shared map visual language for TrackMe
   Themes: DARK / LIGHT
   ========================================================= */

:root{
  --tm-map-cyan:#18E3F5;
  --tm-map-cyan-2:#00DDF4;
  --tm-map-blue:#5E8CFF;
  --tm-map-radius:26px;
}

/* -----------------------------
   BASE / FRAME
   ----------------------------- */
#map,
#device-map{
  height:480px;
  border-radius:var(--tm-map-radius);
  overflow:hidden;
  position:relative;
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

#map.leaflet-container,
#device-map.leaflet-container{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:background .22s ease;
}

/* -----------------------------
   DARK — default TrackMe look
   ----------------------------- */
html[data-map-theme="dark"] #map,
html[data-map-theme="dark"] #device-map{
  border:1px solid rgba(0,229,255,.34);
  background:
    radial-gradient(circle at 70% 25%,rgba(0,229,255,.08),transparent 32%),
    linear-gradient(145deg,#07131D 0%,#0A1B28 55%,#07111A 100%);
  box-shadow:
    0 22px 60px rgba(0,0,0,.42),
    0 0 0 1px rgba(0,229,255,.05) inset,
    0 0 36px rgba(0,229,255,.08);
}

html[data-map-theme="dark"] #map .leaflet-tile-pane,
html[data-map-theme="dark"] #device-map .leaflet-tile-pane{
  filter:
    brightness(.62)
    invert(1)
    contrast(2.45)
    hue-rotate(188deg)
    saturate(.28)
    brightness(.78);
  opacity:.90;
}

html[data-map-theme="dark"] #map::after,
html[data-map-theme="dark"] #device-map::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:400;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(4,20,31,.05),rgba(4,20,31,.13));
  box-shadow:
    inset 0 0 0 1px rgba(83,226,255,.09),
    inset 0 0 54px rgba(0,8,15,.14);
}

/* -----------------------------
   LIGHT — same identity, not conventional
   ----------------------------- */
html[data-map-theme="light"] #map,
html[data-map-theme="light"] #device-map{
  border:1px solid rgba(0,149,190,.28);
  background:
    radial-gradient(circle at 76% 18%,rgba(0,213,239,.10),transparent 34%),
    linear-gradient(145deg,#E9F7FB 0%,#F7FCFE 52%,#EAF4FA 100%);
  box-shadow:
    0 20px 52px rgba(15,45,65,.16),
    0 0 0 1px rgba(255,255,255,.86) inset,
    0 0 30px rgba(0,194,226,.08);
}

html[data-map-theme="light"] #map .leaflet-tile-pane,
html[data-map-theme="light"] #device-map .leaflet-tile-pane{
  filter:
    grayscale(.70)
    sepia(.12)
    hue-rotate(155deg)
    saturate(.58)
    contrast(1.08)
    brightness(1.10);
  opacity:.97;
}

html[data-map-theme="light"] #map::after,
html[data-map-theme="light"] #device-map::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:400;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(230,250,255,.02),rgba(0,153,204,.035));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 0 45px rgba(0,100,140,.035);
}

/* -----------------------------
   ZOOM CONTROLS
   ----------------------------- */
#map .leaflet-bar,
#device-map .leaflet-bar{
  border-radius:14px!important;
  overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease;
}

#map .leaflet-control-zoom a,
#device-map .leaflet-control-zoom a{
  width:43px;
  height:43px;
  line-height:41px;
  border:0!important;
  font-weight:500;
  transition:background .18s ease,color .18s ease;
}

#map .leaflet-control-zoom a:last-child,
#device-map .leaflet-control-zoom a:last-child{
  border-bottom:0!important;
}

html[data-map-theme="dark"] #map .leaflet-bar,
html[data-map-theme="dark"] #device-map .leaflet-bar{
  border:1px solid rgba(91,230,255,.28)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.34)!important;
}

html[data-map-theme="dark"] #map .leaflet-control-zoom a,
html[data-map-theme="dark"] #device-map .leaflet-control-zoom a{
  background:rgba(5,20,30,.94);
  color:#F6FBFF;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}

html[data-map-theme="dark"] #map .leaflet-control-zoom a:hover,
html[data-map-theme="dark"] #device-map .leaflet-control-zoom a:hover{
  background:#0D2D3E;
  color:#27E8FF;
}

html[data-map-theme="light"] #map .leaflet-bar,
html[data-map-theme="light"] #device-map .leaflet-bar{
  border:1px solid rgba(0,156,198,.24)!important;
  box-shadow:0 12px 30px rgba(25,66,91,.16)!important;
}

html[data-map-theme="light"] #map .leaflet-control-zoom a,
html[data-map-theme="light"] #device-map .leaflet-control-zoom a{
  background:rgba(247,252,255,.94);
  color:#102C3A;
  border-bottom:1px solid rgba(11,68,93,.10)!important;
}

html[data-map-theme="light"] #map .leaflet-control-zoom a:hover,
html[data-map-theme="light"] #device-map .leaflet-control-zoom a:hover{
  background:#E4F8FC;
  color:#008EAA;
}

/* -----------------------------
   LIGHT / DARK SWITCH
   ----------------------------- */
.trackme-theme-control{
  margin:10px 10px 0 0!important;
}

.trackme-theme-switch{
  display:flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border-radius:14px;
  user-select:none;
  -webkit-user-select:none;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

html[data-map-theme="dark"] .trackme-theme-switch{
  background:rgba(5,18,28,.90);
  border:1px solid rgba(71,224,255,.23);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

html[data-map-theme="light"] .trackme-theme-switch{
  background:rgba(248,253,255,.92);
  border:1px solid rgba(0,145,185,.18);
  box-shadow:0 10px 26px rgba(35,76,98,.13);
}

.trackme-theme-option{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:8px 11px;
  min-width:58px;
  border-radius:10px;
  font:800 10px/1 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:1.05px;
  background:transparent;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}

html[data-map-theme="dark"] .trackme-theme-option{
  color:#7F98A7;
}

html[data-map-theme="dark"] .trackme-theme-option.active{
  color:#F7FDFF;
  background:linear-gradient(135deg,rgba(0,229,255,.18),rgba(94,140,255,.18));
  box-shadow:0 0 0 1px rgba(59,227,255,.20) inset,0 0 16px rgba(0,229,255,.10);
}

html[data-map-theme="light"] .trackme-theme-option{
  color:#66808E;
}

html[data-map-theme="light"] .trackme-theme-option.active{
  color:#063446;
  background:linear-gradient(135deg,rgba(0,205,234,.16),rgba(94,140,255,.12));
  box-shadow:0 0 0 1px rgba(0,151,190,.12) inset,0 8px 18px rgba(0,120,160,.08);
}

/* -----------------------------
   ATTRIBUTION
   ----------------------------- */
#map .leaflet-control-attribution,
#device-map .leaflet-control-attribution{
  border-radius:12px 0 0 0;
  padding:5px 9px!important;
  backdrop-filter:blur(9px);
}

html[data-map-theme="dark"] #map .leaflet-control-attribution,
html[data-map-theme="dark"] #device-map .leaflet-control-attribution{
  background:rgba(4,16,25,.86)!important;
  color:#90A9B8!important;
}

html[data-map-theme="dark"] #map .leaflet-control-attribution a,
html[data-map-theme="dark"] #device-map .leaflet-control-attribution a{
  color:#1EDFF5!important;
}

html[data-map-theme="light"] #map .leaflet-control-attribution,
html[data-map-theme="light"] #device-map .leaflet-control-attribution{
  background:rgba(247,252,255,.88)!important;
  color:#5C7684!important;
}

html[data-map-theme="light"] #map .leaflet-control-attribution a,
html[data-map-theme="light"] #device-map .leaflet-control-attribution a{
  color:#008CA8!important;
}

/* -----------------------------
   POPUPS
   ----------------------------- */
#map .leaflet-popup-content-wrapper,
#device-map .leaflet-popup-content-wrapper{
  border-radius:20px;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

#map .leaflet-popup-content,
#device-map .leaflet-popup-content{
  margin:18px 20px;
  min-width:230px;
  max-width:320px;
  font-size:14px;
  line-height:1.48;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

#map .leaflet-popup-content b,
#device-map .leaflet-popup-content b{
  font-size:16px;
}

#map .leaflet-popup-close-button,
#device-map .leaflet-popup-close-button{
  font-size:24px!important;
  top:7px!important;
  right:8px!important;
}

#map .leaflet-popup-content .btn-sm,
#device-map .leaflet-popup-content .btn-sm{
  border-radius:10px;
}

html[data-map-theme="dark"] #map .leaflet-popup-content-wrapper,
html[data-map-theme="dark"] #device-map .leaflet-popup-content-wrapper{
  background:rgba(7,18,28,.97);
  color:#F4FAFF;
  border:1px solid rgba(111,227,255,.20);
  box-shadow:0 24px 58px rgba(0,0,0,.44),0 0 28px rgba(0,229,255,.08);
}

html[data-map-theme="dark"] #map .leaflet-popup-content,
html[data-map-theme="dark"] #device-map .leaflet-popup-content{
  color:#F4FAFF;
}

html[data-map-theme="dark"] #map .leaflet-popup-content b,
html[data-map-theme="dark"] #device-map .leaflet-popup-content b,
html[data-map-theme="dark"] #map .smart-place-name,
html[data-map-theme="dark"] #device-map .smart-place-name{
  color:#FFFFFF!important;
}

html[data-map-theme="dark"] #map .leaflet-popup-content .node-address,
html[data-map-theme="dark"] #device-map .leaflet-popup-content .node-address,
html[data-map-theme="dark"] #map .smart-place-address,
html[data-map-theme="dark"] #device-map .smart-place-address{
  color:#D8F5FF!important;
}

html[data-map-theme="dark"] #map .smart-place-ref,
html[data-map-theme="dark"] #device-map .smart-place-ref,
html[data-map-theme="dark"] #map .smart-coords,
html[data-map-theme="dark"] #device-map .smart-coords{
  color:#89A5B4!important;
}

html[data-map-theme="dark"] #map .leaflet-popup-tip,
html[data-map-theme="dark"] #device-map .leaflet-popup-tip{
  background:rgba(7,18,28,.97);
}

html[data-map-theme="dark"] #map .leaflet-popup-close-button,
html[data-map-theme="dark"] #device-map .leaflet-popup-close-button{
  color:#91A9B6!important;
}

html[data-map-theme="dark"] #map .leaflet-popup-content .btn-sm,
html[data-map-theme="dark"] #device-map .leaflet-popup-content .btn-sm{
  color:#24E8FF!important;
  border-color:rgba(36,232,255,.42)!important;
  background:rgba(36,232,255,.06);
}

html[data-map-theme="light"] #map .leaflet-popup-content-wrapper,
html[data-map-theme="light"] #device-map .leaflet-popup-content-wrapper{
  background:rgba(249,253,255,.98);
  color:#102633;
  border:1px solid rgba(0,146,184,.14);
  box-shadow:0 22px 50px rgba(24,68,90,.18),0 0 24px rgba(0,178,214,.05);
}

html[data-map-theme="light"] #map .leaflet-popup-content,
html[data-map-theme="light"] #device-map .leaflet-popup-content{
  color:#102633;
}

html[data-map-theme="light"] #map .leaflet-popup-content b,
html[data-map-theme="light"] #device-map .leaflet-popup-content b,
html[data-map-theme="light"] #map .smart-place-name,
html[data-map-theme="light"] #device-map .smart-place-name{
  color:#0C2430!important;
}

html[data-map-theme="light"] #map .leaflet-popup-content .node-address,
html[data-map-theme="light"] #device-map .leaflet-popup-content .node-address,
html[data-map-theme="light"] #map .smart-place-address,
html[data-map-theme="light"] #device-map .smart-place-address{
  color:#183A48!important;
}

html[data-map-theme="light"] #map .smart-place-ref,
html[data-map-theme="light"] #device-map .smart-place-ref,
html[data-map-theme="light"] #map .smart-coords,
html[data-map-theme="light"] #device-map .smart-coords{
  color:#627D8A!important;
}

html[data-map-theme="light"] #map .leaflet-popup-tip,
html[data-map-theme="light"] #device-map .leaflet-popup-tip{
  background:rgba(249,253,255,.98);
}

html[data-map-theme="light"] #map .leaflet-popup-close-button,
html[data-map-theme="light"] #device-map .leaflet-popup-close-button{
  color:#627D8A!important;
}

html[data-map-theme="light"] #map .leaflet-popup-content .btn-sm,
html[data-map-theme="light"] #device-map .leaflet-popup-content .btn-sm{
  color:#007F98!important;
  border-color:rgba(0,140,172,.28)!important;
  background:rgba(0,190,220,.055);
}

/* -----------------------------
   DEVICE / ROUTE MARKERS
   ----------------------------- */
.trackme-device-marker,
.trackme-route-marker{
  background:transparent!important;
  border:0!important;
}

.trackme-marker-shell{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:rgba(0,229,255,.12);
  box-shadow:
    0 0 0 8px rgba(0,229,255,.07),
    0 0 24px rgba(0,229,255,.55);
}

.trackme-marker-shell::before{
  content:"";
  width:17px;
  height:17px;
  border-radius:50%;
  background:#F9FDFF;
  box-shadow:0 0 0 5px #16D9ED;
}

.trackme-marker-shell::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(61,226,255,.28);
}

.trackme-route-shell{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#071B28;
  border:3px solid #17DFF4;
  box-shadow:
    0 0 0 7px rgba(0,229,255,.08),
    0 0 20px rgba(0,229,255,.42);
}

.trackme-route-shell.end{
  border-color:#8EA4FF;
  box-shadow:
    0 0 0 7px rgba(142,164,255,.08),
    0 0 20px rgba(110,142,255,.45);
}

.trackme-route-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#FFFFFF;
}

html[data-map-theme="light"] .trackme-marker-shell{
  background:rgba(0,193,220,.13);
  box-shadow:
    0 0 0 8px rgba(0,193,220,.08),
    0 8px 20px rgba(0,118,156,.18);
}

html[data-map-theme="light"] .trackme-route-shell{
  background:#F7FDFF;
  border-color:#00AFCB;
  box-shadow:
    0 0 0 7px rgba(0,190,220,.08),
    0 8px 18px rgba(0,108,145,.16);
}

html[data-map-theme="light"] .trackme-route-shell.end{
  border-color:#607FE7;
  box-shadow:
    0 0 0 7px rgba(96,127,231,.08),
    0 8px 18px rgba(73,101,200,.15);
}

html[data-map-theme="light"] .trackme-route-dot{
  background:#0A2A38;
}

/* -----------------------------
   ROUTE — same cyan identity in both themes
   ----------------------------- */
#device-map path.trackme-route-glow{
  stroke:var(--tm-map-cyan-2)!important;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:blur(3px);
}

#device-map path.trackme-route-line{
  stroke:var(--tm-map-cyan)!important;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.72))
    drop-shadow(0 0 6px rgba(0,229,255,.92))
    drop-shadow(0 0 15px rgba(0,170,255,.48));
}

html[data-map-theme="light"] #device-map path.trackme-route-glow{
  opacity:.12!important;
}

html[data-map-theme="light"] #device-map path.trackme-route-line{
  stroke:#00AFCB!important;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.85))
    drop-shadow(0 0 4px rgba(0,180,215,.34));
}

/* -----------------------------
   MOBILE
   ----------------------------- */
@media(max-width:650px){
  #map,#device-map{
    border-radius:18px;
  }
  #map .leaflet-control-zoom a,
  #device-map .leaflet-control-zoom a{
    width:40px;
    height:40px;
    line-height:38px;
  }
  .trackme-theme-control{
    margin:8px 8px 0 0!important;
  }
  .trackme-theme-option{
    min-width:52px;
    padding:8px 9px;
    letter-spacing:.8px;
  }
}