/* Lugoda Sentinel — GEO-MAP styles (view 'map').
   Dark theme, red accent. Map container, floating control panel, 2D/3D segmented
   toggle, pulsing marker classes, dispatch-flow overlay canvas, 3D canvas, legend,
   fallback list, and Leaflet dark popup overrides. */

/* ---- container -------------------------------------------------------- */
.gm-wrap{
  position:relative;
  height:62vh;
  min-height:420px;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#0c0c10;
}
.gm-map{position:absolute;inset:0;z-index:1;background:#0c0c10}
.gm-3d{position:absolute;inset:0;z-index:1;display:none;background:#0c0c10}
.gm-flow{position:absolute;inset:0;z-index:5;pointer-events:none}

/* 3D mode: hide leaflet, show canvas (flow canvas draws inside the 3D loop) */
.gm-wrap.is-3d .gm-map{display:none}
.gm-wrap.is-3d .gm-3d{display:block}
.gm-wrap.is-3d .gm-flow{display:none}

/* ---- floating control panel (top-right) ------------------------------ */
.gm-ctl{
  position:absolute;top:12px;right:12px;z-index:20;
  display:flex;flex-direction:column;gap:9px;align-items:flex-end;
  /* This overlay panel is always a dark glass chip (on any map tile, both themes),
     so pin light text values locally — otherwise --txt/--muted flip to dark in
     light mode and the labels vanish against the dark panel. */
  --txt:#f2f2f7; --muted:rgba(242,242,247,.72);
  color:var(--txt);
  background:rgba(20,20,26,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 11px;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  font-size:12px;
}

/* segmented 2D | 3D toggle */
.gm-seg{display:inline-flex;background:var(--ink);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
.gm-seg-b{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:.5px;
  padding:5px 13px;border-radius:7px;transition:.15s;
}
.gm-seg-b:hover{color:var(--txt)}
.gm-seg-b.active{background:var(--red);color:#fff}

/* flow toggle */
.gm-flowtog{display:flex;align-items:center;gap:7px;color:var(--txt);cursor:pointer;font-weight:600;white-space:nowrap}
.gm-flowtog input{accent-color:var(--red);width:14px;height:14px;cursor:pointer}

/* legend */
.gm-leg{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;color:var(--muted);font-size:11px}
.gm-leg span{display:flex;align-items:center;gap:5px}
.gm-leg .sq{width:10px;height:10px;border-radius:3px;display:inline-block}

@media(max-width:680px){
  .gm-ctl{left:12px;align-items:stretch}
  .gm-leg{justify-content:flex-start}
}

/* ====================================================================== */
/*  MARKERS — divIcon (coloured dot + ripple ring)                        */
/* ====================================================================== */
.gm-divicon{background:transparent;border:0}          /* kill default white box */
.leaflet-div-icon{background:transparent;border:0}

.mkr{position:relative;display:block;width:22px;height:22px}
.mkr .dotc{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
}
.mkr .ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;
}

/* READY — green soft steady glow */
.mkr.ok .dotc{background:var(--green);box-shadow:0 0 8px 1px rgba(39,194,129,.7)}
.mkr.ok .ring{box-shadow:0 0 0 0 rgba(39,194,129,.35);animation:gm-glow 2.6s infinite}

/* WARNING — amber slow pulse */
.mkr.warn .dotc{background:var(--amber);box-shadow:0 0 8px 1px rgba(245,166,35,.65)}
.mkr.warn .ring{animation:gm-ripple 2.4s infinite;box-shadow:0 0 0 0 rgba(245,166,35,.55)}

/* CRITICAL — red FAST ripple */
.mkr.crit .dotc{background:var(--red);box-shadow:0 0 10px 2px rgba(225,27,34,.8)}
.mkr.crit .ring{animation:gm-ripple .9s infinite;box-shadow:0 0 0 0 rgba(225,27,34,.7)}

/* OFFLINE — grey, dim, no animation */
.mkr.offline{opacity:.55}
.mkr.offline .dotc{background:var(--grey);border-color:rgba(255,255,255,.4);box-shadow:none}
.mkr.offline .ring{box-shadow:none}

/* ripple keyframe (extends the spirit of the global `pulse`) */
@keyframes gm-ripple{
  0%{box-shadow:0 0 0 0 currentColor}
  70%{box-shadow:0 0 0 16px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.mkr.warn .ring{color:rgba(245,166,35,.55)}
.mkr.crit .ring{color:rgba(225,27,34,.7)}
@keyframes gm-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(39,194,129,.35)}
  50%{box-shadow:0 0 0 7px rgba(39,194,129,0)}
}

/* ====================================================================== */
/*  LEAFLET POPUP — dark theme overrides                                  */
/* ====================================================================== */
.gm-popup .leaflet-popup-content-wrapper{
  background:var(--panel);color:var(--txt);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
}
.gm-popup .leaflet-popup-content{margin:12px 14px;font-family:'Segoe UI',system-ui,Arial,sans-serif}
.gm-popup .leaflet-popup-tip{background:var(--panel);border:1px solid var(--line)}
.gm-popup a.leaflet-popup-close-button{color:var(--muted)}
.gm-popup a.leaflet-popup-close-button:hover{color:var(--txt)}
.leaflet-container{background:#0c0c10}
.leaflet-control-attribution{background:rgba(20,20,26,.7);color:var(--muted)}
.leaflet-control-attribution a{color:var(--muted)}
.leaflet-bar a{background:var(--panel);color:var(--txt);border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--panel2)}

/* popup content blocks */
.gm-pop{min-width:206px}
.gm-pop-h{display:flex;align-items:center;gap:8px;justify-content:space-between}
.gm-pop-h b{font-size:14px;color:var(--txt)}
.gm-pop-sub{font-size:12px;color:#cfcfd6;margin-top:3px}
.gm-pop-meta{font-size:11px;color:var(--muted);margin-top:2px}
.gm-pop-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.gm-chip{font-size:10px;background:var(--panel2);border:1px solid var(--line);color:#d4d4dc;
  padding:2px 7px;border-radius:999px;white-space:nowrap}
.gm-pop-ready{position:relative;height:7px;border-radius:999px;background:var(--ink2);margin:10px 0 4px;overflow:hidden}
.gm-pop-ready i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--green),#4fe0a4);border-radius:999px}
.gm-pop-ready span{position:absolute;right:8px;top:-1px;font-size:9px;color:#fff;line-height:9px;font-weight:700;mix-blend-mode:difference}
.gm-pop-btns{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.gm-pop-btns .btn{flex:1;justify-content:center;min-width:104px}

/* ====================================================================== */
/*  FALLBACK (no Leaflet / no internet)                                   */
/* ====================================================================== */
.gm-fallback{position:absolute;inset:0;overflow:auto;padding:18px 20px}
.gm-fb-note{font-size:13px;color:var(--amber);background:#3a2c11;border:1px solid #5a430f;
  border-radius:10px;padding:10px 14px;margin-bottom:14px}
.gm-fb-list{display:flex;flex-direction:column;gap:8px}
.gm-fb-row{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.gm-fb-row .sq{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
.gm-fb-nm{display:flex;flex-direction:column;min-width:0}
.gm-fb-nm b{font-size:13px;color:var(--txt)}
.gm-fb-nm span{font-size:11px;color:var(--muted)}
.gm-fb-row .pill{margin-left:auto}