* { box-sizing: border-box; }

:root {
  --bg: #F5F4EF;
  --text: #26261F;
  --text-secondary: #33352B;
  --text-muted: #5A5C4F;
  --text-dim: #7A7C6E;
  --text-dimmer: #8A8C7E;

  --topbar-bg: #16332B;
  --topbar-text: rgba(255,255,255,0.85);
  --topbar-text-hover: #fff;

  --surface: #fff;
  --surface-2: #EFEEE6;
  --surface-locked: #E8E6DA;
  --shadow-color: 22,51,43;

  --border: #DBD8CC;
  --border-soft: #E8E6DA;

  --accent: #0F6E5C;
  --accent-hover: #0C5A4B;
  --on-accent: #fff;

  --danger: #A32B23;
  --danger-strong: #7A231C;
  --danger-bg: #FBDFDD;

  --warning: #8A6100;
  --warning-bg: #FCEFC7;

  --success-bg: #DCF0E4;

  --radius: 13px;
}

[data-theme="morkt"] {
  --bg: #12201B;
  --text: #E8F0EA;
  --text-secondary: #C7D6CD;
  --text-muted: #9FB7AC;
  --text-dim: #74897E;
  --text-dimmer: #64837A;

  --topbar-bg: #0A130E;
  --topbar-text: rgba(232,240,234,0.85);
  --topbar-text-hover: #fff;

  --surface: #1B2A24;
  --surface-2: #223027;
  --surface-locked: rgba(255,255,255,0.06);
  --shadow-color: 0,0,0;

  --border: rgba(52,211,153,0.18);
  --border-soft: rgba(255,255,255,0.08);

  --accent: #34D399;
  --accent-hover: #45DDA8;
  --on-accent: #0A160F;

  --danger: #E8806D;
  --danger-strong: #F0A897;
  --danger-bg: rgba(232,128,109,0.14);

  --warning: #FBBF24;
  --warning-bg: rgba(251,191,36,0.14);

  --success-bg: rgba(52,211,153,0.14);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Standardutseende för ALLA knappar i appen — samma solida gröna piller
   som "Spara"-knapparna. Klasser med egen bakgrund/kant (.reject-button,
   .row-action, .rad-remove, .lage-tab, .chip-remove, .upload-back, .logout-button)
   har högre specificitet och vinner ändå över den här. */
button {
  font-family: inherit;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 9px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  cursor: pointer;
  height: fit-content;
}
button:hover { background: var(--accent-hover); }

/* Standardutseende för ALLA select/checkbox i appen — utan detta faller
   de tillbaka på webbläsarens omärkta standardutseende (vitt/blått),
   vilket sticker ut mot resten av det mörka/ljusa temat. Täcker även
   fristående select/checkbox utanför .field-group, t.ex. roll-väljaren
   och admin-kryssrutan i Användare-tabellerna (installningar/
   anvandare.html, byra/installningar/anvandare.html). */
select {
  font-family: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
}
input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--topbar-bg);
  color: #fff;
}
.brand { font-weight: 600; }
/* Temaanpassad (INTE hårdkodad vit text) — knappen satt tidigare alltid
   direkt i den mörka .topbar:en, men sitter numera i .anvandarmeny-meny
   (base.html) och i admin/fakturering.html:s vanliga sidinnehåll, båda
   på temats vanliga --surface-bakgrund. Vit text blev osynlig mot en
   ljus yta i ljust tema (rapporterad bugg 2026-08-11). */
.logout-button {
  background: var(--surface); color: var(--danger); border: 1px solid var(--danger);
  border-radius: 9px; padding: 0.4rem 0.9rem; font-size: 0.85rem; cursor: pointer;
  width: 100%;
}
.logout-button:hover { background: var(--danger-bg); }

/* Användarmenyn i topraden (namn/roll, tema, språk-platshållare,
   logga ut) — samma öppna/stäng-mönster som .bolagsvaxlare nedan,
   bara menyn öppnas åt vänster (right: 0) eftersom knappen sitter
   längst till höger i headern. */
.anvandarmeny { position: relative; }
.anvandarmeny-knapp {
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9px; padding: 0.4rem 0.8rem; font-size: 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.anvandarmeny-knapp:hover { background: rgba(255,255,255,0.16); }
.anvandarmeny-meny {
  position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 220px;
  background: var(--surface); border-radius: var(--radius); color: var(--text);
  box-shadow: 0 8px 24px rgba(var(--shadow-color),0.25); padding: 0.75rem; z-index: 30;
  display: flex; flex-direction: column; gap: 0.75rem;
}
/* display:flex ovan har samma specificitet som webbläsarens inbyggda
   [hidden]{display:none} — men EGEN css vinner alltid över UA-stilar,
   så utan den här explicita override:n slutar hidden-attributet fungera
   helt (menyn syns hela tiden, oavsett JS-togglingen i base.html). */
.anvandarmeny-meny[hidden] { display: none; }
.anvandarmeny-meny label {
  display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted);
}
.anvandarmeny-meny select {
  padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.85rem; background: var(--surface); color: var(--text);
}

/* Byrå/bolag-växlaren i topraden — se _satt_bolagsvaxlare i
   app/dependencies.py för hur companies-listan fylls på (request.state,
   inte en ny route). */
.bolagsvaxlare { position: relative; margin-right: auto; }
.bolagsvaxlare-knapp {
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9px; padding: 0.4rem 0.8rem; font-size: 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.bolagsvaxlare-knapp:hover { background: rgba(255,255,255,0.16); }
.vaxlare-sep { opacity: 0.5; margin: 0 0.15rem; }
.vaxlare-chevron { font-size: 0.65rem; opacity: 0.75; }
.bolagsvaxlare-meny {
  position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 220px; max-height: 320px;
  overflow-y: auto; background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(var(--shadow-color),0.25); padding: 0.4rem; z-index: 30;
}
.bolagsvaxlare-meny a {
  display: block; padding: 0.5rem 0.7rem; border-radius: 7px; color: var(--text);
  text-decoration: none; font-size: 0.88rem; white-space: nowrap;
}
.bolagsvaxlare-meny a:hover { background: var(--surface-2); }
.bolagsvaxlare-meny a.aktiv { color: var(--accent); font-weight: 600; }
.vaxlare-divider { border-top: 1px solid var(--border-soft); margin: 0.3rem 0.2rem; }

/* Headerns snabbsök — se app/services/quick_search.py. Ikonen sitter
   inuti fältet (absolut positionerad) istället för som en separat
   knapp, samma mönster som ⌘K-sökfält brukar se ut. */
.header-sok { position: relative; }
.header-sok-ikon {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.6); pointer-events: none; display: flex;
}
.header-sok-input {
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9px; padding: 0.4rem 0.8rem 0.4rem 2.1rem; font-size: 0.85rem; width: 220px;
}
.header-sok-input::placeholder { color: rgba(255,255,255,0.55); }
.header-sok-input:focus { outline: none; background: rgba(255,255,255,0.16); }
.header-sok-resultat:empty { display: none; }
.header-sok-resultat {
  position: absolute; top: calc(100% + 0.4rem); left: 0; width: 280px;
  background: var(--surface); border-radius: var(--radius); color: var(--text);
  box-shadow: 0 8px 24px rgba(var(--shadow-color),0.25); padding: 0.4rem; z-index: 30;
  max-height: 320px; overflow-y: auto;
}
.sok-traff {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border-radius: 7px; color: var(--text); text-decoration: none;
}
.sok-traff:hover { background: var(--surface-2); }
.sok-traff-text { font-size: 0.88rem; }
.sok-traff-sub { font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; }

/* Notisklockan — samma knapp-/dropdown-stil som .anvandarmeny-knapp/
   -meny (återanvänds direkt i base.html), bara med en badge ovanpå. */
.notiser { position: relative; }
.notiser-badge {
  position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.1rem; height: 1.1rem;
  padding: 0 0.25rem; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 1.1rem; text-align: center;
}
.notiser-meny { width: 320px; max-height: 400px; overflow-y: auto; padding: 0.4rem; }
.notis-rad {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.6rem 0.5rem; border-radius: 7px;
  color: var(--text); text-decoration: none;
}
.notis-rad:hover { background: var(--surface-2); }
.notis-text { font-size: 0.85rem; flex: 1; }
.notis-tid { font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; }

/* Hjälp-knappen är bara en länk, ingen dropdown — men ska se ut som de
   andra ikonknapparna i headern (samma .anvandarmeny-knapp-stil). */
.hjalp .anvandarmeny-knapp { text-decoration: none; }

/* Vänster sidomeny — ersätter den tidigare horisontella .topbar-nav
   överallt (både bolags- och byrå-sidor), se base.html. */
.app-shell { display: flex; align-items: flex-start; flex: 1 0 auto; width: 100%; max-width: 1600px; margin: 0 auto; }
.sidebar-nav {
  width: 220px; flex: 0 0 220px; background: var(--surface); border-right: 1px solid var(--border-soft);
  padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem;
  min-height: calc(100vh - 61px); position: sticky; top: 0;
}
.sidebar-nav a, .sidebar-nav .sidebar-disabled {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 9px;
  font-size: 0.9rem; text-decoration: none; color: var(--text-secondary);
}
.sidebar-nav a:hover { background: var(--surface-2); }
.sidebar-nav a.active { background: var(--surface-2); color: var(--accent); font-weight: 600; }
.sidebar-nav .sidebar-disabled { color: var(--text-dimmer); }
/* Ikonen ska aldrig krympa när menytexten är lång, och inte ärva den
   fetare active-vikten (bara texten ska se "vald" ut). */
.sidebar-nav .nav-ikon { flex-shrink: 0; }
.sidebar-nav a.active .nav-ikon { color: var(--accent); }
.sidebar-nav .sidebar-soon {
  margin-left: auto; font-size: 0.68rem; background: var(--surface-2); color: var(--text-dim);
  padding: 0.1rem 0.45rem; border-radius: 999px;
}
main { padding: 1.5rem; flex: 1 1 auto; min-width: 0; width: 100%; }
/* Sidor utan sidomeny (publika sidor, admin-sidor) har <main> som direkt
   barn till <body> istället för nästlad i .app-shell — samma centrerade
   bredd som innan sidomenyn fanns. */
body > main { max-width: 1400px; margin: 0 auto; }

.card-row { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(var(--shadow-color),0.08);
  flex: 1;
}
.card h2 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--text-muted); }
/* Fristående .card som bara introducerar sektionen under den (rubrik,
   ev. en kort åtgärdsrad) — .card-row/.pipeline/.list-card har redan
   egen margin-bottom, men en ensam .card saknar det helt (main har
   ingen egen rad-mellanrum, se main{} ovan) och skulle annars ligga
   dikt an mot nästa sektion, ser ut som överlappande rutor. Samma bugg
   som fixades på /byra respektive bolagsdashboarden 2026-08-10, här
   löst med en återanvändbar klass istället för att patcha varje ny
   sida för sig. */
.card-intro { margin-bottom: 1.5rem; }
.stat { font-size: 2rem; font-weight: 700; margin: 0; color: var(--accent); }
.stat-danger { color: var(--danger); }
.stat-label { margin: 0; color: var(--text-dim); font-size: 0.85rem; }
.card-link { text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s; }
.card-link:hover { box-shadow: 0 4px 12px rgba(var(--shadow-color),0.15); }

/* Kompakt verktygsrad (t.ex. Exportera/Importera på
   installningar/kategorier.html) — en liten funktionsknapp längst till
   höger istället för en egen rubriksatt sektion, se diskussion med
   Edvard 2026-08-10. .verktygsknapp fungerar på både <a> och <label>
   (importknappen är en label kopplad till ett dolt filinput). */
.kategori-verktygsrad { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1.5rem; }
.verktygsknapp {
  display: inline-block;
  font-size: 0.82rem;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
  text-decoration: none;
  cursor: pointer;
}
.verktygsknapp:hover { border-color: var(--accent); color: var(--accent); }

/* Byråns "att göra"-lista på Startsida, se app/services/byra_todo.py —
   ingen egen bock/status, bara en färgad kant efter allvar. */
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.todo-item {
  padding: 0.6rem 0.9rem; border-radius: 9px; font-size: 0.88rem;
  border-left: 3px solid var(--border); background: var(--surface-2);
}
.todo-hog { border-left-color: var(--danger); }
.todo-mellan { border-left-color: var(--warning); }
.todo-lag { border-left-color: var(--text-dim); }

.notice-panel { display: flex; flex-direction: column; gap: 0.5rem; }
.notice { padding: 0.6rem 0.9rem; border-radius: 9px; font-size: 0.85rem; font-weight: 500; }
.notice-yellow { background: var(--warning-bg); color: var(--warning); }
.notice-green { background: var(--success-bg); color: var(--accent); }
.notice-red { background: var(--danger-bg); color: var(--danger); }

/* Förfallodatum inom 7 dagar (eller redan passerat) i fakturalistorna,
   se forfaller_snart i app/templates.py — bara texten färgas, ingen
   bakgrund, så det inte tävlar visuellt med statuskorten/notiserna. */
.forfallodatum-snart { color: var(--danger); font-weight: 600; }

.pipeline {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(var(--shadow-color),0.08);
  margin-bottom: 1.5rem;
}
.pipeline h2 { margin-top: 0; font-size: 0.95rem; color: var(--text-muted); }
.pipeline-stages { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.stage-group { flex: 1; min-width: 220px; }
/* Bredd proportionell mot antal rutor i gruppen (istället för lika bredd
   oavsett radantal) — så en enrutas grupp (Efter attest) inte blir onödigt
   bred jämfört med en fyrrutas grupp (Redigerbara). */
.stage-group-4 { flex: 4; }
.stage-group-2 { flex: 2; }
/* "Nya fakturor" (Idag) är en ensam informationsruta utan lista bakom
   sig — ska inte dela bredd-golvet (220px) med grupper som faktiskt
   har flera rutor, annars ser den onödigt stor ut. Halverad bredd,
   Edvards uttryckliga önskemål (2026-08-11), och fast (flex-grow 0)
   så den inte sträcker ut sig för att fylla ledigt utrymme. */
.stage-group-1 { flex: 0 0 110px; min-width: 110px; }
.stage-label {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  margin-bottom: 0.6rem;
}
.stage-boxes { display: flex; gap: 0.75rem; }
.stage-box {
  flex: 1;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  text-align: center;
  color: var(--text-secondary);
}
.stage-count { font-size: 1.4rem; font-weight: 700; }
.stage-warning { background: var(--warning-bg); }
.stage-warning .stage-count { color: var(--warning); }
.stage-danger { background: var(--danger-bg); }
.stage-danger .stage-count { color: var(--danger); }
.stage-success { background: var(--success-bg); }
.stage-success .stage-count { color: var(--accent); }
.stage-arrow { font-size: 1.5rem; color: var(--text-dimmer); }
.stage-box { text-decoration: none; }
.stage-box:hover { box-shadow: 0 2px 6px rgba(var(--shadow-color),0.12); }
/* "Nya fakturor" — informationsläge utan egen länkad lista (se
   app/routers/dashboard.py), en <div> istället för <a> så den inte ser
   klickbar ut. */
.stage-info { cursor: default; }
.stage-info:hover { box-shadow: none; }
/* Blockerare/ansvar under "Skickad för attest" — vem som faktiskt
   sitter på de obehandlade raderna, se dashboard.py:blockerare. */
.stage-blockerare { font-size: 0.72rem; color: var(--text-dim); line-height: 1.3; }

/* Senaste aktivitet — se app/services/activity_feed.py. */
.aktivitet-list { list-style: none; margin: 0; padding: 0; }
.aktivitet-item {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--border-soft); font-size: 0.88rem;
}
.aktivitet-item:last-child { border-bottom: none; }
.aktivitet-text a { color: var(--text); text-decoration: none; font-weight: 500; }
.aktivitet-text a:hover { text-decoration: underline; }
.aktivitet-tid { color: var(--text-dim); font-size: 0.78rem; margin-left: 0.6rem; }
.aktivitet-badge {
  font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px;
  white-space: nowrap; background: var(--surface-2); color: var(--text-muted);
}
.aktivitet-auto { background: rgba(52,211,153,0.14); color: var(--accent); }
.aktivitet-attest { background: var(--warning-bg); color: var(--warning); }
.aktivitet-inkasso { background: var(--danger-bg); color: var(--danger); }
.aktivitet-export { background: var(--success-bg); color: var(--accent); }

/* Senaste aktivitet + AI-assistent sida vid sida, se dashboard.html. */
.dashboard-columns { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.dashboard-columns > section { flex: 1 1 320px; margin-top: 0; }

/* AI-assistent-panelen — se app/services/leverantor_stats.py och
   dashboard.py (auto_konterbara_count/automatiserbara_leverantorer_count). */
.ai-rekommendationer { display: flex; flex-direction: column; gap: 0.75rem; }
.ai-kort {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--surface-2); border-radius: 10px; padding: 0.75rem 1rem;
}
.ai-kort-text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.ai-kort-text strong { font-size: 0.9rem; }
.ai-kort-text span { color: var(--text-dim); font-size: 0.78rem; }
.ai-kort-knapp {
  flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); color: var(--accent);
  padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-decoration: none;
}
.ai-kort-knapp:hover { background: var(--accent); color: var(--on-accent); }

.settings-tabs { display: flex; gap: 0.5rem; margin: 1rem 0; border-bottom: 1px solid var(--border-soft); }
.settings-tabs a {
  padding: 0.5rem 1rem; color: var(--text-muted); text-decoration: none; font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}
.settings-tabs a.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.settings-tabs a:hover { color: var(--accent); }

.list-card { margin-top: 1.5rem; overflow-x: auto; }
/* Byråns KPI-sida (/byra/kpi) — bara två datakolumner, ser risigt ut
   utspritt över hela bredden. min-width så tabellen fortfarande går att
   läsa på smalare skärmar innan overflow-x: auto (ärvt ovan) tar över. */
.list-card-half { max-width: 50%; min-width: 420px; }
/* Krav/inkasso-listan på /byra/kpi — ~en tredjedels bredd/höjd av
   sidan, egen scroll (overflow-y) så listan kan visa alla bolag utan
   att knuffa ner resten av sidan; de värsta hamnar överst eftersom
   raderna redan kommer fallande sorterade från backend. */
.list-card-third { max-width: 33%; min-width: 320px; max-height: 33vh; overflow-y: auto; }
/* Andra kort-raden på /byra/kpi (bokförare + krav/inkasso sida vid
   sida) — egen klass istället för att återanvända .card-row, som
   redan används på andra sidor (t.ex. byråns Startsida) med annan
   bredd-logik; ska inte ändras här. */
.kpi-rad-2 { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* Rad för vald bokförare i jämförelse-dropdownen ovan, samma tabell. */
.invoice-table tr.rad-vald { font-weight: 600; }
.list-card h2 { margin-top: 0; font-size: 0.95rem; color: var(--text-muted); }
.empty-hint { color: var(--text-dim); font-size: 0.9rem; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.invoice-table th, .invoice-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.invoice-table th a { color: var(--text-muted); text-decoration: none; }
.invoice-table th a:hover { text-decoration: underline; }
.invoice-table tbody tr:hover { background: var(--surface-2); }
.invoice-table td a { color: var(--text); text-decoration: none; font-weight: 500; }
.invoice-table td a:hover { text-decoration: underline; }
.invoice-table .col-check { width: 1.5rem; }
.invoice-table .col-actions { width: 6.5rem; white-space: nowrap; }
.invoice-table .col-export { white-space: nowrap; }
/* Redigerbara fält inline i en tabellrad (Kategorier, Kunder-sidans
   deadline-fält) — utan det här ärver de webbläsarens standardutseende
   istället för appens tema, till skillnad från .field-group input och
   .kontering-row input/select som redan är temaanpassade. */
.invoice-table input, .invoice-table select {
  padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.85rem; background: var(--surface); color: var(--text);
}
.col-export .row-action { width: auto; padding: 0.2rem 0.5rem; font-size: 0.78rem; font-weight: 600; }
.row-action {
  display: inline-block; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; padding: 0;
  text-align: center; border-radius: 4px; cursor: pointer; text-decoration: none;
  font-size: 0.95rem; border: none; background: none; color: var(--text-muted);
}
.row-action:hover { background: var(--surface-2); }
.row-delete-form { display: inline-block; }

.queue-indicator {
  display: inline-block; padding: 0.15rem 0.6rem;
  border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 0.8rem; font-weight: 600;
}
.queue-nav {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.75rem;
}
.queue-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--surface-2);
  color: var(--text); font-size: 0.9rem; text-decoration: none; line-height: 1;
}
.queue-nav-btn:hover { background: var(--border); }
.queue-nav-btn-disabled { color: var(--text-dimmer); cursor: default; }
.queue-nav-btn-disabled:hover { background: var(--surface-2); }

.search-card { margin-bottom: 1.5rem; }
.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
  margin-top: 1rem;
}
.search-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted); }
.search-form input {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem;
  background: var(--surface); color: var(--text);
}
/* Datumfält hade ingen egen styling någonstans i appen — såg ut som
   webbläsarens obehandlade standardutseende (fyrkantig, ingen
   temafärg) jämfört med alla andra fält. Global regel istället för att
   duplicera samma fyra rader per formulär (byra/installningar/
   fakturering.html m.fl.). */
input[type="date"] {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem;
  background: var(--surface); color: var(--text); font-family: inherit;
}
.datumfilter-form { display: flex; align-items: flex-end; gap: 0.75rem; margin: 0 0 0 auto; }
.datumfilter-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted); }

.upload-button {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border-radius: 9px;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.upload-card { max-width: 480px; }
.upload-card form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.upload-hint { font-size: 0.8rem; color: var(--text-dim); margin: 0; }
/* Bolagets fakturamejladress (installningar/konto.html) — kod-stil
   textruta + kopiera-knapp på samma rad. */
.kopiera-rad { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; }
.kopiera-rad code {
  background: var(--surface-2); color: var(--text); padding: 0.5rem 0.75rem; border-radius: 8px;
  font-size: 0.9rem;
}
.upload-error { background: var(--danger-bg); color: var(--danger); padding: 0.6rem 0.9rem; border-radius: 9px; font-size: 0.85rem; }
.upload-back {
  display: inline-block; margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted);
  background: none; border: none; padding: 0; cursor: pointer; height: auto;
}
.upload-back:hover { color: var(--accent); background: none; }

.warning-card { background: var(--danger-bg); margin-top: 1rem; }
.warning-card h2 { color: var(--danger); }
.warning-card ul { margin: 0; padding-left: 1.2rem; color: var(--danger-strong); font-size: 0.9rem; }

.detail-layout { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; align-items: flex-start; }
.detail-left-column { flex: 1; min-width: 500px; display: flex; flex-direction: column; gap: 1.5rem; }
.detail-fields { width: 100%; }

.lage-tabs { display: flex; gap: 0.4rem; margin-bottom: -0.5rem; }
.lage-tab {
  padding: 0.5rem 1.1rem; border: none; border-radius: 999px; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; background: var(--surface-2); color: var(--text-muted);
}
.lage-tab.active { background: var(--topbar-bg); color: #fff; }
#lage-kontering-vy, #lage-logg-vy { display: flex; flex-direction: column; gap: 1.5rem; }
#lage-kontering-vy[hidden], #lage-logg-vy[hidden] { display: none; }

.audit-log-list { list-style: none; margin: 0; padding: 0; }
.audit-log-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--border-soft); }
.audit-log-list li:last-child { border-bottom: none; }
.audit-log-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.audit-log-action { font-weight: 600; }
.audit-log-meta { color: var(--text-dim); font-size: 0.85rem; white-space: nowrap; }
.audit-log-detail { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.85rem; }
.audit-log-empty { color: var(--text-dim); font-size: 0.9rem; }
.detail-file { flex: 1.15; min-width: 320px; min-height: 80vh; padding: 0; overflow: hidden; }
.invoice-frame, .invoice-image { width: 100%; height: 100%; min-height: 80vh; border: none; display: block; object-fit: contain; }

.field-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.field-group label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted); }
.field-group input {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem;
  background: var(--surface); color: var(--text);
}
.field-group.locked input { background: var(--surface-locked); color: var(--text-dim); }
.field-group.locked #leverantor-input { background: var(--surface); color: inherit; }
.field-group input[readonly] { background: var(--surface-locked); color: var(--text-dim); }
.field-hint { grid-column: 1 / -1; font-size: 0.78rem; color: var(--text-dimmer); margin: 0; }
.field-warning {
  grid-column: 1 / -1; font-size: 0.82rem; color: var(--danger); background: var(--danger-bg);
  padding: 0.4rem 0.6rem; border-radius: 6px; margin: 0;
}

.autocomplete-field { position: relative; }
.autocomplete-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  margin: 2px 0 0; padding: 0.25rem 0; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 10px rgba(var(--shadow-color),0.15); max-height: 220px; overflow-y: auto;
}
.autocomplete-suggestions li {
  padding: 0.4rem 0.6rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer;
}
.autocomplete-suggestions li:hover { background: var(--surface-2); }
.checkbox-label { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
.checkbox-label input { width: auto; }

.fakturarader { margin: 1rem 0; }
.fakturarader h3 { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }

.detail-actions { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.attest-form { margin-top: 1rem; }
button.attest-button {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 9px;
  padding: 0.65rem 1.3rem; cursor: pointer; font-size: 0.95rem; font-weight: 600;
}
.attest-actions-card { border: 1px solid var(--border); }
button.reject-button {
  background: var(--surface); color: var(--danger); border: 1px solid var(--danger); border-radius: 9px;
  padding: 0.65rem 1.3rem; cursor: pointer; font-size: 0.95rem; font-weight: 600;
}
.secondary-button {
  background: var(--surface); color: var(--accent); border: 1px solid var(--accent); border-radius: 9px;
  padding: 0.6rem 1.1rem; cursor: pointer; font-size: 0.9rem;
}
.secondary-button:hover { background: var(--surface-2); }
.neka-form { margin-top: 1rem; display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.neka-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted); flex: 1 1 260px; }
.neka-form input { padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; background: var(--surface); color: var(--text); }

.chip {
  display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.15rem 0.3rem 0.15rem 0;
  padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); font-size: 0.78rem;
  white-space: nowrap;
}
.chip-remove {
  background: none; border: none; color: var(--danger); cursor: pointer; font-size: 0.9rem;
  line-height: 1; padding: 0;
}

/* Fast panel istället för en fullskärms-overlay/modal — fakturabilden
   (som sitter till höger i .detail-layout) ska alltid vara synlig och
   klickbar medan panelen är öppen, ingen mörk backdrop som täcker den. */
.side-panel {
  position: fixed; top: 4.5rem; left: 1rem; width: 340px; max-height: calc(100vh - 6rem);
  overflow-y: auto; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(var(--shadow-color),0.18); padding: 1.25rem; z-index: 50;
}
.side-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.side-panel-header h2 { margin: 0; }
.side-panel .field-group { grid-template-columns: 1fr; }

.kontering-card { overflow-x: auto; }
.kontering-header, .kontering-row {
  display: grid; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0; border-bottom: 1px solid var(--border-soft);
}
.kontering-header { font-size: 0.78rem; color: var(--text-dim); border-bottom: 2px solid var(--border); }
.kontering-row > * { min-width: 0; }
.kontering-row input, .kontering-row select {
  width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem;
  background: var(--surface); color: var(--text);
}
.col-actions { justify-self: start; }
.rad-remove {
  background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--danger);
  cursor: pointer; width: 1.8rem; height: 1.8rem; padding: 0; font-size: 1rem; line-height: 1;
}
.rad-attesterad { font-size: 0.78rem; color: var(--accent); white-space: nowrap; }

.kontering-summary {
  display: flex; gap: 1.5rem; margin: 1rem 0; font-size: 0.9rem; color: var(--text-muted);
}
.kontering-summary strong { color: var(--text); }
#kontering-diff.balanced { color: var(--accent); }

.legal-text h3 { margin-top: 1.5rem; margin-bottom: 0.4rem; font-size: 0.95rem; color: var(--text); }
.legal-text h3:first-child { margin-top: 0; }
.legal-text p, .legal-text li { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }
.legal-text ul { margin: 0.3rem 0; padding-left: 1.3rem; }

.site-footer {
  margin-top: 2rem;
  padding: 2rem 1.5rem;
  background: var(--topbar-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.5rem; text-align: center;
  font-size: 0.8rem; color: rgba(255,255,255,0.75);
}
.site-footer a { color: rgba(255,255,255,0.75); text-decoration: none; }
.site-footer a:hover { color: white; text-decoration: underline; }
.site-footer-links { display: flex; gap: 1rem; }

.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100;
  max-width: 640px; margin: 0 auto;
  background: var(--topbar-bg); color: white;
  border-radius: var(--radius); padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  box-shadow: 0 8px 24px rgba(var(--shadow-color),0.25);
}
/* En egen display:flex-regel på .cookie-banner vinner annars ALLTID över
   webbläsarens inbyggda [hidden] { display: none }-regel, eftersom
   author-stilar (denna fil) prioriteras över user-agent-stilar oavsett
   ordning — element.hidden = true i JS:en gjorde alltså ingenting alls
   visuellt. Attributselektorn här har högre specificitet än .cookie-banner
   ensam, så den vinner korrekt när hidden-attributet finns. */
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 0.85rem; flex: 1 1 320px; opacity: 0.92; }
.cookie-banner a { color: white; text-decoration: underline; }
.cookie-banner button { background: white; color: var(--topbar-bg); }
.cookie-banner button:hover { background: var(--surface-2); }

/* Hjälp-sidan (/hjalp) — kategori-/guidekorten är klickbara <a class="card">,
   så .card:s vanliga box-shadow/radius ärvs rakt av; bara layout och
   hover-feedback läggs till här. */
.hjalp-kategori-grid, .hjalp-guide-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hjalp-kategori-kort, .hjalp-guide-kort {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
  border: 1px solid transparent;
}
.hjalp-kategori-kort:hover, .hjalp-guide-kort:hover { border-color: var(--accent); }
.hjalp-kategori-kort h2, .hjalp-guide-kort h2 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--text); }
.hjalp-guide-innehall h2 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.hjalp-guide-innehall .hjalp-sektion:first-child h2 { margin-top: 0; }
.hjalp-guide-innehall p { line-height: 1.55; margin: 0 0 0.75rem; }
.hjalp-guide-innehall ul { margin: 0 0 0.75rem; padding-left: 1.2rem; line-height: 1.55; }
.hjalp-guide-innehall li { margin-bottom: 0.35rem; }