:root{
  --text-liten:.75rem;          /* 12 px: hjälptext, tabellrubrik, metadata */
  --text-brod:.875rem;         /* 14 px: brödtext, tabell, knappar, fält */
  --text-sidrubrik:2rem;       /* 32 px: sidrubrik */
  --farg-text:#1f2933;
  --farg-stod:#4a5561;         /* grå stödtext, 7,6:1 mot vitt och 6,7:1 mot #F0F3FB */
  --farg-linje:#dfe3e8;
  --status-gul:#d99e00;        /* den som tittar behöver göra något */
  --status-gron:#27683f;       /* klart eller i drift */
  --status-rod:#ac173c;        /* fel */
  --status-gra:#9aa4af;        /* allt annat */
  --knapp-hojd:32px;           /* standardstorlek: rullistor, fält, huvudknappar, 14 px text */
  --knapp-hojd-liten:26px;     /* liten storlek: verktygsrader, kortmenyer, växlar, 12 px text */
  --knapp-radie:6px;
  --knapp-hover:#F0F3FB;       /* vita knappar vid hovring, markerat val, menyrader och flikar */
  --sidhuvud-hojd:107px;       /* sidhuvudet och menyns logotypdel */
  --bs-body-color:var(--farg-text);
}
body{font-size:var(--text-brod); color:var(--farg-text); line-height:1.5}
.box-shadow{box-shadow:none}
.hjalptext,.text-muted{color:var(--farg-stod)!important}

/* ---- Sidhuvud: rubriken i Kollbarblå på krämvit yta med orange linje i botten (kollbar.css, lysio.css), ingen ingress ---- */
.page-canvas{padding:1.5rem 2rem 4rem}
/* Sidrubriken (AP 145): Work Sans 32 px Bold, radavstånd 120 %. 8 px till raden under, 24 px till innehållet när rubriken står ensam. */
h1.sidrubrik{font-size:var(--text-sidrubrik); font-weight:700; line-height:1.2; letter-spacing:normal; margin:0 0 1.5rem; color:var(--kollbar-bla)}
.sidhuvud h1.sidrubrik:not(:last-child),.sidhuvud-rad h1.sidrubrik{margin-bottom:.5rem}
.sidhuvud-rad{align-items:center}
/* En rad med en länk eller ett kort besked under rubriken är vanlig liten text, inte en ingress. */
.sidlank{margin:.25rem 0 0; font-size:var(--text-liten); color:var(--farg-stod)}
.sidintro{max-width:none; margin:.25rem 0 0; font-size:var(--text-liten)}

/* ---- Rubriker: sidrubrik 32, avsnitt, kort och underrubriker 18 i Kollbarblå eller textfärg, alla fetstil 600 (AP 145) ---- */
.page-canvas :is(h2,h3,.h2,.h3):not(.fraga-rubrik),
.vykort-rubrik,.sparade-rubrik,.accordion-header,.accordion-button,.sektionsrubrik,.hjalp-avsnitt > h2,.hjalp-under > h3{
  font-size:var(--text-lg); font-weight:600; line-height:1.3; color:var(--kollbar-bla); text-transform:none; letter-spacing:0}
.page-canvas :is(h4,h5,h6,.h4,.h5,.h6){font-size:var(--text-lg); font-weight:600; line-height:1.4; color:var(--farg-text); text-transform:none; letter-spacing:0}
.page-canvas :is(h2,h3,h4,h5,h6,.h5):not(.fraga-rubrik){margin:0 0 .5rem}
.vykort-rubrik--liten{font-size:var(--text-lg)}
.hjalp-avsnitt > h2{border:0; padding:0}

/* ---- Länkar: en färg, utan understrykning i menyer och tabeller, med understrykning i löptext ---- */
a{color:var(--kollbar-bla); text-decoration:none}
a:hover{color:var(--kollbar-bla); text-decoration:underline}
p a:not([class]),.hjalptext a,.notis a,.sidlank a,.sidintro a{text-decoration:underline; text-underline-offset:2px}
.table a,.sidebar a,.sidebar li a,.snabbval a,.nav a{text-decoration:none}
.table a:hover,.snabbval a:hover{text-decoration:underline}
.sidebar a:hover{text-decoration:none}

/* ---- Tabeller: en enda stil. Vit, rubrikraden fet och liten med en linje i textfärg, raderna med linjefärg. Siffror högerställda. ---- */
.table{--bs-table-bg:transparent; --bs-table-accent-bg:transparent; --bs-table-striped-bg:transparent; --bs-table-hover-bg:transparent;
  font-size:var(--text-brod); color:var(--farg-text); border-color:var(--farg-linje); margin-bottom:1rem; font-variant-numeric:tabular-nums}
.table > :not(caption) > * > *{padding:.5rem .75rem; background-color:transparent; box-shadow:none; border-bottom:1px solid var(--farg-linje)}
.table > :not(caption) > * > :first-child{padding-left:0}
.table > :not(caption) > * > :last-child{padding-right:0}
.table-sm > :not(caption) > * > *{padding:.375rem .75rem}
.table-sm > :not(caption) > * > :first-child{padding-left:0}
.table > thead > tr > *,.table > thead th{font-size:var(--text-liten); font-weight:600; color:var(--farg-text); background-color:transparent; text-transform:none; letter-spacing:0;
  border-bottom:1px solid var(--farg-text); vertical-align:bottom}
.table-hover > tbody > tr:hover > *{background-color:transparent}
.table td.text-end,.table th.text-end,.table td.tabular,.table th.tabular{text-align:right; font-variant-numeric:tabular-nums}
th[data-sortbar]:hover{background:none; text-decoration:underline}
.table-bordered,.table-bordered > :not(caption) > *,.table-bordered > :not(caption) > * > *{border-left-width:0; border-right-width:0; border-top-width:0}
.rapportlista{border:0}
.rapportlista th,.rapportlista td{padding:.5rem .75rem; border-bottom:1px solid var(--farg-linje)}
.rapportlista th:first-child,.rapportlista td:first-child{padding-left:0}
.rapportlista thead th{font-size:var(--text-liten); font-weight:600; color:var(--farg-text); border-bottom:1px solid var(--farg-text); text-transform:none; letter-spacing:0}

/* ---- Notis: en rad med en kant på 2 px till vänster, ingen bakgrund, ingen ikon. Färgen följer statusen. ---- */
.notis{display:block; font-size:var(--text-brod); color:var(--farg-text); background:none; border:0; border-left:2px solid var(--status-gra); border-radius:0; padding:.125rem 0 .125rem .75rem; margin:0 0 1rem}
.notis--info{background:none; border:0; border-left:2px solid var(--status-gra)}
.notis--varning{background:none; border:0; border-left:2px solid var(--status-gul)}
.notis--budskap{font-size:var(--text-brod); font-weight:600; line-height:1.5}
.notis-ikon,.notis--info .notis-ikon,.notis--varning .notis-ikon{display:none}
.alert{background:none; border:0; border-left:2px solid var(--status-gra); border-radius:0; padding:.125rem 0 .125rem .75rem; color:var(--farg-text)}
.alert-warning{border-left-color:var(--status-gul)}
.alert-danger{border-left-color:var(--status-rod)}
.alert-success{border-left-color:var(--status-gron)}
.urvalsrad{border-left:2px solid var(--status-gra); background:none; font-size:var(--text-liten); color:var(--farg-stod)}

/* ---- Kort: diagram och tabeller har en tunn ram och lätt rundade hörn (ram.css), utan skugga. Det som ligger i ett kort har ingen egen ruta. ---- */
.vykort,.statcard,.card,.nyheter-ruta,.sparade-vyer{box-shadow:none}
.nyckeltal,.nyckeltalsrad .nyckeltal,.nyckeltal--kort,.start-tomtillstand,.tv-teckenforklaring,.tv-typruta{background:none; border:0; border-radius:0; box-shadow:none}
.nyckeltal{padding:.25rem 0}
.start-tomtillstand,.tomt-atgard{background:none; border:0; padding:0; color:var(--farg-stod)}
.tv-teckenforklaring{padding:0}
.tv-typruta{padding:0 0 0 .75rem; border-left:2px solid var(--status-gra)}

/* ---- Ytor: vit sida. Panelens grå yta, tonade markeringar och ljusblå ytor är borta. ---- */
.vyram .filterpanel,.filterpanel{background:none; border:0; border-radius:0; padding:0; margin-bottom:1rem}
.vykropp--kolumn .filterpanel{padding:.75rem; border:1px solid var(--farg-linje); border-radius:8px; background:var(--gra-050)}   /* som i går: panelen i en ljus ruta med ram */
.filterpanel:not(.filterpanel--rad) .filterpanel-knappar{background:none; box-shadow:none; border-top:0; border-radius:0}
.filter-lista{border-color:var(--gra-300)}
.bricka{background:#fff; color:var(--farg-text); border:1px solid var(--gra-300); border-radius:var(--radie-liten)}
.bricka:hover,.bricka:focus-visible{background:none; border-color:var(--farg-text)}
.page-canvas .badge,.page-canvas .lysio-tag{background:none!important; color:var(--farg-stod)!important; font-weight:400; padding:0; border:0}
.nyckeltal-stapel-fyll{opacity:1}
.mini-track{background:var(--farg-linje)}
.mini-fill{background:var(--kollbar-bla)}

/* ---- Utfällda menyer: en och samma flytande panel, 1 px linje, ingen skugga ---- */
.verktygsmeny-panel,.hjalpmeny-panel,.kortmeny-panel,.fraga-panel,.forklaring--js .forklaring-ruta,.hjalp-ruta,.filterpanel--rad .filter-lista-inre,.filterpanel--rad .fler-filter-rutnat,.vyram .fraga-panel,.dropdown-menu{
  background:#fff; border:1px solid var(--gra-300); border-radius:var(--radie); box-shadow:none}
.kortmeny-knapp{border-radius:var(--radie); border-color:var(--gra-300); color:var(--farg-text); background:#fff}
.kortmeny-knapp:hover,.kortmeny-knapp:focus-visible,.kortmeny[open] > .kortmeny-knapp{background:#fff; border-color:var(--farg-text); color:var(--farg-text)}
.meny-rubrik{text-transform:none; letter-spacing:0; color:var(--farg-stod); font-weight:600}

/* ---- Knappar: 28 px höga, små. Primärknappen är blå, en per vy. Sekundärknappen har linje. ---- */
.btn,.btn-lg{min-height:var(--knapp-hojd); padding:.3125rem .875rem; font-size:var(--text-brod); font-weight:600; line-height:1.4; border-radius:var(--radie); display:inline-flex; align-items:center; justify-content:center; gap:.375rem}
.btn-sm{min-height:var(--knapp-hojd-liten); padding:.1875rem .625rem; font-size:var(--text-liten); font-weight:600; line-height:1.4; border-radius:var(--radie); display:inline-flex; align-items:center; justify-content:center; gap:.375rem}
.btn-link{font-weight:400; text-decoration:none}
.btn-primary,.btn-success{background-color:var(--kollbar-bla); border-color:var(--kollbar-bla); color:#fff}
.btn-primary:hover,.btn-primary:active,.btn-primary:focus,.btn-success:hover,.btn-success:active,.btn-success:focus{background-color:#0f3560!important; border-color:#0f3560!important; color:#fff}
.btn-outline-primary,.btn-outline-secondary,.btn-secondary,.btn-light{background:#fff; color:var(--farg-text); border-color:var(--gra-300)}
.btn-outline-primary:hover,.btn-outline-primary:active,.btn-outline-secondary:hover,.btn-outline-secondary:active,.btn-secondary:hover,.btn-light:hover{background:#fff!important; color:var(--farg-text)!important; border-color:var(--farg-text)!important}
.btn-outline-danger,.btn-danger{background:#fff; color:var(--status-rod); border-color:var(--gra-300)}
.btn-outline-danger:hover,.btn-danger:hover{background:#fff; color:var(--status-rod); border-color:var(--status-rod)}
.btn-check:checked + .btn,.btn.active{background:#fff; color:var(--kollbar-bla); border-color:var(--kollbar-bla)}
.btn .bi:not(:only-child){display:none}
.btn-close{box-shadow:none}
.form-select:focus,.form-control:focus,.btn:focus,.btn-check:focus + .btn{box-shadow:none; outline:2px solid var(--kollbar-bla); outline-offset:1px; border-color:var(--kollbar-bla)}
.verktygsknappar,.exportknappar,.verktygsrad{gap:.5rem}
.verktygsrad{margin-bottom:1rem}
.verktygsrad .verktygsknappar{margin-left:auto}

/* ---- AP 145 (kommunikatörens avsnitt 5): knappar, rullistor och fält i två storlekar ---- */
/* Standard: 32 px hög, 14 px text. Rullistor, sökfält och huvudknappar (Visa resultat, Filter, Organisation).
   Liten: 26 px hög, 12 px text. Verktygsrader, kortmenyer, Stapel/Linje, Perioder, diagramtyp, Spara, Dela.
   Hörn: 6 px överallt. Sammanfogade grupper har rundning bara i ytterhörnen.
   Avstånd: 8 px sida vid sida (0 px inom sammanfogad grupp), 8 px mellan fält som hör ihop, 16 px mellan grupper. */

/* Standard 32 px */
.page-canvas :is(select.form-select,.form-select,input.form-control,.fraga-knapp){height:var(--knapp-hojd)!important;min-height:var(--knapp-hojd)!important;font-size:14px!important;border-radius:var(--knapp-radie)!important;box-sizing:border-box;padding-top:0!important;padding-bottom:0!important;line-height:calc(var(--knapp-hojd) - 2px)}
.page-canvas :is(.filterpanel-knappar .btn-primary,.tv-uppdatera .btn,#update-btn){height:var(--knapp-hojd)!important;min-height:var(--knapp-hojd)!important;font-size:14px!important;border-radius:var(--knapp-radie)!important;padding:0 16px!important;display:inline-flex;align-items:center}
.page-canvas .filterpanel--rad .fler-filter > summary,.page-canvas details.filter-lista > summary{min-height:var(--knapp-hojd)!important;box-sizing:border-box;font-size:14px!important}
.page-canvas .filterpanel--rad .fler-filter > summary{height:var(--knapp-hojd);display:inline-flex;align-items:center;border-radius:var(--knapp-radie)!important}
.page-canvas details.filter-lista{border-radius:var(--knapp-radie)!important}

/* Liten 26 px */
.page-canvas :where(.btn-sm:not(.filterpanel-knappar .btn-primary):not(#update-btn),.kortmeny-knapp,.tidsniva-val,.diagramtyp-val,.tv-typknapp,.tv-bricka,.bricka){
  height:var(--knapp-hojd-liten)!important;min-height:var(--knapp-hojd-liten)!important;font-size:12px!important;line-height:1!important;box-sizing:border-box;
  display:inline-flex!important;align-items:center;justify-content:center;padding-top:0!important;padding-bottom:0!important;border-radius:var(--knapp-radie)!important}
.page-canvas :is(.kortmeny-knapp,.hjalpmeny-knapp,.verktygsmeny > summary.btn-sm:empty){min-width:var(--knapp-hojd-liten)}
.page-canvas :is(.btn-sm,.kortmeny-knapp,.tidsniva-val,.diagramtyp-val,.tv-typknapp,.tv-bricka,.bricka)[hidden]{display:none!important}   /* en dold knapp förblir dold */
.page-canvas .btn-link.btn-sm{padding-left:0!important;padding-right:0!important}

/* Sammanfogade grupper: Perioder, Stapel/Linje och diagramtyp i Analys. Rundning bara i ytterhörnen, 0 px emellan. */
.page-canvas :is(.tidsniva,.tidsniva-vaxel,.diagramtyp-vaxel){gap:0!important}
.page-canvas :is(.tidsniva-val,.diagramtyp-val){margin:0!important;border-radius:0!important}
.page-canvas :is(.tidsniva-val,.diagramtyp-val) + :is(.tidsniva-val,.diagramtyp-val){margin-left:-1px!important}
.page-canvas :is(.tidsniva,.tidsniva-vaxel,.diagramtyp-vaxel) > :is(.tidsniva-val,.diagramtyp-val):first-of-type{border-top-left-radius:var(--knapp-radie)!important;border-bottom-left-radius:var(--knapp-radie)!important}
.page-canvas :is(.tidsniva,.tidsniva-vaxel,.diagramtyp-vaxel) > :is(.tidsniva-val,.diagramtyp-val):last-of-type{border-top-right-radius:var(--knapp-radie)!important;border-bottom-right-radius:var(--knapp-radie)!important}
.page-canvas .tidsniva-etikett{margin-right:8px}

/* Sida vid sida: 8 px */
.page-canvas :is(.verktygsknappar,.verktygsrad,.tv-typvaljare,.laggirapport-knappar,.filterpanel-knappar,.tv-urvalsrad,.brickor,.vykort-verktyg){column-gap:8px!important}
.page-canvas .sidhuvud-rad .hjalpmeny{margin-left:8px}
.page-canvas .filterpanel--rad .filterpanel-rutnat{column-gap:8px!important}

/* Under varandra: 8 px inom en grupp, 16 px mellan grupper (filterpanelen i Analys och Topplista) */
.page-canvas .filterpanel--kolumn .filterpanel-rutnat{row-gap:16px!important}
.page-canvas .filterpanel--kolumn .filterpanel-del{margin-top:0!important;margin-bottom:0!important}
.page-canvas .filterpanel--kolumn .period-val{gap:8px!important}
.page-canvas .filterpanel--kolumn .filterpanel-knappar{margin-top:16px!important}
.page-canvas .tv-typvaljare,.page-canvas .tv-urvalsrad{row-gap:8px!important}

/* Fält i utfällda menyer (namnfältet för sammanslagna svar i Tabellverktyget) får den lilla storleken */
.page-canvas .tv-svarnamn{height:var(--knapp-hojd-liten)!important;min-height:var(--knapp-hojd-liten)!important;font-size:12px!important;border-radius:var(--knapp-radie)!important;box-sizing:border-box}

/* ---- AP 145 (avsnitt 6 och 7): utfällda menyer och uppfällda filterrutor ---- */
/* Panel: vit, 1 px ram, 6 px rundning, lätt skugga, 4 px under knappen, minst 200 px bred.
   Rader: 32 px höga, 14 px text, vänsterjusterade, mörk text, 12 px luft i sidorna, #F0F3FB vid hovring.
   Farliga val röda, otillgängliga grå. Rubriker 12 px halvfeta grå. Avdelare 1 px linje med 4 px luft. Hjälptext 12 px grå.
   Formulär i menyn: 12 px inre luft, fält och knappar i liten storlek, 8 px mellan knappar. */
.page-canvas :is(.kortmeny-panel,.verktygsmeny-panel,.hjalpmeny-panel,.dropdown-menu){
  background:#fff!important;border:1px solid var(--gra-300,#C3CBD4)!important;border-radius:var(--knapp-radie,6px)!important;
  box-shadow:0 4px 12px rgba(31,41,51,.10)!important;padding:4px 0!important;min-width:200px!important;margin-top:4px!important;text-align:left!important}

/* Rader */
.page-canvas :is(.kortmeny-post,.verktygsmeny-panel--smal > .btn-link,.hjalpmeny-panel > .hjalplank,.dropdown-menu .dropdown-item){
  display:flex!important;align-items:center;justify-content:flex-start!important;width:100%;box-sizing:border-box;
  height:32px!important;min-height:32px!important;padding:0 12px!important;margin:0!important;
  font-size:14px!important;font-weight:400!important;line-height:1.2!important;text-align:left!important;
  color:var(--farg-text,#1F2933)!important;background:none!important;border:0!important;border-radius:0!important;text-decoration:none!important;cursor:pointer}
.page-canvas :is(.kortmeny-post,.verktygsmeny-panel--smal > .btn-link,.hjalpmeny-panel > .hjalplank,.dropdown-menu .dropdown-item):hover,
.page-canvas :is(.kortmeny-post,.verktygsmeny-panel--smal > .btn-link,.hjalpmeny-panel > .hjalplank,.dropdown-menu .dropdown-item):focus-visible{background:var(--knapp-hover)!important;text-decoration:none!important}
.page-canvas .hjalpmeny-panel > .hjalplank .hjalplank-ikon{margin-left:6px;font-size:12px}
.page-canvas .kortmeny-rapport > summary.kortmeny-post{list-style:none}

/* Farliga och otillgängliga val */
.page-canvas .kortmeny-panel :is(.kortmeny-post.rapport-ta-bort,.kortmeny-post.kortmeny-post--fara){color:var(--status-rod,#AC173C)!important}
.page-canvas :is(.kortmeny-post:disabled,.kortmeny-post[aria-disabled=true],.verktygsmeny-panel .disabled,.verktygsmeny-panel [aria-disabled=true],.dropdown-item.disabled){color:var(--gra-500,#4A5561)!important;opacity:.6;cursor:default}
.page-canvas :is(.kortmeny-post:disabled,.verktygsmeny-panel .disabled):hover{background:none!important}

/* Rubriker och avdelare */
.page-canvas :is(.meny-rubrik,.laggirapport-rubrik,.dropdown-header,.verktygsmeny-panel .sparade-rubrik){font-size:12px!important;font-weight:600!important;color:var(--gra-500,#4A5561)!important;
  margin:0!important;padding:8px 12px 4px!important;text-transform:none;letter-spacing:0}
.page-canvas :is(.kortmeny-avdelare,.dropdown-divider,.kortmeny-panel hr,.verktygsmeny-panel hr){border:0!important;border-top:1px solid var(--gra-150,#E3E7EB)!important;margin:4px 0!important;opacity:1;height:0}

/* Hjälptext */
.page-canvas :is(.kortmeny-panel,.verktygsmeny-panel,.hjalpmeny-panel,.dropdown-menu) :is(.hjalptext,.hjalpmeny-kontakt,.ingen-nedladdning){font-size:12px!important;color:var(--gra-500,#4A5561)!important;padding:4px 12px!important;margin:0!important;line-height:1.4}
.page-canvas .hjalpmeny-kontakt strong{color:var(--farg-text,#1F2933);font-weight:600}

/* Formulär i menyn */
.page-canvas :is(.laggirapport,.rapportmeny-rubrik,.sparade-vyer,.sparade-spara,.sparade-dela,.dropdown-menu li.row){padding:8px 12px!important;margin:0!important}
.page-canvas .sparade-vyer{padding:0!important}
.page-canvas :is(.kortmeny-panel,.verktygsmeny-panel,.dropdown-menu) :is(.form-control,.form-select){height:var(--knapp-hojd-liten,26px)!important;min-height:var(--knapp-hojd-liten,26px)!important;font-size:12px!important;line-height:1!important}
.page-canvas :is(.kortmeny-panel,.verktygsmeny-panel,.dropdown-menu) label{font-size:12px!important;color:var(--gra-500,#4A5561);margin-bottom:4px;display:block}
.page-canvas :is(.laggirapport-knappar,.sparade-rad,.rapportmeny-rubrik .d-flex){display:flex;gap:8px!important;align-items:center}
.page-canvas :is(.laggirapport-falt,.sparade-spara,.sparade-dela) > * + *{margin-top:8px}
.page-canvas :is(.laggirapport,.sparade-spara,.sparade-dela,.rapportmeny-rubrik,.dropdown-menu li.row) :is(.laggirapport-rubrik,.hjalptext,.dropdown-header){padding-left:0!important;padding-right:0!important}
.page-canvas .kortmeny-rapport[open] > summary.kortmeny-post{display:none!important}

/* När ett filter klickas upp i en egen ruta (Organisation, Filter på Startsidan, Svarsalternativ, frågeväljaren)
   får fälten i rutan den lilla storleken: 26 px hög, 12 px text. Rutan får samma ram, rundning och skugga som menyerna. */
.page-canvas :is(.filter-lista-inre,.fraga-panel,.filterpanel--rad .fler-filter-rutnat) :is(select.form-select,.form-select,input.form-control,.form-control:not(textarea)){
  height:var(--knapp-hojd-liten)!important;min-height:var(--knapp-hojd-liten)!important;font-size:12px!important;line-height:1!important}
.page-canvas :is(.fraga-panel,.filterpanel--rad .fler-filter-rutnat) details.filter-lista > summary{min-height:var(--knapp-hojd-liten)!important;height:var(--knapp-hojd-liten);font-size:12px!important;display:flex;align-items:center;box-sizing:border-box}
.page-canvas :is(.fraga-panel,.filterpanel--rad .fler-filter-rutnat) :is(label,legend){font-size:12px!important}
.page-canvas :is(.fraga-panel,.filterpanel--rad .fler-filter-rutnat,.filterpanel--rad .filter-lista-inre,.filterpanel--kolumn .filterpanel-del > .filter-lista > .filter-lista-inre){
  border:1px solid var(--gra-300,#C3CBD4)!important;border-radius:var(--knapp-radie,6px)!important;box-shadow:0 4px 12px rgba(31,41,51,.10)!important;background:#fff!important}

/* ---- AP 145 (avsnitt 8): hovring och markerat läge ---- */
/* Vita knappar får bakgrunden #F0F3FB vid hovring och när deras meny är öppen. Ramen de redan får vid hovring behålls.
   Markerat val (Perioder, Stapel/Linje, diagramtyp) får samma bakgrund #F0F3FB, blå ram och blå halvfet text.
   Raderna i utfällda menyer har samma hovringsfärg (avsnitt 6). Blå knappar (Visa resultat, Lägg till) påverkas inte. */
.page-canvas :is(.btn-outline-secondary,.btn-outline-primary,.btn-light,.kortmeny-knapp,.tidsniva-val,.diagramtyp-val,.tv-typknapp:not(.btn-primary),.bricka,.tv-bricka,.filterpanel--rad .fler-filter > summary,details.filter-lista > summary,.hjalpmeny-knapp):is(:hover,:focus-visible),
.page-canvas details[open] > :is(summary.btn,summary.kortmeny-knapp,summary.hjalpmeny-knapp),
.page-canvas .filterpanel--rad .fler-filter[open] > summary,
#meny-infall-knapp:hover,#meny-infall-knapp:focus-visible{background:var(--knapp-hover)!important}
.page-canvas details.filter-lista:hover{background:var(--knapp-hover)!important}
.page-canvas details.filter-lista[open]{background:#fff!important}

/* Markerat val */
.page-canvas :is(.tidsniva-val--aktiv,.tidsniva-val--aktiv-lang,.diagramtyp-val.ar-aktiv,.tv-typknapp.btn-primary,[aria-pressed="true"]:is(.tidsniva-val,.diagramtyp-val,.tv-typknapp)),
body:has(#visa-stapel:checked) .page-canvas label[for="visa-stapel"],
body:has(#visa-linje:checked) .page-canvas label[for="visa-linje"]{
  background:var(--knapp-hover)!important;border-color:var(--kollbar-bla,#16477E)!important;color:var(--kollbar-bla,#16477E)!important;font-weight:600!important;position:relative;z-index:1}
.page-canvas .diagramtyp-val.ar-aktiv .bi{color:var(--kollbar-bla,#16477E)!important}

/* Knappar som är länkar (Perioder, diagramtyp, Återställ m.fl.) stryks inte under vid hovring */
.page-canvas :is(a.tidsniva-val,.tidsniva-vaxel-val,a.diagramtyp-val,a.btn):is(:hover,:focus,:focus-visible,:active){text-decoration:none!important}



/* ---- Formulär: en kontrollstorlek, etiketten ovanför i liten fetstil ---- */
.form-control,.form-select,.form-control-lg,.form-select-lg{min-height:var(--knapp-hojd); padding:.25rem .625rem; font-size:var(--text-brod); line-height:1.5; border-color:var(--gra-300); border-radius:var(--radie)}
.form-control-sm,.form-select-sm{min-height:var(--knapp-hojd-liten); padding:.125rem .5rem; font-size:var(--text-liten); line-height:1.5; border-color:var(--gra-300); border-radius:var(--radie)}
.form-select,.form-select-sm,.form-select-lg{padding-right:2rem}
textarea.form-control{min-height:5rem; font-size:var(--text-brod)}
.form-label,label.form-label,.col-form-label{font-size:var(--text-brod); font-weight:600; color:var(--farg-text); margin-bottom:.25rem}
.form-text,.form-check-label{font-size:var(--text-liten)}
.form-check-input:checked{background-color:var(--kollbar-bla); border-color:var(--kollbar-bla)}
.form-check-input:focus{box-shadow:none; outline:2px solid var(--kollbar-bla); outline-offset:1px}

/* ---- Ikoner: bara i menyn och som enda innehåll i små knappar. Aldrig före rubriker eller i text. ---- */
h1 > .bi,h2 > .bi,h3 > .bi,h4 > .bi,h5 > .bi,h6 > .bi,.notis .bi,.hjalplank-ikon,.page-canvas p > .bi{display:none}

/* ---- Status: en prick och text. Gul kräver handling, grön är klart, röd är fel, allt annat grått. ---- */
.status{display:inline-flex; align-items:baseline; gap:.5rem; white-space:nowrap}
.status::before{content:""; flex:0 0 auto; width:.5rem; height:.5rem; border-radius:50%; background:var(--status-gra); transform:translateY(-.0625rem)}
.status--gul::before{background:var(--status-gul)}
.status--gron::before{background:var(--status-gron)}
.status--rod::before{background:var(--status-rod)}
.status--bla::before{background:#2f6aa8}
.status--gra{color:var(--farg-stod)}

/* ---- Tomt läge: en mening i grått, utan ruta ---- */
.tomt{color:var(--farg-stod); margin:0}

/* ---- Flikar och små knappar ---- */
.vyflikar .snabbval a{color:var(--farg-stod); font-size:var(--text-brod)}
.vyflikar .snabbval a.ar-aktiv{color:var(--farg-text); font-weight:600; border-bottom:2px solid var(--kollbar-bla)}
.feedback-knapp{border-radius:var(--radie); border-color:var(--gra-300); color:var(--farg-text); font-weight:400}
.feedback-knapp:hover{background:#fff; color:var(--farg-text); border-color:var(--farg-text)}
.tidsniva-val,.startlank{border-color:var(--gra-300); color:var(--farg-text); font-weight:400}
.tidsniva-val--aktiv,.tidsniva-val--aktiv-lang,body:has(#visa-stapel:checked) label[for="visa-stapel"],body:has(#visa-linje:checked) label[for="visa-linje"]{background:#fff; color:var(--kollbar-bla); border-color:var(--kollbar-bla); font-weight:600}
.startlank:hover,.startlank:focus-visible,.tidsniva-val:hover{background:#fff; color:var(--farg-text); border-color:var(--farg-text)}

/* ---- AP 145 (avsnitt 11): rullistor och knappar med meny ser likadana ut när de är stängda ---- */
/* Allt som fälls ut ser likadant ut när det är stängt: enkelval, flerval och knappar med meny.
   Höjd 32 px i panel och 26 px i uppfälld ruta eller meny (flerval inräknat), 10 px luft till vänster,
   samma tunna pil (vinkel) 10 px från högerkanten. Pilen vänds uppåt när rutan är öppen.
   "Fler filter" i Analys och Topplista behåller länkstilen. */

/* Enkelval: webbläsarens rullista */
.page-canvas select.form-select{padding-left:10px!important;padding-right:28px!important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%231F2933' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:12px 12px!important}
.page-canvas .fraga-knapp{padding-left:10px!important;padding-right:28px!important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%231F2933' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:12px 12px!important}

/* Gemensam pil för flerval och knappar med meny (ritas i textens färg) */
.page-canvas :is(details.filter-lista > summary,.period-lista > summary,.filterpanel--rad .fler-filter > summary,.filterpanel--kompakt .fler-filter > summary,.filterpanel--kompakt .installningar > summary,.verktygsmeny > summary.btn,.kortmeny > summary.kortmeny-knapp,.btn.dropdown-toggle)::after{
  content:""!important;display:inline-block!important;flex:0 0 auto;width:12px!important;height:12px!important;margin:0 0 0 6px!important;padding:0!important;border:0!important;vertical-align:middle!important;
  background-color:currentColor!important;font-size:0!important;transition:transform .15s;
  -webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center/12px 12px no-repeat;
          mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center/12px 12px no-repeat}
.page-canvas :is(details.filter-lista,.period-lista,.filterpanel--rad .fler-filter,.filterpanel--kompakt .fler-filter,.filterpanel--kompakt .installningar,.verktygsmeny,.kortmeny)[open] > summary::after,.page-canvas .btn.dropdown-toggle.show::after{transform:rotate(180deg)}
.page-canvas .kortmeny > summary.kortmeny-knapp::after{margin-left:4px!important;width:10px!important;height:10px!important;-webkit-mask-size:10px 10px;mask-size:10px 10px}

/* Flerval: samma höjd som enkelval (ramen ligger runt listan, så knappen inuti är 2 px lägre), pilen längst till höger */
.page-canvas details.filter-lista > summary{display:flex!important;align-items:center;height:calc(var(--knapp-hojd) - 2px)!important;min-height:calc(var(--knapp-hojd) - 2px)!important;padding:0 10px!important;box-sizing:border-box}
.page-canvas details.filter-lista.filter-lista > summary::after{margin-left:auto!important}
.page-canvas :is(.fraga-panel,.filterpanel--rad .fler-filter-rutnat,.filter-lista-inre) details.filter-lista > summary{height:calc(var(--knapp-hojd-liten) - 2px)!important;min-height:calc(var(--knapp-hojd-liten) - 2px)!important}

/* Knappar med meny och Filter-knappen: 10 px luft */
.page-canvas :is(.verktygsmeny > summary.btn:not(:empty),.btn.dropdown-toggle,.filterpanel--rad .fler-filter > summary){padding-left:10px!important;padding-right:10px!important}
.page-canvas .filterpanel--rad .fler-filter > summary{display:inline-flex!important;align-items:center}

/* ---- AP 145 (avsnitt 12): utfällbara avsnitt ---- */
/* Allt som fäller ut mer innehåll i sidan (inte en ruta ovanpå) ser likadant ut: blå halvfet text med en tunn pil
   till vänster som pekar åt höger och vänds nedåt när avsnittet är öppet. Ingen knappyta, understrykning vid hovring.
   I filterpanelen 12 px (som fältrubrikerna), i innehållet 14 px. Filter-knappen på Startsidan öppnar en ruta och är en knapp. */
.page-canvas :is(.filterpanel--kolumn .fler-filter,.installningar,.vy-fordjupning,.jf-fordjupning) > summary{
  display:inline-flex!important;align-items:center;gap:6px;list-style:none!important;height:auto!important;min-height:0!important;padding:4px 0!important;
  background:none!important;border:0!important;border-radius:0!important;color:var(--kollbar-bla,#16477E)!important;font-weight:600!important;cursor:pointer}
.page-canvas :is(.filterpanel--kolumn .fler-filter,.installningar,.vy-fordjupning,.jf-fordjupning) > summary::-webkit-details-marker{display:none}
.page-canvas :is(.filterpanel--kolumn .fler-filter,.installningar) > summary{font-size:12px!important}
.page-canvas :is(.vy-fordjupning,.jf-fordjupning) > summary{font-size:14px!important}
.page-canvas :is(.filterpanel--kolumn .fler-filter,.installningar,.vy-fordjupning,.jf-fordjupning) > summary::before{
  content:""!important;display:inline-block;width:12px;height:12px;flex:0 0 12px;background-color:currentColor;transition:transform .15s;
  -webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M4.5 2l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center/12px 12px no-repeat;
          mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M4.5 2l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center/12px 12px no-repeat}
.page-canvas :is(.filterpanel--kolumn .fler-filter,.installningar,.vy-fordjupning,.jf-fordjupning)[open] > summary::before{transform:rotate(90deg)}
.page-canvas :is(.filterpanel--kolumn .fler-filter,.installningar,.vy-fordjupning,.jf-fordjupning) > summary:is(:hover,:focus-visible){background:none!important;text-decoration:underline!important;text-underline-offset:2px}

/* ---- Utloggade sidor (inloggning, glömt lösenord): samma typsnitt, knapp och vänsterställda layout som resten av portalen ---- */
.utloggad-sida{max-width:26rem; margin:3rem auto; padding:2rem; border:1px solid var(--farg-linje); border-radius:8px}   /* inloggningen i ett kort med samma ram som resten (beslut 40) */
#logo-lysio{display:block; height:72px; width:auto; margin:0 0 2rem}
.utloggad-innehall h1.sidrubrik{margin-bottom:1.5rem}
.utloggad-innehall .col-md-4,.utloggad-innehall .col-md-6{width:auto; margin:0; padding:0}
.utloggad-innehall .mb-2,.utloggad-innehall .mb-3{margin-bottom:1rem!important}
.utloggad-innehall .btn{float:none!important}
.utloggad-innehall label{display:inline-block; margin-bottom:.5rem}
.utloggad-innehall .form-control{height:calc(1.5em + .75rem + 2px)}   /* fältens mått som före Bootstrap 4 togs bort */

.filterpanel-innehall{border-top:0; padding:0}
.vykropp--kolumn .filterpanel:not(.filterpanel--rad) .filterpanel-knappar{border-top:1px solid var(--farg-linje)}

.form-switch .form-check-input{box-shadow:none}
@media (max-width:600px){.table.tabell{display:block; overflow-x:auto}}

/* ==========================================================================================================================
   Den gemensamma stilen för hela portalen (Planering/design/stilrent.md). Natten 2026-11-10 gjorde den för stilren, och omtaget
   2026-11-11 (avsnitt 6, Balans) tog tillbaka det som gjorde sidorna svårlästa: färg i datan, tal på staplarna, tunn ram på korten,
   menyn och sidhuvudet som i går, och storlek och tyngd som i går. Kvar från natten: inga Kom igång, ingresser, tipsrutor eller rutor i rutor,
   tabeller med tunna linjer, högst en notis och en primärknapp per vy. Reglerna står där de gäller (kollbar.css, ram.css, lysio.css) och
   inte som ett lager ovanpå: den här filen ändrar bara det natten ändrade.
   ========================================================================================================================== */
======================================================================================================================
   AP 96: varje vy med resultatet på första skärmen. Den kompakta raden: rullistor på en rad (högst två rader på 1280 px), utan ruta
   och utan stödtext. Organisationslistan, Fler filter, Inställningar och Visa fälls ut ovanpå sidan och trycker inte ned resultatet.
   ========================================================================================================================== */
.vyram .filterpanel--kompakt{margin:0 0 .75rem}
.filterpanel--kompakt .filterpanel-innehall{display:flex; flex-wrap:wrap; align-items:flex-end; gap:.5rem 1rem; padding:0}
.filterpanel--kompakt .filterpanel-rutnat{display:flex; flex-wrap:wrap; align-items:flex-end; gap:.5rem 1rem; flex:1 1 100%}
.filterpanel--kompakt .filterpanel-del{flex:0 1 auto; min-width:0}
.filterpanel--kompakt .filterpanel-del--fraga{flex:1 1 280px; max-width:520px}
.filterpanel--kompakt .filterpanel-del:has(> select){flex:0 1 190px}
.filterpanel--kompakt .filterpanel-del:has(.filter-lista){flex:0 1 190px}
.filterpanel--kompakt .filterpanel-del > legend{margin-bottom:2px; font-size:var(--text-liten); font-weight:400; color:var(--farg-stod)}
.filterpanel--kompakt .filterpanel-del--vyval > legend{font-weight:400}
.filterpanel--kompakt .vyval-hjalp,.filterpanel--kompakt p.fraga-text,.filterpanel--kompakt .steg-rad,.filterpanel--kompakt .filter-forklaring,.filterpanel--kompakt .filter-hjalp{display:none}
.filterpanel--kompakt .period-val{display:flex; gap:.5rem}
.period-val label{display:flex; align-items:center; gap:.3rem}
.period-val select.form-select{min-width:6.75rem}   /* rymmer hela månaden och året (nov 2025), också när raden är trång (AP 145: 10 px luft till vänster och pilen 28 px till höger) */
.filterpanel--kolumn .period-val{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:.5rem}
.filterpanel--kolumn .period-val label{display:block}
.filterpanel--kolumn .period-val .form-select,.filterpanel--kolumn .period-val .form-control{width:100%; min-width:0}
.filterpanel--kompakt .period-val label{font-size:var(--text-liten); color:var(--farg-stod)}
.filterpanel--kompakt .brickor{flex:1 1 100%; order:10; margin:0}
.filterpanel--kompakt .filter-lista{position:relative; margin:0; background:#fff}
.filterpanel--kompakt .filter-lista-inre{position:absolute; top:100%; left:-1px; right:-1px; min-width:260px; z-index:40; background:#fff; border:1px solid var(--gra-300); border-radius:var(--radie); padding:.4rem .6rem}
.filterpanel--kompakt .fler-filter,.filterpanel--kompakt .installningar{position:relative; margin:0; flex:0 0 auto}
.filterpanel--kompakt .fler-filter > summary,.filterpanel--kompakt .installningar > summary{list-style:none; display:inline-flex; align-items:center; gap:.3rem; min-height:var(--knapp-hojd); padding:.125rem .75rem; margin:0;
  background:#fff; border:1px solid var(--gra-300); border-radius:var(--radie); font-size:var(--text-liten); font-weight:600; color:var(--farg-text); cursor:pointer}
.filterpanel--kompakt .fler-filter > summary::-webkit-details-marker,.filterpanel--kompakt .installningar > summary::-webkit-details-marker{display:none}
.filterpanel--kompakt .fler-filter > summary::after,.filterpanel--kompakt .installningar > summary::after{content:"\25BE"}
.filterpanel--kompakt .fler-filter[open] > summary,.filterpanel--kompakt .installningar[open] > summary{border-color:var(--kollbar-bla)}
.filterpanel--kompakt .fler-filter-rutnat,.filterpanel--kompakt .installningar-rutnat{position:absolute; top:100%; left:0; z-index:40; width:min(560px, 88vw); max-height:70vh; overflow:auto; margin-top:.25rem; padding:.75rem;
  background:#fff; border:1px solid var(--gra-300); border-radius:var(--radie); display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.75rem 1rem}
.filterpanel--kompakt .fler-filter-rutnat .filterpanel-del > legend{position:static}
.filterpanel--kompakt .fler-filter-rutnat .filter-lista{width:auto}
.filterpanel--kompakt .fler-filter-rutnat .filter-lista-inre{position:static; border:0; border-top:1px solid var(--farg-linje); border-radius:0; min-width:0}
.filterpanel--kompakt .filterpanel-knappar,.vykropp .filterpanel--kompakt .filterpanel-knappar{position:static; margin:0 0 0 auto; padding:0; border:0; box-shadow:none; background:none}
.filterpanel--kompakt .filterpanel-visningsval .installning-ruta{display:flex; gap:.4rem; margin:.25rem 0 0}
.vykropp--kompakt{display:block}
@media (max-width:575.98px){
  .filterpanel--kompakt .filterpanel-rutnat,.filterpanel--kompakt .filterpanel-innehall{flex-direction:column; align-items:stretch}
  .filterpanel--kompakt .filterpanel-del--fraga,.filterpanel--kompakt .filterpanel-del:has(> select),.filterpanel--kompakt .filterpanel-del:has(.filter-lista){flex:1 1 auto; max-width:none}
  .filterpanel--kompakt .fler-filter-rutnat,.filterpanel--kompakt .installningar-rutnat{position:static; width:auto}
}

/* AP 96: fotnoter under resultatet (lilla grå text), frågerubriken högst två rader, nyckeltal som en rad med tal utan ram. */
.vyfotnoter{margin:.5rem 0 0; padding-top:.75rem; border-top:1px solid var(--farg-linje)}
.vyfotnoter p{margin:0 0 .25rem; font-size:var(--text-liten); color:var(--farg-stod); }
/* AP 147 (R4.3): frågetexten bryts på så många rader som behövs, också på mobil (förut klipptes den efter två rader med …). En lång text med flera meningar kortas fortfarande i mallen till första frågetecknet. */
.vyram h2.fraga-rubrik{overflow-wrap:break-word}
.filterpanel--kompakt .filterpanel-del:has(.period-val) > legend{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.filterpanel--kompakt .filterpanel-del.filterpanel-del--fraga{flex:1 1 260px; max-width:560px}
.vykort--nyckeltal .vykort-verktyg{opacity:0}
.vykort--nyckeltal:hover .vykort-verktyg,.vykort--nyckeltal:focus-within .vykort-verktyg{opacity:1}
.vy-tabellval{margin-top:.5rem; border-top:1px solid var(--farg-linje); padding-top:.5rem}
.vy-tabellval > summary{font-size:var(--text-liten); font-weight:600; color:var(--kollbar-bla); cursor:pointer; margin-bottom:.5rem}
/* Förklaringsraderna och perioden under kortrubriken är ingresser: de står som verktygstips på rubriken (vykort-rubrik[title]). */
.vykropp--kompakt .vykort-forklaring,.vykropp--kompakt .vykort-underrubrik{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* AP 96: ikoner som inte bär information är borta. Länkikonen vid Hjälpens rubriker syns först när man pekar på rubriken eller fokuserar den.
   Förklaringsikonerna i panelen i kompakt rad är verktygstips på fältets rubrik (title finns kvar på knappen). */
.hjalp-kopiera{opacity:0}
h2:hover > .hjalp-kopiera,h3:hover > .hjalp-kopiera,h4:hover > .hjalp-kopiera,.hjalp-kopiera:focus-visible,.hjalp-kopiera:hover{opacity:1}
/* Feedback-knappen är rund och 40 px på smal skärm (AP 91), också efter den gemensamma stilen. */
@media (max-width:860px){.feedback-knapp{border-radius:50%}}

/* AP 113: en utfälld lista i en kolumnpanel (Kartans svarsalternativ, organisationer) läggs ovanpå sidan och trycker inte ned Visa resultat. */
.filterpanel--kolumn .filter-lista{position:relative}
.filterpanel--kolumn .filter-lista[open] > .filter-lista-inre{position:absolute; top:100%; left:-1px; right:-1px; z-index:40; max-height:22rem; overflow-y:auto; background:#fff; border:1px solid var(--gra-300); border-radius:0 0 var(--radie-liten) var(--radie-liten); box-shadow:none}
.filterpanel--kolumn .fler-filter-rutnat .filter-lista[open] > .filter-lista-inre{position:static; max-height:none; border:0; border-top:1px solid var(--farg-linje); border-radius:0}

/* AP 113: Ärendenas filterrad är en rad med små kontroller, och primärknappen står sist till höger. */
.arende-filter label{font-size:var(--text-liten); color:var(--farg-stod); margin:0}
.arende-filter .form-select{max-width:7.5rem}
.arende-filter{gap:.5rem .6rem}
.arende-filter .btn{white-space:nowrap}
@media (min-width:900px){.arende-filter{flex-wrap:nowrap}}

/* AP 113: på smal skärm rullar hela menyn som en enhet, så att rubriken Beställningar inte klipps av raden med Hjälp. */
@media (max-width:860px){
  .sidebar{display:block!important; overflow-y:auto; overflow-x:hidden}
  .sidebar-rull{overflow:visible; flex:none; min-height:0}
}

/* AP 96 (punkt 11): hela menyn rullar som en enhet på dator, med Hjälp, Administration och kontoraden sist. Varje menyval går att nå på 1280 x 720. */
@media (min-width:861px){
  .sidebar{overflow-y:auto; overflow-x:hidden; display:block}
  .sidebar-rull{overflow:visible; flex:none; min-height:0}
  .sidebar-fast{padding-bottom:.25rem}
  .sidebar .sidebar-konto-fast{margin-top:.5rem; position:sticky; bottom:0; z-index:2; background:#fff}   /* AP 145: kontoraden (Logga ut) syns alltid längst ned, också när menyn rullar */
}

/* AP 96 (punkt 13): Perioder och Stapel/Linje är en segmentkontroll, ihopbyggda knappar med hörn på högst 4 px. Samma stil som diagramtypens ikonväxel. */
.tidsniva{gap:0}
.tidsniva-etikett{margin-right:.5rem; font-weight:400; color:var(--farg-stod)}
.tidsniva-val,.tidsniva-vaxel-val{border-radius:0; margin-left:-1px; line-height:1.4}
.tidsniva-etikett + .tidsniva-val,.tidsniva-vaxel > .tidsniva-val:first-child{margin-left:0; border-radius:4px 0 0 4px}
.tidsniva > .tidsniva-val:last-child,.tidsniva-vaxel > .tidsniva-val:last-child{border-radius:0 4px 4px 0}
.tidsniva-vaxel{gap:0}
.tidsniva-val--aktiv,.tidsniva-val--aktiv-lang{position:relative; z-index:1; border-color:var(--kollbar-bla)}

/* AP 111: Ångra, Gör om och Återställ ligger i menyn ⋯. Ladda ned och Sparade vyer är små sekundärknappar. */
.historikmeny .btn-link{color:var(--kollbar-bla); font-weight:400; text-decoration:none}
.historikmeny .btn-link:hover{text-decoration:underline}
/* Punkt 16: stegtexter (Kartan) och stödtexter i panelen som upprepar valet är borta. */
.steg-rad,.filterpanel p.fraga-text{display:none}   /* AP 100: bara stödtexten under fältet, inte frågornas rader i listan */
/* AP 96 (punkt 16): förklaringsrutan i listan är ett verktygstips på rubriken (title på summary), och valda frågor som brickor är borta (frågan står i rullistan). */
.filterpanel .filter-forklaring,.filterpanel .filter-hjalp{display:none}

/* ---- AP 92 (E16): en rapport. Korten under varandra i en kolumn med full bredd, ett avsnitt per kort med nummer, rubrik, en rad om vad det avser
   och en tunn avskiljare mellan korten. Ordning och Ta bort ligger vid varje kort som små ikonknappar. ---- */
.rapportkort-lista{display:block}
.rapportavsnitt{padding:1rem; margin:0 0 1rem; border:1px solid var(--farg-linje); border-radius:8px}   /* kort i en rapport: 1 px ram, radie 8, 16 px luft */
.rapportavsnitt-huvud{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.page-canvas h2.rapportavsnitt-rubrik{margin:0 0 .25rem; font-size:var(--text-brod); font-weight:600; overflow-wrap:anywhere}
.rapportavsnitt-nr{display:inline-block; min-width:1.75rem; color:var(--farg-stod); font-variant-numeric:tabular-nums}
.rapportavsnitt-avser{margin:0 0 .75rem 1.75rem; font-size:var(--text-liten)}
.rapportavsnitt-meny{flex:0 0 auto}
/* AP 110: kommentaren under ett rapportkort. Ägaren skriver den i ett fält, läsaren och utskriften ser den som text. */
.rapportkommentar{display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; margin:0 0 .75rem 1.75rem; max-width:44rem}
.rapportkommentar label{font-size:var(--text-liten); color:var(--farg-stod)}
.rapportkommentar textarea{width:100%}
.rapportkommentar-text{margin:0 0 .75rem 1.75rem; max-width:44rem; white-space:pre-line}
.rapportkommentar-utskrift{display:none}
@media print{.rapportkommentar{display:none} .rapportkommentar-utskrift{display:block}}
.ingen-nedladdning{align-self:center; font-size:var(--text-liten)}
.verktygsmeny-panel .ingen-nedladdning{display:block; max-width:14rem; padding:0 .75rem .25rem}
.ingen-nedladdning-post.disabled{opacity:.6; pointer-events:none}
.rapportmeny-rubrik{padding:.35rem .55rem .1rem; font-size:var(--text-liten)}
.rapportmeny-rubrik label{display:block; margin-bottom:.25rem; color:var(--farg-stod)}
.kortmeny-panel .kortmeny-post{display:block; width:100%; border:0; background:none; text-align:left; font:inherit; color:var(--farg-text); font-weight:400}
.kortmeny-panel .kortmeny-post:disabled{opacity:.4; cursor:default}
.kortmeny-panel .rapport-ta-bort{color:var(--status-rod)}
.rapportavsnitt-huvud{position:relative}
.rapportavsnitt > :not(.rapportavsnitt-huvud):not(.rapportavsnitt-avser):not(.rapportavsnitt-rubrikbyte){margin-left:0}
.rapportinstallningar{font-size:var(--text-liten); margin-top:1rem}
.rapportinstallningar > summary{cursor:pointer; color:var(--kollbar-bla)}
/* Punkt 16: en ensam vald fråga står redan i rullistan, så brickan behövs inte. Flera valda frågor visas som brickor som går att ta bort. */
.filterpanel .fraga-brickor:has(> li:only-child){display:none}

/* ---- Hjälp och stöd i en enda form: frågetecknet (AP 145, avsnitt 9) är ett ? i en ljusgul cirkel, med förklaringen som verktygstips (title) och i en ruta vid klick.
   Länkar till hjälpen är textlänkar utan ikon. Valda filter är små rektangulära brickor, aldrig runda piller. ---- */
/* Frågetecknet öppnar en kort förklaring av begreppet. Det får en fylld ljusgul cirkel, 18 px, i samma färg som sidhuvudet.
   Klickytan är fortfarande 24 x 24 px. Frågetecknet centreras i höjdled mot texten det står bredvid. */
.page-canvas .forklaring{display:inline-flex;align-items:center;vertical-align:middle}
.page-canvas .forklaring-ikon{display:inline-flex!important;align-items:center;justify-content:center;width:24px;height:24px;min-width:24px;min-height:24px;padding:0!important;
  background:none!important;border:0!important;border-radius:50%!important;vertical-align:middle;margin:0 0 0 4px}
.page-canvas .forklaring-ikon::after{content:"?";display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--lysio-cream,#FFF7EA);color:var(--farg-text,#1F2933);font-size:12px!important;font-weight:600;line-height:1}
.page-canvas .forklaring-ikon:hover::after,.page-canvas .forklaring-ikon:focus-visible::after{background:var(--knapp-hover,#F0F3FB);color:var(--kollbar-bla,#16477E);box-shadow:inset 0 0 0 1px var(--kollbar-bla,#16477E)}
.page-canvas .etikett{display:flex;align-items:center}
.page-canvas :is(legend,.installning-rad,.nyckeltal-signifikans) .forklaring{vertical-align:middle}

/* Restidskvot som i går: panelen till vänster, de tre nyckeltalen som kort med tunn ram (ram.css) och diagrammet i sitt kort. Meningen över diagrammet upprepade korten och är borta. */

/* Ett enda fält i panelen: samma höjd (34 px) och textstorlek (15 px) för rullistor, datumfält och filterlistor, och aldrig bredare än panelen. */
.filterpanel :is(.form-select,.form-select-sm,.form-control,.form-control-sm){min-height:var(--knapp-hojd); font-size:var(--text-brod); padding:.25rem .625rem}
.filterpanel :is(.form-select,.form-select-sm){padding-right:2rem}
.filterpanel--kolumn :is(.form-select,.form-control,.filter-lista){max-width:100%; box-sizing:border-box}
.vyram .filterpanel--kompakt{background:var(--gra-050); border:1px solid var(--farg-linje); border-radius:8px; padding:.75rem 1rem}   /* panelen ovanför resultatet som i går: grå med ram */
@media (max-width:575.98px){.vykropp--kolumn .filterpanel{padding:.75rem 0; border-left:0; border-right:0; border-radius:0}}   /* på smal skärm ryms inget i sidled utanför panelen */