html,body{
  height:100%;
  margin:0;
  background:#1b110e;
  color:#eee;
  font-family:Arial,Helvetica,sans-serif;
  overflow:hidden;
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:78px;
  background:#1b110e;
  border-bottom:2px dotted #6e6763;
  z-index:2000;
  display:grid;
  grid-template-columns:420px 1fr;
  align-items:center;
}

.brand{
  color:#ff1f1f;
  font-size:32px;
  font-weight:900;
  padding-left:78px;
  letter-spacing:.5px;
}

.timeHeader{
  width:520px;
  justify-self:center;
  text-align:center;
}

.dateClock{
  display:flex;
  justify-content:center;
  gap:70px;
  font-size:18px;
  line-height:20px;
}

#topClock{color:red}

#timeSlider{
  width:520px;
  height:12px;
  margin:0;
  accent-color:#777;
}

.timeControls{
  display:grid;
  grid-template-columns:110px 170px 110px;
  justify-content:center;
  gap:58px;
  margin-top:-3px;
}

.timeControls label{
  background:#ddd;
  color:#111;
  font-size:11px;
  display:grid;
  padding:0 4px 3px;
  line-height:12px;
}

.timeControls select{
  width:100%;
  background:#ddd;
  color:#111;
  border:0;
  font-size:12px;
  text-align:center;
}

.sidebar{
  position:fixed;
  top:78px;
  bottom:0;
  left:0;
  width:420px;
  background:#1b110e;
  border-right:1px solid #ddd;
  z-index:1500;
  overflow:auto;
  box-sizing:border-box;
  padding:0 18px 40px;
}

.sidebar h2{
  color:#ddd;
  text-align:center;
  font-size:23px;
  margin:12px 0 12px;
}

.quickRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:0 26px 78px;
}

.quickRow button{
  background:transparent;
  color:#eee;
  border:0;
  font-size:14px;
  cursor:pointer;
}

.box{
  background:#77716f;
  border:1px solid #e0e0e0;
  color:#fff;
  min-height:245px;
  padding:6px 8px;
  font-size:12px;
  line-height:1.18;
  box-sizing:border-box;
}

.smallBox{min-height:140px}
.tinyBox{min-height:58px}

.box label{
  display:block;
  color:#fff;
  font-size:12px;
  min-height:15px;
}

.box input{
  margin:0 4px 0 0;
  transform:scale(.85);
}

.box img{
  width:16px;
  height:16px;
  object-fit:contain;
  vertical-align:middle;
  margin-right:5px;
}

.groupTitle{
  margin-top:2px;
  color:#f5f5f5;
}

.sub{
  padding-left:34px;
}

.miniIcon{
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  margin-right:5px;
  border-radius:50%;
  background:#00d4ff;
  color:#111;
  font-size:10px;
  font-weight:bold;
  vertical-align:middle;
}

.hiddenCompat{
  display:none!important;
}

.mapArea{
  position:fixed;
  top:78px;
  left:420px;
  right:0;
  bottom:0;
  background:#fff;
}

#map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ghostControls{
  position:absolute;
  z-index:1000;
  top:85px;
  left:60px;
  color:#999;
  opacity:.5;
  display:flex;
  gap:34px;
  font-size:12px;
}

.ghostControls button{
  background:transparent;
  color:#aaa;
  border:0;
}

#statsBox{
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:1800;
  background:rgba(27,17,14,.82);
  color:#ddd;
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
  padding:6px 8px;
  font-size:12px;
}

.leaflet-popup-content{
  font-size:13px;
  line-height:1.35;
}

/* Kartikoner */
.mapIconWrap{
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(6,10,22,.82);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 3px 12px rgba(0,0,0,.55);
}
.mapIconWrap img{
  object-fit:contain;
}

.mapIconWrap.tiny{width:18px;height:18px}
.mapIconWrap.tiny img{width:13px;height:13px}
.mapIconWrap.small{width:24px;height:24px}
.mapIconWrap.small img{width:18px;height:18px}
.mapIconWrap.medium{width:30px;height:30px}
.mapIconWrap.medium img{width:23px;height:23px}
.mapIconWrap.large{width:38px;height:38px}
.mapIconWrap.large img{width:29px;height:29px}

.mapIconWrap.wt{box-shadow:0 0 12px rgba(255,77,77,.9)}
.mapIconWrap.polis{box-shadow:0 0 12px rgba(77,163,255,.9)}
.mapIconWrap.flyg{box-shadow:0 0 12px rgba(66,245,233,.9)}
.mapIconWrap.misstankt{box-shadow:0 0 12px rgba(192,132,252,.9)}
.mapIconWrap.trail{opacity:.45;filter:grayscale(.25)}

.leaflet-label-pane{z-index:750!important}
.leaflet-marker-pane{z-index:600!important}

.map-label{
  position:relative;
  z-index:999999 !important;

  background:rgba(8,12,24,.92);
  color:#fff;

  border:1px solid rgba(255,255,255,.35);
  border-radius:4px;

  padding:2px 6px;

  font-size:11px;
  font-weight:bold;

  white-space:nowrap;

  text-align:center;

  box-shadow:0 2px 8px rgba(0,0,0,.55);

  pointer-events:none;

  transform:translate(-50%, -135%);
}

.map-label.trail{opacity:.55}

@media(max-width:900px){
  .topbar{height:118px;grid-template-columns:1fr}
  .brand{padding-left:18px;font-size:26px}
  .timeHeader{width:90%}
  #timeSlider{width:100%}
  .sidebar{top:118px;width:310px}
  .mapArea{top:118px;left:310px}
}

.leaflet-pane.leaflet-label-pane{
  z-index:900 !important;
}

.leaflet-marker-pane{
  z-index:600 !important;
}


.mapIconWrap.missingIcon::after{
  content:"?";
  color:#fff;
  font-weight:bold;
  font-size:14px;
}


/* Snabbval-knapp för visa allt */
.quickToggle{
  grid-column:1 / -1;
  justify-self:center;
  color:#eee;
  font-size:14px;
  cursor:pointer;
  margin-top:2px;
}

/* Personfokus */
.personTools{
  display:grid;
  gap:5px;
}
.personTools input,
.personTools select,
.personTools button{
  width:100%;
  box-sizing:border-box;
  font-size:12px;
}
.personTools button{
  border:1px solid rgba(255,255,255,.35);
  background:#5f5a58;
  color:#fff;
  padding:4px;
}
#personInfo{
  margin-top:6px;
  font-size:11px;
  color:#eee;
}

/* Clean ikonstil: inga cirklar och inget glow */
.mapIconWrap{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.mapIconWrap.wt,
.mapIconWrap.polis,
.mapIconWrap.flyg,
.mapIconWrap.misstankt{
  box-shadow:none !important;
}
.mapIconWrap img{
  display:block;
  object-fit:contain;
}

/* Markerad personfokus */
.mapIconWrap.person-focus img{
  filter: drop-shadow(0 0 5px #ffea00) drop-shadow(0 0 9px #ffea00);
}
.map-label.person-focus{
  background:rgba(255,234,0,.95);
  color:#111;
  border-color:#111;
}

/* Lite tydligare undergrupper */
.box label.sub{
  padding-left:34px;
}


/* FIX: play-knapp vid tidslinjen */
.sliderRow{
  display:grid;
  grid-template-columns:1fr 34px;
  gap:8px;
  align-items:center;
}
.sliderRow #timeSlider{
  width:100%;
}
.topPlayButton{
  width:34px;
  height:24px;
  padding:0;
  border:1px solid #aaa;
  background:#ddd;
  color:#111;
  font-weight:bold;
  cursor:pointer;
}

/* FIX: vit text på kart-rubriker och framför ikoner */
.map-label{
  color:#ffffff !important;
  font-weight:800 !important;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  background:rgba(8,12,24,.92) !important;
  z-index:999999 !important;
}

/* FIX: ta bort all glow/cirkel kring ikoner */
.mapIconWrap,
.mapIconWrap.wt,
.mapIconWrap.polis,
.mapIconWrap.flyg,
.mapIconWrap.misstankt{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.mapIconWrap img{
  filter:none !important;
  box-shadow:none !important;
}


/* Kategorifärger för rubriker på kartan */

.map-label{
  color:#ffffff !important;
}

/* Olof Palme / Palme */
.map-label.palme{
  color:#ff7cc8 !important;
}

/* Poliser */
.map-label.polis{
  color:#7fd8ff !important;
}

/* Platser */
.map-label.platser{
  color:#72ff72 !important;
}

/* Misstänkta */
.map-label.misstankt{
  color:#ffb347 !important;
}

/* Springande personer */
.map-label.springande{
  color:#ff4d4d !important;
}

/* Walkie Talkie */
.map-label.wt{
  color:#ffe14d !important;
}

/* Vit outline för läsbarhet */
.map-label{
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 6px rgba(0,0,0,.85);
}


/* FIX: smalare, mindre och mer kompakt rubriktext utan svart box */
.map-label{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;

  font-family:"Arial Narrow","Roboto Condensed","Helvetica Condensed",Arial,sans-serif !important;
  font-size:9px !important;
  font-weight:400 !important;
  letter-spacing:-0.2px !important;
  line-height:1.05 !important;

  white-space:nowrap;
  text-align:center !important;
  transform:translate(-50%, -135%) !important;

  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 4px rgba(0,0,0,.9) !important;
}

/* Popup-rutan bredare så texten inte blir så hög */
.leaflet-popup-content{
  width:420px !important;
  max-width:420px !important;
  font-size:13px;
  line-height:1.35;
}

.leaflet-popup-content-wrapper{
  max-width:460px !important;
}

/* Hover-rubrik när permanenta rubriker är av */
.hover-label{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#fff;
  font-family:"Arial Narrow","Roboto Condensed","Helvetica Condensed",Arial,sans-serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:-0.2px;
  white-space:nowrap;
  text-align:center;
  transform:translate(-50%, -135%);
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 4px rgba(0,0,0,.9);
  pointer-events:none;
}
.hover-label.palme{ color:#ff7cc8 !important; }
.hover-label.polis{ color:#7fd8ff !important; }
.hover-label.platser{ color:#72ff72 !important; }
.hover-label.misstankt{ color:#ffb347 !important; }
.hover-label.springande{ color:#ff4d4d !important; }
.hover-label.wt{ color:#ffe14d !important; }


/* Toggle uppe vid tidslinjen */
.timelineModeToggle{
  position:absolute;
  top:22px;
  right:34px;
  display:grid;
  grid-template-columns:auto 44px auto;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#ddd;
  text-transform:lowercase;
}

.timelineModeToggle .modeAll{
  color:#f2c94c;
}

.timelineModeToggle .modeAnimated{
  color:#b8b8b8;
}

.switch{
  position:relative;
  display:inline-block;
  width:44px;
  height:22px;
}

.switch input{
  opacity:0;
  width:0;
  height:0;
}

.sliderSwitch{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:#777;
  transition:.2s;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.35);
}

.sliderSwitch:before{
  position:absolute;
  content:"";
  height:16px;
  width:16px;
  left:3px;
  top:2px;
  background:white;
  transition:.2s;
  border-radius:50%;
}

.switch input:checked + .sliderSwitch{
  background:#f2c94c;
}

.switch input:checked + .sliderSwitch:before{
  transform:translateX(20px);
}

.timelineModeToggle.animated .modeAll{
  color:#b8b8b8;
}

.timelineModeToggle.animated .modeAnimated{
  color:#f2c94c;
}


/* MOBILANPASSNING */
.mobileMenuButton,
.mobileOverlay{
  display:none;
}

@media (max-width: 768px){

  html,body{
    overflow:hidden;
  }

  .topbar{
    height:118px;
    grid-template-columns:1fr auto;
    padding:8px 10px;
    box-sizing:border-box;
  }

  .brand{
    font-size:24px;
    padding-left:0;
    align-self:start;
  }

  .mobileMenuButton{
    display:block;
    position:absolute;
    right:10px;
    top:10px;
    z-index:2600;
    background:#f2c94c;
    color:#111;
    border:0;
    border-radius:6px;
    padding:8px 10px;
    font-size:12px;
    font-weight:bold;
  }

  .timeHeader{
    position:absolute;
    left:10px;
    right:10px;
    bottom:6px;
    width:auto;
  }

  .dateClock{
    font-size:14px;
    gap:22px;
  }

  .sliderRow{
    grid-template-columns:1fr 36px;
    gap:6px;
  }

  #timeSlider{
    width:100%;
  }

  .topPlayButton{
    width:36px;
    height:26px;
  }

  .timeControls{
    grid-template-columns:1fr 1.25fr 1fr;
    gap:6px;
    margin-top:2px;
  }

  .timeControls label{
    font-size:9px;
    padding:1px 3px 3px;
  }

  .timeControls select{
    font-size:10px;
  }

  .timelineModeToggle{
    position:fixed;
    top:122px;
    left:10px;
    right:10px;
    z-index:1700;
    display:grid;
    grid-template-columns:1fr 44px 1fr;
    justify-items:center;
    background:rgba(27,17,14,.88);
    border:1px solid rgba(255,255,255,.18);
    border-radius:7px;
    padding:5px;
    font-size:10px;
  }

  .mapArea{
    top:118px;
    left:0;
    right:0;
    bottom:0;
  }

  .sidebar{
    top:0;
    left:0;
    bottom:0;
    width:min(88vw,360px);
    transform:translateX(-105%);
    transition:transform .22s ease;
    z-index:2500;
    padding-top:54px;
    border-right:1px solid rgba(255,255,255,.25);
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .mobileOverlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.48);
    z-index:2400;
  }

  .mobileOverlay.show{
    display:block;
  }

  .sidebar h2{
    font-size:18px;
    margin:10px 0 8px;
  }

  .quickRow{
    padding:0 10px 18px;
    gap:8px;
  }

  .quickRow button,
  .quickToggle{
    font-size:12px;
  }

  .box{
    min-height:auto;
    font-size:12px;
  }

  .ghostControls{
    display:none;
  }

  #statsBox{
    left:8px;
    right:8px;
    bottom:8px;
    font-size:11px;
    text-align:center;
  }

  .leaflet-control-zoom{
    margin-top:58px!important;
  }

  .map-label{
    font-size:8px!important;
  }

  .leaflet-popup-content{
    width:280px!important;
    max-width:280px!important;
    font-size:12px;
  }

  .leaflet-popup-content-wrapper{
    max-width:310px!important;
  }
}

@media (max-width: 420px){
  .brand{
    font-size:21px;
  }

  .dateClock{
    font-size:13px;
  }

  .timeControls{
    grid-template-columns:1fr;
  }

  .topbar{
    height:162px;
  }

  .mapArea{
    top:162px;
  }

  .timelineModeToggle{
    top:166px;
  }

  .leaflet-control-zoom{
    margin-top:94px!important;
  }
}


/* Mindre ikoner på kartan */
.mapIconWrap.tiny{width:14px!important;height:14px!important}
.mapIconWrap.tiny img{width:10px!important;height:10px!important}
.mapIconWrap.small{width:19px!important;height:19px!important}
.mapIconWrap.small img{width:14px!important;height:14px!important}
.mapIconWrap.medium{width:24px!important;height:24px!important}
.mapIconWrap.medium img{width:18px!important;height:18px!important}
.mapIconWrap.large{width:30px!important;height:30px!important}
.mapIconWrap.large img{width:23px!important;height:23px!important}

/* Tunnare path-linjer */
.leaflet-interactive{
  stroke-width:1.2px!important;
}

/* Loop till höger om omfång */
.timeControls{
  grid-template-columns:90px 220px 50px 90px!important;
  gap:14px!important;
}
.loopLabel{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
}
.loopLabel input{
  width:14px;
  height:14px;
}

/* Switch: cirkel vänster när "visa allt på en gång" är aktivt */
.switch input:checked + .sliderSwitch:before{
  transform:translateX(0)!important;
}
.switch input:not(:checked) + .sliderSwitch:before{
  transform:translateX(20px)!important;
}
.switch input:checked + .sliderSwitch{
  background:#f2c94c!important;
}
.switch input:not(:checked) + .sliderSwitch{
  background:#777!important;
}

@media (max-width:768px){
  .timeControls{
    grid-template-columns:1fr 1.25fr .55fr 1fr!important;
    gap:5px!important;
  }
}


/* ALT 3 MOCKUP-LIK DESIGN — 80-TALS INFOGRAFIK / TIDNING */

html,body{
  background:#11100d!important;
  color:#111!important;
  font-family:Helvetica, Arial, sans-serif!important;
}

.topbar{
  background:#11100d!important;
  border-bottom:2px solid #2a2721!important;
  height:86px!important;
  display:grid!important;
  grid-template-columns:420px 1fr!important;
  align-items:center!important;
}

.brand{
  color:#e4dcc8!important;
  font-family:Helvetica, Arial, sans-serif!important;
  font-size:36px!important;
  font-weight:900!important;
  letter-spacing:.5px!important;
  padding-left:22px!important;
  text-transform:uppercase!important;
}

.timeHeader{
  width:720px!important;
  justify-self:center!important;
}

.dateClock{
  justify-content:flex-end!important;
  gap:18px!important;
  padding-right:18px!important;
  font-family:"Courier New", monospace!important;
  color:#eadfc7!important;
  font-size:15px!important;
}

#topClock{
  color:#e0c64a!important;
  font-size:26px!important;
  line-height:22px!important;
}

.sliderRow{
  grid-template-columns:1fr 34px!important;
  gap:8px!important;
}

#timeSlider{
  width:100%!important;
  accent-color:#a92b28!important;
}

.topPlayButton{
  background:#d8d0bd!important;
  color:#111!important;
  border:1px solid #4f4a42!important;
  height:24px!important;
}

.timeControls{
  grid-template-columns:110px 260px 54px 110px!important;
  gap:10px!important;
  justify-content:end!important;
}

.timeControls label,
.loopLabel{
  background:#d9d1bf!important;
  color:#111!important;
  border:1px solid #514b42!important;
  font-family:"Courier New", monospace!important;
  font-size:10px!important;
  text-transform:uppercase!important;
  padding:2px 4px!important;
}

.timeControls select{
  background:#e7dfcf!important;
  color:#111!important;
  border:0!important;
  font-family:"Courier New", monospace!important;
  font-size:11px!important;
}

.timelineModeToggle{
  top:20px!important;
  right:190px!important;
  background:#151515!important;
  border:1px solid #c8bfa9!important;
  border-radius:4px!important;
  padding:7px 12px!important;
  font-family:"Courier New", monospace!important;
  color:#e7dcc4!important;
}

.timelineModeToggle span{
  color:#e7dcc4!important;
}

.switch{
  width:40px!important;
  height:20px!important;
}

.sliderSwitch{
  background:#4f4b43!important;
  border:1px solid #b9af99!important;
}

.sliderSwitch:before{
  width:14px!important;
  height:14px!important;
  top:2px!important;
  left:3px!important;
}

.switch input:checked + .sliderSwitch{
  background:#d9d1bf!important;
}

.sidebar{
  top:86px!important;
  width:390px!important;
  background:#11100d!important;
  border-right:2px solid #28251f!important;
  padding:10px 10px 24px!important;
}

.mapArea{
  top:86px!important;
  left:390px!important;
  background:#d9d1bf!important;
}

.sidebar h2{
  background:#171717!important;
  color:#d9d1bf!important;
  border:1px solid #4a453d!important;
  border-bottom:0!important;
  margin:8px 0 0!important;
  padding:8px 10px!important;
  text-align:left!important;
  font-family:"Courier New", monospace!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:.5px!important;
  text-transform:uppercase!important;
}

.quickRow{
  background:#d9d1bf!important;
  border:1px solid #4a453d!important;
  padding:10px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
}

.quickRow button{
  background:#d5beb8!important;
  color:#111!important;
  border:1px solid #635c50!important;
  padding:8px 10px!important;
  text-align:left!important;
  font-family:"Courier New", monospace!important;
  text-transform:uppercase!important;
  font-size:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

.quickRow button:hover{
  background:#ebe3d1!important;
}

.quickToggle{
  color:#111!important;
  font-family:"Courier New", monospace!important;
  font-size:11px!important;
  text-transform:uppercase!important;
}

.box{
  background:#d9d1bf!important;
  border:1px solid #4a453d!important;
  color:#111!important;
  min-height:auto!important;
  padding:10px!important;
  box-shadow:none!important;
}

.box label,
.box div{
  color:#111!important;
  font-family:"Courier New", monospace!important;
  font-size:12px!important;
  line-height:1.45!important;
}

.box img{
  width:15px!important;
  height:15px!important;
}

.groupTitle{
  color:#7f1f1d!important;
  font-family:"Courier New", monospace!important;
  font-size:12px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  margin-top:8px!important;
}

.leaflet-tile-pane{
  filter:grayscale(.55) sepia(.42) contrast(.84) brightness(1.22)!important;
}

#map{
  background:#d9d1bf!important;
  outline:2px solid #1a1a1a!important;
  outline-offset:-8px!important;
}

.ghostControls{
  background:rgba(217,209,191,.88)!important;
  border:1px solid #6a6256!important;
  color:#111!important;
  padding:6px 8px!important;
  font-family:"Courier New", monospace!important;
  opacity:1!important;
  top:12px!important;
  left:14px!important;
  gap:14px!important;
}

.ghostControls button{
  color:#111!important;
  border:1px solid #6a6256!important;
  background:#d5beb8!important;
}

.mapIconWrap,
.mapIconWrap.wt,
.mapIconWrap.polis,
.mapIconWrap.flyg,
.mapIconWrap.misstankt{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}

.mapIconWrap img{
  filter:saturate(.78) contrast(.9) brightness(.92)!important;
}

.leaflet-interactive{
  stroke-width:1px!important;
  stroke-opacity:.72!important;
}

.map-label,
.hover-label{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  font-family:"Arial Narrow","Helvetica Condensed",Arial,sans-serif!important;
  font-size:8.5px!important;
  font-weight:600!important;
  letter-spacing:.1px!important;
  color:#111!important;
  text-shadow:
    -1px -1px 0 rgba(231,224,208,.95),
     1px -1px 0 rgba(231,224,208,.95),
    -1px  1px 0 rgba(231,224,208,.95),
     1px  1px 0 rgba(231,224,208,.95)!important;
}

.map-label.palme,.hover-label.palme{color:#a92b28!important;}
.map-label.polis,.hover-label.polis{color:#2d6786!important;}
.map-label.platser,.hover-label.platser{color:#3f7a4b!important;}
.map-label.misstankt,.hover-label.misstankt{color:#a85f1f!important;}
.map-label.springande,.hover-label.springande{color:#b62d2d!important;}
.map-label.wt,.hover-label.wt{color:#8b7410!important;}

.leaflet-popup-content-wrapper{
  background:#e7dfcf!important;
  color:#111!important;
  border:2px solid #1a1a1a!important;
  border-radius:0!important;
  box-shadow:6px 6px 0 rgba(0,0,0,.22)!important;
}

.leaflet-popup-content{
  color:#111!important;
  font-family:Helvetica, Arial, sans-serif!important;
  width:460px!important;
  max-width:460px!important;
}

.leaflet-popup-content strong{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:16px!important;
}

.leaflet-popup-tip{
  background:#e7dfcf!important;
}

#statsBox{
  background:#111!important;
  color:#e7dfcf!important;
  border:1px solid #6a6256!important;
  font-family:"Courier New", monospace!important;
}

.bottomArchiveStrip{
  position:fixed;
  left:390px;
  right:0;
  bottom:0;
  height:72px;
  z-index:1200;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:#d9d1bf;
  border-top:2px solid #111;
  color:#111;
  font-family:"Courier New", monospace;
  font-size:12px;
}

.bottomArchiveStrip div{
  padding:10px 14px;
  border-right:1px dashed #555;
}

.bottomArchiveStrip b{
  color:#7f1f1d;
}

#statsBox{
  bottom:80px!important;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.028;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.2) 0px,
      rgba(0,0,0,.2) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode:multiply;
  z-index:99999;
}

@media(max-width:768px){
  .topbar{
    height:128px!important;
    grid-template-columns:1fr auto!important;
  }
  .brand{
    font-size:24px!important;
    padding-left:10px!important;
  }
  .sidebar{
    top:0!important;
    width:min(88vw,360px)!important;
  }
  .mapArea{
    top:128px!important;
    left:0!important;
  }
  .timelineModeToggle{
    top:132px!important;
    right:10px!important;
    left:10px!important;
  }
  .leaflet-popup-content{
    width:280px!important;
    max-width:280px!important;
  }
  .bottomArchiveStrip{
    display:none!important;
  }
  #statsBox{
    bottom:8px!important;
  }
}


/* KOMPAKT TIDSLINJE UPPE I MITTEN */
.topbar{
  height:122px!important;
  background:#11100d!important;
  border-bottom:1px solid #25221d!important;
  display:block!important;
}

.brandWrap{
  position:absolute!important;
  left:18px!important;
  top:14px!important;
  width:390px!important;
}

.brand{
  color:#e3312d!important;
  font-size:36px!important;
  line-height:34px!important;
  font-weight:900!important;
  padding-left:0!important;
}

.brandSub{
  color:#d42b27!important;
  font-size:12px!important;
  line-height:13px!important;
  text-align:center!important;
  margin-top:6px!important;
}

.timeHeader{
  position:absolute!important;
  top:14px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:610px!important;
  text-align:left!important;
}

.sliderRow{
  width:610px!important;
  height:68px!important;
  display:block!important;
  background:#d8d0bd!important;
  border:2px solid #2c2923!important;
  box-shadow:inset 0 0 0 1px #8f8677!important;
  position:relative!important;
  padding:0!important;
}

.sliderRow::before{
  content:"TIDSLINJE";
  position:absolute;
  top:8px;
  left:22px;
  font-family:"Courier New",monospace;
  font-size:13px;
  color:#111;
  font-weight:bold;
}

.dateClock{
  position:absolute!important;
  left:12px!important;
  top:12px!important;
  z-index:5!important;
  width:112px!important;
  height:52px!important;
  display:block!important;
  padding:5px 7px!important;
  background:#070707!important;
  border:2px solid #2d2a25!important;
  border-radius:4px!important;
  font-family:"Courier New",monospace!important;
  text-align:left!important;
}

#topDate{
  display:block!important;
  color:#c9c04c!important;
  font-family:"Courier New",monospace!important;
  font-size:10px!important;
  letter-spacing:.8px!important;
  line-height:12px!important;
}

#topClock{
  display:block!important;
  color:#e43a30!important;
  font-family:"Courier New",monospace!important;
  font-size:30px!important;
  line-height:31px!important;
  letter-spacing:1px!important;
  text-shadow:0 0 4px rgba(228,58,48,.5)!important;
}

.sliderRow #timeSlider{
  position:absolute!important;
  left:160px!important;
  top:31px!important;
  width:420px!important;
  height:16px!important;
  accent-color:#b82722!important;
}

.topPlayButton{
  display:none!important;
}

.timeControls{
  position:absolute!important;
  top:78px!important;
  left:0!important;
  width:610px!important;
  display:grid!important;
  grid-template-columns:115px 274px 60px 115px!important;
  gap:8px!important;
}

.timeControls label,.loopLabel{
  background:#d8d0bd!important;
  border:2px solid #2c2923!important;
  color:#111!important;
  font-family:"Courier New",monospace!important;
  font-size:10px!important;
  text-align:center!important;
  padding:2px 4px 5px!important;
  line-height:12px!important;
  box-shadow:inset 0 0 0 1px #8f8677!important;
}

.timeControls select{
  background:#eee6d7!important;
  color:#111!important;
  border:1px solid #8f8677!important;
  font-family:"Courier New",monospace!important;
  font-size:12px!important;
  width:100%!important;
  height:24px!important;
}

.timelineModeToggle{
  position:absolute!important;
  top:48px!important;
  right:26px!important;
  left:auto!important;
  display:grid!important;
  grid-template-columns:auto 44px auto!important;
  align-items:center!important;
  gap:8px!important;
  background:rgba(20,20,20,.72)!important;
  border:0!important;
  padding:8px 10px!important;
  font-family:"Courier New",monospace!important;
  font-size:12px!important;
}

.timelineModeToggle .modeAll{
  background:#1260a6!important;
  color:#fff!important;
  padding:1px 3px!important;
}

.timelineModeToggle span{
  color:#d8d0bd!important;
}

.switch input:checked + .sliderSwitch:before{
  transform:translateX(0)!important;
}

.switch input:not(:checked) + .sliderSwitch:before{
  transform:translateX(20px)!important;
}

.mapArea{ top:122px!important; }
.sidebar{ top:122px!important; }

@media(max-width:768px){
  .topbar{height:170px!important;}
  .brandWrap{left:10px!important;top:8px!important;width:260px!important;}
  .brand{font-size:24px!important;line-height:24px!important;}
  .brandSub{font-size:9px!important;line-height:10px!important;text-align:left!important;}
  .timeHeader{top:70px!important;width:calc(100vw - 20px)!important;}
  .sliderRow{width:100%!important;}
  .sliderRow #timeSlider{left:130px!important;width:calc(100% - 145px)!important;}
  .timeControls{top:78px!important;width:100%!important;grid-template-columns:1fr 1.4fr .65fr 1fr!important;gap:4px!important;}
  .timelineModeToggle{top:12px!important;right:8px!important;font-size:9px!important;gap:4px!important;}
  .mapArea{top:170px!important;}
}


/* =========================================
   JUSTERINGAR: TIDSLINJE / FONT / LAYOUT
   ========================================= */

/* Brödtext: systemfont med smal fallback, utan externa fontfiler. */
body,
.sidebar,
.box,
.box label,
.box div,
.quickRow button,
.quickToggle,
.timeControls label,
.timeControls select,
.loopLabel,
.ghostControls,
#statsBox,
.leaflet-popup-content{
  font-family:"Arial Narrow",Helvetica,Arial,sans-serif!important;
}

/* Behåll digitalfonten i klockan */
.dateClock,
#topDate,
#topClock{
  font-family:"Courier New",monospace!important;
}

/* 3. Svarta klockboxen lite högre/kortare så den håller sig inom beige box */
.dateClock{
  top:10px!important;
  height:46px!important;
  padding:4px 7px!important;
}
#topDate{
  font-size:9px!important;
  line-height:10px!important;
}
#topClock{
  font-size:28px!important;
  line-height:28px!important;
}

/* 4. Flytta visa allt/animerad centrerat under tidslinjespåret,
      mindre och röd istället för blå */
.timelineModeToggle{
  top:50px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  padding:3px 7px!important;
  gap:5px!important;
  font-size:9px!important;
  line-height:12px!important;
  background:rgba(20,20,20,.76)!important;
}

.timelineModeToggle .modeAll{
  background:#b82722!important;
  color:#fff!important;
  padding:1px 3px!important;
}

.switch{
  width:32px!important;
  height:16px!important;
}

.sliderSwitch{
  border-radius:16px!important;
}

.sliderSwitch:before{
  width:10px!important;
  height:10px!important;
  left:3px!important;
  top:2px!important;
}

.switch input:checked + .sliderSwitch:before{
  transform:translateX(0)!important;
}

.switch input:not(:checked) + .sliderSwitch:before{
  transform:translateX(15px)!important;
}

/* 5. Playknappen centrerad över tidslinjen, inne i beige box */
.topPlayButton{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:6px!important;
  transform:translateX(-50%)!important;
  width:30px!important;
  height:22px!important;
  z-index:6!important;
  background:#d8d0bd!important;
  color:#111!important;
  border:1px solid #2c2923!important;
  font-family:"HelveticaNeue Condensed Custom","Arial Narrow",Arial,sans-serif!important;
  font-size:12px!important;
  line-height:18px!important;
}

/* Ge plats åt playknappen utan att störa klockan */
.sliderRow::before{
  top:8px!important;
  left:22px!important;
}

@media(max-width:768px){
  .timelineModeToggle{
    top:132px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
  }

  .topPlayButton{
    top:6px!important;
  }
}


/* LOGOTYP */
.brandWrap{
  position:absolute!important;
  left:18px!important;
  top:14px!important;
  width:390px!important;
  height:auto!important;
}

.siteLogo{
  display:block;
  width:360px;
  max-width:100%;
  height:auto;
}

.brand,
.brandSub{
  display:none!important;
}

@media(max-width:768px){
  .brandWrap{
    left:10px!important;
    top:8px!important;
    width:260px!important;
  }

  .siteLogo{
    width:245px;
  }
}


/* Nya filter från GeoJSON category_path */
.categoryFilterBox{
  max-height:none;
}
.catFilter{
  display:block;
}
.catFilter.sub{
  padding-left:22px!important;
}
.filterCount{
  opacity:.55;
  font-size:10px;
}
.categoryFilterBox img{
  width:16px!important;
  height:16px!important;
  object-fit:contain;
}


/* --- 2026-05-26 category/filter fixes --- */
.bottomArchiveStrip{display:none!important;}

.categoryFilterBox .filterToggleAll{
  width:100%;
  margin:0 0 8px 0;
  padding:7px 8px;
  background:#d5beb8!important;
  color:#111!important;
  border:1px solid #635c50!important;
  font-family:"HelveticaNeue Condensed Custom","Arial Narrow",Arial,sans-serif!important;
  text-transform:uppercase;
  cursor:pointer;
}
.categoryFilterBox .filterToggleAll:not(.active){
  opacity:.55;
}
.filterCount{opacity:.55;font-size:10px;}
.catFilter.sub{padding-left:22px!important;}

/* Ta bort vit outline/textskugga från kartetiketter */
.map-label,
.hover-label{
  text-shadow:none!important;
}

/* Färg per huvudkategori */
.map-label.cat-platser,.hover-label.cat-platser{color:#ffffff!important;}
.map-label.cat-fynd,.hover-label.cat-fynd{color:#ff9641!important;}
.map-label.cat-diverse_personer_och_vittnen,.hover-label.cat-diverse_personer_och_vittnen{color:#ffffff!important;}
.map-label.cat-buss,.hover-label.cat-buss{color:#50aa50!important;}
.map-label.cat-familjen_palme,.hover-label.cat-familjen_palme{color:#ff78be!important;}
.map-label.cat-springade_personer,.hover-label.cat-springade_personer{color:#dc3c37!important;}
.map-label.cat-bilar,.hover-label.cat-bilar{color:#50aa50!important;}
.map-label.cat-polisen_sapo_militar,.hover-label.cat-polisen_sapo_militar,
.map-label.cat-polisen,.hover-label.cat-polisen{color:#78d2ff!important;}
.map-label.cat-misstankta_observationer,.hover-label.cat-misstankta_observationer{color:#ff9641!important;}
.map-label.cat-flygplan,.hover-label.cat-flygplan{color:#50aa50!important;}
.map-label.cat-walkie_talkies,.hover-label.cat-walkie_talkies{color:#ffe141!important;}
.map-label.cat-teorier,.hover-label.cat-teorier{color:#9b5fd2!important;}

/* Flytta topp-menyn något höger så den centreras bättre över kartytan, logotypen ligger kvar */
.timeHeader{
  left:calc(390px + (100vw - 390px)/2)!important;
  transform:translateX(-50%)!important;
}
@media(max-width:768px){
  .timeHeader{
    left:10px!important;
    transform:none!important;
  }
}


/* FIX: ny visa-allt checkbox och kategori-hierarki */
.bottomArchiveStrip{display:none!important;}

.filterAllLabel{
  display:block;
  margin:0 0 8px 0;
  padding:6px 4px;
  border-bottom:1px solid rgba(0,0,0,.35);
  font-weight:bold;
}

.categoryFilterBox input[type="checkbox"]{
  margin-right:5px;
}

.filterCount{
  opacity:.55;
  font-size:10px;
}

.catFilter.sub{
  padding-left:22px!important;
}

/* Ta bort vit outline/textskugga från kartetiketter */
.map-label,
.hover-label{
  text-shadow:none!important;
}

/* Färg per huvudkategori */
.map-label.cat-platser,.hover-label.cat-platser{color:#ffffff!important;}
.map-label.cat-fynd,.hover-label.cat-fynd{color:#ff9641!important;}
.map-label.cat-diverse_personer_och_vittnen,.hover-label.cat-diverse_personer_och_vittnen{color:#ffffff!important;}
.map-label.cat-buss,.hover-label.cat-buss{color:#50aa50!important;}
.map-label.cat-familjen_palme,.hover-label.cat-familjen_palme{color:#ff78be!important;}
.map-label.cat-springade_personer,.hover-label.cat-springade_personer{color:#dc3c37!important;}
.map-label.cat-bilar,.hover-label.cat-bilar{color:#50aa50!important;}
.map-label.cat-polisen_sapo_militar,.hover-label.cat-polisen_sapo_militar{color:#78d2ff!important;}
.map-label.cat-misstankta_observationer,.hover-label.cat-misstankta_observationer{color:#ff9641!important;}
.map-label.cat-flygplan,.hover-label.cat-flygplan{color:#50aa50!important;}
.map-label.cat-walkie_talkies,.hover-label.cat-walkie_talkies{color:#ffe141!important;}
.map-label.cat-teorier,.hover-label.cat-teorier{color:#9b5fd2!important;}

/* Centrera tidslinjeklustret över kartytan, men lämna logotypen */
.timeHeader{
  left:calc(390px + (100vw - 390px)/2)!important;
  transform:translateX(-50%)!important;
}
@media(max-width:768px){
  .timeHeader{
    left:10px!important;
    transform:none!important;
  }
}


/* Reparationsfix: visa allt som vanlig checkbox */
.filterAllLabel{
  display:block;
  margin:0 0 8px 0;
  padding:6px 4px;
  border-bottom:1px solid rgba(0,0,0,.35);
  font-weight:bold;
}
.filterCount{opacity:.55;font-size:10px;}
.catFilter.sub{padding-left:22px!important;}


.catFilter.sub{
  padding-left:18px!important;
}
.catFilter.sub2{
  padding-left:36px!important;
}


/* Popup ska alltid ligga framför rubriker/etiketter */
.leaflet-popup-pane{
  z-index:1200!important;
}
.leaflet-tooltip-pane{
  z-index:1150!important;
}
.leaflet-label-pane{
  z-index:900!important;
}
.leaflet-marker-pane{
  z-index:600!important;
}

/* Mindre pratbubbla-text och samma condensed-font */
.leaflet-popup-content,
.leaflet-popup-content div,
.leaflet-popup-content p{
  font-family:"Arial Narrow",Helvetica,Arial,sans-serif!important;
  font-size:11px!important;
  line-height:1.22!important;
}

.leaflet-popup-content strong{
  font-family:"Arial Narrow",Helvetica,Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:700!important;
}

.leaflet-popup-content{
  width:330px!important;
  max-width:330px!important;
}

.leaflet-popup-content-wrapper{
  max-width:360px!important;
  z-index:1200!important;
}

/* Etiketter som flyttas vid krock får subtil ledarlinje */
.label-leader-line{
  stroke:#eee;
  stroke-width:1;
  stroke-opacity:.75;
  pointer-events:none;
}

.map-label.is-offset,
.hover-label.is-offset{
  background:rgba(15,15,15,.22)!important;
  padding:1px 3px!important;
  border-radius:2px!important;
}


/* Rubriker som annars blir svarta ska vara vita */
.map-label,
.hover-label{
  color:#ffffff!important;
}

/* Spridda rubriker */
.map-label.is-offset,
.hover-label.is-offset{
  color:#ffffff!important;
}

.quickToggle input{
  vertical-align:middle;
}


/* Avancerad label-layout */
.map-label.is-hidden-by-layout{
  display:none!important;
}
.map-label.is-offset{
  background:rgba(15,15,15,.20)!important;
  padding:1px 3px!important;
  border-radius:2px!important;
}
.label-leader-line{
  stroke:#eeeeee;
  stroke-width:1;
  stroke-opacity:.65;
  pointer-events:none;
}


/* Audio-popup och Media/Audio */
.popupAudio{
  width:260px;
  max-width:100%;
  margin-top:8px;
}
.audioMeta{
  margin-top:4px;
  font-size:11px;
  opacity:.75;
}
.mapIconWrap.media_audio{
  filter: drop-shadow(0 0 7px rgba(125,211,252,.75));
}
.catFilter input[value="media_audio"] + img{
  filter: drop-shadow(0 0 4px rgba(125,211,252,.7));
}


/* Media / Audio placeholder icon + popup */
.mapIconWrap.media_audio{
  box-shadow:0 0 14px rgba(125,211,252,.95), inset 0 0 0 1px rgba(255,255,255,.35);
}
.catFilter input[value="media_audio"] + img{
  filter:drop-shadow(0 0 5px rgba(125,211,252,.85));
}
.audioBox{
  margin-top:8px;
  padding:10px;
  border:1px solid rgba(125,211,252,.35);
  border-radius:10px;
  background:rgba(12,26,38,.72);
}
.audioTitle{
  font-weight:700;
  margin-bottom:6px;
}
.popupAudio{
  display:block;
  width:260px;
  max-width:100%;
  margin:4px 0 6px;
}
.audioDirectLink{
  display:inline-block;
  color:#7dd3fc;
  font-size:12px;
  text-decoration:none;
  margin-top:2px;
}
.audioDirectLink:hover{ text-decoration:underline; }
.audioMeta{
  opacity:.8;
  font-size:12px;
  margin-top:4px;
}


.audioStopBtn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:4px 8px 4px 0;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
}
.audioStopBtn:hover{
  background:rgba(255,255,255,.14);
}
.audioStopBtn[hidden]{
  display:none!important;
}
.catFilter input[value="media_audio"] + img{
  width:18px;
  height:18px;
  object-fit:contain;
}


/* Audio PNG ikon + felsökning */
.mapIconWrap.media_audio img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.mapIconWrap.media_audio.missingIcon::after{
  content:"🔊";
  font-size:20px;
}
.audioError{
  margin-top:6px;
  color:#ffd166;
  font-size:12px;
}


/* Polisen/SÄPO/Militär KMZ-hierarki */
.catFilter.root{padding-left:0!important;font-weight:bold;}
.catFilter.sub2{padding-left:38px!important;}
.policeHierarchyTitle{margin-top:10px;}

.policeHierarchyTitle,.policeHierarchy{color:#4fc3f7;border-left:3px solid #4fc3f7;padding-left:6px;}
.signal-line{stroke-dasharray:6 6; animation:wave 2s linear infinite;}
@keyframes wave{to{stroke-dashoffset:-12;}}


/* FIX: behåll kategorifärgen när rubriker sprids/offsetas */
.map-label.cat-platser,
.map-label.cat-platser.is-offset,
.hover-label.cat-platser,
.hover-label.cat-platser.is-offset{ color:#ffffff!important; }

.map-label.cat-fynd,
.map-label.cat-fynd.is-offset,
.hover-label.cat-fynd,
.hover-label.cat-fynd.is-offset{ color:#ff9641!important; }

.map-label.cat-diverse_personer_och_vittnen,
.map-label.cat-diverse_personer_och_vittnen.is-offset,
.hover-label.cat-diverse_personer_och_vittnen,
.hover-label.cat-diverse_personer_och_vittnen.is-offset{ color:#ffffff!important; }

.map-label.cat-buss,
.map-label.cat-buss.is-offset,
.hover-label.cat-buss,
.hover-label.cat-buss.is-offset{ color:#50aa50!important; }

.map-label.cat-familjen_palme,
.map-label.cat-familjen_palme.is-offset,
.hover-label.cat-familjen_palme,
.hover-label.cat-familjen_palme.is-offset{ color:#ff78be!important; }

.map-label.cat-springade_personer,
.map-label.cat-springade_personer.is-offset,
.hover-label.cat-springade_personer,
.hover-label.cat-springade_personer.is-offset{ color:#dc3c37!important; }

.map-label.cat-bilar,
.map-label.cat-bilar.is-offset,
.hover-label.cat-bilar,
.hover-label.cat-bilar.is-offset{ color:#50aa50!important; }

.map-label.cat-polisen_sapo_militar,
.map-label.cat-polisen_sapo_militar.is-offset,
.hover-label.cat-polisen_sapo_militar,
.hover-label.cat-polisen_sapo_militar.is-offset{ color:#78d2ff!important; }

.map-label.cat-misstankta_observationer,
.map-label.cat-misstankta_observationer.is-offset,
.hover-label.cat-misstankta_observationer,
.hover-label.cat-misstankta_observationer.is-offset{ color:#ff9641!important; }

.map-label.cat-flygplan,
.map-label.cat-flygplan.is-offset,
.hover-label.cat-flygplan,
.hover-label.cat-flygplan.is-offset{ color:#50aa50!important; }

.map-label.cat-walkie_talkies,
.map-label.cat-walkie_talkies.is-offset,
.hover-label.cat-walkie_talkies,
.hover-label.cat-walkie_talkies.is-offset{ color:#ffe141!important; }

.map-label.cat-teorier,
.map-label.cat-teorier.is-offset,
.hover-label.cat-teorier,
.hover-label.cat-teorier.is-offset{ color:#9b5fd2!important; }

.map-label.cat-media,
.map-label.cat-media.is-offset,
.hover-label.cat-media,
.hover-label.cat-media.is-offset{ color:#7dd3fc!important; }

/* Ledarlinjen sätts även i JavaScript per kategori. Detta är fallback. */
.label-leader-line{ stroke:currentColor; }

/* Steg 1–2: snabbval och fantombilder */
.primaryQuick{
  border-color:#ff78be!important;
  color:#ff78be!important;
  font-weight:800;
}
.popupContent img{
  display:block;
  max-width:100%;
  height:auto;
  margin:6px 0;
  border-radius:6px;
}
.mapIconWrap.media_fantombilder img{
  filter:drop-shadow(0 0 6px rgba(167,139,250,.75));
}
.map-label.media_fantombilder,
.hover-label.media_fantombilder,
.map-label.media_fantombilder.is-offset,
.hover-label.media_fantombilder.is-offset{color:#a78bfa!important;}


/* Popup-rutor: maxhöjd + scroll, och klickbar yta för att stänga */
.leaflet-popup-content{
  max-height: min(420px, 70vh) !important;
  overflow-y: auto !important;
  padding-right: 6px;
}
.popupContent{ cursor: pointer; }
.popupContent button, .popupContent a, .popupContent input, .popupContent select, .popupContent textarea, .popupContent audio, .popupContent video, .popupContent label, .popupContent .audioBox{ cursor: auto; }

.cat-media .label-text, .cat-media .leaflet-label, .cat-media{ color:#7dd3fc !important; }
.hover-label.media_foton, .label-text.media_foton{ color:#34d399 !important; }
.hover-label.media_videos, .label-text.media_videos{ color:#f87171 !important; }


/* Steg 6–9: minimerade rubriker, borttagen platser-box, mer inzoomad start */
.miniLabelOption{
  margin-left:18px;
  opacity:.95;
}
.map-label[title], .hover-label[title]{
  cursor:help;
}
#miniLabels:checked ~ span{
  font-size:10px;
}
body:has(#miniLabels:checked) .map-label,
body:has(#miniLabels:checked) .hover-label{
  font-size:7px!important;
  line-height:1.05!important;
  padding:2px 4px!important;
  max-width:82px!important;
  white-space:nowrap!important;
}
/* Den gamla kartboxen med “platser” är borttagen i HTML, men denna döljer den om en äldre cache finns. */
.ghostControls{ display:none!important; }

/* === STEG 10-13: språk, sök, pratbubblor och blockerad play vid visa-allt === */
.languageToggle{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(0,0,0,.28);
  font-size:12px;
  color:#cbd5e1;
  white-space:nowrap;
}
.langLabel.active{color:#fff;font-weight:700;}
.langSwitch{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.langSwitch input{display:none;}
.langSwitch span{width:38px;height:20px;border-radius:999px;background:#334155;display:block;position:relative;}
.langSwitch span:before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;left:2px;top:2px;background:#fff;transition:.18s ease;}
.langSwitch input:checked + span:before{transform:translateX(18px);}
.langSwitch input:checked + span{background:#2563eb;}
.searchBox input{width:100%;box-sizing:border-box;margin-bottom:8px;}
.searchBox button{width:100%;}
#globalSearchInfo{font-size:11px;line-height:1.3;margin-top:8px;color:#b8c2cc;}
.topPlayButton.playBlocked{position:relative;opacity:.72;cursor:not-allowed;}
.topPlayButton.playBlocked:after{
  content:"✕";
  position:absolute;
  inset:-7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  line-height:1;
  color:#ff3030;
  font-weight:900;
  text-shadow:0 0 4px #000,0 0 10px rgba(255,0,0,.9);
  pointer-events:none;
}
.topPlayButton.playBlocked:hover:before{
  content:"aktivera animerad tidslinje nedan";
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:220px;
  background:#111827;
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:6px 8px;
  font-size:11px;
  line-height:1.2;
  z-index:5000;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.speechBubbleLabel{
  position:relative;
  display:inline-block;
  transform:translate(-50%,-34px);
  background:rgba(255,255,255,.94);
  color:#111;
  border:1px solid rgba(0,0,0,.35);
  border-radius:7px;
  padding:2px 4px;
  font-size:6px;
  line-height:1.08;
  max-width:110px;
  white-space:normal;
  text-align:center;
  box-shadow:0 1px 6px rgba(0,0,0,.45);
  pointer-events:none;
}
.speechBubbleLabel:after{
  content:"";
  position:absolute;
  bottom:-5px;
  left:50%;
  transform:translateX(-50%);
  border-width:5px 4px 0 4px;
  border-style:solid;
  border-color:rgba(255,255,255,.94) transparent transparent transparent;
}
@media(max-width:768px){.languageToggle{order:5;margin-left:0;font-size:11px;padding:5px 8px}.topPlayButton.playBlocked:hover:before{display:none}}


/* TV/radio-nu-panel ----------------------------------------------------- */
.broadcastBar{
  position:fixed;
  left:420px;
  right:0;
  bottom:0;
  z-index:2600;
  display:flex;
  align-items:stretch;
  min-height:40px;
  max-height:58px;
  background:#d8d0bd;
  border-top:1px solid #111;
  box-shadow:0 -2px 10px rgba(0,0,0,.38);
  color:#111;
  font-family:Arial,Helvetica,sans-serif;
  transition:transform .18s ease;
}
.broadcastBar.collapsed{transform:translateY(calc(100% - 12px));}
.broadcastToggle{
  position:absolute;
  right:10px;
  top:-18px;
  height:18px;
  min-width:34px;
  border:1px solid #111;
  border-bottom:0;
  border-radius:6px 6px 0 0;
  background:#d8d0bd;
  color:#111;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  line-height:1;
  padding:0 8px;
}
.broadcastBar.collapsed .broadcastToggle{transform:rotate(180deg);}
.broadcastContent{
  width:100%;
  display:flex;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
.broadcastItem{
  flex:0 0 112px;
  min-height:36px;
  max-height:58px;
  padding:3px 5px;
  border-right:1px solid #111;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
}
.broadcastItem.cinemaSlot{flex-basis:132px;}
.broadcastItem:last-child{border-right:0;}
.broadcastChannel{
  text-align:center;
  font-weight:900;
  font-size:11px;
  line-height:1;
  margin-bottom:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.broadcastTitle{
  font-size:9px;
  line-height:1.08;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cinemaSlot .broadcastTitle{
  display:block;
}
.broadcastStart{
  font-weight:700;
  opacity:.72;
}
.broadcastTime{display:none;}
.broadcastEmpty{display:none;}

@media(max-width:768px){
  .broadcastBar{left:0;min-height:36px;max-height:52px;}
  .broadcastItem{flex-basis:96px;min-height:32px;padding:2px 4px;}
  .broadcastItem.cinemaSlot{flex-basis:118px;}
  .broadcastChannel{font-size:10px;margin-bottom:1px;}
  .broadcastTitle{font-size:8px;}
}
  .broadcastContent{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));}
  .broadcastItem{min-height:32px;padding:2px 4px;}
  .broadcastChannel{font-size:11px;margin-bottom:1px;}
  .broadcastTitle{font-size:9px;}
  .broadcastTime{font-size:8px;}
}