/* =====================================
   APP.CSS — CLEAN CONSOLIDATED BUILD v7 (COMPACT + POLISHED + MOBILE DVH FIX)
   - No duplicate blocks
   - Single, compact DAMAGE MODAL block (no-scroll-first design)
   - Android portrait friendly (dvh)
   ===================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --panel2:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;

  --brand1:#007cf0;
  --brand2:#00dfd8;
  --accent:#2563eb;

  --danger:#ef4444;
  --ok:#22c55e;
  --warn:#f59e0b;

  --border:rgba(255,255,255,0.12);
  --glass:rgba(255,255,255,0.06);

  --r-10:10px;
  --r-12:12px;
  --r-14:14px;

  --shadow-1:0 4px 12px rgba(0,0,0,.18);
  --shadow-2:0 10px 30px rgba(0,0,0,.35);

  /* UI helpers */
  --shadow-soft:0 8px 22px rgba(0,0,0,.28);
  --ring:0 0 0 3px rgba(59,130,246,0.30);
  --glass-strong:rgba(2,6,23,0.58);
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg,#0b1220,#0a0f1e 45%, #0b1220);
  overflow-x:hidden;
}

/* ---------- Map ---------- */
#map{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}
.leaflet-control-container{ z-index:1050; }

/* ==========================================================
   Inline critical overrides that were previously in index.html
   (moved here to keep index clean)
   ========================================================== */

/* UI layering safety for Preview toggles (created by camera-dock.js) */
#btnPreviewToggle,
#btnPreviewOverlayToggle{
  z-index:1450 !important;
  -webkit-user-select:none;
  user-select:none;
}

/* Route tracker labels (permanent tooltips for 500m markers) */
.route-km-label{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background: rgba(0,0,0,0.60);
  border:1px solid rgba(255,255,255,0.25);
  padding:2px 6px;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,0.20);
  white-space:nowrap;
}

/* Helper for disabled UI (used by gating logic in index.html) */
.grs-disabled{
  opacity:.45 !important;
  filter:saturate(.85) !important;
  pointer-events:none !important;
}

/* Also support aria-disabled set from JS (index gating) */
.bottom-buttons .btn[aria-disabled="true"],
.data-menu .data-item[aria-disabled="true"]{
  opacity:.55;
  filter:saturate(.85);
  pointer-events:none;
}

/* ---------- Generic Buttons ---------- */
.btn{ appearance:none; border:0; cursor:pointer; user-select:none; }
.btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

/* Icon-only top buttons */
.btn--icon{
  width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-12);
  border:2px solid transparent;
  background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.10);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease;
  font-size:18px; line-height:1;
}
.btn--icon:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.16); }
.btn--icon:active{ transform:translateY(0); }

/* ---------- Top Buttons Bar ---------- */
.top-buttons{
  position:fixed; left:0; right:0;
  top:0;
  display:flex; justify-content:center; align-items:center;
  gap:6px;
  padding:calc(6px + env(safe-area-inset-top)) 6px 6px;
z-index:20000;}
.top-buttons .row{
  display:flex;
  gap:6px;
}
.top-buttons .btn--icon{
  font-size:22px;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
#btnWorkPanel{
  touch-action: manipulation;
}

.top-buttons .btn--icon:focus-visible{
  outline:3px solid rgba(255,255,255,.9);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.18);
}

/* Per-button colors */
#btnRedo.btn--icon{ background:#3b82f6; }
#btnUndo.btn--icon{ background:#f59e0b; }
#btnLocate.btn--icon{ background:#06b6d4; }
#btnLayers.btn--icon{ background:#64748b; }
#btnToggleBottom.btn--icon{ background:#9ca3af; }
#btnData.btn--icon{ background:#8b5cf6; }
#btnMarkerSettings.btn--icon{ background:#10b981; }
#btnWorkPanel.btn--icon{ background:#334155; }

#btnRedo.btn--icon:hover{ background:#2563eb; }
#btnUndo.btn--icon:hover{ background:#d97706; }
#btnLocate.btn--icon:hover{ background:#0891b2; }
#btnLayers.btn--icon:hover{ background:#475569; }
#btnToggleBottom.btn--icon:hover{ background:#6b7280; }
#btnData.btn--icon:hover{ background:#7c3aed; }
#btnMarkerSettings.btn--icon:hover{ background:#059669; }
#btnWorkPanel.btn--icon:hover{ background:#1f2937; }

/* ---------- Bottom Buttons Bar ---------- */
.bottom-buttons{
  position:fixed; left:0; right:0; bottom:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(44px,auto);
  gap:6px;
  max-width:min(920px,96vw);
  margin:0 auto;

  /* Note:
     +28px is reserved for footer line; safe-area included for iOS */
  padding:6px 6px calc(6px + 28px + env(safe-area-inset-bottom));

  z-index:1000;
  transition:transform .25s ease, opacity .25s ease, visibility .25s linear;
  will-change:transform,opacity;
}
.bottom-buttons.is-hidden{ transform:translateY(120%); opacity:0; visibility:hidden; pointer-events:none; }

/* Big solid buttons (bottom & modal footer buttons) */
.bottom-buttons .btn,
.modal-buttons .btn{
  width:100%;
  min-height:44px;
  padding:8px 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-12);
  border:2px solid transparent;
  background-color:#475569;
  background-image:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0.00));
  color:#fff;
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:hidden;
}
.bottom-buttons .btn .icon,
.modal-buttons .btn .icon{
  font-size:20px; line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.bottom-buttons .btn .label,
.modal-buttons .btn .label{
  font-weight:700;
  line-height:1.1;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  white-space:nowrap;
}

/* sheen */
.bottom-buttons .btn::after,
.modal-buttons .btn::after{
  content:"";
  position:absolute; top:-150%; left:-30%;
  width:60%; height:400%;
  transform:rotate(20deg) translateX(-120%);
  background:linear-gradient(to right, rgba(255,255,255,0.00) 0%, rgba(255,255,255,.18) 48%, rgba(255,255,255,0.00) 100%);
  opacity:0;
  pointer-events:none;
  transition:transform .5s ease, opacity .25s ease;
}
.bottom-buttons .btn:hover::after,
.modal-buttons .btn:hover::after{
  transform:rotate(20deg) translateX(120%);
  opacity:.9;
}

.bottom-buttons .btn:hover,
.modal-buttons .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
  filter:saturate(1.05);
}
.bottom-buttons .btn:active,
.modal-buttons .btn:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 3px 10px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Special: “Όρισε όνομα” */
.bottom-buttons #btnCustomCat{
  background-color:var(--warn);
  background-image:linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,0.00));
}
.bottom-buttons #btnCustomCat:hover{ background-color:#d97706; }

/* ==========================================================
   Floating Start/Stop Controls (SINGLE SOURCE OF TRUTH)
   - Supports .grs-toggle-container / .grs-toggle-btn
   - Keeps legacy .grs-panel / .grs-icon-btn styles (if still used elsewhere)
   ========================================================== */
.grs-floating-controls{
  position:fixed;
  top:calc(58px + env(safe-area-inset-top));
  left:10px;
  transform:none;
  z-index:1060;
  display:flex;
  gap:8px;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:flex-start;
  /* IMPORTANT: clickable */
  pointer-events:auto;
  max-width:calc(100vw - 20px);
}

/* NEW: compact toggle container (Work / Start-over) */
.grs-toggle-container{
  pointer-events:auto;
  display:flex;
  gap:6px;
  align-items:stretch;
  justify-content:flex-start;
  padding:4px 5px;
  border-radius:12px;
  background:
    radial-gradient(900px 60px at 15% 0%, rgba(56,189,248,0.14), transparent 70%),
    linear-gradient(180deg, rgba(15,23,42,0.88), rgba(2,6,23,0.72));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 6px 16px rgba(0,0,0,0.22);
}

/* NEW: compact toggle button */
.grs-toggle-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius:12px;
  padding:7px 9px;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
  position:relative;
  overflow:hidden;
}
.grs-toggle-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05) saturate(1.05);
  box-shadow:0 10px 18px rgba(0,0,0,0.26);
}
.grs-toggle-btn:active{
  transform: translateY(0) scale(0.99);
}
.grs-toggle-btn .icon i{
  font-size:14px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18));
}
.grs-toggle-btn .label{
  font-weight:950;
  letter-spacing:.15px;
  font-size:11.5px;
  white-space:nowrap;
}

/* Per-button accent */
#shiftToggleBtn{ border-color: rgba(34,197,94,0.28); }
#shiftToggleBtn .icon i{ color: rgba(34,197,94,0.95); }

#routeToggleBtn{ border-color: rgba(56,189,248,0.28); }
#routeToggleBtn .icon i{ color: rgba(56,189,248,0.95); }

/* Active emphasis */
.grs-toggle-btn[aria-pressed="true"]{
  background: rgba(255,255,255,0.10);
  box-shadow: var(--ring), 0 10px 18px rgba(0,0,0,0.26);
}

/* Pills inside the buttons (compact) */
.grs-toggle-btn .grs-rec-pill,
.grs-toggle-btn .km-pill{
  margin-left:auto;
  padding:4px 7px;
  font-size:10.5px;
  border-radius:999px;
}

/* LEGACY: Panel (pill) */
.grs-panel{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:999px;
  background:
    radial-gradient(900px 60px at 15% 0%, rgba(56,189,248,0.16), transparent 70%),
    linear-gradient(180deg, rgba(15,23,42,0.90), rgba(2,6,23,0.74));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow-soft);
  color:var(--text);
  min-height:48px;
}

/* Title chip */
.grs-panel__chip{
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:950;
  font-size:11px;
  margin:0;
  opacity:.96;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(2,6,23,0.40);
  border:1px solid rgba(148,163,184,0.18);
  white-space:nowrap;
  flex:0 0 auto;
}
.grs-panel__chip i{ font-size:13px; opacity:.95; }

/* Chip accents */
.grs-chip--work{
  border-color: rgba(34,197,94,0.24);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.10);
}
.grs-chip--work i{ color: rgba(34,197,94,0.95); }

.grs-chip--route{
  border-color: rgba(56,189,248,0.26);
  box-shadow: inset 0 0 0 1px rgba(56,189,248,0.12);
}
.grs-chip--route i{ color: rgba(56,189,248,0.95); }

/* Panel accents by ID */
#trackingPanel{ box-shadow: var(--shadow-soft), 0 0 0 1px rgba(34,197,94,0.14) inset; }
#routePanel{ box-shadow: var(--shadow-soft), 0 0 0 1px rgba(56,189,248,0.16) inset; }

/* actions wrapper */
.grs-panel__actions{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  min-width:0;
}

/* Icon buttons */
.grs-icon-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:13px;
  width:40px;
  height:40px;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,0.22);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex:0 0 auto;
  background: rgba(255,255,255,0.06);
  color:#e5e7eb;
}
.grs-icon-btn i{
  font-size:16px;
  line-height:1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.20));
}
.grs-icon-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05) saturate(1.05);
  box-shadow:0 14px 26px rgba(0,0,0,0.28);
}
.grs-icon-btn:active{
  transform: translateY(0) scale(0.985);
  box-shadow:0 8px 18px rgba(0,0,0,0.22);
}
.grs-icon-btn:focus-visible{
  outline:none;
  box-shadow: var(--ring), 0 14px 26px rgba(0,0,0,0.28);
}
.grs-icon-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  filter:saturate(.75);
}

/* Button variants */
.grs-icon-btn--start{
  background: linear-gradient(135deg, rgba(34,197,94,1), rgba(16,185,129,1));
  color:#052a12;
  border-color: rgba(34,197,94,0.40);
}
.grs-icon-btn--route{
  background: linear-gradient(135deg, rgba(14,165,233,1), rgba(37,99,235,1));
  color:#061d33;
  border-color: rgba(56,189,248,0.40);
}
.grs-icon-btn--stop{
  background: linear-gradient(135deg, rgba(239,68,68,1), rgba(244,63,94,1));
  color:#2a0608;
  border-color: rgba(239,68,68,0.40);
}

/* REC pill + KM pill */
.grs-rec-pill,
.km-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.48);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:11.5px;
  font-weight:950;
  letter-spacing:.1px;
  flex:0 0 auto;
}
.grs-rec-pill .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,0.18);
}
.grs-rec-pill .rec-time{ opacity:.92; }

@media (max-width:520px){
  .grs-floating-controls{
    top:calc(52px + env(safe-area-inset-top));
    left:8px;
    gap:7px;
  }

  /* NEW toggles */
  .grs-toggle-container{ padding:4px; gap:6px; }
  .grs-toggle-btn{ padding:7px 8px; min-height:38px; }
  .grs-toggle-btn .label{ font-size:11px; }
  .grs-toggle-btn .icon i{ font-size:13.5px; }
  .grs-toggle-btn .grs-rec-pill,
  .grs-toggle-btn .km-pill{ padding:4px 6px; font-size:10.25px; }

  /* legacy */
  .grs-panel__chip{ padding:5px 7px; }
  .grs-panel__chip span{ display:none; }
  .grs-panel{ padding:6px 7px; min-height:46px; }
  .grs-icon-btn{ width:38px; height:38px; border-radius:12px; }
  .grs-icon-btn i{ font-size:15px; }
  .grs-rec-pill,
  .km-pill{ padding:6px 8px; font-size:11px; }
}

/* ---------- Panels / Sheets (Layer / Data / Marker) ---------- */
.layer-popup, .data-menu, .marker-popup{
  position:fixed;
  top:76px;
  right:10px;
  width:320px;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-14);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  color:#e5e7eb;
  padding:10px 10px 12px;
  z-index:1100;
  display:none;
  opacity:0;
  transform:translateY(-6px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;
}
.layer-popup.show, .data-menu.show, .marker-popup.show{
  display:block;
  opacity:1;
  transform:translateY(0) scale(1);
}

.layer-header, .marker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 6px 8px;
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.layer-title, .marker-title{
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
  font-size:15px;
}
.layer-actions, .marker-actions{ display:flex; gap:6px; }

.btn-icon{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
  font-size:14px;
  color:#e5e7eb;
}
.btn-icon:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}

/* Presets/list */
.preset-row{ display:flex; gap:8px; padding:8px 6px 10px; }
.preset-btn{
  flex:1;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:#e5e7eb;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.18);
}
.preset-btn:hover{ background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); }

.layer-list{ display:flex; flex-direction:column; gap:10px; padding:6px; max-height:56vh; overflow:auto; }
.layer-item{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:6px 8px;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.layer-name{ font-weight:900; color:#fff; font-size:14px; }
.layer-sub{ color:#cbd5e1; font-size:12px; opacity:.9; grid-column:1 / -1; }
.row-inline{ display:flex; align-items:center; gap:8px; }
.mono{ font-family:ui-monospace,Menlo,Monaco,Consolas,"Courier New",monospace; font-size:12px; opacity:.9; }

/* Switch */
.switch{ --w:44px; --h:24px; position:relative; width:var(--w); height:var(--h); }
.switch input{ display:none; }
.switch .track{
  position:absolute; inset:0;
  background:#475569;
  border-radius:999px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
  transition:background .15s ease;
}
.switch .thumb{
  position:absolute;
  top:2px; left:2px;
  width:20px; height:20px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#e5e7eb);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .15s ease;
}
.switch input:checked + .track{ background:#16a34a; }
.switch input:checked + .track + .thumb{ transform:translateX(20px); }

/* Sliders */
.slider,.marker-slider{
  -webkit-appearance:none;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  outline:none;
}
.slider{ width:120px; }
.marker-slider{ width:150px; }
.slider::-webkit-slider-thumb,.marker-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  cursor:pointer;
}
.slider::-moz-range-thumb,.marker-slider::-moz-range-thumb{
  width:16px; height:16px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  cursor:pointer;
}

/* ---------- Chips (generic) ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  font-weight:800;
  font-size:12px;
}
.chip img{ width:24px; height:24px; object-fit:contain; }
.chip .code{ font-variant-numeric:tabular-nums; letter-spacing:.2px; }

/* ---------- Camera preview ---------- */
#cameraPreview{
  display:none;
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(90vw,640px);
  max-height:80vh;
  background:#000;
  border:2px solid #fff;
  border-radius:12px;
  z-index:1400;
}
#cameraPreview.is-open{ display:block; }
#snapshotCanvas{ display:none; }
#snapshotCanvas.is-open{
  display:block;
  position:fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  border:2px dashed #fff;
  border-radius:12px;
  z-index:1400;
}

/* ---------- Leaflet Popup Card (EXTRA SMALL + SCROLLABLE) ---------- */
.leaflet-popup.popup-card .leaflet-popup-content-wrapper,
.leaflet-popup.popup-card .leaflet-popup-tip{
  background:#fff;
  color:#111;
}

/* Leaflet chrome: keep corners perfect, but DO NOT scroll here */
.leaflet-popup.popup-card .leaflet-popup-content-wrapper{
  padding:0 !important;
  border-radius:14px !important;
  overflow:hidden;                          /* keep round corners */
  box-shadow:0 10px 32px rgba(0,0,0,.18);
  max-height:min(48vh, 340px);              /* smaller overall popup */
}

.leaflet-popup.popup-card .leaflet-popup-content{
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;                          /* prevent wrapper scroll */
}

.leaflet-popup.popup-card a{ color:#1d4ed8; }

/* Card becomes the scroll container */
.popup-card .card{
  width:min(210px, 70vw);                   /* smaller */
  max-height:min(48vh, 340px);              /* match wrapper */
  overflow:auto;                            /* IMPORTANT: scroll here */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Compact spacing */
.popup-card .card__body{ padding:6px 7px; }

/* Smaller grid */
.popup-card .grid{
  display:grid;
  grid-template-columns:74px 1fr;
  column-gap:6px;
  row-gap:4px;
  align-items:start;
  font-size:10.5px;
  line-height:1.18;
}
.popup-card .grid .label{
  color:#64748b;
  font-weight:900;
  white-space:nowrap;
  font-size:10px;
}
.popup-card .grid .value{
  color:#0f172a;
  font-weight:650;
  overflow-wrap:anywhere;
}

/* Media: smaller + not dominating */
.popup-card .media,
.popup-card .photo,
.popup-card .photos,
.popup-card .preview{ margin-top:6px; }

.popup-card img,
.popup-card video{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(2,6,23,.06);
  max-height:min(14vh, 110px);              /* smaller photo */
}

/* Status pills */
.popup-card .status-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:5px;
  padding:6px 7px 0;
}
.popup-card .status-row .status-pill{
  width:100%;
  justify-content:center;
  padding:4px 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:950;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  color:#0f172a;
}
.popup-card .status-pill.status--new{ background:#ffedd5; border-color:#fdba74; color:#9a3412; }
.popup-card .status-pill.status--old{ background:#fef9c3; border-color:#fde047; color:#854d0e; }
.popup-card .status-pill.status--done{ background:#dcfce7; border-color:#86efac; color:#166534; }

/* Actions (Edit / Delete etc) */
.popup-card .actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  padding:6px 7px 8px;
  box-sizing:border-box;
}
.popup-card .actions .btn-small,
.popup-card .actions .btn-delete{
  appearance:none;
  min-width:0;
  padding:6px 6px;
  font-size:10px;
  font-weight:950;
  line-height:1.15;
  border-radius:11px;
  cursor:pointer;
  white-space:normal;
  word-break:break-word;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.popup-card .actions .btn-small{
  border:1px solid rgba(15,23,42,.12);
  background:#f8fafc;
  color:#0f172a;
  box-shadow:0 6px 14px rgba(2,6,23,.08);
}
.popup-card .actions .btn-small:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(2,6,23,.12);
}
.popup-card .actions .btn-delete{
  grid-column:1 / -1;
  border:1px solid #fecaca;
  background:#fee2e2;
  color:#7f1d1d;
  box-shadow:0 6px 14px rgba(2,6,23,.08);
}
.popup-card .actions .btn-delete:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(2,6,23,.12);
}

/* Very small screens */
@media (max-width:360px){
  .popup-card .card{ width:min(200px, 84vw); }
  .popup-card .status-row{ grid-template-columns:1fr; }
  .popup-card .actions{ grid-template-columns:1fr; }
}

/* ---------- "My location" marker ---------- */
.pulse-pin{
  position:relative;
  width:18px; height:18px;
  border-radius:50%;
  background:#0ea5e9;
  box-shadow:0 0 18px rgba(14,165,233,.85), 0 0 36px rgba(14,165,233,.45);
  border:2px solid #fff;
  filter: drop-shadow(0 6px 18px rgba(14,165,233,.55));
}
.pulse-pin::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(14,165,233,.55);
  animation:ping 1.8s infinite ease-out;
}
.pulse-pin::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:2px solid rgba(14,165,233,.35);
  animation:ping 2.4s .45s infinite ease-out;
}
@keyframes ping{
  0%{ transform:scale(.6); opacity:.85; }
  80%{ transform:scale(1.6); opacity:.12; }
  100%{ transform:scale(1.9); opacity:0; }
}
.leaflet-marker-pane .my-loc-icon{ z-index:9999 !important; pointer-events:none; }
.my-loc-icon{ position:relative; }
.my-loc-icon .loc-halo{
  position:absolute;
  left:50%; top:50%;
  width:72px; height:72px;
  transform:translate(-50%, -58%);
  background: radial-gradient(circle, rgba(14,165,233,.45) 0%, rgba(14,165,233,0) 60%);
  mix-blend-mode: screen;
  opacity:.85;
  border-radius:999px;
  pointer-events:none;
}

/* ==========================================================
   Modals (shell)
   ========================================================== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background:rgba(0,0,0,.35);
  z-index:1200;
  opacity:0;
  transform:scale(1.01);
  transition:opacity .22s ease, transform .22s ease;
}

/* Android: όταν αλλάζει η μπάρα διευθύνσεων, καλύτερα flex-start σε πολύ χαμηλά ύψη */
@media (max-height: 640px){
  .modal{
    align-items:flex-start;
    padding:calc(10px + env(safe-area-inset-top)) 0 calc(10px + env(safe-area-inset-bottom));
  }
}

.modal.show{ display:flex; opacity:1; transform:scale(1); }

.modal-content{
  background:#fff;
  color:#0f172a;
  border:1px solid #e2e8f0;
  border-radius:var(--r-14);
  box-shadow:0 10px 30px rgba(2,8,23,.18);
  padding:16px;
  width:min(720px,94vw);
  font-size:14px;
}
.modal-content h3{ margin:0 0 6px; font-size:16px; font-weight:900; color:#0f172a; }
.modal-content label{ display:block; margin:6px 0 4px; font-weight:800; color:#334155; }

.modal-content input:not(#routeDirection),
.modal-content select,
.modal-content textarea{
  width:100%;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#0f172a;
  font-size:13px;
  line-height:1.3;
}
#directionModal #routeDirection{
  width:min(360px,92%);
  display:block;
  margin:6px auto 0;
  height:30px;
  padding:4px 8px;
  font-size:13px;
  border-radius:6px;
  line-height:1.2;
}

/* modal footer base */
.modal-buttons{
  display:flex;
  gap:10px;
  justify-content:center;
  position:sticky;
  bottom:0;
  padding:12px 0;
  border-top:1px solid var(--border);
  background:transparent;
  z-index:1;
}

/* light modals footer */
#workModal .modal-buttons,
#damageModal .modal-buttons{
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
}

/* dark panels modal-buttons */
#customNameModal .modal-buttons,
.marker-popup .modal-buttons,
.layer-popup .modal-buttons,
.data-menu .modal-buttons{
  background:transparent;
  border-top:1px solid rgba(255,255,255,.12);
}

/* buttons inside dark panels */
#customNameModal .modal-buttons .btn,
.marker-popup .modal-buttons .btn,
.layer-popup .modal-buttons .btn,
.data-menu .modal-buttons .btn{
  background:#475569;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
#customNameModal .modal-buttons .btn:hover,
.marker-popup .modal-buttons .btn:hover,
.layer-popup .modal-buttons .btn:hover,
.data-menu .modal-buttons .btn:hover{
  filter:saturate(1.05);
  transform:translateY(-1px);
}

/* ==========================================================
   DAMAGE MODAL — SINGLE SOURCE OF TRUTH (NO-SCROLL-FIRST)
   - dvh height for Android (dynamic viewport)
   - Compact paddings
   - 2-column mode >= 520px
   - Scroll only inside dm-body when absolutely needed
   ========================================================== */
#damageModal .modal-content.damage-modal{
  width:min(520px, 94vw);
  max-height:calc(100dvh - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display:grid;
  grid-template-rows:auto 1fr auto;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 55px rgba(2,6,23,.28);
  padding:0;
}

/* header πιο χαμηλό */
#damageModal .dm-header{
  padding:8px 10px 6px;
  border-bottom:1px solid #e2e8f0;
  background:
    radial-gradient(1200px 120px at 20% 0%, rgba(37,99,235,.10), transparent 70%),
    linear-gradient(#fff,#fafafa);
}
#damageModal .dm-header h3{
  margin:0;
  font-size:14.5px;
  font-weight:950;
  letter-spacing:.2px;
  color:#0f172a;
}
#damageModal .dm-subtitle{
  margin:1px 0 0;
  font-size:11px;
  color:#64748b;
}
#damageModal #dmCategory{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:#1d4ed8;
  font-weight:900;
}

/* body: compact + safe scrolling */
#damageModal .dm-body{
  padding:6px 8px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#fff;
}

/* rows */
#damageModal .dm-row{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:5px 8px;
  padding:5px 0;
  border-bottom:1px dashed #e5e7eb;
}
#damageModal .dm-row:last-child{ border-bottom:0; }

#damageModal .dm-label{
  max-width:112px;
  font-size:12px;
  color:#334155;
  font-weight:900;
  padding-top:2px;
}

#damageModal .dm-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

/* inputs */
#damageModal input[type="text"],
#damageModal input[type="number"],
#damageModal select,
#damageModal textarea{
  width:100%;
  padding:6px 9px;
  border-radius:9px;
  border:1px solid #d1d5db;
  background:#fff;
  color:#0f172a;
  font-size:12.5px;
  line-height:1.15;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
#damageModal textarea{
  min-height:34px;
  resize:none;
}
#damageModal input:focus,
#damageModal select:focus,
#damageModal textarea:focus{
  border-color:#0ea5e9;
  box-shadow:0 0 0 3px rgba(14,165,233,.15);
}

#damageModal .dm-muted{
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

/* PILL GROUPS */
#damageModal .pill-group{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:2px;
}
#damageModal .pill{
  appearance:none;
  border:none;
  cursor:pointer;
  user-select:none;
  padding:6px 9px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:950;
  letter-spacing:.15px;
  color:#0f172a;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  box-shadow:0 2px 10px rgba(2,6,23,.06);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}
#damageModal .pill:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
  box-shadow:0 6px 16px rgba(2,6,23,.10);
}
#damageModal .pill:active{ transform:translateY(0) scale(.98); }
#damageModal .pill.is-active{
  background:rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.32);
  box-shadow:0 0 0 3px rgba(37,99,235,.12), 0 6px 16px rgba(2,6,23,.10);
}

/* small buttons inside damage modal */
#damageModal .btn-small,
#damageModal .btn-secondary,
#damageModal .btn-primary{
  appearance:none;
  border:none;
  border-radius:12px;
  padding:9px 12px;
  font-weight:950;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 8px 18px rgba(2,6,23,.14), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
#damageModal .btn-small:active,
#damageModal .btn-secondary:active,
#damageModal .btn-primary:active{ transform:scale(.98); }

#damageModal .btn-secondary{
  background:linear-gradient(135deg,#64748b,#475569);
  color:#fff;
}
#damageModal .btn-primary{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#052e16;
}
#damageModal .btn-small{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#031b2e;
}

/* Photo preview grid — compact (main scroll killer) */
#damageModal .dm-photos{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin-top:5px;
}
#damageModal .dm-photos img,
#damageModal .dm-photos video{
  width:100%;
  height:auto;
  max-height:12dvh;
  object-fit:contain;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:10px;
  display:block;
}
#damageModal .dm-photos .photo-item{
  padding:5px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(2,6,23,0.55);
}
#damageModal .dm-photos:empty{ display:none; }

/* Status select look */
#damageModal #status{
  background:
    radial-gradient(900px 60px at 20% 0%, rgba(34,197,94,.10), transparent 70%),
    #fff;
}

/* footer buttons tight */
#damageModal .modal-buttons{
  padding:8px;
  gap:8px;
  justify-content:stretch;
  background:#f8fafc;
}
#damageModal .modal-buttons button{
  flex:1 1 0;
  border-radius:14px;
  font-weight:950;
}
#damageModal #btnDamageCancel{
  background:linear-gradient(135deg,#e2e8f0,#cbd5e1);
  color:#0f172a;
  border:1px solid #cbd5e1;
  box-shadow:0 8px 18px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.55);
}
#damageModal #btnDamageSave{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#052e16;
  border:1px solid rgba(22,163,74,.35);
  box-shadow:0 12px 24px rgba(22,163,74,.18), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Two-column mode >= 520px */
@media (min-width:520px){
  #damageModal .dm-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 12px;
    align-content:start;
  }
  #damageModal .dm-row{
    grid-template-columns:1fr;
    border-bottom:0;
    padding:0;
  }
  #damageModal .dm-label{
    max-width:none;
    padding-top:0;
  }
  #damageModal .dm-photos{ grid-column:1 / -1; }
}

/* Very small screens */
@media (max-width:380px){
  #damageModal .dm-row{
    grid-template-columns:1fr;
    gap:6px;
  }
  #damageModal .dm-label{
    max-width:none;
    padding-top:0;
  }
}

/* ==========================================================
   SIGN PICKER (GLOBAL) — FIXED SCROLL (Grid + min-height:0)
   ========================================================== */
#signPickerBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:1490;
  display:none;
  opacity:0;
  transition:opacity .18s ease;
}
#signPickerBackdrop.show{
  display:block;
  opacity:1;
}

#signPickerPanel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:min(880px, 94vw);

  /* IMPORTANT: give the grid a real height (max-height alone often fails for 1fr scrolling) */
  height:min(84vh, 860px);
  max-height:min(84vh, 860px);

  z-index:1500;
  display:none;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}
#signPickerPanel.show{
  display:block;
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

#signPickerPanel .sp-body{
  background:
    radial-gradient(1200px 120px at 10% 0%, rgba(0,124,240,.14), transparent 70%),
    rgba(15,23,42,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  overflow:hidden;
  color:#e5e7eb;

  display:grid;
  grid-template-rows:auto 1fr auto;

  /* critical for allowing the 1fr middle row to shrink and scroll */
  height:100%;
  max-height:100%;
  min-height:0;
}

#signPickerPanel .sp-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(2,6,23,.25);
}
#signPickerPanel .sp-header .chip{
  cursor:pointer;
  user-select:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
#signPickerPanel .sp-header .chip.is-active{
  background:var(--brand1);
  border-color:var(--brand1);
  color:#fff;
  box-shadow:0 0 0 3px rgba(0,124,240,.18);
}

#signSearch{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(2,6,23,.55);
  color:#e5e7eb;
  outline:none;
}
#signSearch:focus{
  border-color:rgba(56,189,248,.55);
  box-shadow:0 0 0 3px rgba(56,189,248,.14);
}

#signThumbs.sp-thumbs{
  padding:12px;

  /* make scrolling explicit and reliable */
  overflow-y:auto;
  overflow-x:hidden;

  /* CRITICAL in grid layouts */
  min-height:0;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
  gap:10px;
}

#signThumbs .sign-thumb{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.05);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 8px;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease, outline-color .15s ease;
}
#signThumbs .sign-thumb:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
  box-shadow:0 16px 34px rgba(0,0,0,.30);
}
#signThumbs .sign-thumb img{ width:58px; height:58px; object-fit:contain; }
#signThumbs .sign-thumb .code{
  font-size:12px;
  font-weight:950;
  text-align:center;
  color:#e5e7eb;
}
#signThumbs .sign-thumb.is-selected{
  outline:3px solid rgba(56,189,248,.65);
  outline-offset:2px;
}

#signPickerPanel .sp-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:10px;
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(2,6,23,.25);
}

#signPickerPanel .btn-small{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#e5e7eb;
  padding:10px 12px;
  border-radius:12px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  transition:transform .12s ease, background .12s ease, filter .12s ease;
}
#signPickerPanel .btn-small:hover{ transform:translateY(-1px); background:rgba(255,255,255,.10); }
#signPickerPanel .btn-small:active{ transform:translateY(0) scale(.99); }

@media (max-width:420px){
  #signPickerPanel{ width:94vw; }
  #signThumbs.sp-thumbs{ grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ==========================================================
   Data menu (exports/imports)
   ========================================================== */
.data-menu .data-section{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 6px 8px;
  margin:0 0 8px;
  font-weight:900;
  font-size:15px;
  letter-spacing:.2px;
  color:#fff;
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.data-menu .data-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:8px 0 12px;
}
.data-menu .data-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
  font-weight:800;
  font-size:13px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.data-menu .data-item .emoji{ width:22px; text-align:center; }
.data-menu .data-item:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
.data-menu .hidden-input{ display:none; }
.data-menu label.data-item{ cursor:pointer; }

/* ---------- Marker Settings checklist ---------- */
#markerCatList, #markerGroupList, #markerStatusList, .marker-cat-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.marker-cat-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  line-height:1.2;
  font-size:13px;
  font-weight:800;
}
.marker-cat-pill input[type="checkbox"]{ margin:0; }

.marker-cat-pill[data-st="new"]{ border:1px solid #fb923c; background:#fff7ed; color:#b45309; }
.marker-cat-pill[data-st="old"]{ border:1px solid #fde047; background:#fefce8; color:#854d0e; }
.marker-cat-pill[data-st="done"]{ border:1px solid #22c55e; background:#ecfdf5; color:#166534; }
.marker-cat-pill[data-st] input{ accent-color: currentColor; }

/* ---------- Marker popup wide layout fix ---------- */
#markerPopup,
#markerPopup.marker-popup{
  width:min(820px, calc(100vw - 24px)) !important;
  max-width:820px !important;
  left:50% !important;
  right:auto !important;
  top:76px !important;
  position:fixed !important;
  transform:translateX(-50%) translateY(-6px) scale(.98) !important;
  max-height:min(82vh, 760px) !important;
  overflow:hidden !important;
}
#markerPopup.show,
#markerPopup.marker-popup.show{
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  opacity:1 !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
}
#markerPopup .marker-header,
#markerPopup.marker-popup .marker-header{
  position:sticky !important;
  top:0 !important;
  z-index:10 !important;
  background: rgba(15,23,42,.92) !important;
  backdrop-filter: blur(12px) !important;
}
#markerPopup.show > :not(.marker-header),
#markerPopup.marker-popup.show > :not(.marker-header){
  overflow:auto !important;
  padding:10px !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
}
@media (max-width:720px){
  #markerPopup.show > :not(.marker-header),
  #markerPopup.marker-popup.show > :not(.marker-header){
    grid-template-columns:1fr !important;
  }
}
#markerPopup .marker-row,
#markerPopup.marker-popup .marker-row{
  grid-template-columns:150px 1fr !important;
  gap:10px !important;
}
#markerPopup #markerCatList,
#markerPopup #markerGroupList,
#markerPopup #markerStatusList,
#markerPopup.marker-popup #markerCatList,
#markerPopup.marker-popup #markerGroupList,
#markerPopup.marker-popup #markerStatusList{
  max-height:220px !important;
  overflow:auto !important;
  padding-right:4px !important;
}

/* ---------- Rotate control ---------- */
.leaflet-bar.rotate-control{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  border-radius:8px;
  background: rgba(0,0,0,0.62);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}

.leaflet-bar.rotate-control .rot-btn{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color:#fff;
  font-weight:900;
  font-size:12px;
  text-decoration:none;
  user-select:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
}

.leaflet-bar.rotate-control .rot-btn:hover{
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
  filter:saturate(1.03);
}

.leaflet-bar.rotate-control .rot-btn:active{
  transform: translateY(0);
}

.leaflet-bar.rotate-control .rot-reset{
  width:auto;
  padding:0 8px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  letter-spacing:0.4px;
  font-size:11.5px;
}

/* Slightly more to the right (closer to edge) */
.leaflet-top.leaflet-right{
  margin-top:48px;
  margin-right:6px;
}

/* Bottom/overlay rotate buttons (if present) */
#btnMapRotateLeft,
#btnMapRotateRight,
#btnMapRotateNorth{
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  padding:0;
  border-radius:12px;
  border-width:1px;
  font-size:13px;
  line-height:1;
  box-shadow:0 6px 14px rgba(0,0,0,.20);
  transform:translateX(18px);
}

#btnMapRotateNorth{
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  letter-spacing:0.2px;
}

/* ---------- Custom Name Modal positioning ---------- */
#customNameModal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  right:auto;
  width:min(420px, 92vw);
  max-height:80vh;
  overflow:auto;
  z-index:1600;
}
#customNameModal::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  z-index:-1;
}

/* ---------- Refresh True button ---------- */
#btnRefreshTrue{
  background:#ffffff;
  color:#111827 !important;
  border:1px solid #d1d5db;
  box-shadow:0 2px 4px rgba(0,0,0,.12);
}
#btnRefreshTrue:hover{
  background:#f3f4f6;
  color:#111827 !important;
}

/* ---------- Start/Setup Panel polish ---------- */
#saasPanel{
  width:min(92vw, 560px) !important;
  max-width:560px !important;
  max-height:min(78vh, 720px) !important;
  overflow:auto !important;
}

#grsStartSetupWrap{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px !important;
}
#grsStartSetupWrap > .grs-setup-header,
#grsStartSetupWrap > .grs-setup-last{ grid-column:1 / -1; }

#grsStartSetupWrap .grs-setup-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:10px;
  background: rgba(2,6,23,0.35);
}
#grsStartSetupWrap .grs-setup-title{ font-size:12px; font-weight:900; margin-bottom:6px; }
#grsStartSetupWrap .grs-setup-muted{ font-size:11px; opacity:.85; }

#grsStartSetupWrap .grs-setup-actions{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
#grsStartSetupWrap .grs-setup-actions button{
  padding:10px 10px;
  border:none;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
}
@media (max-width:420px){
  #grsStartSetupWrap{ grid-template-columns:1fr !important; }
}

/* ---------- HARD SAFETY: Auth lock overlay never visible ---------- */
#authLockOverlay,
.auth-lock,
.auth-lock.is-visible,
[data-auth-lock],
[data-auth]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body.is-auth-locked{ overflow:auto !important; }

/* ---------- Footer ---------- */
footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:900;
  text-align:center;
  font-size:12px;
  color:rgba(229,231,235,.75);
  padding:6px 8px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
  pointer-events:none;
}

/* ==========================================================
   SHIFT TOGGLE (ΕΡΓΑΣΙΑ) — green idle -> red active
   JS sets:  class "shift-idle" / "shift-active"  + aria-pressed
   ========================================================== */

/* Default (idle) look — keep green identity */
#shiftToggleBtn.shift-idle{
  border-color: rgba(34,197,94,0.40);
  background: rgba(34,197,94,0.10);
}
#shiftToggleBtn.shift-idle .icon i{
  color: rgba(34,197,94,0.95);
}

/* Active look — turn RED (Stop) */
#shiftToggleBtn.shift-active{
  border-color: rgba(239,68,68,0.55);
  background: rgba(239,68,68,0.16);
}
#shiftToggleBtn.shift-active .icon i{
  color: rgba(239,68,68,0.95);
}

/* If for any reason classes are missed, aria-pressed drives active too */
#shiftToggleBtn[aria-pressed="true"]{
  border-color: rgba(239,68,68,0.55);
  background: rgba(239,68,68,0.16);
}
#shiftToggleBtn[aria-pressed="true"] .icon i{
  color: rgba(239,68,68,0.95);
}

/* ==========================================================
   ROUTE TOGGLE (ΟΔΕΥΣΗ) — gated by shift + pulse active + NO REC TIMER
   JS sets: class "route-idle" / "route-active" + aria-disabled/disabled + aria-pressed
   ========================================================== */

/* Disabled (until Shift Start) */
#routeToggleBtn.is-disabled,
#routeToggleBtn[aria-disabled="true"],
#routeToggleBtn:disabled{
  opacity:.45;
  filter:saturate(.75);
  cursor:not-allowed;
  pointer-events:none;
}

/* Hide REC pill/timer ONLY inside the route button */
#routeToggleBtn .grs-rec-pill,
#routeToggleBtn #recPill,
#routeToggleBtn #recTimer,
#routeToggleBtn .rec-time{
  display:none !important;
}

/* Enabled but idle */
#routeToggleBtn.route-idle{
  border-color: rgba(56,189,248,0.35);
  background: rgba(56,189,248,0.08);
}

/* Active (route running): greenish + pulse */
#routeToggleBtn.route-active{
  border-color: rgba(34,197,94,0.45);
  background: rgba(34,197,94,0.14);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18), 0 14px 26px rgba(0,0,0,0.28);
}

/* Pulse ring */
#routeToggleBtn.route-active::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:16px;
  border:2px solid rgba(34,197,94,0.35);
  opacity:0;
  animation: grsRoutePulse 1.25s infinite ease-out;
  pointer-events:none;
}

@keyframes grsRoutePulse{
  0%   { transform:scale(.96); opacity:.55; }
  70%  { transform:scale(1.06); opacity:.08; }
  100% { transform:scale(1.10); opacity:0; }
}
/* ==========================================================
   AUTH GATING (CSS hooks)
   - JS will toggle body class: .grs-need-login
   - While locked: hide operational UI and force SaaS panel visible
   ========================================================== */

body.grs-need-login .bottom-buttons,
body.grs-need-login .grs-floating-controls,
body.grs-need-login #layerPopup,
body.grs-need-login #markerPopup,
body.grs-need-login #dataMenu{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.grs-need-login #saasPanel{
  display:block !important;
  z-index:2000 !important;
}

/* Optional: give the login panel a subtle modal feel when forced */
body.grs-need-login #saasPanel{
  box-shadow:0 18px 60px rgba(0,0,0,.55) !important;
}