/* ==========================================================================
   Bookkeeper — Almanackan
   --------------------------------------------------------------------------
   Appen är en årsplanerare. Allt som ska göras har ett datum, och datumen är
   den enda ordning som betyder något — därför är det datumen som navigerar,
   inte en meny över funktioner.

   Två saker vägras med flit:
     · branschens kontrollpanel med ikonlist och nyckeltalskort, som visar
       siffror utan att visa vad man ska göra med dem
     · kalenderappens rutnät av tomma dagrutor, som visar *när* men aldrig
       *vad som är kvar att bestämma*
   Månaden ritas som en daterad beslutslista. Aldrig som ett rutnät.

   Tre krav från användaren styr varje regel här nedanför:
     1. Lätt att läsa. Läsfältet är akromatiskt; färgen bor i band, flikar och
        markörer och hamnar aldrig under brödtext.
     2. Ställbar teckenstorlek. Allt är i rem, också avstånden, så layouten
        spricker inte när någon drar upp storleken.
     3. Ljust, mörkt och automatiskt. Samma plan tryckt i två ljushetar.
   ========================================================================== */

/* ------------------------------------------------------------- typsnitt --
   Självhostade, båda under SIL Open Font License 1.1. Bricolage Grotesque bär
   månadsnamn och rubriker — variabel i bredd och optisk storlek, karaktär utan
   högtidlighet. Archivo bär all löptext och alla siffror; den har riktiga
   tabulära figurer, vilket en beloppskolumn kräver. Martian Mono används bara
   till referenskoder.                                                       */

@font-face {
  font-family: "Bricolage"; font-style: normal; font-weight: 400 800;
  font-stretch: 75% 100%; font-display: swap;
  src: url("/static/fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage"; font-style: normal; font-weight: 400 800;
  font-stretch: 75% 100%; font-display: swap;
  src: url("/static/fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700;
  font-stretch: 62% 125%; font-display: swap;
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700;
  font-stretch: 62% 125%; font-display: swap;
  src: url("/static/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Martian Mono"; font-style: normal; font-weight: 400 700;
  font-stretch: 75% 112.5%; font-display: swap;
  src: url("/static/fonts/martianmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono"; font-style: normal; font-weight: 400 700;
  font-stretch: 75% 112.5%; font-display: swap;
  src: url("/static/fonts/martianmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* =============================================================== paletten */

:root {
  /* Ljust läge — planerarens papper, neutralt vitt. Inte gulnat: en
     väggplanerare trycks på starkt vitt, och gult papper gör texten svagare. */
  --grund:      #FAFAF8;
  --ark:        #FFFFFF;
  --ark-djup:   #F1F3F2;
  --text:       #17181A;
  --text-svag:  #4F565C;
  --text-blek:  #616970;
  --linje:      #E2E5E7;
  --linje-stark:#C4CACE;

  /* Fyra planerarfärger. De äger band, flikar och markörer — aldrig
     brödtext, och aldrig som fyllning under något man ska läsa länge. */
  --rod:        #B92626;   /* röd dag: hårt datum, passerat */
  --rod-yta:    #FBEAEA;
  --gron:       #17614B;   /* klart */
  --gron-yta:   #E3F1EB;
  --amber:      #9C5A00;   /* pågår, väntar på dig */
  --amber-yta:  #FCF0DC;
  --bla:        #2A5A8C;   /* neutral flik, vecka, primärhandling */
  --bla-yta:    #E5EDF6;

  /* Överstrykningspennan. Märker i dag och ingenting annat. */
  --penna:        #FFE27A;
  --penna-text:   #17181A;
  --penna-blend:  multiply;
  --penna-styrka: .85;

  --pa-bla:     #FFFFFF;   /* text ovanpå en blå yta */
  --sudd:       #0B0D0F;   /* bakgrundstonen bakom en modal */

  --skugga: 0 1px 1px rgba(23, 24, 26, .05), 0 3px 8px rgba(23, 24, 26, .06);
  --skugga-hog: 0 3px 6px rgba(23, 24, 26, .12), 0 10px 20px rgba(23, 24, 26, .16);

  color-scheme: light;
}

/* Automatiskt läge följer systemet, om användaren inte valt själv. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljus"]) {
    --grund:      #121417;
    --ark:        #1A1D21;
    --ark-djup:   #23272C;
    --text:       #ECEFF1;
    --text-svag:  #B3BAC1;
    --text-blek:  #8D969E;
    --linje:      #2C3137;
    --linje-stark:#414950;

    --rod:        #FF8A85;
    --rod-yta:    #36201F;
    --gron:       #5FD7A8;
    --gron-yta:   #162D25;
    --amber:      #FFB74D;
    --amber-yta:  #322616;
    --bla:        #86B4EA;
    --bla-yta:    #1A2733;

    --penna:        #E8BE3A;
    --penna-text:   #FFEBA6;
    --penna-blend:  normal;
    --penna-styrka: .3;

    --pa-bla:     #101419;
    --sudd:       #000000;

    --skugga: 0 1px 1px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .35);
    --skugga-hog: 0 3px 6px rgba(0, 0, 0, .5), 0 10px 20px rgba(0, 0, 0, .55);

    color-scheme: dark;
  }
}
/* Valet i topplisten vinner över systemet, åt båda hållen. */
:root[data-tema="mork"] {
  --grund:      #121417;
  --ark:        #1A1D21;
  --ark-djup:   #23272C;
  --text:       #ECEFF1;
  --text-svag:  #B3BAC1;
  --text-blek:  #8D969E;
  --linje:      #2C3137;
  --linje-stark:#414950;

  --rod:        #FF8A85;
  --rod-yta:    #36201F;
  --gron:       #5FD7A8;
  --gron-yta:   #162D25;
  --amber:      #FFB74D;
  --amber-yta:  #322616;
  --bla:        #86B4EA;
  --bla-yta:    #1A2733;

  --penna:        #E8BE3A;
  --penna-text:   #FFEBA6;
  --penna-blend:  normal;
  --penna-styrka: .3;

  --pa-bla:     #101419;
  --sudd:       #000000;

  --skugga: 0 1px 1px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .35);
  --skugga-hog: 0 3px 6px rgba(0, 0, 0, .5), 0 10px 20px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* ================================================================== mått ==
   Allt i rem. Också avstånden: drar någon upp teckenstorleken ska luften
   växa med texten, annars blir raderna trängre ju större texten blir.       */

:root {
  --t-micro:  0.75rem;
  --t-liten:  0.875rem;
  --t-brod:   1rem;
  --t-lead:   1.125rem;
  --t-rubrik: 1.3125rem;
  --t-stor:   1.625rem;
  --t-manad:  3rem;

  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  --radie: 0.5rem;
  --radie-s: 0.3125rem;

  --rail: 15rem;
  --hjalp: 20rem;
  --topp: 3.25rem;

  --display: "Bricolage", "Archivo", system-ui, sans-serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, Consolas, monospace;

  /* Överstrykningen dras som med en penna: snabb start, mjukt slut. */
  --drag: 380ms cubic-bezier(.16, 1, .3, 1);
  --snabb: 140ms ease-out;

  --skala: 1;
}

/* Teckenstorleken. 100 % är webbläsarens egen inställning, så den som redan
   ställt upp texten i systemet får behålla det — kontrollen i topplisten
   skalar ovanpå i stället för att skriva över. */
html { font-size: calc(100% * var(--skala)); -webkit-text-size-adjust: 100%; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 var(--t-brod)/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Webbläsarens egna ytor hör också till planeraren. */
::selection { background: var(--penna); color: var(--penna-text); }
:focus-visible { outline: 2px solid var(--bla); outline-offset: 2px; border-radius: var(--radie-s); }
* { scrollbar-width: thin; scrollbar-color: var(--linje-stark) transparent; }
*::-webkit-scrollbar { width: 0.75rem; height: 0.75rem; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--linje-stark); border-radius: 1rem;
  border: 0.25rem solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-blek); background-clip: content-box; }

a { color: var(--bla); text-underline-offset: 0.1875rem; }
/* Bara länkar som ser ut som länkar. Utan :not-listan slog den här regeln ut
   knapparnas egen textfärg på hover, och en primärknapp fick 1,9:1. */
a:not([class]):hover, a.linklike:hover { color: var(--text); }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.15; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }
code { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; }

/* Etikett — versaler i liten grad, används där ett fält namnges. */
.etikett, .nav-label, .st-label, .kont-label, .sug-label,
.fak-rad-rubrik, .kredit-rubrik, .lon-rad-huvud, .rad-huvud,
.mall-fh-huvud, .report-head, .utfall__rubrik {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-svag);
}

/* ============================================================== topplisten
   Märket, bolaget, och de två kontroller som är krav och inte inställningar:
   teckenstorlek och ljusläge. De ligger framme därför att en inställning man
   måste leta rätt på inte är tillgänglig.                                   */

#toppbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  min-height: var(--topp);
  padding: var(--s2) var(--s4);
  background: var(--ark);
  border-bottom: 1px solid var(--linje);
}
.marke {
  display: flex; align-items: center; gap: var(--s2); flex: none;
  font-family: var(--display); font-weight: 700; font-size: var(--t-brod);
  letter-spacing: -.01em; color: var(--text); text-decoration: none;
}
.marke img { display: block; width: 1.5rem; height: 1.5rem; }
.topp-bolag {
  font-size: var(--t-liten); color: var(--text-svag);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: var(--s3); border-left: 1px solid var(--linje);
}
.topp-hoger { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* Två segmenterade kontroller i samma form, så att de läses som ett par. */
.segment {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--linje-stark);
  border-radius: var(--radie);
  overflow: hidden; background: var(--ark);
}
.segment button {
  appearance: none; border: 0; background: transparent; color: var(--text-svag);
  font: 600 var(--t-micro)/1 var(--sans);
  padding: 0.45rem 0.6rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.25rem;
  transition: background var(--snabb), color var(--snabb);
}
.segment button + button { border-left: 1px solid var(--linje); }
.segment button:hover { background: var(--ark-djup); color: var(--text); }
.segment button[aria-pressed="true"] { background: var(--bla-yta); color: var(--bla); }
.segment button svg { display: block; }
/* A− och A+ : bokstaven bär storleken, tecknet bär riktningen, och de ska
   sitta tätt ihop som ett par — inte som två ord. */
.segment .a-stor, .segment .a-liten { line-height: 1; }
.segment .a-stor { font-size: 1.35em; margin-right: -0.1rem; }
.segment .a-liten { font-size: 0.9em; margin-right: -0.05rem; }
.segment button:disabled { opacity: .45; cursor: not-allowed; }

/* ======================================================== flikregistret ==
   Navigationen är ett flikregister: färgade indexflikar med bokstavliga namn.
   Ingen ikon bär betydelse ensam — en flik heter vad den heter.             */

#sidebar {
  position: fixed; inset: var(--topp) auto 0 0;
  width: var(--rail);
  background: var(--grund);
  border-right: 1px solid var(--linje);
  display: flex; flex-direction: column;
  overflow-y: auto; padding-bottom: var(--s5);
  z-index: 30;
}

.nav-group { padding: var(--s4) 0 var(--s2); }
.nav-group + .nav-group { border-top: 1px solid var(--linje); }
.nav-label { display: block; padding: 0 var(--s4) var(--s2); }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--s2);
  padding: 0.45rem var(--s3) 0.45rem calc(var(--s4) + 0.25rem);
  margin: 0 var(--s2) 0.125rem;
  border-radius: var(--radie-s);
  color: var(--text); text-decoration: none;
  font-size: var(--t-liten); font-weight: 500;
  transition: background var(--snabb);
}
/* Flikfärgen — indexremsan i vänsterkanten. */
.nav-item::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem;
  width: 0.1875rem;
  background: var(--flik, var(--linje-stark));
}
.nav-item:hover { background: var(--ark-djup); }
.nav-item.active { background: var(--ark); border: 1px solid var(--linje); font-weight: 700; }
.nav-item.active::before { top: 0.2rem; bottom: 0.2rem; width: 0.25rem; }

.nav-sub {
  display: block;
  padding: 0.3rem var(--s3) 0.3rem calc(var(--s4) + var(--s4));
  margin: 0 var(--s2);
  border-radius: var(--radie-s);
  color: var(--text-svag); text-decoration: none; font-size: var(--t-liten);
}
.nav-sub:hover { background: var(--ark-djup); color: var(--text); }
.nav-sub.active { color: var(--text); font-weight: 700; background: var(--ark-djup); }

.nav-badge {
  margin-left: auto;
  font-size: var(--t-micro); font-weight: 700;
  min-width: 1.25rem; text-align: center;
  padding: 0.05rem 0.35rem; border-radius: 1rem;
  background: var(--ark-djup); color: var(--text-svag);
}
.nav-badge:empty { display: none; }
.nav-badge.warn { background: var(--rod); color: var(--ark); }

.sidebar-foot {
  margin-top: auto; padding: var(--s4);
  font-size: var(--t-micro); color: var(--text-blek); word-break: break-all;
}

/* ============================================================== arbetsytan */

#main { min-width: 0; margin-left: var(--rail); padding: var(--s5) var(--s5) var(--s8); }
body.har-upplysning #main { margin-right: var(--hjalp); }
.view { display: none; }
.view.active { display: block; animation: kommain 260ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes kommain { from { opacity: 0; transform: translateY(0.375rem); } }

/* Arket. Ett uppslag i planeraren. */
.blankett {
  background: var(--ark);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  max-width: 78rem;
}

/* ------------------------------------------------------------- sidhuvudet */

.blanketthuvud {
  display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--linje);
}
.bh-marke { order: 2; display: flex; flex-direction: column; gap: 0.125rem; }
.bh-nr { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; letter-spacing: -.02em; color: var(--text-blek); }
.bh-namn { order: 1; flex: 1 1 20rem; min-width: 0; }
.bh-titel {
  font-family: var(--display);
  font-size: var(--t-stor); font-weight: 700; font-stretch: 92%;
  letter-spacing: -.015em; line-height: 1.08; text-wrap: balance;
}
.bh-period { margin-top: 0.25rem; font-size: var(--t-liten); color: var(--text-svag); }
.bh-identitet { order: 3; margin-left: auto; text-align: right; padding-left: var(--s5); }
.bh-identitet .namn { font-weight: 600; font-size: var(--t-liten); }
.bh-identitet .orgnr { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; color: var(--text-blek); }

/* ----------------------------------------------------------- avsnittsflik
   En sektionsrubrik är en flik: färgremsan namnger avsnittet, texten säger
   vad det är.                                                               */

.balk {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s5) var(--s5) var(--s2);
  font-family: var(--display);
  font-size: var(--t-rubrik); font-weight: 700; font-stretch: 92%;
  letter-spacing: -.01em;
}
.balk::before {
  content: ""; flex: none;
  width: 0.1875rem; height: 1.1em;
  background: var(--flik, var(--bla));
}
.balk .balk-bok { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; color: var(--text-blek); font-weight: 400; }
.balk .balk-hoger { margin-left: auto; font-family: var(--sans); font-size: var(--t-liten); font-weight: 400; color: var(--text-svag); }
.underbalk { padding: var(--s4) var(--s5) var(--s2); font-family: var(--display); font-size: var(--t-brod); font-weight: 700; }

.avsnitt { padding: 0 var(--s5) var(--s5); }
.kortgrupp { display: contents; }
.card { background: var(--ark); border: 1px solid var(--linje); border-radius: var(--radie); padding: var(--s4); margin-bottom: var(--s4); }
.view-head { margin-bottom: var(--s4); }
.view-head h1 { font-size: var(--t-stor); }
.lead { max-width: 68ch; color: var(--text-svag); font-size: var(--t-lead); }
.hint { max-width: 70ch; font-size: var(--t-liten); color: var(--text-svag); margin: var(--s2) 0 0; }
.muted { color: var(--text-blek); }
.mt { margin-top: var(--s4); }
.mt-s { margin-top: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s4); }

/* ================================================================ årsbandet
   Tolv månadsceller kant i kant. Bandet är appens ryggrad: det svarar på var
   du är i året innan du hunnit läsa något.                                  */

.arsband {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  border: 1px solid var(--linje); border-radius: var(--radie);
  overflow: hidden; background: var(--ark);
}
.arsmanad {
  position: relative;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: var(--s3) var(--s2);
  border-right: 1px solid var(--linje);
  background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  min-height: 4.75rem;
  transition: background var(--snabb);
}
.arsmanad:last-child { border-right: 0; }
.arsmanad:hover { background: var(--ark-djup); }
.arsmanad__namn { font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-svag); }
.arsmanad__kvar { font-size: var(--t-liten); font-weight: 700; }
.arsmanad__kvar.vantar { color: var(--amber); }
/* Dagslinjalen. Prickarna ligger där i månaden datumet faktiskt infaller, så
   bandet säger något mer än ett antal: en prick långt till höger betyder att
   du har hela månaden på dig. */
.arsmanad__linjal {
  position: relative; display: block;
  margin-top: auto; height: 0.5rem;
  border-top: 1px solid var(--linje);
  padding-top: 0.25rem;
}
.prick {
  position: absolute; top: 0.25rem;
  width: 0.375rem; height: 0.375rem; margin-left: -0.1875rem;
  border-radius: 50%; background: var(--rod);
}
.prick.klar { background: var(--gron); }
/* Överstrykningen — bara i dag, ingenting annat. */
/* Pennstrecket. En överstrykningspenna lägger färg ovanpå texten utan att
   dölja den — därför ett halvgenomskinligt band som multipliceras in, inte en
   fylld yta. Bandet slutar innan cellens kanter och har mjuka ändar.        */
.arsmanad.nu, .datumrad.idag { position: relative; }
.arsmanad.nu::before, .datumrad.idag::before {
  content: ""; position: absolute; inset: 0.3rem 0;
  background: var(--penna);
  border-radius: 0.125rem 0.375rem 0.25rem 0.5rem / 0.5rem 0.25rem 0.375rem 0.125rem;
  mix-blend-mode: var(--penna-blend, multiply);
  opacity: var(--penna-styrka, .85);
  pointer-events: none;
  z-index: 0;
}
.arsmanad.nu > *, .datumrad.idag > * { position: relative; z-index: 1; }
.arsmanad.nu::after { content: none; }
.arsmanad.passerad { color: var(--text-blek); }
.arsmanad.passerad .arsmanad__namn { color: var(--text-blek); }

/* ============================================================= datumlistan
   Månaden som en daterad beslutslista. Ett rutnät av dagrutor visar när;
   det här visar vad som är kvar att bestämma.                               */

.manadshuvud {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
}
.manadsnamn {
  font-family: var(--display);
  font-size: var(--t-manad); font-weight: 800; font-stretch: 88%;
  letter-spacing: -.03em; line-height: .95;
}
.manadsnamn .ar { color: var(--text-blek); font-weight: 400; }
.manadsstatus { font-size: var(--t-liten); color: var(--text-svag); }

/* ------------------------------------------------------------ handlingarna
   Ett verb, ett antal och en väg vidare. Inte ett nyckeltal: en siffra utan
   knapp bredvid sig säger ingenting om vad man ska göra med den, och det är
   precis den kontrollpanel den här sidan vägrar vara.                       */

.handlingar { display: flex; flex-direction: column; gap: var(--s3); }
.handling {
  position: relative;
  border: 1px solid var(--linje); border-radius: var(--radie);
  padding: var(--s4);
  background: var(--ark);
}
.handling::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 0.1875rem;
  border-radius: var(--radie) var(--radie) 0 0;
  background: var(--flik, var(--linje-stark));
}
.handling--vantar { --flik: var(--amber); }
.handling--fel    { --flik: var(--rod); }
.handling--klar   { --flik: var(--gron); }
.handling--klar .handling__antal { color: var(--gron); }
.handling__topp { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s1); }
.handling__antal {
  font-family: var(--display); font-size: 2rem; font-weight: 800;
  font-stretch: 88%; line-height: 1; letter-spacing: -.03em;
}
.handling--fel .handling__antal { color: var(--rod); }
.handling--vantar .handling__antal { color: var(--amber); }
.handling__enhet { font-weight: 600; color: var(--text-svag); }
.handling__varfor { margin: var(--s2) 0 var(--s3); font-size: var(--t-liten); color: var(--text-svag); }
.handling__knappar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.datumlista { display: flex; flex-direction: column; }
.datumrad {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--s3); align-items: center;
  padding: var(--s3);
  border-bottom: 1px solid var(--linje);
  border-radius: var(--radie-s);
  transition: background var(--snabb);
}
.datumlista .datumrad:last-child { border-bottom: 0; }
.datumrad:hover { background: var(--ark-djup); }
/* Texten byter inte färg under pennan. Det är hela poängen med en penna. */
.datumrad.klar .datumrad__vad { color: var(--text-blek); text-decoration: line-through; text-decoration-thickness: 1px; }
.datumrad.forfallen .datumrad__dag { color: var(--rod); }

.datumrad__dag { text-align: center; line-height: 1.12; }
.datumrad__siffra { display: block; font-family: var(--display); font-weight: 800; font-size: var(--t-lead); }
.datumrad__man, .datumrad__veckodag {
  display: block; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-svag);
}
.datumrad__veckodag { font-weight: 400; }

.datumrad__vad { font-weight: 600; min-width: 0; }
.datumrad__under { font-size: var(--t-liten); color: var(--text-svag); font-weight: 400; }
.datumrad__hoger { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
/* Raden med primärhandlingen får två våningar: den namngivna kontrollen tar
   plats, och rubriken ska inte brytas mitt i ett periodnamn för att ge den
   utrymme. */
.datumrad--primar { grid-template-columns: 3.5rem minmax(0, 1fr); }
.datumrad--primar .datumrad__hoger { grid-column: 2; margin-top: var(--s2); }

/* Bocken visar status, den är inte en kontroll: raden bockas av genom att
   arbetet faktiskt görs, och en cirkel man kan klicka på men som inte gör
   något lovar en handling som inte finns. */
.bock {
  border: 1.5px solid var(--linje-stark);
  background: transparent; color: var(--gron);
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
.bock svg { width: 0.85rem; height: 0.85rem; }
.bock path {
  fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 0;
  animation: drastreck var(--drag) both;
}
@keyframes drastreck { from { stroke-dashoffset: 24; } }
.bock[data-klar="1"], .bock[aria-pressed="true"] {
  background: var(--gron); border-color: var(--gron); color: var(--ark);
}
/* Den här går att trycka på, och ska se ut så. */
.bock--gor {
  width: 2rem; height: 2rem; cursor: pointer;
  border-width: 2px; border-style: dashed;
  transition: border-color var(--snabb), background var(--snabb);
}
.bock--gor svg { opacity: 0; transition: opacity var(--snabb); }
.bock--gor:hover { border-style: solid; border-color: var(--gron); background: var(--gron-yta); }
.bock--gor:hover svg { opacity: .5; }
.bock--gor[aria-pressed="true"] { border-style: solid; cursor: default; }
.bock--gor[aria-pressed="true"] svg { opacity: 1; }

/* Listans första obockade rad bär primärhandlingen. En bock utan text säger
   inte vad den gör, så den här har både ringen och ordet. */
.bock--stor {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--gron); border-radius: var(--radie);
  background: var(--gron-yta); color: var(--gron);
  font: 600 var(--t-liten)/1.2 var(--sans);
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  cursor: pointer;
  transition: background var(--snabb);
}
.bock--stor:hover { background: var(--gron); color: var(--ark); }
.bock--stor:hover .bock--gor { border-color: currentColor; }
.bock--stor .bock--gor {
  width: 1.5rem; height: 1.5rem; border-width: 1.5px; pointer-events: none;
}
.bock--stor:hover .bock--gor svg { opacity: 1; }


/* ======================================================== härledningen ==
   Raden fälls upp och visar vad siffran består av.                          */

.utfall { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--drag); }
.utfall > div { overflow: hidden; }
.utfall.oppen { grid-template-rows: 1fr; }
.utfall__inre { margin: 0 var(--s5) var(--s4); padding: var(--s4); background: var(--ark-djup); border-radius: var(--radie); }
.utfall__rubrik { margin-bottom: var(--s3); }

@media (prefers-reduced-motion: reduce) {
  .view.active, .modal { animation: none; }
  .utfall { transition: none; }
  .bock path { animation: none; }
}

/* ============================================================== kontroller */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  font: 600 var(--t-liten)/1.2 var(--sans);
  color: var(--text); background: var(--ark);
  border: 1px solid var(--linje-stark); border-radius: var(--radie);
  padding: 0.5rem 0.875rem; cursor: pointer; text-decoration: none;
  transition: background var(--snabb), border-color var(--snabb), transform var(--snabb);
}
.btn:hover { background: var(--ark-djup); border-color: var(--text-blek); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { color: var(--text-blek); border-color: var(--linje); background: var(--ark-djup); cursor: not-allowed; }
.btn-primary { background: var(--bla); border-color: var(--bla); color: var(--pa-bla); }
.btn-primary:hover { background: var(--bla); border-color: var(--bla); filter: brightness(1.1); }
.btn-danger-ghost { color: var(--rod); border-color: var(--rod); background: transparent; }
.btn-danger-ghost:hover { background: var(--rod-yta); border-color: var(--rod); }
.btn-sm { padding: 0.3rem 0.55rem; font-size: var(--t-micro); }
.btn-big { padding: 0.7rem 1.2rem; font-size: var(--t-brod); }

.underskrift {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--linje);
  background: var(--ark-djup);
  border-radius: 0 0 var(--radie) var(--radie);
}
.underskrift__text { max-width: 46ch; }
.underskrift__text p { font-size: var(--t-liten); color: var(--text-svag); margin: 0.25rem 0 0; }

.linklike { background: none; border: 0; padding: 0; color: var(--bla); font: inherit; font-size: var(--t-liten); text-decoration: underline; text-underline-offset: 0.1875rem; cursor: pointer; }
.copy-btn { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; border: 1px solid var(--linje-stark); border-radius: var(--radie-s); background: var(--ark); padding: 0.15rem 0.4rem; cursor: pointer; color: inherit; }
.copy-btn:hover { background: var(--ark-djup); }

/* ------------------------------------------------------------------- fält */

input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="password"], input[type="search"], input[type="url"], input[type="month"],
select, textarea {
  font: 400 var(--t-brod)/1.4 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--ark);
  border: 1px solid var(--linje-stark); border-radius: var(--radie-s);
  padding: 0.5rem 0.625rem; width: 100%;
  caret-color: var(--bla);
  transition: border-color var(--snabb), box-shadow var(--snabb);
}
input:hover, select:hover, textarea:hover { border-color: var(--text-blek); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--bla);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bla) 24%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--text-blek); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: var(--ark-djup); color: var(--text-blek); }
textarea { resize: vertical; min-height: 4.5rem; }
select {
  appearance: none; padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.95rem center, right 0.6rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--bla); margin: 0; flex: none; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3) var(--s4); }
.form-grid label, .falt {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-svag);
}
.form-grid label input, .form-grid label select, .form-grid label textarea,
.falt input, .falt select, .falt textarea {
  font-size: var(--t-brod); font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--text);
}
.checkline { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-liten); color: var(--text); padding: 0.15rem 0; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* --------------------------------------------------------------- märkningar */

.chip, .pill, .markering, .doc-chip, .src-chip, .step-tag, .kont-tag, .provider-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: var(--t-micro); font-weight: 600;
  border: 1px solid var(--linje-stark); border-radius: 1rem;
  color: var(--text-svag); background: var(--ark);
  padding: 0.15rem 0.55rem; white-space: nowrap; text-decoration: none;
  cursor: default;
}
button.chip, a.chip, .month-pill { cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip:hover, .doc-chip:hover, .src-chip:hover { background: var(--ark-djup); color: var(--text); }
.chip.active { background: var(--bla); border-color: var(--bla); color: var(--pa-bla); }
.pill-ok, .chip.ok, .markering.ok { border-color: var(--gron); background: var(--gron-yta); color: var(--gron); }
.pill-warn, .chip.warn, .markering.warn { border-color: var(--rod); background: var(--rod-yta); color: var(--rod); }
.pill-info, .markering.stampl { border-color: var(--bla); background: var(--bla-yta); color: var(--bla); }
.pill.pending, .markering.vantar { border-color: var(--amber); background: var(--amber-yta); color: var(--amber); }
.pill.ignored { opacity: .7; }
.kont-flagga {
  display: block; border: 1px solid var(--amber); background: var(--amber-yta);
  color: var(--amber); border-radius: var(--radie-s);
  padding: var(--s2) var(--s3); font-size: var(--t-liten); margin-top: var(--s2);
}
.stampel {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--bla); background: var(--bla-yta); color: var(--bla);
  border-radius: var(--radie-s); padding: 0.2rem 0.5rem;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ============================================================== tabeller */

.table-wrap { overflow-x: auto; border: 1px solid var(--linje); border-radius: var(--radie); background: var(--ark); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-liten); }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ark); color: var(--text-svag);
  border-bottom: 1px solid var(--linje);
  text-align: left; padding: 0.55rem var(--s3);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
tbody td { border-bottom: 1px solid var(--linje); padding: 0.55rem var(--s3); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--ark-djup); }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.kod, .kod { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; letter-spacing: -.02em; }
td.overdue, .overdue { color: var(--rod); font-weight: 600; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
tr.moms-sum td, tr.summa td { border-top: 1px solid var(--linje-stark); font-weight: 700; }
tr.sparrad td, .sparrad { color: var(--text-blek); background: var(--ark-djup); }

/* ================================================================ notiser */

.result-panel {
  display: none;
  border: 1px solid var(--linje-stark); border-radius: var(--radie);
  background: var(--ark-djup);
  padding: var(--s3) var(--s4); margin-top: var(--s3);
  font-size: var(--t-liten); white-space: pre-wrap;
}
.result-panel.ok { border-color: var(--gron); background: var(--gron-yta); color: var(--gron); }
.result-panel.err, .ev-error { border-color: var(--rod); background: var(--rod-yta); color: var(--rod); }
.ev-info { color: var(--text-svag); }

/* ================================================================ moduler */

.dropzone {
  border: 2px dashed var(--linje-stark); border-radius: var(--radie);
  background: var(--ark-djup);
  padding: var(--s7) var(--s4); text-align: center; cursor: pointer;
  transition: border-color var(--snabb), background var(--snabb);
}
.dropzone:hover, .dropzone.over { border-color: var(--bla); background: var(--bla-yta); }
.dz-icon { display: block; margin: 0 auto var(--s2); }
.dz-title { font-family: var(--display); font-weight: 700; font-size: var(--t-rubrik); }
.dz-sub { color: var(--text-svag); font-size: var(--t-liten); margin-top: var(--s1); }

.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s3); }

/* Tomma lägen skrivs in i samma behållare som korten. Utan den här raden
   ärver texten en kortbredd och bryts till en 11 rem smal pelare — det ser
   ut som ett fel, och syns bara när listan är tom, alltså första gången
   någon öppnar sidan. */
.month-grid > .hint,
.moms-rutor > .hint,
.form-grid > .hint,
.grid-2 > .hint { grid-column: 1 / -1; max-width: 70ch; }
.month-card {
  display: block; padding: var(--s3); text-decoration: none; color: inherit;
  background: var(--ark); border: 1px solid var(--linje); border-radius: var(--radie);
  transition: border-color var(--snabb), box-shadow var(--snabb);
}
.month-card:hover { border-color: var(--text-blek); }
.month-card .m-line { font-size: var(--t-liten); color: var(--text-svag); }
.month-pills { display: flex; flex-wrap: wrap; gap: var(--s1); }
.month-pill { font-size: var(--t-liten); border: 1px solid var(--linje-stark); border-radius: 1rem; background: var(--ark); color: inherit; padding: 0.25rem 0.7rem; }
.month-pill:hover { background: var(--ark-djup); }
.month-pill.active { background: var(--bla); border-color: var(--bla); color: var(--pa-bla); }

.stat-tile, .status-tile { border: 1px solid var(--linje); border-radius: var(--radie); padding: var(--s3) var(--s4); background: var(--ark); min-width: 9rem; }
.st-num { font-family: var(--display); font-size: var(--t-stor); font-weight: 800; line-height: 1; }
.st-label { margin-top: var(--s1); }
.head-stats { display: flex; gap: var(--s3); flex-wrap: wrap; }

.progress-bar { height: 0.5rem; background: var(--ark-djup); border-radius: 1rem; overflow: hidden; }
/* Skalan i stället för bredden: bredd animerad är layoutarbete varje bildruta,
   skalan sköts av kompositören. JavaScript sätter --andel mellan 0 och 1. */
.progress-bar > div, #review-progress-fill, #collect-progress-fill, #find-progress-fill {
  height: 100%; width: 100%; background: var(--gron); border-radius: 1rem;
  transform-origin: left center; transform: scaleX(var(--andel, 0));
  transition: transform 380ms cubic-bezier(.16, 1, .3, 1);
}
.progress-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-liten); color: var(--text-svag); margin-bottom: var(--s1); }

.toolbox, .tool-row, .picker-toolbar, .review-filters { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.tool-sep { width: 1px; align-self: stretch; background: var(--linje); margin: 0 var(--s1); }
.review-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--linje); }
.review-progress { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-liten); color: var(--text-svag); }
.review-progress .progress-bar { flex: 1 1 auto; }
.next-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  border-top: 1px solid var(--linje); padding: var(--s4) var(--s5);
  background: var(--ark-djup); border-radius: 0 0 var(--radie) var(--radie);
}

/* ------------------------------------------------------------ bankraderna */

.review-split { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); padding: var(--s5); }
.review-list { display: flex; flex-direction: column; gap: var(--s3); }
.tx-card {
  border: 1px solid var(--linje); border-radius: var(--radie);
  background: var(--ark); padding: var(--s3) var(--s4);
  transition: border-color var(--snabb), box-shadow var(--snabb);
}
.tx-card:hover { border-color: var(--text-blek); }
.tx-card.matched { border-color: color-mix(in srgb, var(--gron) 45%, var(--linje)); }
.tx-card.pending { border-color: color-mix(in srgb, var(--amber) 45%, var(--linje)); }
.tx-card.aktiv { border-color: var(--bla); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bla) 22%, transparent); }
.tx-top { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.tx-date { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; color: var(--text-svag); }
.tx-ref { font-weight: 700; }
.tx-text { color: var(--text-svag); font-size: var(--t-liten); }
.tx-amount { margin-left: auto; font-weight: 700; font-size: var(--t-lead); font-variant-numeric: tabular-nums; }
.tx-docs, .tx-actions { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }
.tx-note, .tx-ignore-reason { font-size: var(--t-liten); color: var(--text-svag); margin-top: var(--s1); }
.tx-suggestions { margin-top: var(--s2); border-top: 1px solid var(--linje); padding-top: var(--s2); }
.sug-row { display: flex; align-items: center; gap: var(--s2); padding: 0.15rem 0; font-size: var(--t-liten); }
.sug-name { font-weight: 600; }
.sug-meta, .sug-score { color: var(--text-svag); font-size: var(--t-micro); }
.review-preview, .preview-empty { border: 1px solid var(--linje); border-radius: var(--radie); background: var(--ark); min-height: 22rem; overflow: hidden; }
.preview-empty { display: grid; place-items: center; color: var(--text-blek); font-size: var(--t-liten); padding: var(--s5); text-align: center; }
.preview-head { border-bottom: 1px solid var(--linje); padding: var(--s2) var(--s3); font-size: var(--t-liten); display: flex; gap: var(--s2); align-items: center; }

.candidate { border: 1px solid var(--linje); border-radius: var(--radie-s); padding: var(--s2) var(--s3); margin-top: var(--s2); }
.candidate:hover { border-color: var(--linje-stark); }
.candidate-filename { font-weight: 600; font-size: var(--t-liten); word-break: break-word; }
.candidate-meta, .candidate-other { color: var(--text-svag); font-size: var(--t-micro); }
.candidate-score { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; }
.candidate-actions { display: flex; gap: var(--s1); margin-top: var(--s1); }

/* -------------------------------------------------------------- kontering */

.kont-preview { border: 1px solid var(--linje); border-radius: var(--radie); background: var(--ark); padding: var(--s3); }
.kont-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--s3); align-items: start; border-top: 1px solid var(--linje); padding-top: var(--s3); margin-top: var(--s3); }
.kont-main { min-width: 0; }
.kont-head, .forslag-huvud { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); font-size: var(--t-liten); }
.kont-head b, .forslag-huvud b { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; letter-spacing: -.03em; }
.kont-moms { font-size: var(--t-micro); color: var(--text-svag); }
.kont-lines { display: flex; flex-direction: column; margin-top: var(--s2); border: 1px solid var(--linje); border-radius: var(--radie-s); overflow: hidden; }
.kont-line { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: 0.3rem var(--s3); font-size: var(--t-liten); border-bottom: 1px solid var(--linje); }
.kont-lines .kont-line:last-child { border-bottom: 0; }
.kont-line b { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; letter-spacing: -.03em; }
.kont-line .kd, .kont-line .kk, .kd { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; letter-spacing: -.03em; text-align: right; white-space: nowrap; }
.kont-line .kk { color: var(--gron); }
.kont-motiv { margin-top: var(--s2); font-size: var(--t-micro); color: var(--text-svag); }
.kont-actions { display: flex; flex-direction: column; gap: var(--s1); }
.forslag { border: 1px solid var(--linje); border-radius: var(--radie); padding: var(--s3); }
.fr-belopp { font-variant-numeric: tabular-nums; font-weight: 600; }
.ingen-moms { color: var(--text-blek); font-size: var(--t-liten); }

/* ------------------------------------------------------------------- moms */

.moms-rutor { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s3); }
.moms-box { position: relative; border: 1px solid var(--linje); border-radius: var(--radie); padding: var(--s3); background: var(--ark); }
.moms-box .kd { color: var(--text-blek); }
.moms-belopp { font-family: var(--display); font-size: var(--t-stor); font-weight: 800; font-variant-numeric: tabular-nums; margin-top: var(--s1); }
.moms-detalj, .moms-head, .moms-huvud { font-size: var(--t-liten); color: var(--text-svag); }
.moms-total { font-family: var(--display); font-size: var(--t-stor); font-weight: 800; font-variant-numeric: tabular-nums; }
.moms-avstamning { border: 1px solid var(--linje); border-radius: var(--radie); padding: var(--s3) var(--s4); }
.period-lista { display: flex; flex-wrap: wrap; gap: var(--s2); }
.period-knapp { border: 1px solid var(--linje-stark); border-radius: var(--radie); background: var(--ark); color: inherit; font: inherit; font-size: var(--t-liten); padding: var(--s2) var(--s3); cursor: pointer; text-align: left; min-width: 9rem; }
.period-knapp:hover { background: var(--ark-djup); }
.period-knapp.active { background: var(--bla); border-color: var(--bla); color: var(--pa-bla); }

/* --------------------------------------------------------------- fakturor */

.faktura-form, .mall-layout, .picker-body { display: grid; gap: var(--s4); }
.fak-rad, .kredit-rad, .lon-rad { display: grid; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--linje); padding: var(--s2) 0; }
.fak-rad-rubrik, .kredit-rubrik, .lon-rad-huvud, .rad-huvud { border-bottom: 1px solid var(--linje-stark); padding-bottom: var(--s1); }
.fak-summa, .lon-summa { display: flex; justify-content: flex-end; gap: var(--s5); border-top: 1px solid var(--linje-stark); margin-top: var(--s3); padding-top: var(--s3); font-variant-numeric: tabular-nums; }
.fak-summa .total, .lon-summa .total { font-family: var(--display); font-size: var(--t-stor); font-weight: 800; }
.faktura-preview, .mall-forhandsvisning { border: 1px solid var(--linje); border-radius: var(--radie); background: var(--ark); min-height: 26rem; overflow: hidden; }
.mall-panel, .report-panel, .forman-panel, .lon-falt { border: 1px solid var(--linje); border-radius: var(--radie); background: var(--ark); padding: var(--s4); }
.report-title { font-family: var(--display); font-size: var(--t-rubrik); font-weight: 700; }
.report-sub, .report-ref { color: var(--text-svag); font-size: var(--t-liten); }
.logo-visning { max-height: 4rem; }

/* ------------------------------------------------------------------- lön */

.lon-rad-resultat { font-variant-numeric: tabular-nums; }
.forman-block { border-top: 1px solid var(--linje); padding-top: var(--s3); margin-top: var(--s3); }
.forman-rad { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3); padding: 0.15rem 0; font-size: var(--t-liten); }
.bil-lista { display: flex; flex-direction: column; gap: var(--s1); }
.bil-traff { border: 1px solid var(--linje); border-radius: var(--radie-s); padding: var(--s2) var(--s3); cursor: pointer; font-size: var(--t-liten); }
.bil-traff:hover { background: var(--ark-djup); }
.bil-raknare { font-size: var(--t-micro); color: var(--text-svag); }

/* ------------------------------------------------------------- resor mm. */

.trip-card, .detected-trip, .account-row, .dir-row, .collect-all-card {
  border: 1px solid var(--linje); border-radius: var(--radie);
  background: var(--ark); padding: var(--s3) var(--s4); margin-bottom: var(--s2);
}
.trip-head, .collect-all-row { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.trip-title { font-weight: 700; }
.trip-dates, .trip-meals { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; color: var(--text-svag); }
.trip-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s2) var(--s4); margin-top: var(--s2); }
.trip-actions, .collect-sources, .sources-toggle { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.trip-list, .dir-list, .path-list, .picker-list { display: flex; flex-direction: column; gap: var(--s2); }

/* ---------------------------------------------------------------- BankID */

.bankid-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); border: 1px solid var(--linje); border-radius: var(--radie); padding: var(--s4); }
.bankid-qr { width: 11rem; height: 11rem; display: grid; place-items: center; background: #fff; border-radius: var(--radie-s); padding: var(--s2); }
.bankid-qr svg, .bankid-qr img, .photo-qr svg, .photo-qr img { width: 100%; height: 100%; display: block; }
.bankid-side { font-size: var(--t-liten); }
.device-code-box { border: 1px solid var(--linje); border-radius: var(--radie); padding: var(--s3); background: var(--ark-djup); text-align: center; }
.device-code { font-family: var(--mono); font-size: var(--t-stor); font-weight: 700; letter-spacing: .06em; }
.photo-qr { width: 12rem; height: 12rem; background: #fff; border-radius: var(--radie); padding: var(--s2); }
.foto-klart {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2); height: 100%;
  font-family: var(--display); font-size: var(--t-rubrik); font-weight: 700;
  color: var(--gron);
}
.foto-klart .bock { width: 3rem; height: 3rem; border-width: 2px; }
.foto-klart .bock svg { width: 1.75rem; height: 1.75rem; }

.photo-url { font-family: var(--mono); font-size: var(--t-micro); font-stretch: 87%; word-break: break-all; color: var(--text-svag); }

/* ================================================================= modaler */

.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--sudd) 62%, transparent);
  display: none; place-items: start center;
  padding: var(--s6) var(--s4); overflow-y: auto;
}
.overlay.open { display: grid; }
.modal {
  background: var(--ark); color: var(--text);
  border: 1px solid var(--linje-stark);
  border-radius: var(--radie); box-shadow: var(--skugga-hog);
  width: 100%; max-width: 34rem;
  animation: lyftfram 240ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes lyftfram { from { transform: translateY(0.75rem) scale(.99); opacity: 0; } }
.modal-wide { max-width: 64rem; }
.modal-pdf { max-width: 68rem; }
.modal-picker { max-width: 60rem; }
.modal-trip { max-width: 46rem; }
.modal-head { display: flex; align-items: flex-start; gap: var(--s3); border-bottom: 1px solid var(--linje); padding: var(--s4) var(--s5); }
.modal-title { font-family: var(--display); font-size: var(--t-rubrik); font-weight: 700; }
.modal-sub { font-size: var(--t-liten); color: var(--text-svag); }
.modal-head .btn:last-child { margin-left: auto; }
.modal-body, .modal > .avsnitt { padding: var(--s5); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s2); border-top: 1px solid var(--linje); padding: var(--s4) var(--s5); }
.picker-left, .picker-right { border: 1px solid var(--linje); border-radius: var(--radie); overflow: auto; max-height: 58vh; }
.picker-hint { font-size: var(--t-liten); color: var(--text-svag); }
.modal iframe { width: 100%; min-height: 60vh; border: 0; background: var(--ark-djup); }
.review-preview iframe, .faktura-preview iframe, .mall-forhandsvisning iframe { width: 100%; min-height: 22rem; border: 0; background: var(--ark); }

/* =========================================================== hjälpspalten */

#upplysning {
  position: fixed; inset: var(--topp) 0 0 auto;
  width: var(--hjalp);
  background: var(--ark); border-left: 1px solid var(--linje);
  display: none; flex-direction: column; z-index: 25;
}
body.har-upplysning #upplysning { display: flex; }
.upp-huvud { display: flex; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--linje); padding: var(--s3) var(--s4); font-family: var(--display); font-size: var(--t-brod); font-weight: 700; }
.upp-huvud .btn { margin-left: auto; }
.upp-text { padding: var(--s4); font-size: var(--t-liten); color: var(--text-svag); overflow-y: auto; }
.upp-text h4 { font-family: var(--sans); font-size: var(--t-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text); margin: var(--s4) 0 var(--s1); }
.upp-text h4:first-child { margin-top: 0; }

.fraga-falt { margin-top: auto; border-top: 1px solid var(--linje); display: flex; flex-direction: column; min-height: 0; }
.fraga-logg { flex: 1 1 auto; overflow-y: auto; padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s3); font-size: var(--t-liten); max-height: 40vh; }
.fraga-logg:empty { display: none; }
.fraga-bubbla .etikett { display: block; margin-bottom: 0.125rem; }
.fraga-bubbla.du { border-left: 1px solid var(--linje-stark); padding-left: var(--s3); }
.fraga-bubbla.svar { background: var(--bla-yta); border-radius: var(--radie); padding: var(--s2) var(--s3); color: var(--text); }
.fraga-lankar { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.fraga-in { padding: var(--s3) var(--s4); border-top: 1px solid var(--linje); }
.fraga-in .etikett { display: block; margin-bottom: var(--s1); }
.fraga-in textarea { min-height: 3.5rem; font-size: var(--t-liten); }
.fraga-in .row { margin-top: var(--s2); justify-content: space-between; }

.upp-flik {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 24; writing-mode: vertical-rl;
  background: var(--ark); color: var(--text-svag);
  border: 1px solid var(--linje); border-right: 0;
  border-radius: var(--radie) 0 0 var(--radie);
  padding: var(--s4) 0.5rem;
  font: 600 var(--t-micro)/1 var(--sans); letter-spacing: .08em; cursor: pointer;
}
.upp-flik:hover { background: var(--ark-djup); color: var(--text); }
body.har-upplysning .upp-flik { display: none; }

/* ================================================================= guiden */

.guide-steg {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center; gap: var(--s3);
  border: 1px solid var(--linje); border-radius: var(--radie);
  background: var(--ark); padding: var(--s3) var(--s4); margin-bottom: var(--s2);
}
.guide-nr {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--ark-djup); color: var(--text-svag);
  font-family: var(--display); font-weight: 800;
}
.guide-steg.klart { border-color: var(--gron); }
.guide-steg.klart .guide-nr { background: var(--gron-yta); color: var(--gron); }
.guide-steg.hoppat { opacity: .72; }
.guide-rubrik { font-family: var(--display); font-weight: 700; font-size: var(--t-brod); }
.guide-kort { font-size: var(--t-liten); color: var(--text-svag); }
.guide-varfor { font-size: var(--t-liten); color: var(--text-svag); margin-top: var(--s2); max-width: 62ch; }
.guide-hoger { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ======================================================== inloggningssidan */

body.logga-in {
  display: grid; place-items: center; min-height: 100vh; padding: var(--s5);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--bla) 12%, transparent), transparent 70%),
    var(--grund);
}
.logga-in-ark {
  width: 100%; max-width: 27rem;
  background: var(--ark); border: 1px solid var(--linje-stark);
  border-radius: var(--radie); box-shadow: var(--skugga-hog); overflow: hidden;
}
.logga-in-ark .avsnitt { padding: var(--s5); }
.logga-in-ark .falt + .falt { margin-top: var(--s3); }
.avdelare { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0; font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-blek); }
.avdelare::before, .avdelare::after { content: ""; flex: 1; height: 1px; background: var(--linje); }

/* ================================================================ bredder */

#mobilbar {
  display: none; align-items: center; gap: var(--s2);
  position: sticky; top: var(--topp); z-index: 28;
  background: var(--ark); border-bottom: 1px solid var(--linje);
  padding: var(--s2) var(--s3);
}
#mobil-titel { flex: 1; text-align: center; font-family: var(--display); font-weight: 700; font-size: var(--t-liten); }

@media (max-width: 101rem) {
  body.har-upplysning #main { margin-right: 0; }
  body.har-upplysning #upplysning { box-shadow: var(--skugga-hog); }
}
@media (max-width: 78rem) {
  .review-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 60rem) {
  .arsband { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .arsmanad:nth-child(6n) { border-right: 0; }
  .arsmanad:nth-child(-n+6) { border-bottom: 1px solid var(--linje); }
}
@media (max-width: 54rem) {
  /* Topplisten blir två rader när kontrollerna får en egen rad, och allt som
     hänger under den — mobilraden, registret, hjälpspalten — måste räkna med
     den nya höjden. Ett mått, ett ställe. */
  :root { --rail: 0rem; --topp: 6.25rem; }
  #mobilbar { display: flex; }
  /* Under den här bredden bor vägen in i hjälpen i mobilraden i stället. */
  .upp-flik { display: none; }
  #sidebar {
    inset: var(--topp) auto 0 0; width: min(20rem, 86vw);
    box-shadow: var(--skugga-hog);
    transform: translateX(-102%); transition: transform var(--drag);
  }
  body.meny-oppen #sidebar { transform: none; }
  #main { margin-left: 0; padding: var(--s4) var(--s3) var(--s8); }
  #upplysning { width: 100%; inset: var(--topp) 0 0 0; }
  .topp-bolag { display: none; }
  /* På telefonen får kontrollerna en egen rad i stället för att tränga ut
     sidan i sidled. De ska vara kvar — det är hela poängen med dem. */
  .topp-hoger { flex: 1 1 100%; justify-content: space-between; margin-left: 0; }
  .blanketthuvud, .balk, .avsnitt, .review-toolbar, .review-split, .next-bar,
  .underskrift { padding-left: var(--s4); padding-right: var(--s4); }
  .utfall__inre { margin-left: var(--s4); margin-right: var(--s4); }
  .bh-identitet { margin-left: 0; padding-left: 0; text-align: left; }
}
@media (max-width: 40rem) {
  .arsband { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arsmanad { border-bottom: 1px solid var(--linje); }
  .arsmanad:nth-child(3n) { border-right: 0; }
  .datumrad { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .kont-row { grid-template-columns: minmax(0, 1fr); }
  .kont-actions { flex-direction: row; }
}

@media print {
  #sidebar, #upplysning, #toppbar, #mobilbar, .btn, .next-bar, .upp-flik { display: none !important; }
  #main { margin: 0; padding: 0; }
  body { background: #fff; }
  .blankett, .card, .table-wrap { box-shadow: none; }
}