:root {
  --ink: #153b64;
  --muted: #5f7892;
  --paper: #f7f9fc;
  --panel: #ffffff;
  --line: #d7e1ec;
  --green: #005b9a;
  --mint: #e6f0f8;
  --coral: #f7c600;
  /* Utan detta ritar webbläsaren sina EGNA inbyggda kontroller (inloggningsfält, scrollbars) i
     ljust läge oavsett --panel/--paper ovan - color-scheme styr webbläsarens interna
     widget-rendering separat från vanlig CSS-färgsättning. */
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--paper);
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 5vw;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 18px 'Space Grotesk', sans-serif;
  flex-shrink: 0;
}

/* Svenska flaggans färger - mockupens .topbar .brand-mark-regel (mer specifik än den generiska
   .brand-mark) vinner alltid där loggan faktiskt visas, så blått märke + gul prick är korrekt. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px 9px 9px 3px;
  background: #005b9a;
  color: #fff;
  font-size: 15px;
}

.brand-dot {
  color: var(--coral);
}

.status {
  font-size: 12px;
  color: var(--muted);
  margin-left: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Flex-barn krymper aldrig under sitt eget innehålls bredd utan explicit min-width:0 - utan
     den här raden gjorde overflow/text-overflow ovan ingenting alls, och en lång statustext
     ("N saker att göra...") knuffade .top-actions (inklusive hamburgermenyn) utanför skärmen på
     smala mobilskärmar istället för att kortas av med "…". */
  min-width: 0;
}

.topbar-spacer {
  flex: 1;
}

/* --- Hamburgermeny: samma mönster som mockupen (och Mycket.Web:s topbar) -
   en knapp som öppnar en dropdown med länkar och ett riktigt inloggningsformulär,
   inget 1/2/3/4-val eftersom det bara var mockupens sätt att demonstrera de fyra
   vyerna på en enda sida. --- */

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.menu-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.account-menu {
  z-index: 51;
  right: 0;
  top: 46px;
  width: 285px;
  position: absolute;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(21, 59, 100, .09);
}

.menu-kicker {
  margin: 4px 10px 9px;
  color: var(--green);
  font: 700 16px 'Space Grotesk', sans-serif;
}

.menu-item {
  width: 100%;
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 11px 9px;
  border: 0;
  background: none;
  border-radius: 8px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.menu-item:hover {
  background: var(--mint);
}

.menu-item > b {
  width: 25px;
  color: var(--green);
  font-size: 17px;
  font-style: normal;
  text-align: center;
  flex-shrink: 0;
}

.menu-item strong, .menu-item small {
  display: block;
}

.menu-item small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.menu-divider {
  height: 1px;
  background: var(--line);
  margin: 7px 0;
}

.login-form {
  padding: 4px 9px 6px;
}

.login-title {
  font: 700 18px 'Space Grotesk', sans-serif;
  margin: 0 0 12px;
}

.login-form label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin: 9px 0;
}

.login-form input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  outline: 0;
  font: inherit;
}

.login-button {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 10px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  margin-top: 5px;
  cursor: pointer;
}

.login-error {
  color: #c45343;
  font-size: 12px;
  margin: 8px 0 0;
}

.forgot-password {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin-top: 9px;
  padding: 2px;
  text-decoration: none;
  cursor: pointer;
}

.forgot-password:hover {
  color: var(--green);
}

@media (max-width: 700px) {
  .topbar {
    padding: 0 18px;
  }

  .account-menu {
    right: 0;
  }

  /* Logga + "Min position"-pill (med text) + temaknapp + hamburgermeny ryms inte sida vid sida
     på en smal mobilskärm - brand+top-actions krävde ~374px även efter att statustexten fått
     krympa till "…" (se min-width:0 på .status ovan), mer än de ~360px en vanlig mobil har.
     Enklast är att tappa "Min position"-texten och bara behålla ikonen (fortfarande en
     32x32-cirkel i linje med temaknappen bredvid) - den tillgängliga etiketten finns kvar via
     aria-label/title, så knappen är fortfarande begriplig för skärmläsare. */
  .location-pill-label {
    display: none;
  }

  .location-pill {
    width: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  /* Statustexten (antal träffar, men även geolokaliseringsmeddelanden som "Frågar efter din
     position…"/"Platsdelning nekad.") tar för mycket plats för att visas läsbart på en smal
     mobilskärm även hoptryckt till "…" - enklare och tydligare att bara hoppa över den helt här
     istället för att kompromissa med en avkortad version. */
  .status {
    display: none;
  }

  /* Samma resonemang som "Min position" ovan - bara SVG-ikonen kvar, texten nås ändå via
     aria-label. */
  .view-toggle-label {
    display: none;
  }

  .view-toggle {
    width: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
}

/* De allra smalaste mobilerna (t.ex. iPhone SE 1:a gen, 320px) klarade inte den extra
   view-toggle-knappen utan att hamburgermenyn klipptes ~4px, uppmätt innan den här raden
   fanns - minskar bara avståndet mellan ikonerna och kantmarginalen ytterligare lite på just
   den smalaste brytpunkten, allt annat ovan lämnas orört. */
@media (max-width: 340px) {
  .topbar {
    padding: 0 12px;
  }

  .top-actions {
    gap: 8px;
  }
}

#map {
  position: absolute;
  inset: 60px 0 0 0;
}

/* INTE display:none (t.ex. via [hidden]) - MapLibre har en egen ResizeObserver på containern
   som annars upptäcker att den krympt till 0x0 och räknar om sitt interna koordinatläge
   utifrån det, vilket ger map.getBounds() förvrängda värden och kan trigga en felaktig
   omhämtning (se setViewMode i app.js, där denna klass sätts/tas bort). visibility:hidden
   behåller elementets storlek/layout precis som vanligt, bara osynligt - kartan "vet" aldrig
   att något ändrats. */
#map.view-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Fyller exakt samma yta som #map och ligger ovanpå den (högre z-index) - de två visas aldrig
   samtidigt (view-toggle i app.js), men till skillnad från #map får #list-view faktiskt
   hidden-attributet eftersom den inte har samma "får inte krympa"-begränsning. Filterraden
   (kategori/datum) ligger ovanpå båda som ett eget lager (se .filter-bar) och gäller lika för
   bägge vyerna. */
#list-view {
  position: absolute;
  z-index: 4;
  inset: 60px 0 0 0;
  overflow-y: auto;
  background: var(--paper);
  padding: 76px 16px 24px;
}

.list-view-status {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

/* Sökningen som gör listvyn navigerbar utan den (dolda) kartan - se listSearchForm/setSearchOrigin
   i app.js. */
.list-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  max-width: 640px;
  margin-bottom: 12px;
}

.list-search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 220px;
}

.list-search-radius {
  flex: 0 0 100px;
}

.list-search-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.list-search-field input,
.list-search-field select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

.list-search-submit {
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font: 600 13px 'DM Sans', sans-serif;
  cursor: pointer;
}

.list-search-results {
  list-style: none;
  margin: -4px 0 16px;
  padding: 0;
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.list-search-results li:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.list-search-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.list-search-results button:hover {
  background: var(--mint);
}

.list-search-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.list-view-items {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
}

.list-view-items .popover-group-item {
  background: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 8px;
  padding: 12px;
}

.list-view-items .popover-group-dot {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.mycket-popover {
  min-width: 220px;
  max-width: 260px;
}

/* MapLibres standardpadding på popup-innehållet skulle annars lämna en kant runt bilden -
   .popover-body har sin egen padding istället, så bilden kan gå ända ut i kanterna precis som
   i mockupen. max-height/overflow-y är en generell säkerhetsspärr (utöver mobilläget nedan) -
   ett ovanligt långt gruppinnehåll ska scrolla inuti popovern istället för att tvinga fram en
   egen positionering MapLibre inte har utrymme för. */
.mycket-popover .maplibregl-popup-content {
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(70vh, 480px);
  border-radius: 12px;
  /* MapLibre hårdkodar #fff här oavsett tema - resten av panelen (och pilspetsen nedan) följer
     redan --panel, men denna vann annars kvar vit i mörkt läge. */
  background: var(--panel);
}

/* På smala/korta skärmar hittar MapLibres automatiska ankarval ofta inte plats vare sig ovanför
   eller under nålen för hela popoverns innehåll, oavsett var på skärmen nålen råkar sitta - hela
   inforutan kan då hamna delvis under skärmkanten. Lösningen är att helt enkelt sluta låtsas att
   popovern hör till nålens position på smala skärmar och istället docka den som ett fast
   "bottom sheet" längst ner - garanterat inom skärmen oavsett var nålen är, och dessutom lättare
   att nå med tummen. !important krävs för att vinna över MapLibres egen inline
   style.transform/position (satt i JS, se kommentaren vid .mycket-marker om samma sorts
   specificitetskonflikt). */
@media (max-width: 640px) {
  .mycket-popover {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    transform: none !important;
    /* MapLibre räknar också ut och sätter sin egen inline max-width (baserat på hur mycket
       plats den bedömer finns kvar vid nålens position) - måste också brytas med !important,
       annars vinner den över bredden vi faktiskt vill ha här. */
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
    /* Högre än allt annat kartkrom (t.ex. .map-controls zoomknappar, z-index: 8) så
       bottom-sheeten inte hamnar delvis under dem. */
    z-index: 60 !important;
  }

  .mycket-popover .maplibregl-popup-tip {
    display: none;
  }

  /* MapLibres standard-stängknapp är bara ~20x17px - alldeles för litet tumtryckmål, särskilt
     nu när popovern är en bottom sheet man förväntas kunna stänga med tummen. */
  .mycket-popover .maplibregl-popup-close-button {
    width: 44px;
    height: 44px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mycket-popover .maplibregl-popup-content {
    max-height: min(70vh, 480px);
  }
}

/* Pilspetsen mellan popupen och kartnålen är fyra separata träffytor (en per håll popupen kan
   öppnas åt) som MapLibre också hårdkodar till #fff - måste matchas individuellt. */
.mycket-popover.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.mycket-popover.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.mycket-popover.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--panel);
}

.mycket-popover.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.mycket-popover.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.mycket-popover.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--panel);
}

.mycket-popover.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--panel);
}

.mycket-popover.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--panel);
}

.popover-image {
  height: 110px;
  position: relative;
  overflow: hidden;
  background: var(--mint);
}

.popover-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.popover-body {
  padding: 12px 14px 14px;
}

.popover-body p {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 8px;
}

/* Kartnål - ikon/färg kommer från listingens kategori (se admin/"Typer och kategorier" och
   CategoryVisuals.cs). Ersätter MapLibres inbyggda enfärgade nål eftersom den inte har plats
   för en egen ikon. Droppformen roteras -45deg - OBS: roteringen sätts via Marker-optionen
   `rotation` i app.js, INTE här via CSS transform, eftersom MapLibre sätter en inline
   style.transform på samma element som skulle skriva över en CSS-regel här helt (se kommentaren
   i app.js vid buildMarkerElement/renderListings). Texten (emojin) roteras tillbaka så den står
   rätt. OBS: sätt ALDRIG en egen `position` här - MapLibres egen .maplibregl-marker-regel (som
   redan sitter på samma element) sätter position:absolute, vilket är precis det som gör att
   elementet placeras exakt på kartkoordinaten via dess transform. maplibre-gl.css laddas FÖRE
   den här filen (se index.html), så en egen `position`-regel här (t.ex. `relative`, samma
   specificitet) skriver tyst över den och får alla nålar att i stället staplas efter varandra i
   normalt dokumentflöde - upptäckt när flera Varberg-event vid extrem utzoomning såg ut att
   ligga nedanför Danmark i en lodrät stapel. Sifferbrickans position:absolute nedan fungerar
   ändå utmärkt eftersom MapLibres egen position:absolute redan etablerar en giltig
   "containing block" för den. */
.mycket-marker {
  width: 30px;
  height: 30px;
  font-size: 15px;
  border-radius: 50% 50% 50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(21, 59, 100, .35);
  cursor: pointer;
}

.mycket-marker > span {
  transform: rotate(45deg);
}

/* Sifferbricka när flera listningar delar exakt samma koordinat (se locationKey/renderListings
   i app.js) - ärver samma motrotering som ikonspannet ovan (".mycket-marker > span") eftersom
   den också är ett direkt span-barn, så siffran står upprätt trots att hela nålen roteras. */
.mycket-marker-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: #d1373f;
  border: 2px solid #fff;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Klusternål - samma droppformade .mycket-marker som en vanlig kartnål (se buildMarkerElement),
   bara med en neutral färg istället för kategorins - klustret kan innehålla vilken kategori som
   helst. Ikonen (🔍, satt i buildClusterMarkerElement) signalerar "klicka för att zooma in", och
   sifferbrickan (.mycket-marker-badge, samma som för exakt-samma-koordinat-grupper) visar
   antalet. */
.mycket-cluster-marker {
  background: var(--ink);
}

.popover-kind {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.popover-body h3 {
  margin: 0 0 8px 0;
  font-size: 15px;
}

.popover-detail-link {
  border: none;
  background: none;
  color: var(--green);
  font: 600 12px 'DM Sans', sans-serif;
  padding: 0;
  cursor: pointer;
}

/* Popover för flera listningar på samma koordinat, se popover-group-template/buildGroupPopupNode
   i app.js. Ingen bild överst (till skillnad från den vanliga popover-template) - en lista med
   flera bilder hade blivit för tung, och listningens egen bild syns ändå i detaljvyn. */
.mycket-popover-group .popover-group-header {
  padding: 12px 14px 0;
}

.popover-group-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 6px 6px;
  max-height: 220px;
  overflow-y: auto;
}

.popover-group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.popover-group-item:hover {
  background: var(--mint);
}

.popover-group-dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
}

.popover-group-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.popover-group-text strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popover-group-kind {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* "Visa alla N →"-knappen längst ner i en grupp-popover när fler listningar finns än vad
   GROUP_POPUP_INLINE_LIMIT (app.js) visar direkt. */
.popover-group-more {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px 12px !important;
}

/* Den fullständiga, datumgrupperade listan i sidopanelen (openLocationList i app.js) - öppnas
   via "Visa alla" ovan. Återanvänder .popover-group-item/-dot/-text/-kind, bara utan popoverns
   höjdbegränsning eftersom sidopanelen har gott om utrymme. */
.location-list-date {
  margin-top: 20px;
}

.location-list-date h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.location-list-items {
  max-height: none;
  overflow: visible;
  padding: 0;
}

/* Navigering i ett lager ovanpå kartan, inte tvärtom - se CLAUDE.md. Kategorivalet och
   datumnavigeringen grupperas ihop till vänster (istället för space-between) så "Mycket" och
   "nu" hamnar precis intill varandra - samma "Mycket + Nu"-knep som mockupens filter-bar-group. */
.filter-bar {
  position: fixed;
  top: 72px;
  left: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.filter-bar > * {
  pointer-events: auto;
}

.date-nav {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(21, 59, 100, .08);
}

/* --- Kategorifilter: en utfällbar meny (mockupens .event-type-picker-mönster) istället för en
   platt <select> - annars blir en djup kategorihierarki en oöverskådlig lång lista. Varje nivå
   går att välja direkt (klick på namnet), och en kategori med underkategorier får en separat
   liten pil bredvid namnet som bara fäller ut/in dem - två separata klickmål i samma rad, inte
   mockupens variant där gruppheadern bara är en toggle och aldrig går att välja själv. --- */

.event-type-picker {
  position: relative;
}

.map-filter-button {
  height: 40px;
  padding: 0 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(21, 59, 100, .08);
  color: var(--ink);
  font: 700 13px 'DM Sans', sans-serif;
  min-width: 105px;
  max-width: 60vw;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-filter-button span {
  float: right;
  margin-left: 12px;
  color: var(--muted);
}

.event-type-menu {
  position: absolute;
  z-index: 6;
  top: 46px;
  left: 0;
  width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 18px 50px rgba(21, 59, 100, .12);
}

.event-type-option {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  border-radius: 7px;
  text-align: left;
  padding: 9px 10px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.event-type-option:hover, .event-type-option.selected {
  background: var(--mint);
  color: var(--green);
  font-weight: 700;
}

.event-type-row {
  display: flex;
  align-items: center;
}

.event-type-row .event-type-option {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-type-expand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  transition: transform .15s;
}

.event-type-expand[aria-expanded="true"] {
  transform: rotate(90deg);
}

.event-type-submenu {
  padding-left: 14px;
  border-left: 1px solid var(--line);
  margin-left: 12px;
}

.date-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
}

.date-nav button {
  border: none;
  background: none;
  font: 500 13px 'DM Sans', sans-serif;
  color: var(--ink);
  padding: 4px 6px;
  cursor: pointer;
}

.date-arrow {
  font-size: 16px;
}

/* now-button visar "nu"/"i morgon"/ett datum (se app.js) och fäller ut en liten popover med
   både ett datumval och en "Visa allt"-knapp - samma mönster som mockupens
   .date-picker-popover (öppnas av samma now-button, innehåller ett datumfält och en
   "återställ"-knapp bredvid varandra i popovern, inte separat synlig i själva raden). */
.now-button-wrap {
  position: relative;
}

.now-button-wrap > button {
  font-weight: 700;
  min-width: 46px;
  text-align: center;
}

.date-picker-popover {
  position: absolute;
  z-index: 6;
  top: 46px;
  left: 0;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(21, 59, 100, .12);
  padding: 12px;
}

/* left:0 ovan är en fast 220px åt höger räknat från "nu"-knappen, oavsett var på skärmen
   knappen råkar sitta - på en smal mobilskärm hamnar högerkanten då lätt utanför. Ankrar
   istället till SKÄRMENS kanter (samma mönster som kartpopoverns bottom sheet) istället för
   knappens position. */
@media (max-width: 640px) {
  .date-picker-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 110px;
    width: auto;
  }
}

.date-picker-popover label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
}

.date-picker-popover input[type="date"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.date-picker-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.date-picker-popover .text-button {
  padding: 4px 0 0;
}

.text-button {
  color: var(--green);
  font-weight: 600;
}

/* #detail-content (inte panelen själv) är det som scrollar - se längre ner. Stäng-knappen ligger
   utanför den scrollande ytan som ett eget flex-barn, så den aldrig kan scrolla bort även vid en
   lång beskrivning, utan att behöva krångla med fixed/sticky-positionering (som annars kolliderar
   med topbaren, se .detail-close). */
.detail-panel {
  position: fixed;
  z-index: 20;
  background: var(--panel);
  box-shadow: 0 -4px 24px rgba(21, 59, 100, .18);
  display: flex;
  flex-direction: column;

  /* Mobile-first: panelen som ett lager underifrån. Se @media nedan för desktop-varianten. */
  inset: auto 0 0 0;
  /* height, inte max-height: panelen är bottenförankrad och växer annars bara uppåt så mycket
     som INNEHÅLLET kräver, vilket ger ett oförutsägbart glapp upptill för kort innehåll. Med en
     fast höjd täcker panelen alltid samma yta - kort innehåll ger bara tomrum längst ner i den
     scrollande #detail-content istället, vilket är helt ofarligt.

     INGEN procentandel (80vh/80dvh) längre - en första version av den här fixen försökte det,
     men 80% lämnar per definition ALLTID 20% av skärmen synlig upptill oavsett skärmstorlek,
     vilket var precis det en användare rapporterade (Mycket/nu-filterraden och en bit karta syns
     ovanför panelen). Fyller istället allt utom headern, samma princip som desktop-varianten
     (inset:60px, se @media nedan) fast uträknat med dvh - se kommentaren om "Kartan döljs helt
     bakom" där. EXAKT headerns egna 60px, ingen extra "luft" - en första version av den här
     raden drog av 72px (60 + 12px marginal, samma 12px som knappens eget avstånd till panelens
     överkant nedan), men den 12px-remsan blev själv en synlig kart-strimma ovanför panelen
     (rapporterat av en Android-användare, synligt i en skärmdump). Knappen har ändå gott om
     marginal till headern eftersom den redan har sitt EGET 12px-avstånd till panelens överkant -
     den behövde aldrig ett extra tillägg här också. */
  height: calc(100vh - 60px); /* fallback för webbläsare utan stöd för dvh, se raden nedan */
  /* Mobilwebbläsares adressfält räknas in i 100vh (det krymper/växer när man scrollar utan att
     vh uppdateras), vilket kunde göra att panelen (och därmed "Till kartan"-knappen, positionerad
     nära panelens egen överkant) växte högre än den faktiskt synliga ytan och hamnade delvis
     under den fasta headern - en riktig användare rapporterade knappen avklippt av mycket.nu-
     raden. 100dvh är den dynamiska motsvarigheten webbläsaren räknar om live och löser det.
     Webbläsare utan dvh-stöd ignorerar bara den här raden och faller tillbaka på vh ovan. */
  height: calc(100dvh - 60px);
  border-radius: 16px 16px 0 0;
}

/* display:flex ovan har högre specificitet än webbläsarens standard-[hidden]-regel
   (display:none) och skulle annars vinna - panelen.hidden=true i JS gjorde då ingenting synligt
   trots att attributet faktiskt sattes. */
.detail-panel[hidden] {
  display: none;
}

#detail-content {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 20px 32px;
}

@media (min-width: 768px) {
  .detail-panel {
    /* Full bredd på desktop istället för en smal sidopanel - matchar mockupens fullbredds
       detaljsida. Kartan döljs helt bakom under tiden, samma som redan var fallet på mobil. */
    inset: 60px 0 0 0;
    max-height: none;
    border-radius: 0;
  }

  #detail-content {
    padding: 24px;
  }

  /* Matchar #detail-content:s padding ovan (24px) - annars stämmer inte hero-bildens negativa
     marginal längre och den slutar precis före kanten istället för att gå ända ut. */
  .detail-hero {
    width: calc(100% + 48px);
    margin: -24px -24px 16px;
  }
}

/* Ligger utanför #detail-content (den scrollande ytan, se .detail-panel ovan) som ett eget
   flex-barn - stannar därför alltid kvar uppe i hörnet oavsett hur långt ner man scrollat i en
   lång beskrivning, utan att krocka med topbaren som fixed/sticky-positionering hade gjort. */
/* Text + pil istället för en ensam ✕ - en admin rapporterade att en ensam ikonknapp var lätt
   att missa som "vägen tillbaka till kartan" på mobil, särskilt innan popover-överlapps-buggen
   (se renderListings/openDetail) fanns fixad. Fortfarande minst 44px hög för att vara ett
   rimligt tumtryckmål. */
.detail-close {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(21, 59, 100, .2);
  font: 600 14px inherit;
  cursor: pointer;
  color: var(--ink);
}

/* Rubrikbild högst upp i panelen, samma idé som mockupens fullbredds-hero - bara lägre eftersom
   panelen är smalare än mockupens hela sida. Negativ marginal kompenserar panelens egen padding
   så bilden går ända ut i kanterna. */
.detail-hero {
  width: calc(100% + 40px);
  margin: -20px -20px 16px;
  height: 160px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: #fff;
}

.detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.detail-eyebrow {
  font: 700 11px 'DM Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#detail-content h2 {
  margin: 4px 0 8px 0;
  font: 700 22px 'Space Grotesk', sans-serif;
}

.detail-summary {
  color: var(--muted);
  margin: 0;
}

/* Centrerar innehållet med en lässtruken maxbredd - annars sträcker sig text/kort ut över hela
   fönstret på breda skärmar nu när panelen själv går i full bredd (se .detail-panel ovan). */
.detail-shell {
  max-width: 1080px;
  margin: 0 auto;
}

.detail-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .detail-columns {
    /* Samma proportion som mockupen - huvudinnehållet (Om/Öppettider) tar mer plats än
       sidokorten (Hitta hit/Arrangör/Länkar/Rapportera fel). */
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr);
    gap: 40px;
    align-items: start;
  }
}

.detail-aside > .detail-info-card:first-child {
  margin-top: 0;
}

.detail-info-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

.detail-info-card h4 {
  font: 700 14px 'Space Grotesk', sans-serif;
  margin: 0 0 8px;
}

.detail-info-card p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.detail-action, .social-link {
  display: block;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  padding: 8px 0 0;
}

.detail-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.detail-body-image {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 14px;
  display: block;
}

.detail-hours-table {
  border-top: 1px solid var(--line);
}

.detail-hours-table div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.detail-hours-table span {
  color: var(--muted);
}

.detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.detail-actions button, .detail-actions .detail-action-button {
  border: 1px solid var(--line);
  background: var(--mint);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 12px;
  font: 600 13px 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.detail-actions button.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.report-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  font-family: inherit;
  font-size: 13px;
}

.report-form .report-target {
  display: flex;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Tydlig bekräftelse när rapporten faktiskt gick iväg - se submitReport i app.js. Ren färgad
   text räckte inte (en användare trodde först att nåt gått fel, eftersom det bara såg ut som
   ännu ett vanligt textstycke bland korten runtomkring) - en ifylld banderoll, samma
   visuella språk som redan används för "★ Sparad"/"✓ Följer" (se .detail-actions button.active),
   läses direkt som en bekräftelse istället för brödtext. */
#report-status.report-status-success {
  display: block;
  background: var(--green);
  color: #fff;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
}

.dark #report-status.report-status-success {
  background: #005b9a;
}

.report-submit {
  margin-top: 8px;
  border: none;
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font: 600 13px 'DM Sans', sans-serif;
  cursor: pointer;
}

.login-prompt {
  font-size: 13px;
  color: var(--muted);
}

.login-prompt a {
  color: var(--green);
  font-weight: 600;
}

/* --- "Min position" och tema-knappen i topbaren, samma mönster som mockupen --- */

.location-pill {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.location-pill-icon {
  font-size: 15px;
  color: var(--green);
}

/* Växlaren mellan karta och listvy - se view-toggle i index.html/renderListView i app.js. Ligger
   i .top-actions bredvid "Min position" (enhetlig knapprad/stil), fortfarande långt före
   filterraden/kartan i tab-ordningen så man inte behöver tabba genom hela kartlagret för att
   hitta listvyn med en skärmläsare. Samma piller-stil som .location-pill på desktop; krymper
   till en ikon-bara rund knapp på mobil (se @media nedan) - då används SVG-ikonen ovan istället
   för text, aldrig ☰ som redan betyder hamburgermenyn. */
.view-toggle {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.view-toggle:hover {
  background: var(--mint);
}

.view-toggle-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: var(--green);
}

.icon-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.icon-button:hover, .location-pill:hover {
  background: var(--mint);
}

/* --- Zoomkontroll: egna knappar nere till höger istället för MapLibres inbyggda
   (som annars hamnar uppe till höger) - samma placering och utseende som mockupens
   .map-controls. --- */

/* display:flex nedan har högre specificitet än webbläsarens standard-[hidden]-regel och skulle
   annars vinna - samma sorts fallgrop som .detail-panel[hidden] löser, se den kommentaren. */
.map-controls[hidden] {
  display: none;
}

.map-controls {
  position: absolute;
  z-index: 8;
  right: 18px;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(35, 69, 51, .13);
  overflow: hidden;
}

.map-controls button {
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--panel);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 20px;
  cursor: pointer;
}

.map-controls button:last-child {
  border-bottom: 0;
}

.map-controls button:hover {
  background: var(--mint);
}

@media (min-width: 768px) {
  .map-controls {
    bottom: 24px;
  }
}

/* --- Mörkt tema: samma klass/princip och palett som mockupens styles.css, men "dark"-klassen
   sätts här på <html> istället för <body> så valet kan appliceras flimmerfritt redan i ett
   inline-skript i <head> (innan <body> ens finns) - se index.html/app.js. --- */

.dark {
  --ink: #f3f7fb;
  --muted: #aebdca;
  --paper: #101d2b;
  --panel: #172b40;
  --line: #34516d;
  --green: #3b91c9;
  --mint: #244864;
}

.dark .brand-mark {
  background: #005b9a;
}

.dark .map-controls,
.dark .location-pill,
.dark .icon-button {
  box-shadow: none;
}

.dark .report-submit,
.dark .detail-actions button.active {
  background: #005b9a;
}

.dark .login-error {
  color: #ff9c85;
}

.dark .login-button {
  background: #005b9a;
}