/* 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{
  background-color:transparent; border-color:var(--marin-inaktiv); color:var(--marin-inaktiv); opacity:1;
}

.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)}

.sidebar{
  height:100vh; 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}
}