/* Lysio Researchs grafiska profil. Tagen ur Lysio BI och avgränsad till det som tidrapporten använder. */

:root{
  --lysio-marin:#003C63;
  --lysio-bla:#5991F0;
  --lysio-gul:#F9D764;
  --lysio-rosa:#F6C2DF;
  --lysio-gron:#7DBA74;
  --lysio-blaljus:#DEE9FC;
  --lysio-korall:#EF7764;
  --lysio-cream:#FAF2E8;

  --lysio-skogsgron:#386532;
  --lysio-vinrod:#9A2110;

  --gra-900:#1D2733;
  --gra-700:#45505C;
  --gra-500:#5D6874;
  --gra-300:#C3CBD4;
  --gra-150:#E3E7EB;
  --gra-050:#F5F7F9;

  /* Typskalan (UX-förslag omgång 2, avsnitt 1). Namnen är kvar, värdena nya. */
  --font-text:"Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs:.8125rem;    /* 13 px: meta och brickor, aldrig mindre */
  --text-sm:.875rem;     /* 14 px: etiketter, hjälptext, tabeller */
  --text-bas:1rem;       /* 16 px: brödtext, fält och knappar */
  --text-md:1.125rem;    /* 18 px: korttitlar, menyns rubriker */
  --text-lg:1.25rem;     /* 20 px: sektionsrubriker */
  --text-xl:1.75rem;     /* 28 px: sidrubrik på dator */
  --text-xl-mobil:1.5rem;

  --tal-stor:2rem;
  --tal-mellan:1.5rem;

  --vikt-normal:400; --vikt-halv:600; --vikt-fet:700;
  --rad-tat:1.2; --rad-tabell:1.4; --rad-bas:1.5;
  --text-farg:var(--gra-900); --text-dampad:var(--gra-700);
  --steg-1:.25rem; --steg-2:.5rem; --steg-3:.75rem; --steg-4:1rem;
  --steg-5:1.5rem; --steg-6:2rem; --steg-7:3rem;
  --kontroll-hojd:2.75rem; --kontroll-hojd-tat:2.25rem;
  --tabell-huvud:var(--lysio-marin); --tabell-rand:#F0F3FB;
  --marin-inaktiv:#4A6F8C;

  --radie:6px;
  --radie-liten:4px;
  --radie-stor:10px;
  --radie-pill:999px;

  --bs-primary:var(--lysio-marin);
  --bs-primary-rgb:0,60,99;
  --bs-success:var(--lysio-gron);
  --bs-success-rgb:125,186,116;
  --bs-danger:var(--lysio-korall);
  --bs-danger-rgb:239,119,100;
  --bs-warning:var(--lysio-gul);
  --bs-warning-rgb:249,215,100;
  --bs-link-color:var(--lysio-marin);
  --bs-link-hover-color:#00548c;
}
/* Länktext i marin. --lysio-bla har för låg kontrast mot vitt för text. */
a, .btn-link{color:var(--lysio-marin)}
a:hover, .btn-link:hover{color:#00548c}
.form-check-input:checked{background-color:var(--lysio-marin); border-color:var(--lysio-marin)}
.form-select:focus, .form-control:focus{border-color:var(--lysio-bla); box-shadow:0 0 0 .25rem rgba(89,145,240,.25)}

.bg-primary{background-color:var(--lysio-marin)!important}
.bg-success{background-color:var(--lysio-gron)!important}
.bg-danger{background-color:var(--lysio-korall)!important}
.bg-warning{background-color:var(--lysio-gul)!important}
.text-primary{color:var(--lysio-marin)!important}
.btn-primary{background-color:var(--lysio-marin); border-color:var(--lysio-marin)}
.btn-primary:hover, .btn-primary:active{background-color:#002d4a!important; border-color:#002d4a!important}
.btn-outline-primary{color:var(--lysio-marin); border-color:var(--lysio-marin)}
.btn-outline-primary:hover, .btn-outline-primary:active{
  background-color:var(--lysio-marin)!important; border-color:var(--lysio-marin)!important; color:#fff!important;
}
/* Inaktiverade knappar: en ljusare marin utan genomskinlighet. Vit text mot den ger
   5,3:1, och samma färg som text på vitt också 5,3:1. Bootstraps blå med opacitet
   0,65 gav 2,6:1. */
.btn-primary:disabled, .btn-primary.disabled{
  background-color:var(--marin-inaktiv); border-color:var(--marin-inaktiv); color:#fff; opacity:1;
}
/* Valda brickor, till exempel språken i personvyn, i marin i stället för Bootstraps blå (U2a punkt 7). */
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary{
  background-color:var(--lysio-marin); border-color:var(--lysio-marin); color:#fff;
}
/* Brickor aldrig mindre än 13 px (U2a punkt 7). */
.badge{font-size:max(.75em, var(--text-xs))}
.btn-outline-primary:disabled, .btn-outline-primary.disabled{
  border-color:var(--marin-inaktiv); color:var(--marin-inaktiv); opacity:1;
}
/* Knappar med bara ram har vit bakgrund, också på cream i sidhuvudet och när de är inaktiverade (U9).
   Hover, aktiv och vald behåller sina egna färger, eftersom deras regler är mer specifika. Vit botten ger
   samma kontrast för text och ram som mot vitt. */
[class*="btn-outline-"]{background-color:#fff}
[class*="btn-outline-"]:disabled, [class*="btn-outline-"].disabled{background-color:#fff}

.visuellt-dold{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Bootstraps rubriker har vikten 500, som inte laddas (Work Sans 400, 600 och 700). */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-weight:var(--vikt-halv)}
/* Rangordning: sidrubriken är störst och fetast, sektionsrubriken 20 px halvfet. */
h1.sidrubrik{font-size:var(--text-xl); font-weight:var(--vikt-fet); line-height:var(--rad-tat); margin-bottom:.5rem; color:var(--lysio-marin)}

html{min-height:100%}
body{
  background:#fff;
  font-family:var(--font-text);
  font-size:var(--text-bas); line-height:var(--rad-bas); color:var(--text-farg);
}

/* Liten text har fasta storlekar, så att den aldrig blir mindre än 13 px inne i en tabell. */
.small, small{font-size:var(--text-sm)}
.smaller{font-size:var(--text-sm)}
.smallest{font-size:var(--text-xs)}
.text-muted{color:var(--text-dampad)!important}
.form-label{font-size:var(--text-sm); font-weight:var(--vikt-halv); color:var(--text-farg)}
.btn{font-weight:var(--vikt-halv)}
.btn-sm{font-size:var(--text-sm)}
.cursor-pointer{cursor:pointer}
.box-shadow{box-shadow:0 .25rem .75rem rgba(0,0,0,.05)}

/* --vaxla-topp och --ovan-hojd sätts av sidomeny.js från växlingsraden och raderna ovanför menyn (U9).
   Utan JavaScript gäller de första värdena, alltså som förut. */
.sidebar{
  top:var(--vaxla-topp, 0);
  height:calc(100vh - var(--ovan-hojd, 0px)); overflow-y:auto; overflow-x:hidden;
  width:260px; min-width:260px; max-width:260px;
  padding:0 .9rem .9rem;
  background-color:#fff; border-right:1px solid var(--gra-150);
  box-shadow:1px 0 0 rgba(0,0,0,.02);
}

.sidebar-brand{
  display:flex; align-items:center; justify-content:flex-start;
  padding:1.5rem .1rem 1.3rem; border-radius:var(--radie-liten);
  transition:opacity .15s ease;
}
.sidebar-brand:hover{opacity:.75}
.sidebar-brand:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px}
.sidebar-brand img{display:block; height:54px; width:auto}

.sidebar-titel{
  padding:0 .1rem 1.1rem; margin-bottom:1rem;
  border-bottom:1px solid var(--gra-150);
}
.sidebar-titel-namn{
  font-size:var(--text-md); font-weight:700; letter-spacing:-.015em;
  color:var(--lysio-marin); line-height:1.25;
}
.sidebar-titel-produkt{
  margin-top:.2rem; font-size:var(--text-xs); font-weight:400;
  letter-spacing:.02em; color:var(--gra-500);
}

.sidebar-nav{display:flex; flex-direction:column; gap:.1rem}

.sidebar-avsnitt{
  border-top:1px solid var(--gra-150); margin-top:.5rem; padding-top:.4rem;
}
.sidebar-avsnitt:first-of-type{border-top:none; margin-top:.2rem; padding-top:0}

.sidebar-grupptitel{
  margin:0 0 .25rem; padding:0 .6rem;
  font-size:var(--text-md); font-weight:var(--vikt-halv); letter-spacing:-.01em;
  color:var(--lysio-marin);
}

.sidebar-grupptitel-knapp{
  display:flex; align-items:center; gap:.5rem; width:100%; min-height:32px;
  border-radius:var(--radie-liten);
  background:none; border:none; cursor:pointer; text-align:left;
  transition:background-color .12s ease;
}
.sidebar-grupptitel-knapp:hover{background:var(--gra-050)}
.sidebar-grupptitel-knapp:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}
.sidebar-grupptitel-pil{
  font-size:.7rem; transition:transform .15s ease; flex:0 0 auto;
  color:var(--gra-500);
}
.sidebar-grupptitel-knapp[aria-expanded="true"] .sidebar-grupptitel-pil{transform:rotate(90deg)}
.sidebar-grupptitel-ikon{
  flex:0 0 1.15rem; font-size:var(--text-bas); text-align:center;
}
.sidebar-grupptitel-antal{
  margin-left:auto; font-weight:400; font-size:var(--text-xs); opacity:.8;
}
.sidebar-grupptitel-knapp[aria-expanded="true"] .sidebar-grupptitel-antal{display:none}

.sidebar-avsnitt-innehall{
  display:flex; flex-direction:column; gap:.1rem;
  padding-left:.5rem; border-left:1px solid var(--gra-150); margin-left:.65rem;
}

.sidebar-avsnitt--aktiv > .sidebar-grupptitel-knapp{background:var(--gra-050)}
.sidebar-avsnitt--aktiv > .sidebar-avsnitt-innehall{border-left-color:var(--lysio-gul)}

.sidebar-falla-alla{
  display:flex; align-items:center; gap:.5rem; width:100%;
  margin:.2rem 0 .4rem; padding:.3rem .6rem; border:none; border-radius:var(--radie-liten);
  background:none; color:var(--gra-500); font-size:var(--text-xs); font-weight:600;
  cursor:pointer; transition:background-color .12s ease, color .12s ease;
}
.sidebar-falla-alla:hover{background:var(--gra-050); color:var(--lysio-marin)}
.sidebar-falla-alla:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}

.sidebar-sok{
  position:relative; margin:.2rem 0 .6rem;
}
.sidebar-sok i{
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  color:var(--gra-500); font-size:var(--text-bas); pointer-events:none;
}
.sidebar-sok-falt{
  width:100%; padding:.4rem .6rem .4rem 1.8rem; border:1px solid var(--gra-300);
  border-radius:var(--radie-liten); font-size:var(--text-bas); color:var(--gra-700);
}
.sidebar-sok-falt:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}

.sidebar-lank{
  display:flex; align-items:center; gap:.7rem; min-height:32px;
  padding:.52rem .6rem .52rem .55rem; border-radius:var(--radie-liten);
  border-left:3px solid transparent;
  font-size:var(--text-bas); font-weight:400; line-height:1.3;
  color:var(--gra-700); text-decoration:none;
  transition:background-color .12s ease, color .12s ease;
}
.sidebar-lank i{
  flex:0 0 1.15rem; font-size:var(--text-md); text-align:center;
  color:var(--gra-500); transition:color .12s ease;
}
.sidebar-lank:hover{background:var(--gra-050); color:var(--lysio-marin)}
.sidebar-lank:hover i{color:var(--lysio-marin)}
.sidebar-lank:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:1px}
.sidebar-lank.ar-aktiv{
  background:var(--lysio-blaljus); color:var(--lysio-marin); font-weight:600;
  border-left-color:var(--lysio-gul);
}
.sidebar-lank.ar-aktiv i{color:var(--lysio-marin)}

.sidebar-konto{padding-top:.9rem; margin-top:1rem; border-top:1px solid var(--gra-150)}

.sidebar-tona{display:none}

@media (min-width:861px){
  .sidebar{overflow:hidden}
  .sidebar-rull{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;

    margin:0 -.9rem; padding:0 .9rem;
  }
  .sidebar-tona{
    display:block; position:sticky; bottom:0;
    height:2.5rem; margin-top:-2.5rem;
    background:linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events:none; opacity:0; transition:opacity .15s ease;
  }
  .sidebar-rull.har-mer .sidebar-tona{opacity:1}
  .sidebar-konto-fast{flex:0 0 auto; margin-top:0; padding-top:.6rem; border-top:1px solid var(--gra-150)}
}
.sidebar-etikett{
  display:block; margin-bottom:.25rem;
  font-size:var(--text-xs); font-weight:600; letter-spacing:.02em;
  color:var(--gra-500);
}
.sidebar-konto-rad{display:flex; flex-direction:column; gap:.35rem}
.sidebar-konto-namn{
  font-size:var(--text-xs); color:var(--gra-500);
  overflow-wrap:anywhere;
}
.sidebar-logga-ut{
  display:inline-flex; align-self:flex-start; align-items:center; gap:.4rem;
  padding:0; border:0; background:none;
  font-size:var(--text-sm); color:var(--gra-500); text-decoration:none;
}
.sidebar-logga-ut:hover{color:var(--lysio-marin); text-decoration:underline}
.sidebar-logga-ut:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px; border-radius:.2rem}

.main-content{overflow:auto; position:relative; min-width:0; padding:0}
.page-canvas{
  width:100%; min-width:0;

  padding:1.25rem 1.5rem 5.5rem;
}

.page-canvas > :not(.sidhuvud),
.sidhuvud > *{max-width:calc(1440px - 3rem)}

.jf-topplista,
.jf-dv-rubrikrad,.jf-dv-skalrad,.jf-dv-rad,
.hd-diagram{max-width:42rem}

.table.tabell--smal{width:auto; min-width:20rem; max-width:40rem}

.sidhuvud{
  background:var(--lysio-cream);
  margin:-1.25rem -1.5rem 0;
  padding:1.25rem 1.5rem 1rem;
}
.sidhuvud .sidintro{margin-bottom:0}
.sidhuvud .filterfalt{border-bottom:none; padding-bottom:0; margin-top:1rem}
.sidhuvud + *{margin-top:0}
.sidhuvud--avslut{border-bottom:1px solid #ECE2D4; margin-bottom:1.75rem}

.sektion{border-top:1px solid var(--gra-150); padding-top:1.25rem; margin-bottom:2rem}
.sektion:first-of-type{border-top:none; padding-top:0}
.sektion > h5,
.sektion > .sektionsrubrik,
.jf-ruta > .sektionsrubrik{
  padding-left:.7rem; border-left:3px solid var(--lysio-marin);
  font-size:var(--text-lg); font-weight:var(--vikt-halv); line-height:1.25; color:var(--lysio-marin);
  margin-bottom:.15rem;
}
.sektionsinnehall{padding-left:.7rem}

.sidintro{max-width:78ch; margin-bottom:1.25rem}
.sidrubrikrad{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; margin-bottom:.5rem}
.sidrubrikrad .sidrubrik{margin-bottom:0}

/* Tabeller: 14 px, siffror i rad och marin huvudrad med vit text (profilens mönster). */
.table{font-size:var(--text-sm); line-height:var(--rad-tabell); font-variant-numeric:tabular-nums}
.table > thead > tr > th{background-color:var(--tabell-huvud); color:#fff; font-weight:var(--vikt-halv); border-bottom-color:var(--tabell-huvud)}
.table > thead .sortlank, .table > thead .sortlank i, .table > thead a{color:#fff}
.table td{vertical-align:middle}
.table th{text-align:left}
.tal{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.table th.tal{text-align:right}
/* Rullrutan blir närmaste positionerade förfader, så att visuellt dolda texter i
   tabellhuvudet klipps där och inte drar ut sidan när .main-content inte rullar. */
.table-responsive{position:relative}
.sortlank{color:inherit; text-decoration:none; white-space:nowrap}
.sortlank:hover{color:var(--lysio-marin)}
.sortlank i{font-size:var(--text-xs); margin-left:.25rem; color:var(--lysio-marin)}
td.namn{white-space:normal; min-width:200px; max-width:320px}

.lysio-tag{background:var(--lysio-blaljus); color:var(--lysio-marin); font-weight:600}
.tabular{font-variant-numeric:tabular-nums}

.hjalptext{font-size:var(--text-sm); line-height:var(--rad-tabell); color:var(--text-dampad)}

.jf-ruta{background:#fff; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.65rem}
.jf-ruta--bred{grid-column:1 / -1}
.jf-ruta h6{
  font-size:var(--text-sm); font-weight:600; margin:0;
  letter-spacing:.01em; color:var(--gra-500);
}

.jf-notis{
  font-size:var(--text-sm); color:var(--text-dampad); background:var(--gra-050);
  border:1px solid var(--gra-150); border-left:3px solid var(--lysio-gul);
  border-radius:var(--radie); padding:.55rem .75rem; margin:0;
}

.start-tomtillstand{

  font-size:var(--text-bas); color:var(--gra-700); background:var(--gra-050);
  border:1px solid var(--gra-150);
  border-radius:var(--radie); padding:1rem 1.25rem; margin:0;
}

.hoppa-till-innehall{
  position:absolute; left:-9999px; top:0; z-index:2000;
  padding:.6rem 1rem; background:var(--lysio-marin); color:#fff;
  text-decoration:none; border-radius:0 0 .3rem 0;
}
.hoppa-till-innehall:focus{left:0}

/* Den installerbara appen (P6a): sidan /installera och länken dit från Min tid och Mina pass. */
.installera{width:100%; max-width:560px; margin:0 auto; padding:1.5rem 1rem 2.5rem}
.installera-ikon{border-radius:16px; box-shadow:0 1px 4px rgba(0,0,0,.15)}
.installera-kort{background:#fff; border-radius:.5rem; padding:1rem 1.1rem; margin-bottom:1rem; box-shadow:0 1px 3px rgba(0,0,0,.08)}
.installera-bild{display:block; width:100%; max-width:240px; height:auto; margin:.25rem auto .75rem}
.installera-steg{margin:0; padding-left:1.25rem}
.installera-steg li{margin-bottom:.35rem}
.installera-rad{margin:var(--steg-5) 0 0; font-size:var(--text-sm)}

/* Testmiljön (O25): rosa, inte marin och inte växlarens gula, med mörk text (kontrast 9,9:1). */
.testmiljo-rad{padding:.5rem 1rem; background:var(--lysio-rosa); color:var(--gra-900); border-bottom:2px solid var(--gra-900); font-size:var(--text-sm); font-weight:var(--vikt-fet); line-height:1.4; text-align:center}

.mobilhuvud{display:none}

@media (max-width:860px){
  /* overflow:visible, annars fastnar inget med position:sticky (UX-punkt 1, knappen i Lediga pass). */
  .main-content{flex:0 0 100%; width:100%; overflow:visible}
  h1.sidrubrik{font-size:var(--text-xl-mobil)}
  /* Knappar och fält minst 44 px i mobilen, och fälten 16 px så att iPhone inte zoomar. */
  .btn, .form-control, .form-select{min-height:var(--kontroll-hojd)}
  .btn{min-width:var(--kontroll-hojd)}
  .btn{display:inline-flex; align-items:center; justify-content:center}
  .form-control, .form-select{font-size:var(--text-bas)}

  .mobilhuvud{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.7rem 1rem; background:#fff; border-bottom:1px solid var(--gra-150);
    position:sticky; top:0; z-index:1010;
  }
  .mobilhuvud-namn{font-size:var(--text-md); font-weight:700; color:var(--lysio-marin); line-height:1.2}
  .mobilhuvud-vy{font-size:var(--text-xs); color:var(--gra-500)}
  .mobilhuvud-knapp{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:var(--kontroll-hojd); height:var(--kontroll-hojd); border:1px solid var(--gra-300); border-radius:var(--radie-liten);
    background:#fff; color:var(--lysio-marin); font-size:var(--text-lg);
  }
  .mobilhuvud-knapp:focus-visible{outline:2px solid var(--lysio-bla); outline-offset:2px}

  .sidebar .sidebar-topp{display:none}

  .sidebar{
    position:static; height:auto; width:100%; min-width:0; max-width:none;
    border-right:none; border-bottom:1px solid var(--gra-150); box-shadow:none;
    display:none!important;
  }
  .sidebar.mobilmeny-oppen{display:flex!important; padding-top:.9rem}
  .sidebar-konto{margin-top:1rem}
  .page-canvas{padding:1rem 1rem 5.5rem}

  .sidhuvud{margin:-1rem -1rem var(--steg-5); padding:1rem 1rem .9rem}
}