/* Polisen-produktens tema (P14c, docs/instruktioner/bygg-p14-produkt-tva.md).
   Laddas i bas.html EFTER lysio.css, BARA för PRODUKT=polisen - en ändring
   här kan aldrig påverka foretag/befolkning/lysiostats/patientavgifter.

   WCAG AA-rättelser (POL4d, koordinatorns beslut 2026-10-14): Bootstrap
   5.0.2 (CDN-versionen bas.html laddar) hedrar inte lysio.css:s egna
   --bs-link-color/--bs-link-hover-color-variabler (den versionen
   hårdkodar #0d6efd i sin kompilerade CSS i stället för att läsa
   variabeln), så en vanlig <a> utan egen klass visar Bootstraps
   standardblå i stället för --lysio-marin. Mot sidans kräm-/ljusblå
   panelbakgrunder (t.ex. "Fem saker att prova" på Översikt, #faf2e8)
   ger det bara 4,06:1 kontrast, under WCAG AA:s 4,5:1-gräns. Samma
   mönster upprepas för Bootstraps .text-muted (#6c757d) mot --bs-light
   (#f8f9fa, Lägesbildens filterpanel): 4,45:1, också under gränsen.

   Scoped till just polisen (denna fil, aldrig lysio.css) i stället för
   en global regel, så andra produkters sidor inte ändras av misstag. */

a {
  color: var(--lysio-marin);
}
a:hover,
a:focus {
  color: var(--lysio-bla);
}

.text-muted {
  color: var(--gra-700) !important;
}

/* POL6 (koordinatorns rättelse 2026-10-14, demo-polisen/UX-2.md): samma
   rotorsak som <a> ovan - Bootstrap 5.0.2 hårdkodar #0d6efd för .btn-link
   (4,5:1 mot rent vitt, precis på AA-gränsen, under gränsen mot Polisens
   ljusa panelbakgrunder som --sand #faf2e8). Upptäckt via axe-core på
   /utforska (_flervalsdropdown.html:s "Markera alla"/"Avmarkera alla"),
   men gäller alla .btn-link i produkten, inklusive den delade pol_tabell()-
   komponentens "Markera alla"/"Rensa". */
.btn-link {
  color: var(--lysio-marin);
}
.btn-link:hover,
.btn-link:focus {
  color: var(--lysio-marin);
  text-decoration: underline;
}

/* Hjälpikonen i sidhuvudet (POL6 avsnitt 8, bas.html). .page-canvas
   saknar sin egen position, men dess förälder .main-content har
   position:relative (lysio.css) - absolut positionerad mot DEN, med
   samma 1.25rem/1.5rem som .page-canvas:s egen utfyllnad (lysio.css)
   för att hamna i linje med sidans övriga innehåll, inte i det yttre
   hörnet av hela huvudytan.

   Återanvänder PLATTFORMENS --lysio-*-variabler (marin, blaljus) rakt
   av, samma princip som -22:s _pol_komponenter.html/lysio.css redan
   driver för POL6:s övriga komponenter (UX-2.md:s "Gemensamt"-färger
   ÄR, med ett par undantag, redan befintliga --lysio-*-värden, se
   lysio.css:s egen kommentar vid :root{--pol-disig...}) - INGEN egen
   --pol-marin/--pol-bla-variabel här, ett tidigare utkast dubblerade
   dem i onödan innan -22:s mönster upptäcktes. */
.pol-hjalpikon {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--gra-150);
  color: var(--lysio-marin);
  font-size: 1.1rem;
  text-decoration: none;
  background: #fff;
}
.pol-hjalpikon:hover,
.pol-hjalpikon:focus {
  background: var(--lysio-blaljus);
  color: var(--lysio-marin);
}

/* pol_info (POL6 avsnitt 9, _pol_komponenter.html): en informationsknapp
   ⓘ bredvid nyckeltal, korttitlar, diagramrubriker och kolumnrubriker.
   Återanvänder lysio.css:s .hjalp-wrap/.hjalp-knapp/.hjalp-ruta-
   positionering och visa/dölj-logik rakt av (samma static/js/hjalp.js) -
   bara knappens utseende (Bootstrap-ikonen i stället för bokstaven "i")
   och rutans INRE struktur (rubrik, text, "Läs mer") är egna. */
.pol-info-wrap {
  display: inline-block;
  position: relative;
}
.pol-info-knapp {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--lysio-bla);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: .1em;
  margin-left: .25rem;
}
.pol-info-knapp:hover,
.pol-info-knapp:focus-visible {
  color: var(--lysio-marin);
}
.pol-info-knapp:focus-visible {
  outline: 2px solid var(--lysio-bla);
  outline-offset: 1px;
}
.pol-info-ruta {
  width: max-content;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-left-color: var(--lysio-bla);
}
.pol-info-rubrik {
  color: var(--lysio-marin);
  font-size: var(--text-bas, .9rem);
}
.pol-info-text {
  color: var(--gra-700);
}
.pol-info-lasmer {
  align-self: flex-start;
  font-weight: 600;
}

/* POL6 avsnitt 1 (UX-2.md): Utforska, förlagans Tabellverktyg-layout
   (vänsterspalt 300 px, frågelista med "+"-meny, brickor för filter/
   uppdelningar/fråga, diagramtypsväxel). Flyttad hit från en page-level
   <style>-block i pol_utforska.html (sparrhakar.py:s "hårdkodade
   färgkoder i mallarna"-spärr) - alla färger är nu temavariabler, ingen
   egen hex-kod kvar. */
.pol-utforska-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.pol-utforska-vanster { flex: 0 0 300px; background: #fff; border-right: 1px solid var(--gra-150); padding-right: 1rem; }
.pol-utforska-hoger { flex: 1 1 auto; min-width: 0; }
.pol-utforska-falt { margin-bottom: 1rem; }
.pol-utforska-dragspel { margin-bottom: 1rem; border-bottom: 1px solid var(--gra-050); padding-bottom: .75rem; }
.pol-utforska-dragspel summary { cursor: pointer; font-weight: 600; list-style: none; }
.pol-utforska-dragspel summary::-webkit-details-marker { display: none; }
.pol-utforska-dragspel-inre { margin-top: .5rem; }
.pol-utforska-ar-lista .form-check { margin-bottom: .15rem; }

.pol-fragelista { max-height: 480px; overflow-y: auto; border-top: 1px solid var(--gra-050); }
.pol-fragerad { padding: .4rem 0; border-bottom: 1px solid var(--gra-050); }
.pol-fragerad-omrade { font-size: .72rem; color: var(--gra-500); text-transform: uppercase; letter-spacing: .03em; }
.pol-fragerad-text-rad { display: flex; align-items: flex-start; gap: .4rem; }
.pol-fragerad-plus-wrap { position: relative; flex: 0 0 auto; }
.pol-fragerad-plus {
  width: 1.1rem; height: 1.1rem; border-radius: 50%; border: none; color: #fff;
  background: var(--lysio-skogsgron); font-size: .8rem; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; margin-top: .15rem;
}
.pol-fragerad-plus:focus-visible { outline: 2px solid var(--lysio-bla); outline-offset: 1px; }
.pol-fragerad-meny {
  position: absolute; z-index: 20; top: 1.3rem; left: 0; background: #fff; border: 1px solid var(--gra-150);
  border-radius: var(--radie); box-shadow: 0 .25rem .75rem rgba(0,0,0,.1); min-width: 220px;
}
.pol-fragerad-meny-val { display: block; width: 100%; text-align: left; padding: .5rem .75rem; border: none; background: none; cursor: pointer; font-size: .85rem; }
.pol-fragerad-meny-val:hover, .pol-fragerad-meny-val:focus-visible { background: var(--lysio-blaljus); }
.pol-fragerad-text { font-size: .88rem; }
.pol-fragerad-text--vald { font-weight: 600; color: var(--lysio-marin); }

.pol-utforska-filter-vantar {
  /* UX-gurunens granskning (POL6): position:fixed, satt av JS
     (oppnaFiltervaljare/placeraFragemeny) direkt under den klickade
     frågans "+"-knapp, i stället för ett statiskt element sist i
     frågelistan - width/z-index/skugga gör den läsbar som en flytande
     popup, samma visuella idiom som .pol-fragerad-meny. */
  width: 260px; z-index: 20; padding: .75rem; background: #fff; border: 1px solid var(--gra-150);
  border-radius: var(--radie); box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
  max-height: 260px; overflow-y: auto;
}
.pol-utforska-filter-vantar .form-check { margin-bottom: .15rem; }

.pol-utforska-brickrader { margin-bottom: 1rem; }
.pol-brickrad { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.pol-brickrad-etikett { font-size: .72rem; font-weight: 600; color: var(--gra-500); text-transform: uppercase; letter-spacing: .03em; flex: 0 0 100%; }
.pol-brickrad-tom { font-style: italic; color: var(--gra-500); font-size: .85rem; }
.pol-bricka {
  display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid var(--gra-150);
  border-radius: var(--radie); padding: .25rem .6rem; font-size: .82rem; color: var(--gra-700); text-decoration: none;
}
.pol-bricka:hover { border-color: var(--lysio-vinrod); }
.pol-bricka-x { color: var(--lysio-vinrod); font-weight: 700; }
.pol-bricka--fraga { color: var(--lysio-marin); font-weight: 600; cursor: default; }
.pol-bricka--fraga:hover { border-color: var(--gra-150); }
.pol-utforska-knappar { margin-top: .5rem; }

.pol-urvalsrad { font-size: .85rem; }
.pol-diagramtyp-vaxel { display: flex; gap: .25rem; margin-bottom: .75rem; }
.pol-diagramtyp-knapp { border: 1px solid var(--gra-150); background: #fff; border-radius: var(--radie); padding: .3rem .7rem; font-size: .82rem; cursor: pointer; }
.pol-diagramtyp-knapp.active { background: var(--lysio-marin); color: #fff; border-color: var(--lysio-marin); }
.pol-kvalitetsrad { margin-top: .5rem; }

@media (max-width: 900px) {
  .pol-utforska-layout { flex-direction: column; }
  .pol-utforska-vanster { flex-basis: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--gra-150); padding-right: 0; padding-bottom: 1rem; }
}

/* POL7: växlaren i den öppna demon, nere till höger på alla sidor.
   Listan fälls ut uppåt. Sidan får luft i botten, så att växlaren aldrig
   täcker exportknappar eller sidfoten när man rullat längst ned. */
.pol-demovaxlare {
  position: fixed; right: 16px; bottom: 16px; z-index: 1030; width: 280px; margin: 0;
  background: #fff; border: 1px solid #d9dee5; border-left: 4px solid var(--lysio-marin);
  border-radius: 10px; box-shadow: 0 .25rem .9rem rgba(0, 61, 99, .15);
}
.pol-demovaxlare-detaljer { position: relative; }
.pol-demovaxlare-knapp {
  display: flex; align-items: baseline; gap: .45rem; padding: .55rem .75rem 0; cursor: pointer;
  list-style: none; color: var(--lysio-marin);
}
.pol-demovaxlare-knapp::-webkit-details-marker { display: none; }
.pol-demovaxlare-knapp:focus-visible { outline: 3px solid #5991f0; outline-offset: 2px; border-radius: 6px; }
.pol-demovaxlare-etikett { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5d6874; }
.pol-demovaxlare-vald { font-weight: 700; font-size: .95rem; }
.pol-demovaxlare-pil { margin-left: auto; font-size: .8rem; transition: transform .15s; }
.pol-demovaxlare-detaljer:not([open]) .pol-demovaxlare-pil { transform: rotate(180deg); }
.pol-demovaxlare-lista {
  position: absolute; left: -5px; right: -1px; bottom: calc(100% + 12px); margin: 0; padding: .35rem;
  list-style: none; background: #fff; border: 1px solid #d9dee5; border-radius: 10px;
  box-shadow: 0 .25rem .9rem rgba(0, 61, 99, .18);
}
.pol-demovaxlare-val {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: .5rem .6rem; color: #1f2937;
}
.pol-demovaxlare-val:hover, .pol-demovaxlare-val:focus-visible { background: #f0f3fb; }
.pol-demovaxlare-val:focus-visible { outline: 3px solid #5991f0; outline-offset: -3px; }
.pol-demovaxlare-val[aria-current="true"] { background: #dee9fc; }
.pol-demovaxlare-val-namn { display: block; font-weight: 700; color: var(--lysio-marin); font-size: .9rem; }
.pol-demovaxlare-val-text { display: block; font-size: .75rem; color: #5d6874; line-height: 1.3; margin-top: .1rem; }
.pol-demovaxlare-beskrivning { font-size: .75rem; color: #5d6874; margin: .15rem .75rem .55rem; line-height: 1.3; }
body:has(.pol-demovaxlare) .main-content { padding-bottom: 110px; }
@media (max-width: 575px) {
  .pol-demovaxlare { left: 16px; right: 16px; bottom: 12px; width: auto; }
}