:root{
    --panel:#0c0f10cc;
    --fg:#e7f5ed;
    --stroke:#263036;
    --chip:#1D2428;
    --accent:#30d07a;
    --green:#30d07a;
    --yellow:#F0AD00;
    --bg:#0c0f10;
    --bg2:#11161a;
  }

  html, body, #mapWrap, #map{ height: 100%; margin: 0; }
  body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
    background:#0b1220;
    color:var(--fg);
  }
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .spacer{flex:1}

 
  

  #map {
    position: relative;
    z-index: 1;
  }
  
  #mapWrap {
    position: relative;
  }


  
  #detectorSpectro {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;          /* ev. 20–24px om du vill lyfta den över Leaflet attribution */
    height: 90px;
    display: none;  
    pointer-events: none;
    opacity: 0.75;

    /* NYTT: lägg den mellan kartan (0) och topbar/paneler (1000–1200) */
    z-index: 850;
  }

  
 
  
  
    /* NYTT: lägg den mellan kartan (0) och topbar/paneler (1000–1200) */
    z-index: 850;
  }


  /* ===== universal bottom sheet ===== */
  html.sheet-open,
  body.sheet-open {
    overflow: hidden;
    touch-action: none;
  }
  
  /* Floating Sweep indicator (does not touch topbar) */
  .sweep-indicator{
    position: fixed;
    right: 14px;
    bottom: 24px;           /* ovanför Leaflet-attrib + ev knappar */
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    pointer-events: none;   /* klickar igenom */
  }

  
  .sweep-dot{
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #666;
    box-shadow: 0 0 0 3px rgba(255,255,255,.10);
  }




  .sweep-spm{
    font-size: 13px;
    font-weight: 700;
  }
  
  .sweep-text{ display:flex; flex-direction:column; line-height:1.05; }
  .sweep-title{ font-size:12px; opacity:.85; letter-spacing:.06em; }
  .sweep-value{ font-size:20px; font-weight:700; }
  .sweep-speed{ font-size:12px; opacity:.75; margin-top:2px; }
  .sweep-dot{ width:10px; height:10px; border-radius:99px; background:#ffcc00; box-shadow:0 0 0 3px rgba(255,255,255,.06); }
  
  /* states */
  .sweep-indicator.state-red   .sweep-dot{ background:#ff3b30; }
  .sweep-indicator.state-yellow .sweep-dot{ background:#ffcc00; }
  .sweep-indicator.state-green .sweep-dot{ background:#34c759; }
  
  .sheet{
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    pointer-events: none;
  }
  .sheet[aria-hidden="false"]{
    display: block;
    pointer-events: auto;
  }

  .sheet-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .sheet-panel{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    background: var(--panel);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border: 1px solid var(--stroke);
    border-bottom: none;

    box-shadow: 0 -18px 45px rgba(0,0,0,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transform: translateY(110%);
    transition: transform 180ms ease;
    max-height: 78vh;
    overflow: hidden;
  }
  .sheet[aria-hidden="false"] .sheet-panel{ transform: translateY(0); }

  .sheet-handle{
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    margin: 10px auto 6px auto;
  }

  .sheet-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .sheet-title{ margin:0; font-size:16px; font-weight:700; }
  .sheet-body{ padding: 12px; overflow:auto; }
  .sheet-footer{
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }

  /* Lås “underliggande” klick när sheet öppen (men låt topbar+FAB vara kvar om du vill) */
  body.sheet-open #map { pointer-events:none; }  /* valfritt */
 /* testa de underför pro knapp 
   Photos gallery overlay ----------------------------------- */
 /* .overlay-modal{
    position:fixed;
    inset:0;
    display:none;              /* JS sätter display:flex när den öppnas */
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.65);
    z-index:1300;
  }
  .overlay-modal.open{
  display:flex;
}
*/

/* ===========================
   Overlay modal (generic)
   Matches HTML:
   .overlay-modal
     .overlay-modal-backdrop
     .overlay-modal-dialog
=========================== */
  
  .overlay-modal {
    position: fixed;
    inset: 0;
    z-index: 2140;
    display: none;               /* default hidden */
  }

  /* JS togglar aria-hidden */
  .overlay-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .overlay-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .overlay-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    overflow: auto;

    background: var(--panel);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.85);
    padding: 10px 12px;
  }

  .overlay-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }

  .overlay-modal .modal-body {
    padding: 6px 0 0;
  }
  
  

  /* Thumbnails */
  .photos-grid{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .photos-grid img{
    width:88px;
    height:88px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    opacity:0.85;
  }

  .photos-grid img.selected{
    outline:2px solid var(--accent);
    opacity:1;
  }
  
  .badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    line-height:18px;
    border:1px solid #263036;
  }
  .badge.free{
    opacity:0.85;
  }
  .badge.pro{
    border-color:#2ea043;
    color:#7ee787;
  }

  .mk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mk-slot .mk-tri {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid #fff; /* färgen skrivs inline */
  position: relative;
}

.mk-slot .mk-label {
  font-size: 10px;
  color: #fff;
  margin-top: 2px;
}

.mk-count {
  position: absolute;
  bottom: -2px;
  right: -10px;
  font-size: 9px;
  background: rgba(0,0,0,0.7);
  padding: 1px 4px;
  border-radius: 8px;
}

.mk-dig-icon {
  font-size: 16px;
}

.mk-photo {
  font-size: 18px;
}
  
  .mk.mk-auto { /* auto-hits från detectorn */
    background: var(--mk-color);
  }

.mk-slot .mk-tri{
  width:0;height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:18px solid #4DA3FF; /* överstyrt via inline style */
  position:relative;
}

.mk-slot .mk-count{
  position:absolute;
  left:50%;top:55%;
  transform:translate(-50%,-50%);
  font-size:10px;
  font-weight:700;
  color:#050811;
}


.mk-dig{
  font-size:16px;
  line-height:16px;
  color:#73d13d;
  text-shadow:0 0 3px #000;
}
.mk-dig .mk-count{
  position:absolute;
  bottom:-9px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  font-weight:700;
  color:#e7f5ed;
  text-shadow:0 0 3px #000;
}
.photo-icon {
  font-size: 18px;
  line-height: 18px;
  filter: drop-shadow(0 0 3px black);
}
.photo-popup {
  padding: 4px;
}

.photo-popup-image img {
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.photo-popup-meta {
  margin-top: 4px;
  font-size: 11px;
  color: #ccc;
}

#photoViewer {
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  text-align: center;
  padding-top: 40px;
}

#photoViewerImg {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}

#photoViewerNote {
  color: #ddd;
  margin-top: 8px;
}


#signalsPanel{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:4px;
}

.sig-btn{
  border:2px solid #4da3ff;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:80px;
  user-select:none;
  background:rgba(0,0,0,0.3);
}

.sig-btn:hover{
  background:rgba(0,0,0,0.5);
}

.sig-label{
  font-weight:600;
  margin-right:6px;
}

.sig-count{
  font-weight:700;
}

.dig-btn{
  border-color:#73d13d;
  color:#73d13d;
}


.mk-photo{
  font-size:18px;
  line-height:18px;
  text-shadow:0 0 3px #000;
}

/* Popup (enkel v3-stil – kan bytas senare) */
.mkp{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
  color:#e7f5ed;
}
.mkp-title{
  font-weight:600;
  margin-bottom:4px;
}
.mkp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:4px;
}
.mkp-chip{
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  padding:2px 6px;
  font-size:10px;
  background:rgba(5,8,17,0.9);
}
.mkp-meta{
  font-size:11px;
  opacity:0.8;
}

   /* Top bar -------------------------------------------------- */
    /* ============================================================
     TOPBAR BASE (desktop / större skärmar)
     Stabil bredd – färre krockar
     ============================================================ */

  /* BAS: desktop / större skärmar (alltid centrerad, maxbredd låst) */
  .topbar {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;

    background: var(--panel);
    border-radius: 16px;
    padding: 6px 10px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    border: 1px solid var(--stroke);
    box-shadow: 0 12px 30px rgba(0,0,0,0.75);
    backdrop-filter: blur(10px);

    width: min(1080px, calc(100% - 16px));
  }
@media (min-width: 769px) {
  #topbar.topbar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1080px, calc(100% - 16px)) !important;
    max-width: none !important;
  }
}
  
  .topbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }
  
 
  .topbar-row-status {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  
  .topbar-row-status .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 8px;   /* lite tightare */
    font-size: 10px;    /* 1px mindre */
  }
  
  .topbar-row-status .status-dot {
    width: 6px;
    height: 6px;
  }
  
  .topbar.topbar-collapsed .topbar-row-actions {
    display: none;
  }
  

  .topbar-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .topbar-actions-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
  }
  
  #topbar.topbar-collapsed #topbarActions{
    display: none !important;
  }

  .chip {
    background: var(--chip);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    min-width: 0;
  }


  .chip-label {
    opacity: .66;
    font-size: 11px;
  }

  .chip-value {
    font-weight: 600;
    font-size: 13px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chip-pill {
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 10px;
    background: rgba(0,0,0,0.45);
  }

  .btn {
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(17,22,26,0.85);
    color: var(--fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
  }

  .btn.green {
    background: var(--green);
    border-color: var(--green);
    color: #02130a;
    font-weight: 600;
  }

  .btn.red {
    background: #8b1f2a;
    border-color: #c62839;
  }

  .btn.yellow {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #1f1300;
    font-weight: 600;
  }

  .btn.ghost {
    background: rgba(0,0,0,0.4);
  }

  .btn.tiny {
    padding: 2px 8px;
    font-size: 10px;
  }

  .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
  }

  .menu-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .menu-dropdown {
    position: relative;
    min-width: 0;
  }

  .menu-dropdown button {
    min-width: 70px;
    justify-content: space-between;
  }

  .menu-dropdown button .chevron {
    font-size: 9px;
    opacity: .65;
  }

  .dropdown-panel {
    position: absolute;
    right: 0;
    margin-top: 4px;
    min-width: 220px;
    background: var(--panel);
    border-radius: 12px;
    border: 1px solid var(--stroke);
    box-shadow: 0 18px 40px rgba(0,0,0,0.85);
    padding: 8px;
    z-index: 2100;
  }

  .dropdown-panel-section {
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  .dropdown-panel-section:first-child {
    border-top: none;
  }

  .dropdown-panel h4 {
    margin: 4px 0 6px;
    font-size: 11px;
    opacity: .9;
  }

  .dropdown-panel p {
    margin: 2px 0;
    font-size: 10px;
    opacity: .8;
  }

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffb020;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
  }

  .status-dot.green {
    background: #2ecc71;
  }

  .status-dot.red {
    background: #e74c3c;
  }

  .field-label {
    font-size: 10px;
    opacity: .8;
    margin-bottom: 2px;
  }

  .field {
    background: #05080a;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 4px 8px;
    font-size: 11px;
    color: var(--fg);
    width: 100%;
    min-width: 0;
  }

  .field::placeholder {
    opacity: .4;
  }

  .field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(48,208,122,0.4);
  }

  .topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
  }

  .alert-pill {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .alert-pill strong {
    color: var(--yellow);
  }
  
  /* =========================================================
     Mission Quick Switch (compact, anchored under mission chip)
     ========================================================= */

    .mission-quick-search{
    width:100%;
    padding:8px 10px;
    margin-bottom:8px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.05);
    color:white;
    font-size:13px;
  }

  .mission-quick-search::placeholder{
    color:rgba(255,255,255,0.5);
  }

  .mission-quick-divider{
    height:1px;
    background:rgba(255,255,255,0.08);
    margin:8px 0;
  }

  .mission-quick-item{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 10px;
    border-radius:12px;
    cursor:pointer;
    font-size:13px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
  }

  .mission-quick-item:hover{
    background:rgba(255,255,255,0.08);
  }

  .mission-quick-item.active{
    border-color:rgba(48,208,122,0.5);
    background:rgba(48,208,122,0.15);
  }

  .mission-quick-check{
    color:#30d07a;
    font-weight:700;
  }

  .mission-quick-new{
    background:rgba(48,208,122,0.15);
  }


  .chip-clickable{
    cursor:pointer;
    user-select:none;
  }

  .chip-caret{
    font-size:10px;
    opacity:0.75;
    margin-left:6px;
  }

  /* Dropdown container (positioned by JS via CSS vars) */
  .mission-quick-dropdown{
    position:fixed;
    z-index:9999;

    /* default fallback if JS vars not set */
    top:72px;
    left:12px;

    width:min(320px, calc(100vw - 32px));
    max-height:50vh;
    overflow:auto;

    background:rgba(10,14,18,0.94);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,0.60);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    padding:8px;
  }
  
  #missionChip .chip-value{
    color:#ffffff !important;
  }

  #missionChip .chip-label{
    color:rgba(255,255,255,0.85);
  }

  .mission-quick-dropdown.hidden{
    display:none;
  }

  .mission-quick-title{
    font-size:11px;
    letter-spacing:0.10em;
    opacity:0.70;
    margin:2px 4px 8px 4px;
    text-transform:uppercase;
  }

  .mission-quick-active{
    font-size:14px;
    font-weight:600;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    margin-bottom:10px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .mission-quick-actions{
    display:grid;
    gap:8px;
  }

  .mission-quick-btn{
    width:100%;
    border-radius:14px;
    padding:12px 12px;
    font-size:14px;
    font-weight:650;
    cursor:pointer;

    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.10);
    color:rgba(255,255,255,0.92);
    text-align:left;
  }

  .mission-quick-btn:active{
    transform:translateY(1px);
  }

  .mission-quick-btn.primary{
    background:rgba(25,120,70,0.30);
    border-color:rgba(40,200,120,0.22);
  }

  

 
 
  /* Map toolbox (FABs) --------------------------------------- */
   
  /* Map toolbox (FABs) --------------------------------------- */
  .map-toolbox{
    position: fixed;
    left: 12px;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    top: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1500;
    pointer-events: none;
  }

  .map-toolbox .tool-btn{
    pointer-events: auto;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
  }
  .map-toolbox .tool-btn:hover {
    background:#141b21;
  }
  .map-toolbox .tool-btn img{
    width:70%;
    height:70%;
    object-fit:contain;
    filter:brightness(0) invert(1);
  }

  .topbar-actions-row{
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .nickname-group{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
  }

  .nickname-group label{
    font-size: 12px;
    opacity: 0.8;
  }

  .pro-btn{
    align-self: flex-end;
  }
  
  .map-toolbox .tool-btn{
    background:var(--bg2) !important;
    border:1px solid var(--stroke) !important;
    border-radius:14px !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.6) !important;
    backdrop-filter:blur(8px) !important;
  }
  
  .map-toolbox .tool-btn img{
    filter:brightness(0) invert(1) !important;
  }
  .leaflet-control-container .leaflet-bar a:hover,
  .map-toolbox .tool-btn:hover{
    background:#141b21 !important;
  }

  .map-toolbox .tool-btn:active {
    transform:translateY(1px);
    box-shadow:0 2px 8px rgba(0,0,0,0.6);
  }

  /* Signal-panel --------------------------------------- */
  
   
  .signals-panel{
    position: fixed !important;
    left: 10px;
    top: 165px;   /* välj höjd under topbar */
    
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1500;
  }
  
  .signals-toggle{
    width:30px;
    height:30px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.3);
    background:#101419;
    color:#fff;
    font-size:16px;
    cursor:pointer;
  }
  

  .sb .label {
   color: #fff;
   font-size: 14px;
  }

  .sb .count {
   color: #fff;
  }

  .sb{
    width:120px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 6px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:#0c0f10;
    font-size:12px;
    cursor:pointer;
  }

  .sb .label{ flex:1; }
  .sb .count{
    min-width:26px;
    text-align:center;
    border-radius:999px;
    padding:1px 6px;
    background:#1d2428;
    font-variant-numeric:tabular-nums;
  }

  .sb-iron  { border-color:#ff4d4f; }
  .sb-noble { border-color:#ffd666; }
  .sb-coin  { border-color:#40a9ff; }
  .sb-pin   { border-color:#9254de; }
  .sb-dig   { border-color:#73d13d; }

 .sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 140px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,0,0,0.6);
  margin: 4px 0;
}

 .sb-dot {
   width: 10px;
   height: 10px;
   border-radius: 999px;
   margin: 0 6px;
   border: 1px solid rgba(0,0,0,0.4);
   flex: 0 0 auto;
}

  /* Map & layers modal ---------------------------------------- */
  .modal{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1100;
  }
  .modal.open{display:flex;}
  .modal-panel{
    background:var(--panel);
    border-radius:16px;
    border:1px solid var(--stroke);
    max-width:900px;
    width:calc(100% - 16px);
    max-height:calc(100% - 16px);
    display:flex;
    flex-direction:column;
    box-shadow:0 18px 40px rgba(0,0,0,0.85);
  }
  .modal-header{
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    display:flex;
    gap:8px;
    align-items:center;
  }
  .modal-title{
    font-weight:600;
    font-size:13px;
  }
  .modal-body{
    padding:10px 12px 12px;
    overflow:auto;
  }
  .modal-footer{
    padding:8px 12px;
    border-top:1px solid rgba(255,255,255,0.05);
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }

  .config-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  
  .config-section{
    background:#05080a;
    border-radius:12px;
    padding:8px;
    border:1px solid rgba(255,255,255,0.06);
  }
  .config-section h3{
    margin:0 0 4px;
    font-size:12px;
  }
  .config-section p{
    margin:2px 0 6px;
    font-size:11px;
    opacity:.8;
  }

  .config-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
  }
  .config-row:last-child{margin-bottom:0;}

  .config-row label{
    font-size:11px;
    opacity:.85;
  }

  .config-row input[type="range"]{
    flex:1;
  }

  .config-row select,
  .config-row input[type="text"],
  .config-row input[type="number"]{
    flex:1;
    font-size:11px;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    background:#020305;
    color:var(--fg);
  }
  .config-row select:focus,
  .config-row input[type="text"]:focus,
  .config-row input[type="number"]:focus{
    outline:none;
    border-color:var(--accent);
  }

  .pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 7px;
    border-radius:999px;
    font-size:10px;
    background:rgba(0,0,0,0.4);
    border:1px solid rgba(255,255,255,0.15);
  }

  /* Overlay-panel (multi overlay) ----------------------------- */
    
  .overlay-panel{
    margin-top:0;
    padding:8px 8px 10px;
    border-radius:10px;
    border:1px solid var(--stroke);
    background:#05080a;
  }
  .overlay-panel.collapsed .overlay-panel-body{
    display:none;
  }
  .overlay-panel-header{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:6px;
  }
  .overlay-panel-title{
    font-size:13px;
    font-weight:600;
  }
  .overlay-panel-opacity{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    opacity:.85;
  }
  .overlay-panel-opacity input[type="range"]{
    width:110px;
  }
  .overlay-panel-body{
    max-height:190px;
    overflow:auto;
  }
  #overlayList .overlay-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:4px 6px;
    border-radius:8px;
    font-size:12px;
  }
  #overlayList .overlay-item:hover{
    background:rgba(255,255,255,0.03);
  }
  #overlayList .overlay-item label{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
  }
  #overlayList .overlay-name{
    opacity:.95;
  }
  #overlayList input[type="checkbox"]{
    width:14px;
    height:14px;
    accent-color:var(--accent);
  }
 
  .tag{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 6px;
    border-radius:999px;
    background:rgba(0,0,0,0.45);
    border:1px solid rgba(255,255,255,0.18);
    font-size:10px;
    opacity:.9;
  }

  #statusText{
    max-width:220px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
 
 
  
  /* Leaflet tweaks ------------------------------------------- */
  .leaflet-container{
    background:#020308;
  }
  .leaflet-control-attribution{
    background:rgba(0,0,0,0.6);
    border-radius:999px;
    padding:2px 8px;
  }

  .leaflet-control-zoom,
  .leaflet-control-layers{
    border-radius:16px !important;
    overflow:hidden;
  }
  .leaflet-bar a{
    border-bottom:1px solid rgba(255,255,255,0.06) !important;
  }
  .leaflet-bar a:last-child{
    border-bottom:none !important;
  }

  /* Toast messages -------------------------------------------- */
  .toast-container{
    position:absolute;
    right:8px;
    bottom:80px;
    z-index:1200;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-width:260px;
  }
  .toast{
    padding:8px 10px;
    border-radius:10px;
    background:rgba(0,0,0,0.85);
    border:1px solid rgba(255,255,255,0.18);
    font-size:11px;
    box-shadow:0 10px 24px rgba(0,0,0,0.7);
  }

  /* Mission log panel ---------------------------------------- */
  #missionPanel{
    position:absolute;
    right:8px;
    top:80px;
    width:260px;
    max-height:calc(100% - 140px);
    background:var(--panel);
    border-radius:14px;
    border:1px solid var(--stroke);
    box-shadow:0 16px 40px rgba(0,0,0,0.9);
    padding:8px;
    font-size:11px;
    display:none;
    z-index:1200;
  }
  #missionPanel.open{
    display:block;
  }
  #missionPanel h3{
    margin:0 0 4px;
    font-size:12px;
  }
  #missionPanel ul{
    margin:0;
    padding-left:16px;
    font-size:11px;
  }
  #missionPanel li{
    margin:2px 0;
  }
  #missionPanel .panel-footer{
    margin-top:6px;
    display:flex;
    justify-content:space-between;
    gap:6px;
  }

  /* Detector config panel (detector profile + nick) ---------- */
  #detectorPanel{
    position:absolute;
    right:8px;
    top:80px;
    width:260px;
    max-height:calc(100% - 140px);
    background:var(--panel);
    border-radius:14px;
    border:1px solid var(--stroke);
    box-shadow:0 16px 40px rgba(0,0,0,0.9);
    padding:8px;
    font-size:11px;
    display:none;
    z-index:1200;
  }
  #detectorPanel.open{
    display:block;
  }
  #detectorPanel h3{
    margin:0 0 4px;
    font-size:12px;
  }
  #detectorPanel p{
    margin:2px 0 6px;
    opacity:.85;
  }
  #detectorPanel .panel-footer{
    margin-top:6px;
    display:flex;
    justify-content:space-between;
    gap:6px;
  }

  /* Simple switches & checkboxes ----------------------------- */
  .switch{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-size:11px;
  }
  .switch input{
    display:none;
  }
  .switch-pill{
    width:28px;
    height:16px;
    border-radius:999px;
    background:#333;
    position:relative;
    transition:background .18s;
  }
  .switch-thumb{
    position:absolute;
    top:2px;
    left:2px;
    width:12px;
    height:12px;
    border-radius:999px;
    background:#fff;
    transition:transform .18s;
  }
  .switch input:checked + .switch-pill{
    background:var(--accent);
  }
  .switch input:checked + .switch-pill .switch-thumb{
    transform:translateX(12px);
  }

  .small-caption{
    font-size:10px;
    opacity:.75;
  }
  
  .panel-backdrop{
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .panel-backdrop.hidden{
    display: none !important;
  }
  

  
  /* ============================================================
   UNIVERSAL MOBILE LAYOUT (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Fullscreen map */
  #mapWrap,
  #map {
    position: fixed;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    z-index: 0 !important;
  }

  .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
  }

  /* FULL-WIDTH TOPBAR – OBS: behåller position/top från bas-regeln */
  
  /* Statusknapparna får dela utrymme */
  .topbar-row-status #gpsToggleBtn,
  .topbar-row-status #trackToggleBtn,
  .topbar-row-status #detectorToggleBtn{
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  /* Minimize / expand – fast bredd, hamnar till höger */
  .topbar-row-status #minimaxBtn {
    flex: 0 0 36px;     /* fast bredd */
    width: 36px;
    min-width: 36px;
    justify-content: center;
    padding: 2px 0;
  }
  
  .topbar,
  #topbar {
    left: 0;
    right: 0;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 6px 8px;
    border-radius: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    box-sizing: border-box;
    z-index: 2000 !important;
  }

  .topbar .row,
  .topbar-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Tillåt att chip och knappar krymper och bryter rad */
  .topbar .chip,
  .topbar .btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    padding: 4px 8px !important;
    font-size: 16px !important;
  }

  .chip-value {
    max-width: 100% !important;
    white-space: normal !important;
  }

   #photosGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
  }

  #photosGrid img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
  }
}

/* ============================================
   SMALL PHONES (<= 480px) – 3-radig topbar
   ============================================ */
@media (max-width: 480px) {
  /* FULL-WIDTH TOPBAR – OBS: behåller position/top från bas-regeln */
  /* Rad 1: 30% app / 70% mission */
    
  .topbar-row-main {
    flex-wrap: nowrap; /* håll på en rad */
  }
  .topbar-row-status{
    flex-wrap: nowrap;         /* viktiga raden */
    align-items: center;
    gap: 6px;
  }

  /* Statusknapparna får dela utrymme */
  .topbar-row-status #gpsToggleBtn,
  .topbar-row-status #trackToggleBtn,
  .topbar-row-status #detectorToggleBtn{
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  
}
  /* Minimize / expand – fast bredd, hamnar till höger */
  .topbar-row-status #minimaxBtn {
    flex: 0 0 36px;     /* fast bredd */
    width: 36px;
    min-width: 36px;
    justify-content: center;
    padding: 2px 0;
  }


  /* Texten i status får ellipsis istället för wrap */
  .topbar-row-status #gpsStatusLabel,
  .topbar-row-status #trackStatusLabel,
  .topbar-row-status #detectorStatusLabel{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  

  .topbar-row-main .chip-app {
    flex: 0 0 30%;
    max-width: 30%;
  }

  .topbar-row-main .chip-mission {
    flex: 1 1 70%;
    max-width: 70%;
  }

  /* Förhindra att mission-text spränger layouten */
  .chip-mission .chip-value {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    vertical-align: bottom;
  }

  /* Om du vill att "Mission:" inte tar för mycket plats */
  .chip-mission .chip-label {
    opacity: 0.75;
    margin-right: 6px;
  }



/*______________________________ */
  .topbar,
  #topbar {
    /* Fortfarande fixed från basen – här bara layout */
    left: 0;
    right: 0;
    transform: none;
    padding: 8px;
    border-radius: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .topbar-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Rad 1 – app + user + mission: två chip per rad */
  .topbar-row-main .chip {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* Rad 2 – GPS / Track / Detector / Minimax: fyra per rad */
  .topbar-row-status button {
    flex: 1 1 calc(25% - 4px);
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  /* Rad 3 – Help / About / Configure */
  .topbar-row-actions {
    align-items: stretch;
  }

  .topbar-row-actions .menu-group {
    flex: 1 1 100%; /* Help-dropdown får egen rad */
  }

  #helpToggleBtn {
    width: 100%;
    justify-content: center;
  }

  #aboutBtn,
  #configBtn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  /* För säkerhets skull – text får brytas */
  .chip-value,
  .btn {
    white-space: normal;
  }
  
  
}

@media (max-width: 360px) {
  .topbar-row-status {
    flex-wrap: wrap;
  }

  .topbar-row-status button {
    flex: 1 1 calc(50% - 4px);
  }

  #minimaxBtn {
    flex: 1 1 100%;
  }
}

/* iOS PWA / standalone: respektera notch & home-indicator */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 1024px) {

    /* Kroppen får luft från statusbar + home-indicator */
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Topbaren precis under klockan / Dynamic Island */
    .topbar,
    #topbar {
      top: calc(env(safe-area-inset-top) + 4px);
    }

    /* Vertikala knappar nere i vänster hörn – flytta upp dem lite */
    .floating-buttons,
    .detect-controls,
    .leaflet-bottom {
      margin-bottom: env(safe-area-inset-bottom);
    }
  }
}

@media (max-width: 520px){
  #layersSheet .overlay-panel-opacity{
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  #layersSheet #overlayPanelOpacity{
    width: 55vw;
    max-width: 220px;
  }
}





/* ============================================================
   Utils
   ============================================================ */
  .hidden {
    display: none !important;  
    }
    
    /* =========================================================
     Missions panel: desktop normal, mobile bottom sheet
     ========================================================= */
  @media (max-width: 720px){
    #missionPanel{
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      top: auto;

      width: auto;
      max-width: none;

      max-height: 72vh;
      overflow: auto;

      border-radius: 18px;
      box-shadow: 0 18px 55px rgba(0,0,0,0.65);

      transform: translateY(110%);
      transition: transform 180ms ease;
      z-index: 9998;
    }

    #missionPanel.open{
      transform: translateY(0);
    }

    #missionPanel .sheet-handle{
      width: 44px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
      margin: 10px auto 8px auto;
    }
  }
  @media (max-width:520px){
    .mission-quick-dropdown{
      left:10px;
      width:calc(100vw - 20px);
      max-height:60vh;
    }
    .mission-quick-btn{
      font-size:15px;
    }
  }
  /* ===== HARD OVERRIDE: overlay-panel ska aldrig flyta i layersSheet ===== */
  #layersSheet .overlay-panel{
    position: relative !important;
  }

  #layersSheet .overlay-panel-header{
    position: relative !important;  /* stoppar sticky/fixed */
    top: auto !important;
  }

  #layersSheet .overlay-panel-body{
    overflow: auto;
  }