:root{
  --cyan:#00A8E2;
  /* Cyan som text eller bakgrund bakom vit text. Brandcyan #00A8E2 når bara
     2,7:1 mot vitt; den här når 4,5:1 mot vitt, mist och cyan-tint (WCAG AA).
     Brandcyan används för ytor, ramar och diagram, där kravet inte gäller. */
  --cyan-dark:#0077A0;
  /* Cyan som text på navy: ljusare, 5,3:1 */
  --cyan-on-navy:#5AC8EF;
  --cyan-tint:#E5F6FC;
  --navy:#2F435D;
  --navy-dark:#1F2E42;
  --blue:#1863DC;
  --white:#FFFFFF;
  --surface:#F4F7FA;
  --border:#E1E7EE;
  --ink:#2F435D;
  --ink-soft:#56657B;
  --pos:#1A7E5E;            /* 4,5:1 som text på vitt och mist */
  --neg:#B23B3B;
  --warn:#986419;           /* 4,5:1 som text på vitt och mist */
  --radius-pill:999px;
  --radius-card:6px;
  --radius-input:3px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Attributet hidden fungerar via webbläsarens egen [hidden]-regel, som har
   lägst prioritet. Varje egen regel med display slår ut den — därför måste
   den här stå kvar, annars syns element som ska vara dolda. */
[hidden]{display:none!important}
body{
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--ink); background:var(--surface);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.slab{font-family:'Roboto Slab','Roboto',serif}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- App shell ---------- */
.topbar{background:var(--navy);color:var(--white);padding:var(--s6) 0 var(--s8)}
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--s6)}
.lockup{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
/* Plats för den riktiga logotypen */
.lockup .logo{max-height:40px;width:auto;display:block}
/* Beta-markering, bredvid logotypen. */
.beta-tag{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan-on-navy);border:1px solid rgba(0,168,226,.55);
  border-radius:var(--radius-pill);padding:2px 9px;line-height:1.5;
  align-self:center;
}
.topbar h1{font-size:clamp(24px,3.2vw,34px);font-weight:900;letter-spacing:-.3px;line-height:1.1}
/* Lämna plats för vykontrollerna uppe till höger */
.topbar .wrap{padding-right:clamp(24px,26%,320px)}
.topbar .lede{margin-top:var(--s2);color:#C7D2E0;font-weight:300;max-width:60ch}
.eyebrow{
  font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:11px;
  color:var(--cyan-on-navy);margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s2);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--cyan)}
main{padding:var(--s8) 0 var(--s10)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-weight:500;font-size:15px;cursor:pointer;border:none;
  border-radius:var(--radius-pill);padding:12px 28px;transition:background .15s;
}
.btn-primary{background:var(--cyan-dark);color:#fff}
.btn-primary:hover{background:#00648A}
.btn-ghost{background:transparent;color:var(--cyan-dark);border:2px solid var(--cyan);padding:10px 22px;font-size:14px}
.btn-ghost:hover{background:var(--cyan-tint)}
.btn-sm{padding:8px 18px;font-size:13.5px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ---------- Upload ---------- */
.upload{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);
  padding:var(--s10) var(--s6);text-align:center;max-width:620px;margin:0 auto;
}
.upload h2{font-size:24px;font-weight:700;color:var(--navy);margin-bottom:var(--s2)}
.upload p{color:var(--ink-soft);margin-bottom:var(--s6)}
.dropzone{
  border:2px dashed var(--border);border-radius:var(--radius-card);
  padding:var(--s8) var(--s5);margin-bottom:var(--s5);transition:all .15s;background:var(--surface);
}
.dropzone.over{border-color:var(--cyan);background:var(--cyan-tint)}
.dropzone .hint{font-size:13.5px;color:var(--ink-soft);margin-top:var(--s4)}
input[type=file]{display:none}
.errbox{
  display:none;margin-top:var(--s4);text-align:left;
  background:#FDF3F3;border:1px solid #F0D6D6;border-left:4px solid var(--neg);
  border-radius:var(--radius-input);padding:var(--s3) var(--s4);color:#8C2F2F;font-size:14px;
}
.errbox strong{display:block;font-weight:700;margin-bottom:2px}

/* Betarad i analysvyn. Uppladdningsskärmen försvinner så fort en fil valts,
   och sidfoten döljs i helskärm — därför behövs informationen även här, där
   kunden faktiskt läser siffrorna. */
.beta-bar{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--cyan-tint);border:1px solid #BEE7F6;
  border-radius:var(--radius-card);
  padding:var(--s3) var(--s5);margin-bottom:var(--s5);
}
.beta-bar .beta-tag{flex:none;background:var(--white);color:var(--cyan-dark)}
.beta-bar p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0}
@media(max-width:640px){
  .beta-bar{align-items:flex-start;flex-direction:column;gap:var(--s2)}
}

/* Inläsningsvy. Ersätter uppladdningsrutan medan filen bearbetas, så att
   kunden ser att något händer även när webbläsaren står stilla en stund. */
.loading{
  border:2px dashed var(--border);border-radius:var(--radius-card);
  padding:var(--s8) var(--s5);margin-bottom:var(--s5);background:var(--surface);
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  text-align:left;
}
.spinner{
  width:26px;height:26px;flex:none;border-radius:50%;
  border:3px solid #CFE9F5;border-top-color:var(--cyan);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{display:flex;flex-direction:column;gap:2px}
.loading-text strong{
  font-family:'Roboto Slab',serif;font-size:15px;font-weight:700;color:var(--navy);
}
.loading-text span{font-size:13px;color:var(--ink-soft)}
@media(prefers-reduced-motion:reduce){
  .spinner{animation:none;border-top-color:var(--cyan);opacity:.7}
}

/* Beta-information på uppladdningsskärmen. Dämpad ton — den ska informera,
   inte skrämma. Cyan kantlinje knyter den till varumärket. */
.beta-note{
  margin-top:var(--s6);padding:var(--s4) var(--s5);
  background:var(--cyan-tint);border:1px solid #BEE7F6;
  border-left:3px solid var(--cyan);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
  text-align:left;
}
.beta-note h3{
  font-family:'Roboto Slab',serif;font-size:14px;font-weight:700;
  color:var(--navy);margin-bottom:var(--s1);
}
.upload .beta-note p{
  font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.55;
}

/* Exportinstruktion */
.howto{
  margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--border);
  text-align:left;
}
.howto h3{
  font-family:'Roboto',sans-serif;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);margin-bottom:var(--s4);
}
.howto ol{list-style:none;counter-reset:step;display:grid;gap:var(--s3)}
.howto li{
  counter-increment:step;position:relative;padding-left:34px;
  font-size:14.5px;color:var(--ink-soft);line-height:1.5;
}
.howto li::before{
  content:counter(step);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:var(--radius-pill);
  background:var(--cyan-tint);color:var(--cyan-dark);
  font-size:12px;font-weight:700;display:grid;place-items:center;
}
.howto li b{color:var(--navy);font-weight:500}
/* Matchar specificiteten hos .upload p i stället för att använda !important */
.upload .howto-note{
  margin:var(--s4) 0 0;
  font-size:13.5px;color:var(--ink-soft);
}

/* ---------- Controls ---------- */
.controls{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);
  margin-bottom:var(--s5);
  /* Ingen overflow:hidden: flervalens listor ska kunna hänga ut under
     kortet. Rundningen i nederkant sätts i stället på sista synliga raden. */
}
.activebar:not(:has(+ .line-note:not([hidden]))),
.line-note{border-radius:0 0 var(--radius-card) var(--radius-card)}
.controls-grid{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s8);padding:var(--s6)}
.ctl-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);margin-bottom:var(--s3);
}
.timeopt{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2);min-height:34px}
.timeopt:last-child{margin-bottom:0}
.timeopt input[type=radio]{width:17px;height:17px;accent-color:var(--cyan);cursor:pointer;flex:none}
.timeopt label{font-size:14.5px;cursor:pointer;min-width:74px;flex:none}
input[type=date],input[type=month],select,input[type=search]{
  border:1px solid #666;border-radius:var(--radius-input);padding:7px 10px;
  font-size:14px;background:#fff;color:#333;
}
input:disabled{background:var(--surface);color:#9AA6B5;border-color:var(--border)}
.range{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.range span{color:var(--ink-soft)}
.scope{display:grid;gap:var(--s3);align-content:start}
.scope-row{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:var(--s3)}
.scope-row label{font-size:13.5px;color:var(--ink-soft)}
.scope-row select{width:100%}
/* Andra rubriken i urvalet. Skiljer kvittofilter från radfilter. */
.ctl-label-sub{margin:var(--s2) 0 0}
.line-note{
  border-top:1px solid var(--border);background:var(--cyan-tint);
  padding:var(--s3) var(--s6);margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.5;
}
.line-note b{color:var(--navy);font-weight:500}

/* ---------- Flerval ---------- */
.ms{position:relative;min-width:0}
.ms-btn{
  width:100%;display:flex;align-items:center;gap:var(--s2);text-align:left;
  border:1px solid #666;border-radius:var(--radius-input);padding:7px 30px 7px 10px;
  font-size:14px;background:#fff;color:#333;cursor:pointer;position:relative;min-height:36px;
}
.ms-btn::after{
  /* Pil ritad med ramar: en bild hade krävt data: i säkerhetspolicyn */
  content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-6px;
  border-right:1.6px solid #333;border-bottom:1.6px solid #333;transform:rotate(45deg);
}
.ms-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:-2px}
.ms-btn:disabled{background:var(--surface);color:#9AA6B5;border-color:var(--border);cursor:default}
.ms-btn:disabled::after{border-color:#9AA6B5}
.ms-btn.ms-active{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.ms-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-panel{
  position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;min-width:260px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);
  padding:var(--s2);
}
.ms-search{width:100%;margin-bottom:var(--s2)}
.ms-list{max-height:300px;overflow:auto}
.ms-opt{display:flex;align-items:center;gap:var(--s2);padding:6px 8px;border-radius:3px;
        font-size:14px;cursor:pointer;color:var(--ink)}
.ms-opt:hover{background:var(--surface)}
.ms-opt input{width:16px;height:16px;accent-color:var(--cyan);flex:none;margin:0}
.ms-parent{font-weight:500}
.ms-d1{padding-left:30px}
.ms-d2{padding-left:52px}
.ms-d3{padding-left:74px}
.ms-foot{display:flex;align-items:center;justify-content:space-between;
         border-top:1px solid var(--border);margin-top:var(--s2);padding-top:var(--s2)}
.ms-count{font-size:12.5px;color:var(--ink-soft)}

/* File period panel */
.period{
  background:var(--cyan-tint);border:1px solid #BEE7F6;border-radius:var(--radius-card);
  padding:var(--s5);min-width:250px;align-self:start;
}
.period .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cyan-dark);margin-bottom:var(--s2)}
.period .v{font-family:'Roboto Slab',serif;font-weight:700;font-size:16px;color:var(--navy);line-height:1.35}
.period .m{font-size:13px;color:var(--ink-soft);margin-top:var(--s2)}
.period .m b{color:var(--navy);font-weight:500}

.activebar{
  border-top:1px solid var(--border);background:var(--surface);
  padding:var(--s3) var(--s6);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-soft);
}
.tag{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:3px 12px;font-size:13px;color:var(--navy);font-weight:500;
}
.activebar .spacer{margin-left:auto}

/* ---------- Nav ---------- */
nav.tabs{display:flex;gap:var(--s1);margin-bottom:var(--s5);flex-wrap:wrap;border-bottom:1px solid var(--border)}
.tab{
  background:transparent;border:none;border-bottom:3px solid transparent;
  padding:11px 18px;font-size:14.5px;font-weight:500;color:var(--ink-soft);cursor:pointer;
  margin-bottom:-1px;transition:color .15s,border-color .15s;
}
.tab:hover{color:var(--navy)}
.tab[aria-selected=true]{color:var(--navy);font-weight:700;border-bottom-color:var(--cyan)}
.panel{display:none}
.panel.active{display:block}

/* ---------- Cards & KPI ---------- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s6);margin-bottom:var(--s5)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.card-head h3{font-size:17px;font-weight:700;color:var(--navy)}
.card-head .sub{font-size:13.5px;color:var(--ink-soft);font-weight:400;margin-top:2px}

/* Sex nyckeltal per rad. Med auto-fit bröts de 5+1 och det sista hamnade
   ensamt på en rad, vilket såg ut som ett fel. Fasta kolumnantal som delar
   sex jämnt ger alltid hela rader. */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4);margin-bottom:var(--s5)}
@media(max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.kpis{grid-template-columns:repeat(2,1fr)}}
/* Kvittofliken har fyra nyckeltal och behöver fyra kolumner för att fylla raden */
.kpis-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.kpis-4{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--s5)}
.kpi.lead{border-left:3px solid var(--cyan)}
.kpi .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-soft);margin-bottom:var(--s2)}
/* Etiketter med förklaring vid hovring markeras diskret */
.kpi .k[title]{cursor:help;border-bottom:1px dotted var(--border);display:inline-block;padding-bottom:1px}
.kpi .v{font-family:'Roboto Slab',serif;font-weight:700;font-size:30px;line-height:1.1;color:var(--navy);letter-spacing:-.5px}
.kpi .m{font-size:13px;color:var(--ink-soft);margin-top:var(--s2)}

/* Sekundära nyckeltal: samma struktur, lägre visuell tyngd */
.kpis-sub .kpi{background:transparent;border-style:dashed}
.kpis-sub .kpi .v{font-size:22px}

/* Förändring mot föregående period. Pilen visar riktning, färgen om det är bra. */
.delta{font-weight:500}
.delta.up::before{content:"▲ ";font-size:9px;vertical-align:1px}
.delta.down::before{content:"▼ ";font-size:9px;vertical-align:1px}
.delta.good{color:var(--pos)}
.delta.bad{color:var(--neg)}
.delta.warn{color:var(--warn)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:var(--s5)}
.chart-box{position:relative;height:330px}
.chart-box.tall{height:380px}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;padding:10px 12px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-soft);border-bottom:2px solid var(--border);white-space:nowrap;
}
th.num{text-align:right}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--navy)}
th.sorted{color:var(--cyan-dark)}
th .arrow{opacity:.55;font-size:10px;margin-left:3px}
td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
td.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface)}
tbody tr:last-child td{border-bottom:none}
.rank{color:var(--ink-soft);font-size:12.5px;width:34px;font-variant-numeric:tabular-nums}
.name{font-weight:500;color:var(--navy)}
.name small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft)}
/* Perioder som filen bara delvis täcker tonas ned */
tbody tr.muted td{background:var(--surface)}
tbody tr.muted .name{color:var(--ink-soft)}
.pos{color:var(--pos);font-weight:500}
.neg{color:var(--neg);font-weight:500}
.empty{padding:var(--s8);text-align:center;color:var(--ink-soft)}
.empty strong{display:block;color:var(--navy);font-family:'Roboto Slab',serif;font-size:16px;margin-bottom:var(--s2)}

.pill{display:inline-block;border-radius:var(--radius-pill);padding:2px 10px;font-size:12px;font-weight:500;white-space:nowrap}
.pill-good{background:#E3F4EE;color:#12654A}
.pill-mid{background:#FDF3E3;color:#8A5A12}
.pill-low{background:#FBEAEA;color:#8C2F2F}

/* ---------- Insights ---------- */
.note{
  border:1px solid var(--border);border-left:4px solid var(--cyan);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
  padding:var(--s4) var(--s5);margin-bottom:var(--s3);background:var(--white);
}
.note.good{border-left-color:var(--pos)}
.note.warn{border-left-color:var(--warn)}
.note h4{font-family:'Roboto Slab',serif;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:var(--s1)}
.note p{font-size:14px;color:var(--ink-soft)}
.note p b{color:var(--navy);font-weight:500}

.searchrow{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.searchrow input[type=search]{min-width:210px}
.count{font-size:13px;color:var(--ink-soft)}

footer{border-top:1px solid var(--border);padding:var(--s6) 0;color:var(--ink-soft);font-size:13px;background:var(--white)}
footer strong{color:var(--navy);font-weight:500}
.vishidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:1080px){
  .controls-grid{grid-template-columns:1fr}
  .period{min-width:0}
}
@media(max-width:640px){
  .wrap{padding:0 var(--s4)}
  .grid2{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi .v{font-size:24px}
  .scope-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Vykontroller ----------
   Flyter över innehållet uppe till höger så att helskärm alltid går att nå,
   även innan en fil laddats upp. Ljus platta med hårfin ram gör att den
   fungerar mot både det mörkblå sidhuvudet och den ljusa ytan nedanför. */
.viewbar{
  position:fixed;top:12px;right:12px;z-index:60;
  display:flex;gap:var(--s2);
}
.btn-view{
  background:rgba(255,255,255,.94);color:var(--navy);
  border:1px solid rgba(47,67,93,.18);
  padding:7px 14px;font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;
}
.btn-view:hover{background:#fff;border-color:var(--cyan)}
.btn-view svg{width:13px;height:13px;flex:none;display:block}
/* Ikonen styrs av klassen på body, inte av attributet hidden. SVG-element
   saknar egenskapen hidden, så att sätta den i JavaScript gör ingenting. */
#icoCollapse{display:none}
.is-fullscreen #icoExpand{display:none}
.is-fullscreen #icoCollapse{display:block}
@media(max-width:640px){
  .viewbar{top:8px;right:8px}
  .btn-view{padding:6px 11px;font-size:12px}
}
@media print{.viewbar{display:none}}

/* ---------- Helskärm ----------
   I helskärm ska ytan gå till innehållet. Sidhuvudet krymper till en rad
   och kontrollerna följer med när man rullar, så filtren alltid är nära. */
.is-fullscreen .topbar{padding:var(--s3) 0}
.is-fullscreen .topbar h1{font-size:19px}
.is-fullscreen .topbar .lede,
.is-fullscreen .topbar .eyebrow{display:none}
.is-fullscreen .lockup{margin-bottom:var(--s2)}
.is-fullscreen .lockup .logo{max-height:26px}
.is-fullscreen main{padding-top:var(--s5)}
.is-fullscreen footer{display:none}
.is-fullscreen .controls{
  position:sticky;top:0;z-index:20;
  box-shadow:0 1px 0 var(--border);
}
@media(max-width:640px){
  .is-fullscreen .controls{position:static}
}