/* Accentfärg — enda sanningskällan på webbläsarsidan. Sanningskällan på
   serversidan är lib/color-palette.js (ACCENT) — håll dessa i synk manuellt,
   det finns ingen delad byggprocess mellan Worker-koden och den här filen. */
:root {
  --accent: #12b981;
  --accent-light: #D2E9E2;
  --accent-text: #0F8A63;
  --link-color: #3B82F6;
  --ink: #1C1B19;
  --ink-soft: #4A463F;
  --shadow-float: 0 8px 24px rgba(0,0,0,.18);
  --glass-bg: rgba(255,252,247,0.92);
  --glass-bg-strong: rgba(255,252,247,0.96);
  --warning-bg: #FFF8EC;
  --warning-border: #F3DFA8;
  --warning-text: #8A6A1F;
  --border-strong: #D1D5DB;
  --text-muted: #9CA3AF;
  /* Avatarens neutrala fyllning (satt i JS, toolbar-ui.js, som fallback när
     SRC[namn] saknas — vilket den alltid gör sen källfärg togs bort på
     serversidan, se lib/sources.js). Ljusare än standardgrå eftersom
     avataren är minst viktig av de tre elementen i vänster-HUD:en
     (platsväljare > kugghjul > avatar), men fortfarande mörk nog för att
     bära vit text bekvämt (3.64:1 mot vit — under WCAG AA:s 4.5:1-gräns
     för brödtext, men avataren visar en enda stor bokstav, inte löpande
     text). 2026-07-16. */
  --avatar-fill-subtle: #7C8798;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F8F7F4;
  position: fixed; /* täcker alltid den verkliga, just nu synliga skärmytan exakt — oavsett Safaris UI-läge, ingen gissad höjd behövs */
  inset: 0;
  display: flex;
  overflow: hidden;
}


/* ── Filer i den här uppdelningen (Steg 8 Del A punkt 16, 2026-07-12) ──
   app.css            grundlayout: header, filter, panel, kort, kommentarer
   toolbar.css        verktygsfält, kartlager-meny, lägg till-meny, placement-banner
   modals.css         modaler, redigera-knapp, kategori-pills i modal
   mobile-overlays.css  flytande kart-pills, bottom sheet, filter-sheet (mobil), foto-uppladdning
   Alla fyra laddas som separata <link>-taggar i index.html — ren flytt,
   ingen CSS-regel ändrad. ── */

#header {
  background: #fff;
  border-right: 1px solid #E5E7EB;
  padding: 14px 16px 16px;
  width: 310px;
  flex-shrink: 0;
  overflow: hidden;
  z-index: 100;
  transition: width .22s ease, padding .22s ease, border .22s ease;
}
#header.collapsed { width: 0; padding: 0; border-right: none; }
#header h1 {
  font-size: 19px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.4px; margin-bottom: 1px;
}
#header p { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }

.filter-group { margin-bottom: 7px; }
.filter-label {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.pills { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.pills::-webkit-scrollbar { display: none; }

.pill {
  padding: 6px 14px; border-radius: 999px;
  border: 2px solid #E5E7EB;
  background: #fff; color: #6B7280;
  font-weight: 600; font-size: 14px;
  cursor: pointer; transition: all .12s;
  white-space: nowrap; line-height: 1.4;
}
#clear-header { display: none; padding: 5px 12px; border-radius: 999px; border: 2px solid #FCA5A5; background: #FEF2F2; color: #DC2626; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#clear-header-desktop, #clear-filter-sheet { display: none; padding: 7px 0; border-radius: 999px; border: 2px solid #FCA5A5; background: #FEF2F2; color: #DC2626; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; width: 100%; }
#show-all-header-desktop i, #show-all-filter-sheet i { font-size: 14px; }
#show-all-header-desktop.disabled, #show-all-filter-sheet.disabled { opacity: 0.4; pointer-events: none; }

#body { display: flex; flex: 1; overflow: hidden; }
#map-wrap { flex: 1; min-width: 0; position: relative; }
#map  { width: 100%; height: 100%; }

#panel {
  width: 380px; flex-shrink: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: #F8F7F4;
  transition: width .22s ease, border .22s ease;
}
#panel.collapsed { width: 0; border-left: none; }
#panel-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 6px; flex-shrink: 0;
  border-bottom: 1px solid #E5E7EB;
}
#panel-cards {
  flex: 1; overflow-y: auto;
  padding: 8px 10px 8px;
}
#cards {
  display: flex; flex-direction: column; gap: 14px;
}
#sort-sel {
  font-size: 11px; border: 1px solid #E5E7EB; border-radius: 6px;
  padding: 3px 5px; background: #fff; color: #6B7280;
  cursor: pointer; margin-left: auto; font-family: inherit;
}
.ptbtn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 3px 5px; border-radius: 6px;
  line-height: 1; display: flex; align-items: center; flex-shrink: 0;
}
.ptbtn:hover { background: #F3F4F6; color: #6B7280; }
.ptbtn i { font-size: 17px; }
#body { position: relative; }
.edge-tab {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 20px; height: 52px; background: #fff;
  border: 1.5px solid var(--border-strong); cursor: pointer; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  color: #6B7280; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.edge-tab:hover { background: #F3F4F6; color: var(--ink-soft); }
.edge-tab i { font-size: 13px; font-weight: 700; }
.edge-tab-l { left: 0; border-left: none; border-radius: 0 6px 6px 0; }
.edge-tab-r { right: 0; border-right: none; border-radius: 6px 0 0 6px; }
.pill-cnt { font-size: 12px; opacity: 0.65; margin-left: 3px; font-weight: 400; }

#count { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.card {
  background: #fff; border-radius: 14px;
  padding: 13px 15px; cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  transition: box-shadow .15s, border-color .15s, transform .12s;
}
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-1px); }

.card-head   { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 7px; }
.card-left   { display: flex; align-items: flex-start; gap: 8px; }
.card-name   { font-weight: 700; font-size: 13px; color: var(--ink); line-height: 1.25; }
.card-loc    { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.card-desc   { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 7px; }
.card-detail { font-size: 11px; color: var(--text-muted); margin-bottom: 7px; }
.card-foot   { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.card.in-resplan { background: var(--accent-light); border-color: var(--accent); }
.card.active { border-color: var(--ink); box-shadow: 0 4px 14px rgba(28,27,25,.14); }

.resplan-toggle {
  border: none; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.resplan-toggle:hover { filter: brightness(0.95); }

/* ── Kommentarer (kort + bottom sheet) ── */
.comment-toggle-btn {
  background: none; border: none; padding: 3px; cursor: pointer;
  color: var(--ink); display: flex; align-items: center; flex-shrink: 0;
  font-size: 18px; position: relative;
}
.comment-icon-filled { fill: var(--ink); display: block; }
.comment-dot {
  position: absolute; top: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
}
.comments-section {
  display: none; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #F3F4F6;
}
.comments-section.open { display: block; }
.comment-row { display: flex; gap: 8px; margin-bottom: 10px; }
.comment-avatar {
  width: 26px; height: 26px; border-radius: 50%; color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.comment-author { font-size: 12px; font-weight: 700; color: var(--ink); }
.comment-time { font-size: 11px; color: var(--text-muted); }
.comment-actions { display: flex; align-items: center; gap: 12px; }
.comment-actions button {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  padding: 6px; margin: -6px; border-radius: 50%; font-size: 15px;
}
.comment-actions button:last-child { color: var(--accent); }
.comment-actions button:active { background: rgba(0,0,0,.06); }
.comment-text { font-size: 12px; color: var(--ink-soft); margin-top: 1px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.comment-edit-textarea {
  width: 100%; border: 1.5px solid var(--accent); border-radius: 10px;
  padding: 7px 10px; font-size: 12px; font-family: inherit;
  outline: none; resize: none; min-height: 44px; margin-top: 4px;
}
.comment-input-row { display: flex; gap: 6px; }
.comment-input {
  flex: 1; border: 1.5px solid #E5E7EB; border-radius: 999px;
  padding: 7px 12px; font-size: 12px; font-family: inherit; outline: none;
}
.comment-input:focus { border-color: var(--accent); }
.comment-send-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 50%;
  width: 30px; height: 30px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.comment-empty { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

.badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
}
.stag {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; border: 1px solid transparent;
}
.mlink {
  font-size: 11px; color: var(--link-color);
  text-decoration: none; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.mlink:hover { text-decoration: underline; }

#empty { text-align: center; color: var(--text-muted); padding: 40px 10px; font-size: 13px; }
#search-input { width: 100%; padding: 6px 12px; border-radius: 999px; border: 2px solid #E5E7EB; font-size: 13px; font-family: inherit; outline: none; transition: border-color .15s; box-sizing: border-box; }
#search-input:focus { border-color: var(--accent); }

/* Steg 18 Del A (2026-07-17) — klick-till-förstora.
   OBS TILL SAMSON: enligt filuppdelningskommentaren högre upp i denna fil
   hör flytande/overlay-ytor (bottom sheet, filter-sheet) hemma i
   mobile-overlays.css, inte här i app.css. Jag har bara fått app.css i
   den här sessionen — lägg gärna över blocket nedan till
   mobile-overlays.css vid nästa tillfälle du har den filen öppen, annars
   fungerar det precis lika bra att låta det stå kvar här.

   Zoom-knappen (.photo-zoom-btn) återanvänder --shadow-float och samma
   halvtransparenta glas-känsla som redan finns på andra flytande
   ikonknappar (se toolbar.css) — ingen ny skugga/bakgrund uppfanns. */
.photo-wrap { position: relative; }
.photo-zoom-btn {
  position: absolute; bottom: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--glass-bg-strong); border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float); cursor: pointer;
  color: var(--ink); font-size: 15px;
}

#photo-lightbox {
  position: fixed; inset: 0;
  /* 5100 — ett snäpp över .modal-backdrop (5000, modals.css), som är den
     högsta ytan i hela appen (alla modaler, inkl. "Lägg till tips").
     Historik (för nästa gång detta behöver spårar as): 900 → 1200 → 3100
     → 5100, i takt med att toolbar.css, mobile-overlays.css och modals.css
     synades en efter en — se CHANGELOG-arkiv.md. En lightbox öppnad OVANPÅ
     en modal (t.ex. klick på befintlig bild inuti "Lägg till tips") måste
     ligga över modalen, inte bara över kartan/HUD:en. */
  z-index: 5100;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
#photo-lightbox.open { opacity: 1; visibility: visible; }
#photo-lightbox-img {
  max-width: 92vw; max-height: 92vh;
  border-radius: 8px; /* samma radie som kortets/popupens vanliga bild, se photoImgHTML() */
  object-fit: contain;
}
#photo-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--glass-bg-strong); border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float); cursor: pointer;
  color: var(--ink); font-size: 18px;
}