/* =========================================================
   Tidvis — stilark
   Designsystem: "Sky Soda" (se Sky Soda palette.md).
   En lätt, lekfull blå. Poppins för rubriker och gränssnitt,
   Source Serif 4 för löptext, JetBrains Mono för meta-etiketter.

   Färgerna anges i OKLCH, som paletten föredrar. Regler ur paletten:
   – Accenter delar lightness .62 och chroma .16; bara hue varierar
     (250 blå, 30 korall). Egna toner byggs på samma ring.
   – Vita ytor håller chroma under .02 så de läses neutrala intill blått.
   – Högst två bakgrundsvärden per skärm: fält .985/240 och yta .99/245.
   – Korall är en motaccent, inte en andra profilfärg: bara små märken.

   Två avvikelser från paletten, båda medvetna:
   1. Primärblå (knappar, länkar, aktiv meny) ligger på L .55 i stället
      för .62. Palettens .62 ger 3,6:1 mot vit text, vilket inte klarar
      WCAG AA för knapptext i 14 px. L .55 ger 4,9:1 mot vit och 4,6:1
      mot bakgrunden. Palettens .62 finns kvar som --blue-bright för
      fyllningar utan text (diagram, staplar, logotypmärket).
   2. Paletten beskriver bara ljust tema. Mörkt läge är borttaget.

   Former: 999px knappar, 10px fält, 16–20px kort. 4px-raster.
   ========================================================= */

:root {
  color-scheme: light;

  /* --- Palettens egna tokens (Sky Soda §4) --- */
  --bg:           oklch(0.985 0.015 240);  /* sida och sektioner */
  --surface:      oklch(0.99 0.008 245);   /* kort, paneler, fält */
  --blue-tint:    oklch(0.9 0.06 250);     /* sekundärknappar, chips */
  --border:       oklch(0.85 0.04 250);    /* hårlinjer, fältens vilokant */
  --blue-bright:  oklch(0.62 0.16 250);    /* palettens blå — fyllningar utan text */
  --blue:         oklch(0.55 0.16 250);    /* primärknappar, länkar, fokus (se avvikelse 1) */
  --blue-pressed: oklch(0.47 0.16 250);    /* hover */
  --blue-active:  oklch(0.41 0.15 250);    /* nedtryckt */
  --ink:          oklch(0.28 0.04 250);    /* rubriker, brödtext */
  --ink-muted:    oklch(0.4 0.03 250);     /* längre löptext, bildtexter */
  --coral:        oklch(0.62 0.16 30);     /* märken, "ny", sparsam betoning — bara prickar och små fyllningar */
  --coral-text:   oklch(0.5 0.16 30);      /* korall som text (5,5:1 på --coral-soft) */
  --coral-soft:   oklch(0.95 0.03 30);

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-text:    'Source Serif 4', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Neutraler 100–900 på hue 250, chroma under .04 --- */
  --neutral-100: oklch(0.99 0.008 245);
  --neutral-200: oklch(0.955 0.015 245);
  --neutral-300: oklch(0.85 0.04 250);
  --neutral-400: oklch(0.72 0.02 250);
  --neutral-500: oklch(0.4 0.03 250);
  --neutral-600: oklch(0.34 0.035 250);
  --neutral-700: oklch(0.28 0.04 250);
  --neutral-800: oklch(0.22 0.035 250);
  --neutral-900: oklch(0.17 0.03 250);

  /* --- Roller --- */
  --surface-2: var(--neutral-200);   /* hover-rader, sekundära fält */
  --rule: var(--border);             /* linjen som organiserar */
  --rule-stark: var(--neutral-400);  /* när en linje faktiskt ska märkas */
  --line: 1px;
  --field-bg: var(--surface);        /* fält ligger på surface enligt paletten */
  --text: var(--ink);
  --muted: var(--ink-muted);

  --accent: var(--blue);
  --accent-hover: var(--blue-pressed);
  --accent-active: var(--blue-active);
  --accent-link: var(--blue);
  --accent-soft: oklch(0.955 0.03 250);   /* tonad yta bakom accentfärgad text */
  --accent-on-soft: var(--blue-pressed);  /* text på --accent-soft — .55-blått når inte 4,5:1 där */
  --accent-text: #FFFFFF;                 /* vitt på blått: 4,9:1 */
  --accent-text-soft: oklch(0.975 0.01 250); /* dämpad text på blått fält: 4,5:1 */

  --focus-ring: 0 0 0 3px oklch(0.62 0.16 250 / 0.18);
  --disabled-fill: oklch(0.93 0.02 250);
  --disabled-text: oklch(0.72 0.02 250);

  /* --- Funktionella toner — status färgas bara i dessa ---
     Solid ligger på palettens ring (.62/.16), textvarianten ett steg
     mörkare så den bär 12 px på sin mjuka yta (alla ≥ 4,9:1). Fara
     ligger på hue 18 så den skiljer sig från korallens 30. */
  --green: oklch(0.5 0.14 150);            /* Klar: godkänd tid, betald faktura */
  --green-solid: oklch(0.62 0.16 150);
  --green-soft: oklch(0.95 0.04 150);
  --amber: oklch(0.5 0.12 75);             /* Obs som TEXT */
  --amber-solid: oklch(0.66 0.15 75);      /* Obs som yta */
  --amber-soft: oklch(0.96 0.05 85);
  --danger: oklch(0.5 0.18 18);            /* Fel: förfallen faktura, krock i schemat */
  --danger-solid: oklch(0.58 0.19 18);
  --danger-soft: oklch(0.95 0.03 18);
  --info: var(--blue-pressed);             /* Info: systemmeddelande, tips — mörkare steget så den bär text på tonad yta */
  --info-soft: var(--accent-soft);

  /* --- Data --- */
  --chart-1: var(--blue-bright);
  --chart-2: var(--amber-solid);
  --chart-3: var(--neutral-400);
  /* Kategorifärger för diagram — fast ordning. Hue och lightness varierar
     båda så att serierna går isär även vid prot-/deut-/tritanopi.
     Alla ≥ 3:1 mot --surface, närmaste par ΔE2000 = 17. */
  --s1: oklch(0.62 0.16 250);   /* blå (palettens) */
  --s2: oklch(0.66 0.15 75);    /* bärnsten */
  --s3: oklch(0.55 0.14 150);   /* grön */
  --s4: oklch(0.62 0.02 250);   /* neutral */
  --s5: oklch(0.4 0.14 250);    /* djupblå */
  --s6: oklch(0.58 0.19 18);    /* röd */
  --s7: oklch(0.55 0.14 300);   /* violett */
  --grid: var(--neutral-300);
  /* Kontonumret i verifikationslistan färgas efter kontoklass. */
  --acct-int: var(--amber);
  --acct-kost: var(--danger);

  /* Former (Sky Soda §3): 999px knappar, 10px fält, 16–20px kort. */
  --radius: 10px;         /* fält, chips-ytor, mindre paneler */
  --radius-sm: 8px;       /* ikonknappar, små märken */
  --radius-lg: 16px;      /* kort och paneler */
  --radius-xl: 20px;      /* dialoger, inloggningskort */
  --radius-pill: 999px;   /* knappar och piller */
  /* Skuggor tonade mot sidans hue, lager av omgivning + riktning. */
  --shadow: 0 1px 2px oklch(0.28 0.04 250 / .05), 0 1px 3px oklch(0.28 0.04 250 / .06);
  --shadow-lg: 0 2px 6px oklch(0.28 0.04 250 / .06), 0 8px 24px oklch(0.28 0.04 250 / .10);
  /* Platshållare för bild: 135° 8px-rand i oklch(.94 .03 250). */
  --placeholder-stripes: repeating-linear-gradient(135deg, oklch(0.94 0.03 250) 0 4px, transparent 4px 8px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Typografi (Sky Soda §2). Appen är till största delen gränssnitt, så
   UI-token (Poppins 14/500) är grundstil; löptext (Source Serif 4 17/1.65)
   sätts på de element som faktiskt är text att läsa, och meta-etiketter
   (JetBrains Mono 12, versaler, .1em) på kolumnrubriker och små rubriker.
   Poppins går aldrig under vikt 500; serifens kursiv bär betoning i löptext. */
body {
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-link); }
a:hover { color: var(--accent-hover); }

/* Löptext */
.prose, .page-head p, .ob-hero p, .hint, .notice, .empty, .dlg p, .ds-head p, .dok-ing, .dok-kropp p,
.ma-las p, .ma-form p, .lm-fot, .auth-demo,
.bok-warn, .rest-banner, .day-sum, .korr-steg li, .kt-lista li, .act-body span, .bok-prev.empty-prev {
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.55;
}
.page-head p { font-size: 17px; line-height: 1.55; }
.hint, .dlg p, .ds-head p, .lm-fot, .ma-las p, .ma-form p, .act-body span, .kt-txt em, .korr-steg li span { font-size: 14px; }
/* Serifens kursiv bär betoning i löptext — aldrig fetstil. */
.hint b, .notice b, .dlg p b, .dok-kropp p b, .ma-las p b, .ma-form p b, .rest-banner b, .day-sum b {
  font-weight: 400; font-style: italic;
}
/* Siffror och namn i löptext behåller Poppins så de matchar resten av gränssnittet. */
.day-sum b, .rest-banner b, .empty b, .korr-steg li .ks-rad b, .ma-form > div > b, .kt-lista li b, .act-body span b { font-family: var(--font-display); font-weight: 600; font-style: normal; }
/* Kontroller ärver aldrig serifen från en textyta — Source Serif 4 finns bara i vikt 400. */
button, input, select, textarea, .btn, .btn-link, .icon-btn, .pill, .chip, .wt-chip, .ava, .save-state,
.korr-steg li::before, .kt-ikon, .field label, .sub-tab, .seg-btn { font-family: var(--font-display); }

/* Meta: kolumnrubriker, gruppetiketter, små rubriker */
.meta, th, .nav-sec, .nav-grp, .sug-grp, .day-cols div, .bok-cols div, .lag-med legend, .vp-k,
.korr-head, .kt-sammanfattning, .pl-manad-namn, .pl-egen, .ls-etikett, .rep-tbl tr.rep-head td,
.off-rad.head, .page-head::before, .ds-label, .bok-prev .bp-head, .cal-head, .kpi .k-label,
.split-kpi .k-label, .facts span, .slip-emp span, .dok-tbl th, .pl-dag em {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.mono, .dok-tbl td.mono { font-family: var(--font-mono); }

/* Rubriker: Poppins, tät radhöjd, negativ spärrning (D1/H1/H2 ur skalan 1.25). */
h1, h2, h3, .card h2, .dlg h3, .ds-head h3, .day-nav .dtitle, .slip-co, .slip-title, .dok-kropp h3, .slip h3, .kf-titel, .auth-logo, .side-logo, .topbar .tb-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.page-head h1, .auth-brand h1, .ob-hero h1 { text-wrap: balance; }

/* =========== Autentisering =========== */
/* Inloggningssidan är en blå helyta under en vit navbar: vänsterhalvan bär
   sloganen, högerhalvan formuläret. Layouten följer designens artboard 2a,
   men i palettens egna färger — och med formulärpanelen en aning mörkare än
   ytan i stället för ljusare, eftersom vit text då håller 5,9:1 mot 4,0:1. */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--blue);
  color: #FFFFFF;
}

/* --- Märket ---------------------------------------------------------
   Liggande platta 1,8:1 med hästarna ur nederkanten (identiteten §05):
   symbolen är 90 % av plattans bredd, hörnradien 8 % — samma mått som
   logotyp-bla.svg. Plattan är blå i appen och mörk bläck på utskrifter.
   .sym är symbolen fritt på en yta, utan platta och alltid enfärgad. */
.mark {
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; flex: none; background: var(--blue); color: #FFFFFF;
}
.mark svg { display: block; width: 90%; height: auto; }
.sym { display: block; flex: none; color: #FFFFFF; }
.sym svg { display: block; width: 100%; height: auto; }

/* --- Navbaren: vit list med den liggande plattan som logotyp --- */
.auth-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--surface); color: var(--ink); padding: 14px 40px;
}
.auth-logo { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.auth-logo .mark { width: 58px; height: 32px; border-radius: 5px; }
.nav-cta {
  border: 0; background: var(--blue); color: #FFFFFF;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  padding: 11px 22px; border-radius: var(--radius-pill);
}
.nav-cta:hover { background: var(--blue-pressed); }
.nav-cta:active { background: var(--blue-active); }

/* --- Ytan: slogan till vänster, formulär till höger --- */
/* Två saker låser ytans höjd, så sloganen står stilla när formuläret byts:
   flex-basis i pixlar (0% räknas mot en behållare med bara min-height som
   "innehållet", och då växer raden med skapa konto-formuläret) och en rad
   som är minmax(0, 1fr) i stället för auto. Panelen rullar invändigt när
   innehållet inte får plats. I mobil släpps båda — där ska sidan rulla. */
.auth-body {
  flex: 1 1 0px; display: grid; position: relative;
  grid-template-columns: 1fr 560px;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
/* Ljuset uppe till vänster — palettens ljusa blå, inte en främmande färg. */
.auth-body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(95% 75% at 0% 6%, color-mix(in srgb, var(--blue-bright) 45%, transparent) 0%, transparent 66%);
}
.auth-brand, .auth-panel { position: relative; }

.auth-brand {
  position: relative;
  /* Textblocket är centrerat i halvan, men raderna är vänsterställda —
     därför en behållare med egen bredd i stället för centrerad text. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: left; padding: 56px 72px;
}
/* En häst ur symbolen, uppförstorad och beskuren av ytans kant — djup åt
   den annars platta blå halvan. Mörk (brightness(0) gör den vita filen till
   bläck) och bara 12 %: en ljus siluett skulle lätta upp botten där texten
   står och dra vit text under 4,5:1, en mörk gör tvärtom. */
.auth-brand::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("hast-siluett.svg") no-repeat;
  background-size: auto 105%;
  background-position: right -70px bottom -110px;
  filter: brightness(0);
  opacity: .12;
}
.auth-brand > * { position: relative; z-index: 1; }
/* 700 px: raden "Din kompanjon" mäter 687 px vid 96 px, och ska rymmas på
   en rad — radbrytningen sitter i markupen, inte i slumpen. */
.auth-brand-text { display: flex; flex-direction: column; gap: 26px; width: 100%; max-width: 700px; }
.auth-brand h1 {
  font-family: var(--font-text); font-weight: 400;
  /* Storleken följer fönstret så att "Din kompanjon" ryms på sin rad hela
     vägen ner till brytpunkten: raden mäter 687 px vid 96 px, och halvan
     är fönstret minus panelens 560 px och 144 px innermått. 96 px är taket. */
  font-size: clamp(44px, calc(12.06vw - 78px), 96px);
  line-height: .95; letter-spacing: -.02em;
}
.auth-brand h1 em { font-style: italic; color: var(--blue-tint); }
.auth-brand .sub { font-size: 19px; line-height: 1.6; max-width: 42ch; font-family: var(--font-display); font-weight: 500; }
/* Innehållet hänger i panelens överkant, inte i mitten. Skapa konto har
   fyra fält och logga in två — centrerat skulle de landa olika högt och
   panelen hoppa vid varje flikbyte. Nu växer formuläret bara nedåt.
   scrollbar-gutter håller bredden när rullningslisten dyker upp. */
.auth-panel {
  display: flex; align-items: flex-start;
  overflow-y: auto; scrollbar-gutter: stable;
  padding: clamp(40px, 9vh, 120px) 72px 48px;
  background: linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .16));
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.auth-panel .inner { width: 100%; display: flex; flex-direction: column; gap: 28px; }
.auth-panel h2 { font-size: 32px; font-weight: 700; letter-spacing: -.025em; }
.auth-panel .lead { margin-top: 6px; font-size: 15px; font-family: var(--font-display); font-weight: 500; }

.auth-tabs {
  display: flex; gap: 6px; padding: 6px; border-radius: 12px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
}
.auth-tab { flex: 1; border: 0; background: transparent; padding: 13px 0; border-radius: 8px; color: #FFFFFF; font-weight: 700; font-size: 15px; }
.auth-tab.active { background: #FFFFFF; color: var(--blue-active); box-shadow: 0 2px 8px rgba(4, 40, 80, .18); }

/* Fälten i panelen: understruket i stället för ruta, vit text. */
.auth-panel .form-grid { gap: 22px; }
.auth-panel .field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; }
.auth-panel .field input {
  background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .45);
  border-radius: 0; padding: 12px 2px; font-size: 18px; color: #FFFFFF;
}
.auth-panel .field input::placeholder { color: rgba(255, 255, 255, .6); }
.auth-panel .field input:focus {
  border-bottom-color: #FFFFFF; box-shadow: 0 1px 0 0 #FFFFFF;
  outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 4px;
}
/* Webbläsarens autofyll målar annars fältet ljust — och vit text försvinner. */
.auth-panel .field input:-webkit-autofill,
.auth-panel .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF; caret-color: #FFFFFF;
  transition: background-color 600000s 0s;
}
.auth-panel .btn-primary { background: #FFFFFF; color: var(--blue-active); }
.auth-panel .btn-primary:hover { background: var(--blue-tint); }
.auth-panel .btn-primary:active { background: var(--blue-tint); }

.auth-err { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; display: none; }
.auth-err.show { display: block; }
.auth-demo { font-size: 14px; font-family: var(--font-display); font-weight: 500; color: #FFFFFF; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 20px; }
.auth-demo button { background: none; border: 0; color: #FFFFFF; font-family: var(--font-display); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0; }

@media (max-width: 900px) {
  /* Samma vänsterkant som sloganen nedan. */
  .auth-nav { padding: 12px 24px; }
  .auth-logo { font-size: 18px; }
  .auth-logo .mark { width: 50px; height: 28px; }
  .auth-body { flex: 1 1 auto; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .auth-brand { padding: 40px 24px; }
  .auth-brand-text { gap: 18px; }
  .auth-brand h1 { font-size: 46px; }
  /* Mindre yta i mobil — siluetten flyttas in och ned så huvudet syns. */
  .auth-brand::after { background-size: auto 92%; background-position: right -50px bottom -70px; }
  .auth-brand .sub { font-size: 17px; }
  .auth-panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); padding: 32px 24px; }
}

/* =========== Appskal =========== */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px;
  flex: none;
  background: var(--surface);
  border-right: var(--line) solid var(--rule);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.side-logo { display: flex; align-items: center; gap: 10px; padding: 22px 20px 18px; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.side-logo .mark { width: 58px; height: 32px; border-radius: 5px; }
.side-co { padding: 0 20px 14px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sec { color: var(--muted); padding: 14px 20px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: calc(100% - 16px); margin: 1px 8px;
  padding: 9px 12px;
  border: 0; background: none; border-radius: var(--radius);
  color: var(--muted); font-weight: 500; font-size: 14px;
  text-align: left;
}
.nav-item .ico { width: 20px; text-align: center; flex: none; opacity: .9; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
/* Aktivt menyval: solid blå med vit text — se "Sektionsfärger" längre ned. */
.nav-item.nav-more { color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 6px; }
.nav-item.nav-more:hover { color: var(--text); }

/* Menyanpassning i Inställningar */
/* Grupperna ligger sida vid sida när kortet är brett nog — halverar höjden. */
.nav-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 22px; align-items: start; }
.nav-grp-box { min-width: 0; }
.nav-grp { color: var(--muted); padding: 11px 0 4px; }
.nav-grp-box:first-child .nav-grp { padding-top: 2px; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 8px; border-radius: var(--radius); }
.nav-row:hover { background: var(--surface-2); }
.nav-row .check-line { flex: 1; align-items: center; color: var(--text); font-size: 14px; min-width: 0; }
.nav-row .check-line input { margin-top: 0; }
.nav-row .ico { width: 22px; text-align: center; flex: none; opacity: .9; }
.nav-row.off .check-line { color: var(--muted); }
.nav-row .locked { font-size: 12px; color: var(--muted); flex: none; }
.nav-move { display: flex; gap: 1px; flex: none; }
.nav-move .icon-btn:disabled { opacity: .28; }
.side-foot { margin-top: auto; border-top: 1px solid var(--border); padding: 14px 16px; display: grid; gap: 10px; }
.side-user { display: flex; align-items: center; gap: 10px; }
.side-user .avatar { width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-on-soft); font-weight: 700; display: grid; place-items: center; font-size: 14px; flex: none; }
.side-user .who { min-width: 0; }
.side-user .who b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-actions { display: flex; gap: 8px; }
.side-actions .btn { flex: 1; padding: 7px 8px; font-size: 13px; }

.main { flex: 1; min-width: 0; padding: 32px 40px 72px; max-width: 1240px; }
@media (max-width: 1000px) { .main { padding: 24px 20px 64px; } }

.page-head { margin-bottom: 24px; }
/* H1 ett steg under palettens 39 (skalan 1.25: 31) — appens sidor är täta. */
.page-head h1 { font-size: 31px; letter-spacing: -.02em; font-weight: 600; line-height: 1.1; }
.page-head p { color: var(--muted); margin-top: 6px; max-width: 70ch; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Kort där formuläret ligger hopfällt tills man ber om det: rubrik och
   "lägg till"-knapp på samma rad, formuläret i en egen inramad låda under. */
.kf-form {
  border: var(--line) solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg);
  padding: 16px; margin: 14px 0 18px;
}
.kf-form > form { margin: 0; }
.kf-titel { font-size: 16px; font-weight: 600; margin: 0 0 14px; letter-spacing: -.01em; }

/* --- Registreringar: en rad per dag, passen fälls ut under --- */
.reg-tbl .rg-tog { width: 1%; padding-left: 6px; padding-right: 0; }
.reg-tbl .rg-dag { white-space: nowrap; }
.reg-tbl .rg-person b { display: block; white-space: nowrap; }
.reg-tbl .rg-flera { color: var(--muted); white-space: nowrap; }
.reg-tbl .rg-person em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.reg-tbl tbody tr.rg-sum.open { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.reg-tbl tbody tr.rg-sum.open td { border-bottom: 0; }
.reg-tbl tbody tr.rg-pass.stängd { display: none; }
.reg-tbl tbody tr.rg-pass > td { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; }
.reg-tbl tbody tr.rg-pass:last-of-type > td { padding-bottom: 8px; }
.reg-tbl tbody tr.rg-pass { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.reg-tbl tbody tr.rg-pass .rg-namn { padding-left: 20px; position: relative; }
.reg-tbl tbody tr.rg-pass .rg-namn::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 1px; background: var(--muted);
}
.reg-tbl tbody tr.rg-total td { border-top: var(--line) solid var(--rule-stark); border-bottom: 0; }
@media print {
  .reg-tbl tbody tr.rg-pass.stängd { display: table-row; }
}
.card > .head-row + .table-scroll, .card > .head-row + .empty, .card > .head-row + .hint { margin-top: 14px; }

/* =========== Komponenter =========== */
.card {
  background: var(--surface);
  border: var(--line) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 20px;
}
/* Kortrubrik: 20px, nästa steg under H2 (25) i skalan. */
.card h2 { font-size: 20px; font-weight: 600; margin-bottom: 14px; letter-spacing: -.01em; }
.card h2 small { font-family: var(--font-text); font-weight: 400; font-style: italic; color: var(--muted); font-size: 15px; letter-spacing: 0; margin-left: 8px; }

/* Knappar är piller (Sky Soda §3). Etiketten är UI-token: Poppins 14/500
   eller mer — vitt på blått kräver minst det. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radius-pill); padding: 9px 18px;
  font-weight: 500; font-size: 14px; line-height: 1.2;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
/* Sekundär: blue tint som yta, mörkblå text (5:1). */
.btn-ghost { background: var(--blue-tint); border-color: transparent; color: var(--blue-pressed); }
.btn-ghost:hover { background: oklch(0.86 0.08 250); color: var(--blue-active); }
.btn-ghost:active { background: oklch(0.82 0.09 250); color: var(--blue-active); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-width: var(--line); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-solid); border-color: var(--danger-solid); color: #FFFFFF; }
.btn-sm { padding: 6px 13px; font-size: 13px; }
.btn-block { width: 100%; padding: 11px; font-size: 15px; }
.btn:disabled { opacity: 1; cursor: not-allowed; background: var(--disabled-fill); border-color: transparent; color: var(--disabled-text); }
.btn-ghost:disabled { background: var(--disabled-fill); border-color: transparent; color: var(--disabled-text); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
/* Fokus (Sky Soda §3): 1px blå kant + 3px ring i blått på 18 %. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--disabled-fill); color: var(--disabled-text); border-color: transparent; }
.field input::placeholder, .field textarea::placeholder { color: oklch(0.53 0.03 250); font-weight: 500; }  /* 4,6:1 */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.form-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.hint { color: var(--muted); margin-top: 6px; }
.hint b { color: var(--text); }

.filter-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.filter-row .field { min-width: 160px; }

/* KPI-kort */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px 18px; }
.kpi .k-label { color: var(--muted); }
/* Stora tal i H2-storlek (25/600). */
.kpi .k-value { font-size: 25px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: 13px; color: var(--muted); }
.kpi.hero { background: var(--accent); border: 0; color: var(--accent-text); }
.kpi.hero .k-label, .kpi.hero .k-sub { color: var(--accent-text-soft); }
.kpi.hero .k-sub b { color: var(--accent-text); }
.kpi.hero .k-value { color: var(--accent-text); }

/* Tabeller */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; color: var(--muted); padding: 8px 10px; border-bottom: var(--line) solid var(--border); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.t-muted { color: var(--muted); }

/* =========== Viktiga datum =========== */
.notice { background: var(--accent-soft); border-radius: var(--radius); padding: 12px 14px; font-size: 15px; color: var(--text); margin-bottom: 16px; }
.sug-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-top: 10px; background: var(--bg); }
.sug-grp { color: var(--muted); margin: 14px 0 6px; }
.sug-box .sug-grp:first-child { margin-top: 0; }
.sug-box .chip { font-size: 12.5px; padding: 5px 12px; }
.date-list { display: grid; gap: 1px; }
.date-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius); border-bottom: 1px solid var(--border); }
.date-row:last-child { border-bottom: 0; }
.date-row:hover { background: var(--surface-2); }
.dr-dot { width: 9px; height: 9px; border-radius: var(--radius); flex: none; }
.dr-main { flex: 1; min-width: 0; font-size: 14px; }
.dr-main b { display: block; }
.dr-main em, .dr-when em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.dr-when { flex: none; text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dr-act { flex: none; display: flex; gap: 2px; align-items: center; }
@media (max-width: 620px) {
  .date-row { flex-wrap: wrap; }
  .dr-when { text-align: left; }
}

.pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1.4; }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.gray { background: var(--surface-2); color: var(--muted); }
.pill.red { background: var(--danger-soft); color: var(--danger); }
.pill.accent { background: var(--accent-soft); color: var(--accent-on-soft); }
/* Korall: "ny", räknare och annan sparsam betoning — aldrig större än ett märke. */
.pill.coral, .badge.coral { background: var(--coral-soft); color: var(--coral-text); }
.rest-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--blue-tint); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; font-size: 15px; }

.icon-btn { border: 0; background: none; color: var(--muted); border-radius: var(--radius-sm); padding: 5px 8px; font-size: 14px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }

.empty { text-align: center; color: var(--muted); padding: 44px 20px; font-size: 16px; }
.empty .big { font-size: 34px; margin-bottom: 10px; line-height: 1; }
.empty .btn { margin-top: 14px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--blue); color: var(--blue-pressed); }
/* Räknaren är ett korallmärke — den enda platsen där korall får vara yta. */
.chip .badge { background: var(--coral-soft); color: var(--coral-text); border-radius: var(--radius-pill); font-size: 11px; padding: 1px 7px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip.sel { background: var(--blue-tint); border-color: var(--blue-tint); color: var(--blue-pressed); font-weight: 600; }
.chip.sel .badge { background: var(--surface); }
.chip .star { color: var(--coral); margin-right: 5px; font-size: 11px; }
.chip.team-add { border-style: dashed; border-color: var(--blue); color: var(--blue); background: transparent; }
.chip.team-add:hover { background: var(--accent-soft); color: var(--blue-pressed); }

.invoice-draft { border-left: 3px solid var(--accent); }  /* --accent så dokumentstilen Klassisk kan göra den svart */

/* Faktura: länkknapp, ofakturerat-kpi, detaljhuvud */
.btn-link { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--accent); font: inherit; text-align: left; }
.btn-link:hover { text-decoration: underline; }
/* Länkar på tonade rutor: .55-blått når inte 4,5:1 där, så ett steg mörkare. */
.notice .btn-link, .notice a, .rest-banner .btn-link, .rest-banner a, .day-sum a, .act .btn-link { color: var(--accent-on-soft); }
.split-kpi { display: flex; flex-wrap: wrap; gap: 24px; }
.split-kpi .k-label { color: var(--muted); }
.split-kpi .k-value { font-size: 25px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.split-kpi .k-sub { font-size: 13px; color: var(--muted); }
.inv-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }

/* Dagsrapport */
/* =========== Kalender =========== */
.cal { display: grid; grid-template-columns: 42px repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head { color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal-wk { font-size: 11.5px; color: var(--muted); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.cal-day {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius);
  min-height: 94px; padding: 7px 8px; text-align: left; color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.cal-day:hover { border-color: var(--accent); }
.cal-day.out { opacity: .34; }
.cal-day.we { background: var(--surface-2); }
.cal-day.now { border-color: var(--blue); box-shadow: var(--focus-ring); }
.cal-day .cd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cal-day .cd-num { font-size: 13px; font-weight: 500; color: var(--muted); }
.cal-day.has .cd-num, .cal-day.now .cd-num { color: var(--text); }
.cal-day .cd-h { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-day .cd-bar { height: 5px; border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.cal-day .cd-fill { display: flex; height: 100%; border-radius: var(--radius); overflow: hidden; }
.cal-day .cd-fill i { display: block; min-width: 2px; }
.cal-day .cd-names { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.cal-day .cd-note { font-size: 11px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-day.hasev { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.cal-day .cd-evs { display: grid; gap: 2px; }
.cal-day .cd-ev {
  font-size: 10.5px; font-weight: 600; line-height: 1.3;
  padding: 1px 5px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2); color: var(--text);
  border-left: 3px solid var(--c, var(--muted));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-day .cd-ev.more { color: var(--muted); font-weight: 500; border-left-color: transparent; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 10px; height: 10px; border-radius: var(--radius); flex: none; }
@media (max-width: 760px) {
  .cal { grid-template-columns: 24px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .cal-day { min-height: 60px; padding: 5px 4px; gap: 3px; }
  .cal-day .cd-names, .cal-day .cd-note { display: none; }
  /* För smalt för text — datumen blir färgade streck i stället. */
  .cal-day .cd-ev { font-size: 0; padding: 0; height: 4px; border-left: 0; border-radius: var(--radius-pill); background: var(--c, var(--muted)); }
  .cal-day .cd-ev.more { display: none; }
  .cal-head, .cal-wk { font-size: 10px; }
  /* Cellen är för smal för dagnummer och timmar på samma rad — stapla dem. */
  .cal-day .cd-top { flex-direction: column; align-items: flex-start; gap: 0; }
  .cal-day .cd-num { font-size: 11.5px; line-height: 1.25; }
  .cal-day .cd-h { font-size: 11.5px; line-height: 1.25; }
}

.day-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.day-nav .dtitle { font-size: 20px; font-weight: 600; min-width: 210px; }
.day-nav .dtitle small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.day-rows { display: grid; gap: 10px; margin-top: 14px; }
.day-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.6fr 78px 88px 84px 88px 1fr 36px;
  gap: 8px; align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.day-row input, .day-row select {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 13.5px; width: 100%; outline: none;
}
.day-row input:focus, .day-row select:focus { border-color: var(--blue); box-shadow: var(--focus-ring); }
.day-row input::placeholder { font-size: 12.5px; color: oklch(0.53 0.03 250); }
.day-row .del { border: 0; background: none; color: var(--muted); font-size: 15px; border-radius: var(--radius); padding: 6px; }
.day-row .del:hover { color: var(--danger); background: var(--danger-soft); }
.wt-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wt-chip {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-pill); padding: 5px 12px; font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.wt-chip:hover { border-color: var(--blue); color: var(--blue-pressed); }
.wt-chip.sel { background: var(--blue); border-color: var(--blue); color: var(--accent-text); font-weight: 600; }
@media (max-width: 1100px) {
  .day-row { grid-template-columns: repeat(4, 1fr); }
  .day-row .del { justify-self: end; }
}
.day-cols { display: grid; grid-template-columns: 1.2fr 1.2fr 1.6fr 78px 88px 84px 88px 1fr 36px; gap: 8px; padding: 0 10px; margin-top: 18px; }
.day-cols div { color: var(--muted); }
@media (max-width: 1100px) { .day-cols { display: none; } }
.day-sum {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 16px;
  background: var(--accent-soft); border-radius: var(--radius); font-size: 15px;
}
.save-state { font-size: 13px; color: var(--muted); transition: color .2s; }
.save-state.ok { color: var(--green); font-weight: 600; }

/* Mål / progress */
.goal { margin-bottom: 14px; }
.goal .goal-top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.goal .bar { height: 8px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.goal .bar i { display: block; height: 100%; background: var(--blue-bright); border-radius: var(--radius-pill); }

/* Diagram */
.chart-box { width: 100%; }
.chart-box svg { display: block; width: 100%; height: auto; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.chart-grid .card { margin-bottom: 0; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius); margin-right: 6px; }

/* Inställningar */
/* Korten är olika höga, så ett rutnät lämnar stora hål under de korta.
   Spalter packar i stället korten tätt efter varandra. */
.settings-grid { column-count: 2; column-gap: 20px; }
.settings-grid .card { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 20px; }
@media (max-width: 980px) { .settings-grid { column-count: 1; } }

/* Onboarding */
.onboard { max-width: 780px; margin: 0 auto; }
/* Hälsningen ligger på delningsbildens yta (identiteten §04): gradient i
   primärblå med en mjuk ljuscirkel. All text står på den mörkare halvan —
   vitt på #0074CA ger 4,8:1, medan #2389E2 bara räcker till stor text.
   Därför flyttas färgskiftet hit till 62 % i stället för designens 42 %. */
.ob-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(105deg, #0074CA 0%, #0074CA 62%, #2389E2 100%);
  color: #FFFFFF; padding: 36px 40px; margin-bottom: 28px;
}
.ob-hero::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 900px; height: 900px; margin: -450px 0 0 -450px;
  border-radius: 50%; background: rgba(255, 255, 255, .06);
}
.ob-hero > * { position: relative; }
.ob-hero .sym { width: 76px; margin-bottom: 20px; }
.ob-hero h1 { font-size: 31px; letter-spacing: -.02em; font-weight: 600; line-height: 1.1; }
.ob-hero p { margin-top: 8px; max-width: 60ch; font-size: 17px; line-height: 1.55; }
/* Offertsvaret är ett dokument — där gäller den mörka bläckplattan. */
.svar-mark { width: 68px; height: 38px; border-radius: 6px; background: var(--ink); }
.onboard .steps { display: flex; gap: 8px; margin-bottom: 24px; }
.onboard .step-dot { flex: 1; height: 5px; border-radius: var(--radius); background: var(--surface-2); }
.onboard .step-dot.on { background: var(--blue-bright); }
.mini-rows { display: grid; gap: 8px; }
.mini-row { display: grid; grid-template-columns: 2fr 1fr 1fr 36px; gap: 8px; align-items: center; }
.mini-row input { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 13.5px; width: 100%; outline: none; }
.mini-row input:focus { border-color: var(--blue); box-shadow: var(--focus-ring); }
.mini-row .del { border: 0; background: none; color: var(--muted); border-radius: var(--radius); }
.mini-row .del:hover { color: var(--danger); }

/* Onboardingens andra steg: två stora val per fråga. Korten är knappar med
   aria-pressed, inte radioknappar — valet syns på ytan, inte i en liten prick. */
.onboard .valfri {
  font-weight: 400; font-size: 12.5px; color: var(--muted);
  margin-left: 6px; letter-spacing: .01em;
}
.hint.ob-ok { color: var(--accent-on-soft); }
.hint.ob-fel { color: var(--danger); }
.ob-fraga { border: 0; padding: 0; margin: 0 0 22px; }
.ob-fraga:last-of-type { margin-bottom: 6px; }
.ob-fraga legend { font-size: 15px; font-weight: 600; color: var(--text); padding: 0; margin-bottom: 10px; }
.ob-val { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-kort {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  min-height: 64px; padding: 13px 15px; text-align: left;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; touch-action: manipulation;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.ob-kort b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.ob-kort span { font-size: 13px; color: var(--muted); line-height: 1.35; }
.ob-kort:hover { border-color: var(--blue); background: var(--surface-2); }
.ob-kort:focus-visible { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.ob-kort.vald {
  border-color: var(--blue); background: var(--accent-soft, var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--blue);
}
.ob-kort.vald b { color: var(--accent-on-soft); }
.ob-kort.vald span { color: var(--text); }
@media (max-width: 560px) {
  .ob-val { grid-template-columns: 1fr; }
  .ob-kort { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .ob-kort { transition: none; } }
.check-line { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.check-line input { margin-top: 3px; accent-color: var(--accent); }

/* Toast */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--ink); color: var(--bg);
  padding: 11px 20px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 100; border: 0; box-shadow: var(--shadow-lg); max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========== Underflikar & segmenterade väljare =========== */
.subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--surface); border: var(--line) solid var(--rule); border-radius: var(--radius-pill);
  padding: 5px; margin-bottom: 20px;
}
.sub-tab {
  border: 0; background: none; border-radius: var(--radius-pill); padding: 9px 16px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.sub-tab .ico { opacity: .85; }
.sub-tab:hover { background: var(--surface-2); color: var(--text); }
.sub-tab.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }

.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.seg-btn { border: 0; background: none; border-radius: var(--radius-pill); padding: 7px 13px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }

/* =========== Förändringspilar, mätare och andelsstaplar =========== */
.delta { font-weight: 700; font-size: 12px; white-space: nowrap; }
.delta.up { color: var(--green); }
.delta.down { color: var(--danger); }
.delta.flat { color: var(--muted); }
.kpi.hero .delta.up, .kpi.hero .delta.down, .kpi.hero .delta.flat { color: var(--accent-text); }

.meter { position: relative; height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); margin-top: 6px; overflow: visible; min-width: 84px; }
.meter i { display: block; height: 100%; border-radius: var(--radius-pill); }
.meter u { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--muted); opacity: .5; border-radius: var(--radius); }
.kpi.hero .meter { background: var(--accent-text-soft); }

.share { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.share i { display: block; height: 6px; background: var(--blue-bright); border-radius: var(--radius); flex: none; min-width: 2px; }
.share span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.spark { display: block; width: 100%; height: 26px; margin-top: 8px; }

/* =========== Personrader i tabeller =========== */
.ava {
  width: 28px; height: 28px; border-radius: var(--radius-pill); flex: none;
  background: var(--accent-soft); color: var(--accent-on-soft);
  display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.ava.big { width: 54px; height: 54px; font-size: 19px; }
.ava.proj { background: var(--surface-2); color: var(--text); font-size: 22px; }
.row-link {
  border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 9px; text-align: left; min-width: 0;
}
.row-link span { min-width: 0; }
.row-link b { display: block; }
.row-link em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.row-link:hover b { color: var(--blue-pressed); text-decoration: underline; }

tr.tot td { border-top: var(--line) solid var(--rule-stark); background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
tr.grp td { background: var(--surface-2); font-size: 13px; }

/* =========== Korsmatris =========== */
table.matrix th { vertical-align: bottom; }
table.matrix .th-sub { font-family: var(--font-display); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
table.matrix td.cell { border-radius: var(--radius); text-align: right; font-variant-numeric: tabular-nums; }
table.matrix td.tot-cell { background: var(--surface-2); }
table.matrix tbody tr:hover { background: none; }
table.matrix tbody tr:hover td:first-child { background: var(--surface-2); }

/* =========== Diagram =========== */
.chart-box { width: 100%; position: relative; }
.chart-tip {
  position: absolute; top: 6px; pointer-events: none; opacity: 0; transform: translateY(-4px);
  background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: 8px 11px;
  font-size: 12px; line-height: 1.55; white-space: nowrap; z-index: 5;
  border: 0; box-shadow: var(--shadow-lg); transition: opacity .12s, transform .12s;
}
.chart-tip.show { opacity: 1; transform: translateY(0); }
.chart-tip b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.chart-tip span { display: block; font-variant-numeric: tabular-nums; }
.chart-tip span i { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius); margin-right: 6px; }
.chart-tip .t2 { opacity: .7; margin-top: 2px; }

/* =========== Profilhuvud (person & projekt) =========== */
.profile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.profile-id { display: flex; gap: 16px; align-items: center; min-width: 0; }
.profile-id h1 { font-size: 25px; letter-spacing: -.01em; font-weight: 600; }
.profile-id .pill { margin-left: 6px; }
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
}
.facts > div { min-width: 0; }
.facts span { display: block; color: var(--muted); }
.facts b { display: block; font-size: 15px; font-weight: 600; margin-top: 4px; }

/* =========== Åtgärdslista på översikten =========== */
.act-list { display: grid; gap: 10px; }
.act {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius);
  padding: 12px 14px; background: var(--bg);
}
.act.critical { border-left-color: var(--danger); background: var(--danger-soft); }
.act.warning { border-left-color: var(--amber); }
.act.info { border-left-color: var(--blue-bright); }
.act.good { border-left-color: var(--green); background: var(--green-soft); }
.act-ico { font-size: 17px; flex: none; }
.act-body { flex: 1; min-width: 200px; }
.act-body b { display: block; font-size: 14px; font-weight: 600; }
.act-body span { display: block; font-size: 13px; color: var(--muted); }
.act.critical .act-body span { color: var(--danger); }

/* =========== Arbetslag =========== */
.team-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

/* --- Välj medlemmar när laget skapas --- */
.lag-med {
  border: var(--line) solid var(--rule);
  padding: 0 0 12px; margin: 18px 0 0; min-width: 0;
}
.lag-med { border-radius: var(--radius); }
.lag-med legend {
  color: var(--muted); padding: 0 8px; margin-left: 10px;
}
.lm-antal { color: var(--coral-text); margin-left: 8px; }
.lm-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--line); background: var(--border);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.lm-person {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--surface);
  cursor: pointer; min-width: 0;
  transition: background .12s;
}
.lm-person:hover { background: var(--surface-2); }
.lm-person.vald { background: var(--accent-soft); }
.lm-person.vald .lm-namn b { color: var(--accent-on-soft); }
.lm-person input { flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.lm-person .ava { flex: none; }
.lm-namn { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lm-namn b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-namn em {
  font-style: normal; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-fot { font-size: 12.5px; color: var(--muted); padding: 10px 12px 0; }

/* =========== Lönespecifikation =========== */
.slip { border-left: 3px solid var(--accent); }
.slip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: var(--line) solid var(--rule-stark); }
.slip-co { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.slip-title { font-size: 16px; font-weight: 600; }
.slip-emp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  padding: 16px 0; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.slip-emp span { display: block; color: var(--muted); }
.slip-emp b { display: block; font-size: 15px; font-weight: 600; margin-top: 4px; }
.slip-tbl tr.sum td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.slip-tbl tr.grand td { border-top: var(--line) solid var(--rule-stark); border-bottom: 0; font-size: 16px; padding-top: 12px; }
.slip-tbl tr.grand td:last-child { color: var(--accent); }
.slip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; }
.slip h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.mini-tbl { width: 100%; font-size: 13.5px; }
.mini-tbl td { padding: 6px 0; border-bottom: 1px solid var(--border); }
.mini-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini-tbl tr:last-child td { border-bottom: 0; }

/* =========== Mobilmeny =========== */
.topbar { display: none; }
@media (max-width: 900px) {
  .topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 40;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 10px 16px;
  }
  .topbar .burger { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 7px 12px; font-size: 16px; line-height: 1; }
  .topbar .tb-title { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease;
    border-right: var(--line) solid var(--rule);
  }
  .sidebar.open { transform: translateX(0); }
  .scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--neutral-900) 55%, transparent); z-index: 50; }
  .main { padding: 20px 16px 64px; max-width: none; }
  .page-head h1 { font-size: 25px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .kpi .k-value { font-size: 20px; }
  .subnav { overflow-x: auto; flex-wrap: nowrap; }
  .sub-tab { white-space: nowrap; }
}

/* Utskrift */
.print-head { display: none; }
@media print {
  body { background: #FFFFFF; color: var(--neutral-700); font-size: 12px; font-weight: 500; }
  .sidebar, .topbar, .scrim, .filter-row, .page-head p, .btn, .icon-btn, #toast, .no-print,
  .subnav, .chart-tip, .seg { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  .card, .kpi { box-shadow: none; border-color: var(--neutral-300); break-inside: avoid; }
  .slip { border-left: 0; padding: 0; }
  .slip-tbl tr.grand td { border-top: var(--line) solid var(--neutral-700); }
  .meter, .share i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.matrix td.cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .act { break-inside: avoid; }
  .kpi.hero { background: #FFFFFF; color: var(--neutral-700); border: 1px solid var(--neutral-300); }
  .kpi.hero .k-label, .kpi.hero .k-sub, .kpi.hero .k-sub b, .kpi.hero .k-value,
  .kpi.hero .delta.up, .kpi.hero .delta.down, .kpi.hero .delta.flat { color: var(--neutral-700); }
  .print-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: var(--line) solid var(--neutral-700); padding-bottom: 10px; margin-bottom: 18px;
  }
  .print-head .ph-name { font-size: 18px; font-weight: 700; font-family: var(--font-display); }
  .print-head .ph-meta { font-size: 11px; color: var(--neutral-500); margin-top: 3px; }
  .print-head .ph-title { font-size: 15px; font-weight: 700; text-align: right; }
  .print-head .ph-sub { font-size: 11px; color: var(--neutral-500); text-align: right; }
}


/* =========================================================
   Tillgänglighet och plattformsdetaljer
   Tillagt efter genomgång mot AGENTS.md (Web Interface Guidelines).
   ========================================================= */

/* Enhetlig fokusring (Sky Soda §3): 1px blå kant och 3px ring i blått på
   18 % — samma i alla webbläsare. Fält får den via sin egen fokusregel. */
:focus-visible { outline: 1px solid var(--blue); outline-offset: 1px; box-shadow: var(--focus-ring); border-radius: var(--radius); }
.btn:focus-visible, .chip:focus-visible, .wt-chip:focus-visible, .sub-tab:focus-visible, .seg-btn:focus-visible, .auth-tab:focus-visible { border-radius: var(--radius-pill); }
.main:focus { outline: none; }

/* Tangentbordsanvändare ska slippa tabba genom hela menyn på varje sida. */
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 120;
  transform: translateY(-200%);
  background: var(--accent); color: var(--accent-text);
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip:focus { transform: translateY(0); }

h1, h2, h3 { scroll-margin-top: 24px; }

/* Tar bort 300 ms-fördröjningen och dubbeltryck-zoom på pekskärm. */
button, a, label, select, input, textarea, .cal-day, .chip { touch-action: manipulation; }
html { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 16%, transparent); }

/* iOS zoomar in i sidan när man trycker i ett fält med text under 16 px. */
@media (max-width: 760px) {
  .field input, .field select, .field textarea,
  .day-row input, .day-row select,
  input, select, textarea { font-size: 16px; }
}

/* Innehållet ska inte hamna under hakan eller hemindikatorn på iPhone.
   env() är 0 på vanliga skärmar, så max() ger den vanliga marginalen där. */
@supports (padding: env(safe-area-inset-left)) {
  .main {
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  @media (max-width: 1000px) {
    .main {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
      padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
  }
  .topbar { padding-top: max(0px, env(safe-area-inset-top)); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
}

/* Rörelse är inte gratis för alla — respektera systeminställningen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========== Bekräftelseruta =========== */
.dlg {
  border: var(--line) solid var(--rule); border-radius: var(--radius-xl); padding: 24px 26px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  max-width: 460px; width: calc(100% - 32px);
  /* Den globala reseten (* { margin: 0 }) slar ut webblasarens margin:auto,
     som ar det som centrerar en modal <dialog>. Aterstall den har. */
  margin: auto;
  max-height: calc(100dvh - 40px);
  overscroll-behavior: contain;
}
.dlg::backdrop { background: color-mix(in srgb, var(--neutral-900) 50%, transparent); }
.dlg h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.dlg p { margin-top: 9px; color: var(--muted); font-size: 15px; }
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
/* Bara opacity och transform — egenskaper som inte tvingar fram omritning. */
.dlg[open] { animation: dlg-in .14s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }

/* =========== Formulärfel vid fältet =========== */
.field-err { color: var(--danger); font-size: 12.5px; font-weight: 500; margin-top: 5px; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus, .field select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px oklch(0.58 0.19 18 / 0.18);
}


/* =========== Dagsrutan i kalendern =========== */
.dlg.day-sheet { max-width: 520px; padding: 20px 22px; }
.ds-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ds-head h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.ds-head p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.ds-body { margin-top: 16px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.ds-sec { padding: 12px 0; border-top: 1px solid var(--border); }
.ds-sec:first-child { border-top: 0; padding-top: 0; }
.ds-label { color: var(--muted); margin-bottom: 7px; }
.ds-hours { font-size: 25px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ds-hours em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 9px; }
.ds-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ds-proj { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.ds-proj i { width: 9px; height: 9px; border-radius: var(--radius); flex: none; }
.ds-people { margin-top: 7px; font-size: 13px; color: var(--muted); }
.ds-row { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: 14px; }
.ds-row .dr-dot { margin-top: 6px; }
.ds-row em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.ds-row > span:nth-child(2) { flex: 1; min-width: 0; }
.ds-row.klar > span:nth-child(2) b { opacity: .55; text-decoration: line-through; }
.ds-note .ds-quote { flex: none; opacity: .7; }
.ds-empty { color: var(--muted); font-size: 14px; padding: 8px 0 4px; }
.ds-actions { display: grid; gap: 8px; margin-top: 18px; }
.ds-actions .btn { justify-content: flex-start; }
.ds-form { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.ds-form textarea { resize: vertical; }


/* =========================================================
   Sektionsfärger
   Varje grupp i menyn har en egen kulör som följer med till sidan.
   Färgen säger var du är — den ersätter aldrig grönt, rött och gult,
   som betyder resultat, fara och varning.
   ========================================================= */
:root {
  --sec-arbete:   var(--blue);
  --sec-register: var(--ink);
  --sec-ekonomi:  var(--amber);
  --sec-konto:    var(--ink-muted);
  --sec: var(--sec-arbete);
}
[data-sec="ARBETE"]   { --sec: var(--sec-arbete); }
[data-sec="REGISTER"] { --sec: var(--sec-register); }
[data-sec="EKONOMI"]  { --sec: var(--sec-ekonomi); }
[data-sec="KONTO"]    { --sec: var(--sec-konto); }

/* --- Menyn --- */
.nav-sec { color: var(--sec); }
.nav-item .ico { color: var(--sec); opacity: 1; }
.nav-item.active {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
/* Ikonen är en emoji och behåller sin egen färg; texten är vit på blått. */
.nav-item.active .ico { color: var(--accent-text); }

/* --- Sidhuvudet --- */
.page-head::before {
  display: block;
  color: var(--sec); margin-bottom: 8px;
}
[data-sec="ARBETE"]   .page-head::before { content: "ARBETE"; }
[data-sec="REGISTER"] .page-head::before { content: "REGISTER"; }
[data-sec="EKONOMI"]  .page-head::before { content: "EKONOMI"; }
[data-sec="KONTO"]    .page-head::before { content: "KONTO"; }

/* --- Nyckeltalskorten --- */
/* Sektionens färg sitter i sidrubriken och menyn — korten behöver ingen
   egen färglinje. (Hero-kortets blå sätts i komponentblocket; en upprepning
   här skulle slå ut utskriftsregeln som gör kortet vitt på papper.) */


/* =========================================================
   Bokföring
   Siffrorna är det viktiga här, så tabellerna är täta, högerställda
   och sätts med tabular-nums så att kolumnerna står rakt under varandra.
   ========================================================= */

/* --- Kontonummer --- */
.bp-acct, .rep-acct {
  font-variant-numeric: tabular-nums;
  color: var(--muted); font-size: 13px; font-weight: 500;
  white-space: nowrap;
}

/* --- Förhandsvisning av verifikatet i snabbläget --- */
.bok-prev {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); padding: 14px 16px; margin-top: 18px;
}
.bok-prev.empty-prev { color: var(--muted); font-size: 13.5px; text-align: center; padding: 22px 16px; }
.bok-prev .bp-head {
  color: var(--sec); margin-bottom: 8px;
}
.bp-tbl td { padding: 5px 0; }
.bp-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bp-tbl tr.bp-sum td {
  border-top: 1px solid var(--text); border-bottom: 0;
  font-weight: 700; padding-top: 8px;
}
.bok-warn {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  background: var(--amber-soft, color-mix(in srgb, var(--amber) 14%, transparent));
  color: var(--text); border-radius: var(--radius); padding: 9px 12px;
}

/* --- Balansraden --- */
.bok-bal {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  margin-top: 14px; padding: 11px 14px; border-radius: var(--radius);
  background: var(--surface-2); font-size: 13.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bok-bal b { color: var(--text); font-variant-numeric: tabular-nums; }
.bok-bal .bb-diff { margin-left: auto; font-weight: 700; }
.bok-bal.ok { background: var(--green-soft); color: var(--green); }
.bok-bal.ok b { color: var(--green); }
.bok-bal.bad { background: var(--danger-soft); color: var(--danger); }
.bok-bal.bad b { color: var(--danger); }

/* --- Radredigering, rad för rad --- */
.bok-cols { display: grid; grid-template-columns: 2.4fr 1fr 1fr 38px; gap: 8px; padding: 0 10px; margin-top: 18px; }
.bok-cols div { color: var(--muted); }
.bok-lines { display: grid; gap: 8px; margin-top: 8px; }
.bok-line {
  display: grid; grid-template-columns: 2.4fr 1fr 1fr 38px; gap: 8px; align-items: center;
  background: var(--surface-2); border-radius: var(--radius); padding: 8px 10px;
}
.bok-line input {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font-size: 14px; width: 100%; color: var(--text);
}
.bok-line input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.bok-line .bl-d, .bok-line .bl-k { text-align: right; font-variant-numeric: tabular-nums; }
.bok-line .del { border: 0; background: none; color: var(--muted); font-size: 15px; border-radius: var(--radius); padding: 6px; }
.bok-line .del:hover { color: var(--danger); background: var(--danger-soft); }
@media (max-width: 720px) {
  .bok-cols { display: none; }
  .bok-line { grid-template-columns: 1fr 1fr 38px; }
  .bok-line .bl-acct { grid-column: 1 / -1; }
}

/* --- Verifikationslistan: ett kalkylblad, en rad per konto ---
   Grupperingen görs med varannan-band per verifikat i stället för ramar,
   så ögat ser var ett verifikat börjar utan att tabellen blir rutig. */
.ledger-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger-tbl th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 calc(var(--line) * -1) var(--rule);
  padding: 9px 10px;
}
.ledger-tbl td { padding: 6px 10px; border-bottom: 0; vertical-align: baseline; }
.ledger-tbl tbody tr.b1 { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.ledger-tbl tbody tr:hover, .ledger-tbl tbody tr.b1:hover { background: color-mix(in srgb, var(--sec) 8%, transparent); }
.ledger-tbl tbody tr.vstart td { border-top: 1px solid var(--border); }
.ledger-tbl tbody tr.vstart:first-child td { border-top: 0; }
.ledger-tbl tbody tr.obal { outline: 1px solid var(--danger); outline-offset: -1px; }

/* --- Utfällbara verifikat --- */
/* Summeringsraden är verifikatet; kontoraderna ligger under och fälls ut. */
.ledger-tbl tbody tr.ver-sum td { border-top: 1px solid var(--border); padding-top: 8px; padding-bottom: 8px; }
.ledger-tbl tbody tr.ver-sum:first-child td { border-top: 0; }
.ledger-tbl tbody tr.ver-sum.open td { border-bottom: 1px solid var(--border); }
.ledger-tbl tbody tr.ver-rad.stängd { display: none; }
.ledger-tbl tbody tr.ver-rad td { padding-top: 4px; padding-bottom: 4px; }
.ledger-tbl tbody tr.ver-rad .lg-acct { padding-left: 10px; }
.ledger-tbl tbody tr.ver-rad.träff { background: var(--accent-soft); }
.ledger-tbl .lg-tog { width: 1%; padding-left: 6px; padding-right: 0; }
.ledger-tbl .lg-konton { color: var(--muted); white-space: nowrap; }
.ledger-tbl .lg-konton .lg-kn { overflow: hidden; text-overflow: ellipsis; }
.ledger-tbl .lg-konton .lg-kn { font-variant-numeric: tabular-nums; }
.ver-tog {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  width: 24px; height: 24px; line-height: 1; padding: 0; border-radius: var(--radius-pill);
  display: inline-grid; place-items: center; font-size: 13px;
  transition: transform .14s ease, color .12s, border-color .12s;
}
.ver-tog:hover { color: var(--accent); border-color: var(--accent); }
.ver-tog.on { transform: rotate(180deg); color: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ver-tog { transition: none; } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Upprepade uppgifter inom samma verifikat tonas ned. */
.ledger-tbl .rep { color: var(--muted); opacity: .55; }
.ledger-tbl .lg-date { white-space: nowrap; }
.ledger-tbl .lg-ver { font-variant-numeric: tabular-nums; }
.ledger-tbl .lg-desc { min-width: 160px; max-width: 340px; }
.ledger-tbl .lg-desc > span:not(.lg-note) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-tbl .lg-reg {
  display: block; font-style: normal; font-size: 11px;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ledger-tbl .lg-titel { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ledger-tbl .lg-titel > span { flex: 0 1 auto; min-width: 0; }
.ledger-tbl .lg-titel .v-chip { flex: none; margin-left: 4px; }
.ledger-tbl .lg-desc em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-tbl .lg-acct { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ledger-tbl .lg-name {
  color: var(--muted); min-width: 150px; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ledger-tbl .lg-note { display: inline; color: var(--muted); margin-left: 6px; font-size: 12px; cursor: help; }
.ledger-tbl .lg-act { white-space: nowrap; width: 1%; }
.ledger-tbl .lg-act .icon-btn { padding: 3px 5px; font-size: 13px; }

/* Färgpricken säger kontoklass. Kontonummer och benämning står alltid
   utskrivna, så färgen är en genväg — aldrig den enda informationen. */
.lg-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: var(--radius);
  background: var(--rowc, var(--muted)); margin-right: 7px; vertical-align: middle;
}
tr.rk-int,   .lg-legend .rk-int   { --rowc: var(--s2); }
tr.rk-kost,  .lg-legend .rk-kost  { --rowc: var(--s6); }
tr.rk-moms,  .lg-legend .rk-moms  { --rowc: var(--s5); }
tr.rk-bank,  .lg-legend .rk-bank  { --rowc: var(--s7); }
tr.rk-till,  .lg-legend .rk-till  { --rowc: var(--s1); }
tr.rk-skuld, .lg-legend .rk-skuld { --rowc: var(--muted); }
tr.rk-int .lg-acct { color: var(--acct-int); }
tr.rk-kost .lg-acct { color: var(--acct-kost); }

/* Summeringsraden ligger kvar i botten när man skrollar i tabellen. */
.ledger-tbl tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 1px var(--text);
  font-weight: 700; padding: 10px;
}

.lg-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px; font-size: 12.5px; color: var(--muted);
}
.lg-legend span { display: inline-flex; align-items: center; }

/* =========================================================
   Bokföring — verifikatets panel, kontroller och dokumentation
   Platta ytor, 2px ink-linjer, inga skuggor. Statusen bärs alltid
   av både ord och form, aldrig av färgen ensam.
   ========================================================= */

/* --- Motpart och saknade uppgifter --- */
.ledger-tbl .lg-party {
  color: var(--muted); min-width: 120px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saknas { color: var(--muted); font-style: italic; opacity: .75; }
.ledger-tbl .lg-desc em.saknas { font-style: italic; }
.v-chip { margin-left: 8px; vertical-align: 1px; }
.ledger-tbl tbody tr.mak .lg-desc > span { text-decoration: line-through; text-decoration-thickness: 1px; }
.ledger-tbl tbody tr.mak .lg-ver b { text-decoration: line-through; }

/* --- Riktning: inkomst, utgift eller omföring ---
   Debet och kredit är alltid lika, så riktningen måste synas för sig.
   Fyra bärare samtidigt — pil, ord, tecken och färg — så att den aldrig
   vilar på färgen ensam. Plommon mot mässing, precis som i diagrammen;
   de funktionella tonerna är reserverade för status. */
.flode {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 2px 9px; border: 1px solid currentColor; border-radius: var(--radius-pill);
}
.flode i { font-style: normal; font-size: 11px; }
.flode b { font-variant-numeric: tabular-nums; font-weight: 700; }
.flode.f-inkomst  { color: var(--accent-on-soft); background: var(--accent-soft); }
.flode.f-utgift   { color: var(--amber); background: var(--amber-soft); }
.flode.f-omforing { color: var(--muted); background: var(--surface-2); }
.ledger-tbl .lg-konton { display: flex; align-items: baseline; gap: 8px; }
.ledger-tbl .lg-konton .flode { flex: none; }

/* --- Verifikatets panel --- */
.ledger-tbl tbody tr.ver-detalj.stängd { display: none; }
.ledger-tbl tbody tr.ver-detalj > td { padding: 0 10px 14px; }
.ver-panel {
  border-left: 3px solid var(--blue-bright);
  background: var(--bg); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; }
.vp-k { color: var(--muted); margin-bottom: 3px; }
.vp-v { font-size: 13.5px; }
.vp-block { display: flex; flex-direction: column; gap: 6px; }
.vp-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.vp-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.vp-log li {
  display: grid; grid-template-columns: 175px 155px 1fr; gap: 4px 14px;
  font-size: 12.5px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--border);
}
.vp-log li:last-child { border-bottom: 0; }
.vl-akt { font-weight: 600; }
.vl-tid { color: var(--muted); font-variant-numeric: tabular-nums; }
.vl-vem { color: var(--muted); }
.vl-txt { grid-column: 1 / -1; color: var(--muted); }
.vp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vp-status { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 220px; }
@media (max-width: 720px) {
  .vp-log li { grid-template-columns: 1fr; gap: 1px; }
  .vl-txt { grid-column: auto; }
}

/* --- Rättelserutan i Bokför --- */
.korr-box {
  border: var(--line) solid var(--blue-tint);
  background: var(--accent-soft); border-radius: var(--radius-lg);
  padding: 18px 20px; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.korr-head { color: var(--accent-on-soft); }
.korr-steg { margin: 0; padding: 0; list-style: none; counter-reset: k; display: flex; flex-direction: column; gap: 8px; }
.korr-steg li {
  counter-increment: k;
  display: grid; grid-template-columns: 26px 1fr; gap: 2px 12px;
  font-size: 14px; align-items: baseline;
}
.korr-steg li::before {
  content: counter(k);
  grid-row: span 2;
  font-weight: 700; font-size: 12px;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text); border-radius: var(--radius-pill);
}
.korr-steg li .ks-rad { grid-column: 2; }
.korr-steg li span { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.korr-lag { font-size: 12.5px; margin: 0; padding-top: 4px; border-top: 1px solid var(--blue-tint); }

/* --- Kontrollpanelen --- */
.card.kontroll { padding: 18px 22px; }
.kt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.kt-head h2 { margin-bottom: 0; }
.kt-sammanfattning {
  padding: 4px 11px; border: 1px solid currentColor; border-radius: var(--radius-pill);
}
.kt-sammanfattning.ok { color: var(--green); background: var(--green-soft); }
.kt-sammanfattning.warn { color: var(--amber); background: var(--amber-soft); }
.kt-sammanfattning.bad { color: var(--danger); background: var(--danger-soft); }
.kt-lista { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--border); }
.kt-lista li {
  background: var(--surface);
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  padding: 10px 2px 10px 0; font-size: 14px; align-items: start;
}
.kt-ikon {
  width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; margin-top: 1px;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
}
.kt-lista li.ok .kt-ikon { color: var(--green); background: var(--green-soft); }
.kt-lista li.warn .kt-ikon { color: var(--amber); background: var(--amber-soft); }
.kt-lista li.bad .kt-ikon { color: var(--danger); background: var(--danger-soft); }
.kt-lista li.ok .kt-txt { color: var(--muted); }
.kt-txt em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* =========================================================
   Deklarera & betala
   Året som en lista: datumet först, sedan vad och hur mycket.
   Brådskan bärs av ord, tecken och färg samtidigt.
   ========================================================= */
.pl-manad { margin-top: 20px; }
.pl-manad:first-of-type { margin-top: 6px; }
.pl-manad-namn {
  color: var(--amber); padding-bottom: 7px;
  border-bottom: var(--line) solid var(--rule); margin-bottom: 1px;
}
.pl-lista { display: grid; gap: 1px; background: var(--border); }
.pl-rad {
  background: var(--surface);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 150px 130px auto;
  gap: 4px 16px; align-items: center;
  padding: 12px 4px 12px 0;
  border-left: 3px solid transparent;
}
.pl-rad.st-forsenad { border-left-color: var(--danger); background: var(--danger-soft); }
.pl-rad.st-idag     { border-left-color: var(--danger); }
.pl-rad.st-brads    { border-left-color: var(--amber); }
.pl-rad.st-klar     { border-left-color: var(--green); }
.pl-rad.st-klar .pl-titel, .pl-rad.st-klar .pl-belopp b { opacity: .6; }

.pl-dag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05; padding-left: 8px;
}
.pl-dag b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pl-dag em { font-style: normal; font-size: 11px; color: var(--muted); }
.pl-vad { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-titel { font-size: 15px; font-weight: 600; }
.pl-sub { font-size: 12.5px; color: var(--muted); }
.pl-extra { font-size: 12px; color: var(--muted); }
.pl-extra.varning { color: var(--amber); font-weight: 500; }
.pl-belopp { text-align: right; display: flex; flex-direction: column; line-height: 1.25; }
.pl-belopp b { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-belopp em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.pl-status { display: flex; justify-content: flex-start; }
.pl-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 3px 11px; border: 1px solid currentColor; border-radius: var(--radius-pill);
}
.pl-chip i { font-style: normal; font-size: 11px; }
.pl-chip.s-forsenad { color: var(--danger); background: var(--danger-soft); }
.pl-chip.s-idag     { color: var(--danger); background: var(--danger-soft); }
.pl-chip.s-brads    { color: var(--amber);  background: var(--amber-soft); }
.pl-chip.s-snart    { color: var(--text);   background: var(--surface-2); }
.pl-chip.s-kommande { color: var(--muted);  background: transparent; border-color: var(--border); }
.pl-chip.s-klar     { color: var(--green);  background: var(--green-soft); }
.pl-akt { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-right: 8px; }
.pl-akt .btn { white-space: nowrap; }

@media (max-width: 1000px) {
  .pl-rad { grid-template-columns: 48px minmax(0, 1fr) auto; padding-right: 10px; }
  .pl-belopp { grid-column: 3; text-align: right; }
  .pl-status { grid-column: 2; }
  .pl-akt { grid-column: 1 / -1; justify-content: flex-start; padding: 6px 0 0 56px; }
}
@media (max-width: 560px) {
  .pl-rad { grid-template-columns: 44px minmax(0, 1fr); }
  .pl-belopp, .pl-status { grid-column: 2; align-items: flex-start; text-align: left; }
  .pl-akt { padding-left: 0; }
}
@media print {
  .pl-rad { break-inside: avoid; }
}

/* Eget datum märks ut i båda vyerna. */
.pl-egen {
  display: inline-block; font-size: 11px;
  padding: 1px 8px; margin-left: 6px; vertical-align: 1px;
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.dr-st { flex: none; }
.date-row.klar .dr-main b, .date-row.klar .dr-when b { opacity: .55; text-decoration: line-through; }
.date-row .dr-when b { display: block; font-variant-numeric: tabular-nums; }
.cal-day .cd-ev.klar { opacity: .5; text-decoration: line-through; }

/* --- Snabbval för låsdatum --- */
.las-snabb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.ls-etikett { color: var(--muted); margin-right: 2px; }
.kt-lista li { grid-template-columns: 26px 1fr auto; }
.kt-knapp { align-self: center; padding-right: 2px; }

/* --- Momsrapportens åtgärdsruta --- */
.moms-atgard { margin-top: 18px; }
.ma-klar, .ma-form {
  border: var(--line) solid var(--rule); border-radius: var(--radius);
  padding: 16px 18px; font-size: 14px;
}
.ma-klar { background: var(--green-soft); border-color: var(--green); display: flex; flex-direction: column; gap: 14px; }
.ma-las { border-top: 1px solid var(--green); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ma-las p { font-size: 13px; color: var(--muted); max-width: 68ch; }
.ma-las-klar { font-size: 13px; font-weight: 600; color: var(--green); }
.ma-form { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; background: var(--accent-soft); border-color: var(--blue-tint); }
.ma-form > div:first-child { flex: 1; min-width: 240px; }
.ma-form p { font-size: 13px; color: var(--muted); margin-top: 5px; }
.ma-knapp { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ma-knapp .field { min-width: 150px; }
.rep-tbl tr.mr-moms td { font-weight: 600; }
.rep-tbl .rep-jamf { color: var(--muted); }

/* --- Behandlingshistoriken --- */
.hist-tid { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.hist-akt {
  display: inline-block; padding: 2px 9px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
}
.hist-akt.h-reg  { color: var(--green); background: var(--green-soft); }
.hist-akt.h-imp  { color: var(--info, var(--s7)); background: var(--surface-2); }
.hist-akt.h-ratt { color: var(--amber); background: var(--amber-soft); }
.hist-akt.h-mak  { color: var(--danger); background: var(--danger-soft); }
.hist-akt.h-mot  { color: var(--accent-on-soft); background: var(--accent-soft); }

/* --- Systemdokumentationen --- */
.card.dok { max-width: 900px; }
.dok-ing { font-size: 14px; color: var(--muted); margin-bottom: 8px; max-width: 68ch; }
.dok-sek {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px;
  padding: 22px 0; border-top: var(--line) solid var(--rule);
}
.dok-nr {
  font-size: 20px; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dok-kropp { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dok-kropp h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dok-kropp p { font-size: 16px; max-width: 68ch; }
.dok-dl { margin: 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dok-dl > div { background: var(--surface); display: grid; grid-template-columns: 230px 1fr; gap: 14px; padding: 9px 12px; }
.dok-dl dt { font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 0; }
.dok-dl dd { margin: 0; font-family: var(--font-text); font-weight: 400; font-size: 15px; line-height: 1.5; }
.dok-dl dd b { font-weight: 400; font-style: italic; }
.dok-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.dok-tbl th { text-align: left; padding: 7px 10px; border-bottom: var(--line) solid var(--rule); }
.dok-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dok-tbl td.mono, .mono { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dok-ok { font-size: 13px; color: var(--green); font-weight: 500; }
.dok-varning {
  font-size: 13px; color: var(--danger); font-weight: 500;
  background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--radius); padding: 10px 12px;
}
.dok-kedja {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12.5px; padding: 12px 0;
}
.dok-kedja span { border: 1px solid var(--rule); padding: 5px 12px; font-weight: 500; background: var(--surface); border-radius: var(--radius-pill); }
.dok-kedja b { color: var(--accent); font-weight: 600; }
.dok-fot { font-size: 12px; color: var(--muted); padding-top: 20px; border-top: var(--line) solid var(--rule); }
@media (max-width: 720px) {
  .dok-sek { grid-template-columns: 1fr; gap: 8px; }
  .dok-dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Rutan med textfält (makuleringsorsak) --- */
.dlg-form { display: flex; flex-direction: column; }

/* Debet och kredit får varsin ton så kolumnerna går att följa med ögat. */
.c-deb { background: color-mix(in srgb, var(--s7) 8%, transparent); }
.c-kre { background: color-mix(in srgb, var(--s3) 10%, transparent); }
.ledger-tbl th.c-deb, .ledger-tbl th.c-kre { background-color: var(--surface); }
.ledger-tbl th.c-deb { box-shadow: inset 0 calc(var(--line) * -1) var(--rule), inset 0 0 0 99px var(--accent-soft); }
.ledger-tbl th.c-kre { box-shadow: inset 0 calc(var(--line) * -1) var(--rule), inset 0 0 0 99px var(--amber-soft); }

/* Antalet bakom varje filterknapp */
.seg-btn .seg-n {
  margin-left: 7px; font-size: 11px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.seg-btn.on .seg-n { color: inherit; opacity: .7; }

@media (max-width: 900px) {
  .ledger-tbl { font-size: 13px; }
  .ledger-tbl .lg-party, .ledger-tbl th:nth-child(5) { display: none; }
  .ledger-tbl .lg-name { display: none; }
  .ledger-tbl .lg-konton .lg-kn { display: none; }
  .ledger-tbl .lg-desc { max-width: 180px; }
}

/* --- Rapporttabeller --- */
.rep-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.rep-tbl td { padding: 5px 8px; border-bottom: 0; vertical-align: baseline; }
.rep-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-tbl td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-tbl tr:hover { background: none; }
.rep-tbl tr.rep-head td { padding-top: 18px; color: var(--sec); }
.rep-tbl tr.rep-sum td {
  border-top: 1px solid var(--border); font-weight: 600; padding-top: 7px;
}
.rep-tbl tr.rep-grand td {
  border-top: 2px solid var(--text); font-weight: 600; font-size: 15px; padding: 10px 8px;
}
.rep-tbl tr.rep-grand td:last-child { color: var(--sec); }

/* --- Import --- */
.imp-result { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.imp-result table { font-size: 13.5px; }

@media print {
  .rep-tbl tr.rep-head td, .rep-tbl tr.rep-grand td:last-child { color: var(--neutral-700); }
  .bok-bal { background: #FFFFFF; border: 1px solid var(--neutral-300); color: var(--neutral-700); }
  .ledger-tbl th, .ledger-tbl tfoot td { position: static; background: #FFFFFF; box-shadow: none; border-bottom: 1px solid var(--neutral-700); }
  .ledger-tbl tfoot td { border-top: 1px solid var(--neutral-700); border-bottom: 0; }
  .ledger-tbl tbody tr.b1, .ledger-tbl .c-deb, .ledger-tbl .c-kre { background: #FFFFFF; }
  .ledger-tbl tbody tr.ver-rad.stängd { display: table-row; }
  .ledger-tbl tbody tr.ver-rad.träff { background: #FFFFFF; }
  /* Utskriften är verifikationslistan — panelen med historik hör till skärmen. */
  .ledger-tbl tbody tr.ver-detalj { display: none; }
  .ledger-tbl tbody tr.mak .lg-desc > span, .ledger-tbl tbody tr.mak .lg-ver b { text-decoration: line-through; }
  .dok-sek, .dok-dl > div, .dok-tbl tr { break-inside: avoid; }
  .dok-kedja span { border-color: var(--neutral-500); }
  .hist-akt, .kt-ikon, .v-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ledger-tbl tbody tr.vstart td { border-top: 1px solid var(--neutral-300); }
  .ledger-tbl .rep { opacity: 1; color: var(--neutral-500); }
  .lg-dot, .lg-legend { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =========================================================
   Dokument — filarkivet
   ========================================================= */
.dz {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 18px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--surface) var(--placeholder-stripes); color: var(--muted);
  transition: border-color .15s ease, background-color .15s ease;
}
.dz b { color: var(--text); font-size: 14.5px; }
.dz span { font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; max-width: 60ch; }
.dz-ico { font-size: 26px; }
.dz:hover, .dz.drag { border-color: var(--blue); background: var(--accent-soft); }
.dz.har-filer { border-style: solid; border-color: var(--blue); background: var(--surface); color: var(--text); }
.dz:focus-within { outline: 1px solid var(--blue); outline-offset: 1px; box-shadow: var(--focus-ring); }
.dz input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.fil-ico { font-size: 20px; flex: none; }
.fil-status:not(:empty) { margin-left: 8px; }
.fil-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; }
.fil-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.fil-chip.lag { background: var(--accent-soft); color: var(--accent-on-soft); }
.fil-chip.proj { background: var(--green-soft); color: var(--green); }

/* Ärvd delning — dokument som delas via sin mapp */
.fil-chip.arv { opacity: .62; font-weight: 500; }

/* =========================================================
   Offerter — radeditorn
   ========================================================= */
.off-rader { overflow-x: auto; }
.off-rad {
  display: grid;
  grid-template-columns: minmax(170px, 2.4fr) 84px 70px 104px 104px 34px;
  gap: 8px; align-items: center;
  min-width: 600px;
  padding: 3px 0;
}
.off-rad.head { color: var(--muted); padding-bottom: 5px; }
.off-rad input {
  width: 100%; min-width: 0;
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; font-size: 14px;
}
.off-rad input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: var(--focus-ring);
}
.off-belopp { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.off-summa { font-size: 13.5px; color: var(--muted); margin-left: auto; }
.off-summa b { color: var(--text); }

/* Kompakt släppyta på mappsidan */
.dz-kompakt { padding: 18px 16px; }

/* =========================================================
   Utseende & profil — dokumentstil och logotyp
   (Appens färg är fast Sky Soda-blå; den tidigare accentväljaren är borttagen.)
   ========================================================= */

/* ---- Stilväljaren: tre miniatyrer av ett utskick ---- */
.stil-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stil-kort {
  border: var(--line) solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 12px; text-align: left; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.stil-kort:hover { border-color: var(--blue); }
.stil-kort.vald { border-color: var(--blue); box-shadow: var(--focus-ring); }
.stil-kort > b { font-size: 14px; font-weight: 600; margin-top: 9px; }
.stil-kort > b::after { content: ""; }
.stil-kort.vald > b::after { content: " ✓"; color: var(--blue); }
.stil-kort > em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.4; }
.sk-mini {
  display: block; background: #FFFFFF; border: 1px solid var(--border); border-radius: 6px;
  padding: 10px; height: 112px; overflow: hidden;
}
.sk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.sk-namn { font-weight: 700; font-size: 11px; color: var(--neutral-800); line-height: 1; }
.sk-doknr { width: 26px; height: 5px; border-radius: 2px; background: var(--neutral-300); }
.sk-rad { display: block; height: 5px; border-radius: 2px; background: var(--neutral-200); margin: 7px 0; }
.sk-rad.w9 { width: 90%; } .sk-rad.w7 { width: 70%; } .sk-rad.w8 { width: 80%; }
.sk-total { display: block; width: 44%; height: 8px; border-radius: 2px; margin: 11px 0 0 auto; background: var(--accent); }
/* Ren — tunn linje under huvudet, accentfärgad summa */
.sk-ren .sk-head { border-bottom: 1px solid var(--border); padding-bottom: 7px; }
/* Klassisk — serifer, dubbellinje, svartvitt */
.sk-klassisk .sk-namn { font-family: Georgia, "Times New Roman", serif; letter-spacing: .05em; }
.sk-klassisk .sk-head { border-bottom: 3px double var(--neutral-800); padding-bottom: 7px; }
.sk-klassisk .sk-rad { background: var(--neutral-300); }
.sk-klassisk .sk-total { background: var(--neutral-800); }
/* Kraftig — svart platta och grova rader */
.sk-kraftig .sk-head { background: var(--neutral-800); margin: -10px -10px 9px; padding: 9px 10px 8px; }
.sk-kraftig .sk-namn { color: #FFFFFF; text-transform: uppercase; }
.sk-kraftig .sk-doknr { background: rgba(255,255,255,.55); }
.sk-kraftig .sk-rad { height: 7px; }
.sk-kraftig .sk-total { height: 11px; background: var(--neutral-800); }

/* ---- Logotypen ---- */
.logo-rad { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-preview {
  max-height: 44px; max-width: 180px; object-fit: contain;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px;
}
.sr-dold { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.side-brand { display: block; max-height: 30px; max-width: 150px; object-fit: contain; margin-bottom: 6px; }
.ph-logo { display: none; }

/* ---- Dokumentstilarna vid utskrift ---- */
@media print {
  .ph-left { display: flex; align-items: center; gap: 12px; }
  .ph-logo { display: block; max-height: 48px; max-width: 170px; object-fit: contain; }

  /* Klassisk: serifer, dubbellinje, helt svartvitt (accenten blir svart),
     fullständiga tabellinjer som ett klassiskt brevhuvudsdokument */
  [data-doc-theme="klassisk"] { --accent: var(--neutral-700); --accent-link: var(--neutral-700); }
  [data-doc-theme="klassisk"] .print-head { border-bottom: 4px double var(--neutral-700); }
  [data-doc-theme="klassisk"] .print-head .ph-name { font-family: Georgia, "Times New Roman", serif; letter-spacing: .03em; font-size: 20px; }
  [data-doc-theme="klassisk"] .print-head .ph-title { font-family: Georgia, "Times New Roman", serif; }
  [data-doc-theme="klassisk"] .invoice-draft th { font-family: Georgia, "Times New Roman", serif; letter-spacing: .06em; }
  [data-doc-theme="klassisk"] .invoice-draft th, [data-doc-theme="klassisk"] .invoice-draft td { border: 1px solid var(--neutral-400); padding: 6px 9px; }
  [data-doc-theme="klassisk"] .card { border-color: var(--neutral-400); }
  [data-doc-theme="klassisk"] .pill { border: 1px solid var(--neutral-400); background: #FFFFFF !important; color: var(--neutral-700) !important; }

  /* Kraftig: svart huvudplatta, versaler och grova avslut — byggarens papper */
  [data-doc-theme="kraftig"] .print-head {
    background: var(--neutral-700); color: #FFFFFF; border-bottom: 0;
    padding: 12px 14px; border-radius: 4px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  [data-doc-theme="kraftig"] .print-head .ph-name { text-transform: uppercase; letter-spacing: .05em; }
  [data-doc-theme="kraftig"] .print-head .ph-meta,
  [data-doc-theme="kraftig"] .print-head .ph-sub { color: rgba(255,255,255,.78); }
  [data-doc-theme="kraftig"] .ph-logo { filter: brightness(0) invert(1); }  /* logotypen som vit siluett på plattan */
  [data-doc-theme="kraftig"] .invoice-draft thead th {
    background: var(--neutral-200); border-bottom: 2px solid var(--neutral-700);
    text-transform: uppercase; letter-spacing: .05em;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  [data-doc-theme="kraftig"] .invoice-draft tbody tr:last-child td { border-top: 2px solid var(--neutral-700); font-size: 13px; }
  [data-doc-theme="kraftig"] .slip-tbl tr.grand td { border-top: 3px solid var(--neutral-700); }
}

/* =========================================================
   Molnet — väntskärm, sparstatus och knappar i väntläge
   ========================================================= */
.loading {
  min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px;
  color: var(--muted); font-family: var(--font-text); font-size: 17px;
}
.loading .mark {
  width: 86px; height: 48px; border-radius: 7px;
  animation: loading-pulse 1.4s ease-in-out infinite;
}
@keyframes loading-pulse { 50% { opacity: .55; transform: scale(.96); } }

/* Sparstatus i menyn: ordet bär betydelsen, pricken färgen. */
.sync-state { font-size: 12px; color: var(--muted); min-height: 16px; }
.sync { display: inline-flex; align-items: center; gap: 6px; }
.sync::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--neutral-400); flex: none; }
.sync.ok::before { background: var(--green-solid); }
.sync.busy::before { background: var(--blue-bright); animation: loading-pulse 1s ease-in-out infinite; }
.sync.wait::before { background: var(--amber-solid); }
.sync.bad { color: var(--danger); }
.sync.bad::before { background: var(--danger-solid); }
.sync.demo::before { background: var(--coral); }

/* Knapp som väntar på servern: behåller sin text, visar en snurra före. */
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: var(--radius-pill);
  border: 2px solid currentColor; border-right-color: transparent;
  color: var(--accent-text); animation: btn-spin .7s linear infinite;
}
.btn-ghost.busy::after { color: var(--blue-pressed); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading .mark, .sync.busy::before { animation: none; }
}

/* Märket på papper: mörk bläckplatta, och färgen ska följa med i utskriften. */
@media print {
  .mark { background: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}