:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --border: #e2e6ea;
  --text: #1c2530;
  --text-muted: #6b7684;
  --primary: #1f5f8b;
  --primary-dark: #163f5c;
  --accent: #e08a2c;
  --green: #2e8b57;
  --amber: #d99a1b;
  --red: #c0392b;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Lugn, enfärgad bakgrund - bilden visade sig vara för jobbig att ha bakom
     sig i det dagliga arbetet. Hela designen ses över senare i sin helhet. */
  background-color: #eef1f4;
  color: var(--text);
  font-size: 14px;
  min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

header.topbar {
  background: var(--primary-dark);
  color: #fff;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left { display: flex; align-items: baseline; gap: 1rem; }

header.topbar .brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
}
header.topbar .brand:hover { text-decoration: none; opacity: 0.85; }
header.topbar .brand span { color: var(--accent); }

.all-assignments-link {
  color: #cfe0ec;
  font-size: 0.8rem;
  font-weight: 600;
}
.all-assignments-link:hover { color: #fff; text-decoration: underline; }

header.topbar .assignment-name {
  color: #cfe0ec;
  font-size: 0.85rem;
}

nav.tabs {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.25rem;
  padding: 0 1.5rem;
  overflow-x: auto;
}

nav.tabs a {
  display: inline-block;
  padding: 0.75rem 1rem;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

nav.tabs a.active, nav.tabs a:hover {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  text-decoration: none;
}

nav.tabs a.tab-complete { color: var(--green); }
nav.tabs a.tab-complete.active, nav.tabs a.tab-complete:hover { color: var(--green); border-bottom-color: var(--green); }

.nav-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  margin-left: 0.3rem;
  vertical-align: middle;
}

.notice-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: #fdecea;
  border: 1px solid #f5c6c0;
  color: #8a2e22;
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.notice-banner.success { background: #e6f4ea; border-color: #bfe3c8; color: #1f5c39; }

main {
  padding: 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.card h2 { margin-top: 0; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.arkiverad-rad td { color: var(--text-muted); }
/* Uppdragsprofil (services/profiles.py): BRF respektive aktiebolag. */
.badge.profil-brf { background: #e8f1f8; color: var(--primary-dark); border-color: #c9dced; }
.badge.profil-ab { background: #f3ecf9; color: #5b3a8a; border-color: #dccbeb; }
.badge.profil-ab-ovrigt { background: #eef7f1; color: #1f5c39; border-color: #c8e3d1; }

.kundkort-list { list-style: none; margin: 0 0 0.5rem; padding: 0; font-size: 0.86rem; }
.kundkort-list li { padding: 0.2rem 0; }
.kundkort-list li .muted { display: inline-block; min-width: 7rem; }

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.phase-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--panel);
}
.phase-card h3 { margin: 0 0 0.75rem 0; }
.phase-card a.phase-link { display:block; }

.progress-row { margin-bottom: 0.6rem; }
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: #e9edf1;
  overflow: hidden;
}
.progress-bar > div {
  height: 100%;
  background: var(--green);
  border-radius: 4px;
}
.progress-bar.qa > div { background: var(--primary); }

table.review {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
table.review th, table.review td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
table.review th { color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
table.review tr.group-row td {
  background: #eef2f5;
  font-weight: 700;
  color: var(--primary-dark);
}
table.review tr.section-row td { font-weight: 600; }
table.review tr.item-done td { background: #eaf6ee; }
table.review tr.item-remark td { background: #fdecea; }
table.review .check-remark:has(input:checked) { background: #fdecea; border-color: #f3c2bb; color: var(--red); }
table.review .item-notes { width: 100%; margin: 0.35rem 0; resize: vertical; }

.review-central { text-align: center; }
.review-central .check-remark { display: inline-flex; }
.review-central .item-notes { text-align: left; }
.check-row-under {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.review-underlag-col { width: 150px; text-align: right; vertical-align: top; }
table.review th.review-underlag-col { text-align: right; }
.underlag-select {
  width: 100%;
  max-width: 150px;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: #fafbfc;
  border: 1px solid var(--border);
  padding: 0.2rem 0.3rem;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
  border-radius: 4px;
  background: #eef2f5;
  color: var(--text-muted);
  margin-right: 0.2rem;
  border: 1px solid var(--border);
}
.badge.risk { background: #fdecea; color: var(--red); border-color: #f5c6c0; }
.badge.ai { background: #eef0fb; color: #4c3fb0; border-color: #d6d3f5; }
/* Maskinell kontroll (programmets deterministiska granskning, t.ex. GK.1) -
   grön-grå ton för att skilja från Howards lila AI-utkast (2026-09-16). */
.badge.maskinell { background: #e6f4ea; color: #1f5c39; border-color: #bfe3c8; }
.badge.demo { background: #fff4e0; color: var(--amber); border-color: #f0d9a0; }
.badge.flagged { background: #fdecea; color: var(--red); border-color: #f5c6c0; }
.badge.klar { background: #e6f4ea; color: var(--green); border-color: #bfe3c8; }
.badge.pagar { background: #fff4e0; color: var(--amber); border-color: #f0d9a0; }
.badge.ejpabörjad { background: #eef2f5; color: var(--text-muted); }

.pill-level {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.pill-level.Låg { background: #e6f4ea; color: var(--green); }
.pill-level.Medel { background: #fff4e0; color: var(--amber); }
.pill-level.Hög { background: #fdecea; color: var(--red); }
.pill-level.Ej.bedömd, .pill-level.EjBedomd { background: #eef2f5; color: var(--text-muted); }

form.inline { display: inline; }

.risk-area {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}
.risk-area .risk-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.risk-area select { margin-right: 0.5rem; }
.risk-area .desc { color: var(--text-muted); font-size: 0.82rem; margin: 0.25rem 0 0.5rem 0; }
.risk-area textarea { width: 100%; min-height: 2.2rem; font-family: inherit; }

.doc-table td, .doc-table th { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.doc-table tr.total-row td { border-top: 2px solid var(--border); border-bottom: none; background: var(--bg); }

/* Uppdragslistans status - se services/progress.py:assignment_status() */
tr.status-planerat { background: #fff; }
tr.status-bokslut { background: #fff9db; }
tr.status-granskning { background: #ffe0b2; }
tr.status-klar { background: #e6f4ea; }
tr.status-hos-kund { background: #fde8d8; }
tr.status-besvarade { background: #e8f1d8; }
tr.status-signering { background: #e3ecfb; }
tr.status-signerad { background: #d4ecd9; }

.status-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.status-pill.status-planerat { background: #eef2f5; color: var(--text-muted); border-color: var(--border); }
.status-pill.status-bokslut { background: #fff3b0; color: #7a6300; border-color: #f0e08a; }
.status-pill.status-granskning { background: #ffcc80; color: #8a5000; border-color: #f0b060; }
.status-pill.status-klar { background: #bfe3c8; color: var(--green); border-color: #9ed3ac; }
.status-pill.status-hos-kund { background: #f8c9a8; color: #7a3a00; border-color: #eeae80; }
.status-pill.status-besvarade { background: #cfe3a8; color: #3d5a00; border-color: #b4cf80; }
.status-pill.status-signering { background: #c9dbf7; color: #1f4e9c; border-color: #a9c4ee; }
.status-pill.status-signerad { background: #9ed3ac; color: #14532d; border-color: #7cc08f; }

.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 170px;
  padding: 0.4rem 0.6rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.dropzone:hover { border-color: var(--primary); color: var(--primary); }
.dropzone.dropzone-over { border-color: var(--primary); background: #eaf2f8; color: var(--primary-dark); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .dropzone-filename { font-weight: 600; color: var(--text); }

/* Höger sidopanel på en enskild posts sida - kan innehålla flera "widgets"
   (väsentlighetsgränser, olösta revisionsnoteringar) som ska hänga ihop och
   följa med vid scroll som en grupp. Bara wrappern är sticky - om varje
   widget vore sticky för sig skulle de överlappa varandra vid scroll
   (byråns beslut 2026-09-09, se .revision-notes-widget nedan). */
.section-side-widgets {
  flex: 0 0 200px;
  position: sticky;
  top: 0.75rem;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
.materiality-widget {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 0.85rem 1rem;
}
.materiality-widget h5 { margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.materiality-widget-row { display: flex; flex-direction: column; gap: 0.05rem; margin-bottom: 0.55rem; }
.materiality-widget-row:last-child { margin-bottom: 0; }
.materiality-widget-row strong { font-size: 0.92rem; }

.revision-notes-widget-row {
  display: block;
  padding: 0.45rem 0;
  border-top: 1px solid var(--border);
  color: var(--text);
}
.revision-notes-widget-row:first-of-type { border-top: none; }
.revision-notes-widget-row:hover { text-decoration: none; background: #f5f8fa; }
.revision-notes-widget-comment { display: block; font-size: 0.78rem; margin-top: 0.2rem; }

.doc-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 33, 0.12);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.doc-preview-overlay.open { opacity: 1; pointer-events: auto; }

.doc-preview-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(45vw, 720px);
  background: var(--panel);
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.18);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .2s ease;
}
.doc-preview-panel.open { transform: translateX(0); }
.doc-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.doc-preview-header strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-preview-header .actions { display: flex; gap: 0.6rem; align-items: center; flex-shrink: 0; }
.doc-preview-frame { flex: 1; border: none; width: 100%; background: #525659; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn.secondary { background: #eef2f5; color: var(--text); }
.btn.secondary:hover { background: #e2e6ea; }
.btn.accent { background: var(--accent); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
}
.btn-icon:hover { background: #eef2f5; color: var(--text); border-color: var(--text-muted); }

input[type=text], input[type=date], select, textarea {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.86rem;
}

.muted { color: var(--text-muted); }
.small { font-size: 0.78rem; }
.mt-0 { margin-top: 0; }
.flex-between { display:flex; justify-content: space-between; align-items:center; }

.note-card {
  border-left: 4px solid var(--border);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: #fafbfc;
  border-radius: 0 6px 6px 0;
}
.note-card.flagged { border-left-color: var(--red); background: #fdf6f5; }
.note-card .quote { color: var(--text-muted); font-style: italic; font-size: 0.82rem; margin-top: 0.25rem; }

.empty-state { text-align:center; padding: 2rem; color: var(--text-muted); }

/* =========================================================================
   Planeringsdelen: översiktskort, nivå 2-avsnitt och nivå 3-punkter
   ========================================================================= */

.lead { color: var(--text-muted); max-width: 60ch; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.plan-card {
  display: flex;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  color: var(--text);
}
.plan-card:hover {
  text-decoration: none;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(31, 95, 139, 0.10);
}
.plan-card-num {
  flex: 0 0 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-card-body { flex: 1; min-width: 0; }
.plan-card-body h2 { margin: 0.1rem 0 0.35rem; font-size: 1rem; }
.plan-card-body p { margin: 0 0 0.6rem; font-size: 0.82rem; }
.plan-card-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.45rem; }
.plan-card-legend { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.4rem; }

.bar {
  height: 6px;
  border-radius: 3px;
  background: #e9edf1;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.bar > span { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.bar.bar-qa > span { background: var(--primary); }

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin: 0 0.2rem 0 0.6rem;
}
.dot-ready { background: var(--green); margin-left: 0; }
.dot-qa { background: var(--primary); }

/* --- Detaljsida --- */
.crumbs { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.crumbs span { margin: 0 0.4rem; }

.part-header { margin-bottom: 1rem; }
.part-header h1 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.35rem; }
.part-num {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 0.05em 0.45em;
  font-size: 0.9em;
}
.part-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 1.25rem;
  margin-top: 0.85rem;
}

.part-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.part-switch a {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-muted);
}
.part-switch a:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.part-switch a.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.post-list { display: flex; flex-direction: column; gap: 0.5rem; }
.post-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  color: var(--text);
  font-weight: 600;
}
.post-row:hover {
  text-decoration: none;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(31, 95, 139, 0.10);
}
/* display:block (inte flex) - annars kan indexnumret ("11") hamna ensamt på
   en egen rad medan postens namn radbryts under, eftersom två separata
   flex-items radbryter var för sig. Med block/inline flöde följer numret
   med det första ordet i namnet som vanlig text (upptäckt 2026-09-09). */
/* display:block (inte flex) - annars kan indexnumret ("11") hamna ensamt på
   en egen rad medan postens namn radbryts under, eftersom två separata
   flex-items radbryter var för sig. Med block/inline flöde följer numret
   med det första ordet i namnet som vanlig text. Radbryter annars normalt -
   trunkering (nowrap/ellipsis) gäller bara den smala .section-nav-menyn
   nedan, INTE t.ex. den bredare postöversikten (granskning_underrubrik.html)
   som har gott om plats och där hela namnet ska synas (bugg 2026-09-09:
   trunkeringen låg tidigare på hela .post-row-title-klassen och läckte dit). */
.post-row-title { display: block; }
.post-row .sec-num { color: var(--primary); font-variant-numeric: tabular-nums; margin-right: 0.35rem; }
.post-row .sec-count { flex: 0 0 auto; }
.post-row.active { border-color: var(--primary); background: #eaf2f8; }
.sec-count-qa { color: var(--primary); }

/* Postnavigering till vänster på en enskild posts sida (granskning_sektion) -
   hela sub-listan (t.ex. alla Siffergranskningens poster), så man kan hoppa
   direkt mellan poster utan att gå tillbaka till listvyn. */
.section-page-layout { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.section-nav { flex: 0 0 460px; position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; }
.section-nav .balance-group { font-size: 0.7rem; margin: 1rem 0 0.4rem; }
.section-nav .balance-group.mt-0 { margin-top: 0; }
.section-nav .post-list { gap: 0.3rem; }
/* Rutnät med tre kolumner (namn, färdig-antal, QA-antal) - samma
   kolumnbredder (5.2rem) som .post-list-header nedan, så rubrikerna hamnar
   exakt ovanför sina siffror. 5.2rem är uppmätt som tillräckligt för att
   "Färdig för review"/"Kvalitetssäkrad" ska få plats på en rad i rubriken -
   för smalt (så som det var) gör att webbläsaren tvingar fram bredare
   kolumner ändå (nowrap-text kan inte krympa), men BARA i rubrikraden
   (vars text är bredare än siffrorna), vilket gjorde att rubriken och
   datakolumnerna hamnade fel mot varandra ("ihoptryckt") (bugg 2026-09-09).
   min-width:0 på cellerna förhindrar att det händer igen om texten skulle
   ändras. Postnamnet trunkeras med "…" och visas i sin helhet vid hover
   (se title-attributet på länken) - .section-nav är breddad till 340px för
   att ge namnkolumnen rimligt med utrymme trots de bredare sifferkolumnerna. */
.section-nav .post-row {
  display: grid;
  grid-template-columns: 1fr 5.2rem 5.2rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 500;
  gap: 0.4rem;
}
.section-nav .post-row.active { font-weight: 700; }
/* Postnamnet får radbryta fritt igen (ingen ellipsis) - flera namn är för
   långa för att någonsin få plats på en rad i den här menyn utan att döljas
   helt (t.ex. "Förutbetalda kostnader och upplupna intäkter"), och hela
   namnet ska synas (byråns beslut 2026-09-09). Rutnätet centrerar ändå
   siffrorna i sina egna kolumner oavsett hur många rader namnet tar. */
.section-nav .post-row-title { min-width: 0; }
.section-nav .sec-count { font-size: 0.7rem; color: var(--text-muted); text-align: center; min-width: 0; }
.post-list-header {
  display: grid;
  grid-template-columns: 1fr 5.2rem 5.2rem;
  gap: 0.4rem;
  padding: 0 0.65rem;
  margin: 0.5rem 0 0.3rem;
}
.post-list-header span {
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.post-list-header span:not(:first-child) { text-align: center; }
/* Postnavigeringens "BALANSRÄKNING"/"RESULTATRÄKNING"-rubrik ligger numera
   i SAMMA rad som kolumnrubrikerna "Färdig för review"/"Kvalitetssäkrad"
   (inte på en egen rad ovanför) - annars hamnade kolumnrubrikerna för högt
   upp, ur linje med gruppnamnet (byråns beslut 2026-09-09). Nollställer
   .balance-group-marginalen som annars vinner på specificitet. */
.post-list-header .balance-group { margin: 0; font-size: 0.62rem; }
.section-main { flex: 1 1 500px; min-width: 0; }

/* =========================================================================
   Granskningsmoment: lista till vänster + detaljpanel till höger
   ========================================================================= */

.moment-heading { margin: 1.5rem 0 0.6rem; }

.moment-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.4fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 860px) {
  .moment-layout { grid-template-columns: 1fr; }
}

.moment-list { display: flex; flex-direction: column; gap: 0.5rem; }
.moment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  color: var(--text);
  font-weight: 600;
  font-size: 0.86rem;
}
.moment-row:hover { text-decoration: none; border-color: var(--primary); }
.moment-row.active { border-color: var(--primary); background: #eaf2f8; }
.moment-row-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.moment-row-meta { display: flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; }

.moment-detail {
  position: sticky;
  top: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  min-height: 10rem;
}
.moment-panel { display: none; }
.moment-panel.active { display: block; }
.moment-panel-title { margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Momentnavigering till vänster för Förvaltningsrevisionen och
   Årsredovisningen (granskning_sektion.html, moment_nav): SAMTLIGA enskilda
   moment i hela toppkategorin listas, grupperade under underrubrik (h5) och
   avsnitt (h6), så man kan följa hela granskningen och hoppa direkt mellan
   moment - samma princip som Siffergranskningens postlista. Momentlistan i
   mitten är då borttagen (.moment-layout-single) (byråns beslut 2026-09-15). */
.section-nav-moments { flex: 0 0 380px; }
.section-nav-moments .post-list { gap: 0.25rem; margin-bottom: 0.5rem; }
.section-nav-moments .moment-nav-sub {
  margin: 1rem 0 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.section-nav-moments .moment-nav-section {
  margin: 0.6rem 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.section-nav-moments .moment-nav-section.active { color: var(--primary); }
.section-nav-moments .moment-nav-row { padding: 0.4rem 0.6rem; font-size: 0.78rem; }
.section-nav-moments .moment-nav-row .moment-row-title { min-width: 0; }
.section-nav-moments .moment-nav-row.active { font-weight: 700; }
.moment-layout-single { grid-template-columns: 1fr; }
.moment-layout-single .moment-detail { position: static; }

.skattekonto-box {
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafbfc;
}
.skattekonto-box .kundkort-list { margin-top: 0.4rem; }
.skattekonto-box form { margin-top: 0.5rem; margin-bottom: 0; }

.remark-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.remark-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.remark-select.remark-none { background: #fafbfc; color: var(--text-muted); font-weight: 500; }

.remark-chip.remark-ua, .remark-select.remark-ua { background: #e6f4ea; color: var(--green); border-color: #bfe3c8; }
.remark-chip.remark-et, .remark-select.remark-et { background: #eef2f5; color: var(--text-muted); border-color: var(--border); }
.remark-chip.remark-uaa, .remark-select.remark-uaa { background: #eef7f1; color: #4f9c6d; border-color: #d7ecdd; }
.remark-chip.remark-a, .remark-select.remark-a { background: #fdecea; color: var(--red); border-color: #f5c6c0; }

.ai-oversikt-filters { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }
.ai-oversikt-filters input[type=text] { flex: 1 1 240px; }
.ai-oversikt-row {
  border-top: 1px solid var(--border);
  padding: 0.75rem 0;
}
.ai-oversikt-row:first-of-type { border-top: none; }
.ai-oversikt-row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; font-weight: 600; }
.ai-oversikt-notes { margin: 0.35rem 0 0.5rem; white-space: pre-wrap; }

/* Tillfälligt (byråns beslut 2026-09-10) - feedback på Howards AI-utkast
   bredvid Notering-fältet, medan promptarna i services/ai_review.py
   finjusteras. Se db.MIGRATIONS (checklist_items.ai_feedback) för hur det
   tas bort igen om/när det inte längre behövs. */
.field-row-ai-feedback { display: flex; gap: 1rem; align-items: stretch; }
.field-row-ai-feedback .field { flex: 1 1 0; min-width: 0; }
.field-ai-feedback textarea {
  border: 1px dashed #d9a441;
  background: #fffaf0;
}
.field-ai-feedback textarea:focus { border-style: solid; }

details.section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.85rem;
}
details.section > summary {
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  list-style: none;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before {
  content: "▸";
  color: var(--text-muted);
  font-size: 0.8rem;
}
details.section[open] > summary::before { content: "▾"; }
details.section[open] > summary { border-bottom: 1px solid var(--border); }
.sec-num { color: var(--primary); font-variant-numeric: tabular-nums; }
.sec-title { flex: 1; }
.sec-count {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  background: #eef2f5;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.section-body { padding: 1rem 1.1rem 1.25rem; }

.item {
  border-top: 1px solid var(--border);
  padding: 1rem 0 0.25rem;
}
.section-body > .item:first-child { border-top: none; padding-top: 0.25rem; }
.item-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.item-num { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.item-title { font-weight: 600; flex: 1; min-width: 12rem; }

.help {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0 0 0.6rem;
  max-width: 70ch;
}

.placeholder-note {
  background: #fff4e0;
  border: 1px solid #f0d9a0;
  color: #8a6216;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  display: inline-block;
}

/* --- Ifyllnadsformulär --- */
.node-form { margin: 0 0 0.5rem; }
.field { display: block; margin-bottom: 0.6rem; }
.doc-list-inline { list-style: none; margin: 0; padding: 0; }
.doc-list-inline li { margin-bottom: 0.2rem; }
.field > span {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.field textarea { width: 100%; resize: vertical; }

.isa-chat-log { display: flex; flex-direction: column; gap: 0.75rem; max-height: 55vh; overflow-y: auto; }
.isa-chat-message { display: flex; flex-direction: column; max-width: 80%; }
.isa-chat-message.isa-chat-user { align-self: flex-end; align-items: flex-end; }
.isa-chat-message.isa-chat-assistant { align-self: flex-start; align-items: flex-start; }
.isa-chat-bubble { padding: 0.6rem 0.9rem; border-radius: 10px; white-space: pre-wrap; }
.isa-chat-user .isa-chat-bubble { background: var(--primary); color: #fff; }
.isa-chat-assistant .isa-chat-bubble { background: #eef2f5; color: var(--text); }
.radio-row { display: flex; gap: 1.1rem; font-size: 0.86rem; }
.radio-row label { display: flex; align-items: center; gap: 0.3rem; font-weight: 500; }

.node-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafbfc;
  cursor: pointer;
}
.check input { margin: 0; }
.check-ready:has(input:checked) { background: #e6f4ea; border-color: #bfe3c8; color: var(--green); }
.check-qa:has(input:checked) { background: #e8f0f6; border-color: #bcd4e6; color: var(--primary); }

.pill {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill-ready { background: #e6f4ea; color: var(--green); }
.pill-qa { background: #e8f0f6; color: var(--primary); }

table.team { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-bottom: 0.85rem; }
table.team th, table.team td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
table.team th { color: var(--text-muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; }
table.team td.right { text-align: right; }
table.team input[type=text] { width: 100%; }

.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.btn.small { padding: 0.3rem 0.6rem; font-size: 0.76rem; }

/* =========================================================================
   Aktuell användare och initialer på klarmarkeringar
   ========================================================================= */

.user-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.user-switch select {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.8rem;
  max-width: 15rem;
}
.user-switch select option { color: var(--text); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.avatar-empty { background: rgba(255, 255, 255, 0.2); color: #cfe0ec; }
.avatar-sm { width: 1.5rem; height: 1.5rem; font-size: 0.62rem; background: var(--green); }
.avatar-qa { background: var(--primary); }

.user-warning {
  background: #fff4e0;
  border-bottom: 1px solid #f0d9a0;
  color: #8a6216;
  padding: 0.5rem 1.5rem;
  font-size: 0.8rem;
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  white-space: nowrap;
}
.stamp-center { justify-content: center; }

.check-group { display: inline-flex; align-items: center; gap: 0.5rem; }
.check-group .stamp { margin-top: 0; }

/* =========================================================================
   Förberedelselista: kundlänk och frågeformulärssvar (intern vy)
   ========================================================================= */

.client-link-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: #eef5fb;
  border: 1px solid #cfe0ec;
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.1rem;
}
.client-link-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.client-link-row input[type=text], .client-link-row input[type=email] { width: 22rem; max-width: 100%; font-size: 0.8rem; }

.questionnaire-row {
  border-top: 1px solid var(--border);
  padding: 0.75rem 0;
}
.questionnaire-row:first-child { border-top: none; padding-top: 0; }
.questionnaire-q { font-weight: 600; margin-bottom: 0.35rem; }

.revision-note-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.6rem;
  border-radius: var(--radius);
  border: 1px solid #f5c6c0;
  background: #fdecea;
}
.revision-note-row:last-child { margin-bottom: 0; }
.revision-note-main { flex: 1; min-width: 0; }
.revision-note-resolved {
  border-color: #bfe3c8;
  background: #e6f4ea;
}
.revision-note-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; }
.revision-note-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.revision-note-form textarea { flex: 1 1 100%; }
.revision-note-form select, .revision-note-form input[type=text] { max-width: 12rem; }

/* =========================================================================
   Kundportal: fristående, minimal sida utan navigering
   ========================================================================= */

.client-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.5rem;
}
.client-page-header {
  background: var(--primary-dark);
  color: #fff;
  padding: 1.25rem 1.5rem;
  margin: -1.5rem -1.5rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.client-page-header .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.client-page-header .brand span { color: var(--accent); }
.client-page-header p { margin: 0.35rem 0 0; color: #cfe0ec; font-size: 0.85rem; }
.client-intro { color: var(--text-muted); max-width: 60ch; }

/* =========================================================================
   4.1 Väsentlighetsberäkning
   ========================================================================= */

.vas-underlag { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.vas-underlag th {
  text-align: left; color: var(--text-muted); font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.vas-underlag td { padding: 0.6rem 0; vertical-align: top; border-bottom: 1px solid var(--border); }
.vas-underlag .vas-belopp { text-align: right; font-weight: 700; font-size: 1.1rem; white-space: nowrap; }

.vas-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; }
@media (max-width: 800px) { .vas-grid { grid-template-columns: 1fr; } }

.vas-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.vas-row label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.vas-pct { display: flex; align-items: center; gap: 0.5rem; }
.vas-pct input[type=number] { width: 6rem; }
.vas-pct strong { margin-left: auto; font-size: 1.05rem; }

/* =========================================================================
   4.2 Klassificering av poster
   ========================================================================= */

.focus-area-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.85rem; }
.badge.focus-area { background: #eef0fb; color: #4c3fb0; border-color: #d6d3f5; }

.badge.klass-bv { background: #fdecea; color: var(--red); border-color: #f5c6c0; }
.badge.klass-v { background: #fff4e0; color: var(--amber); border-color: #f0d9a0; }
.badge.klass-o { background: #eef2f5; color: var(--text-muted); }

.klass-row { border-top: 1px solid var(--border); padding: 1rem 0; }
.klass-row:first-of-type { border-top: none; padding-top: 0.25rem; }
.klass-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem;
}
.klass-row-title { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.klass-row-balances { white-space: nowrap; }
.klass-row-form .field { margin-bottom: 0.5rem; }
.klass-row-form textarea { width: 100%; resize: vertical; }
.klass-row-controls { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.klass-row-controls .field { margin-bottom: 0; min-width: 12rem; }
.klass-accounts { margin-top: 0.5rem; }
.klass-accounts summary { cursor: pointer; }
.klass-accounts table { margin-top: 0.5rem; }

.right { text-align: right; }

.balance-group {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.balance-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-bottom: 0.5rem; }
.balance-table th, .balance-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.balance-table th { color: var(--text-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; text-align: left; }
.balance-table th.right, .balance-table td.right { text-align: right; white-space: nowrap; }
.balance-table select, .balance-table input[type=text] { width: 100%; }
.balance-accounts-row > td { border-bottom: 1px solid var(--border); padding-top: 0; }

.badge-select {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.badge-select.klass-bv { background: #fdecea; color: var(--red); border-color: #f5c6c0; }
.badge-select.klass-v { background: #fff4e0; color: var(--amber); border-color: #f0d9a0; }
.badge-select.klass-o { background: #eef2f5; color: var(--text-muted); }

.klass-row-danger > td { background: #fdecea; }

/* Planeringens staplade layout (section.layout == 'stacked', t.ex. 4.1
   Riskbedömning): underpunkterna visas som kort under varandra på samma sida
   istället för som klickbar momentlista (byråns beslut 2026-09-15). */
.stacked-panels { display: flex; flex-direction: column; gap: 1.25rem; }
.stacked-panel { margin-bottom: 0; }
.stacked-panel .moment-panel-title { font-size: 1.15rem; }
.node-signoff { margin-top: 0.75rem; }

/* Kundregistret (kunder.html / kund.html, 2026-09-16): textfält i kundkortet
   fyller sin ruta, precis som textareor gör. */
.field input[type="text"], .field input[type="email"], .field input[type="search"] { width: 100%; box-sizing: border-box; }


/* Slutgenomgång (Rapportering) */
.slutgenomgang-kpi { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0.75rem 0 1rem; }
.slutgenomgang-kpi > div { display: flex; flex-direction: column; min-width: 9rem; }
.slutgenomgang-kpi .kpi-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.signaler { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.signaler li { margin: 0.2rem 0; color: var(--red); }
.ok-text { color: #1f5c39; }
.warn-text { color: var(--red); }
table.review td.num, table.review th.num { text-align: right; white-space: nowrap; }
.revision-note-omarkt { border-left: 3px solid var(--red); }

/* Rapporteringsdokument */
.dok-knappar { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; align-items: center; margin: 0.75rem 0 1rem; }
.uppgifter-form { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }
.uppgifter-form fieldset { flex: 1 1 22rem; border: 1px solid var(--border, #ddd); border-radius: 6px; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.uppgifter-form label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.2rem; }
.uppgifter-form label.check { flex-direction: row; align-items: center; gap: 0.5rem; }
.uppgifter-form input[type=text], .uppgifter-form input[type=date], .uppgifter-form select, .uppgifter-form textarea { width: 100%; }
.uppgifter-form button { align-self: flex-start; }
.tag-form { display: inline-flex; gap: 0.3rem; align-items: center; }

/* Inloggning och användare (2026-09-18) */
.user-menu { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.login-wrap { max-width: 26rem; margin: 4rem auto; }
.login-wrap .card { padding: 1.75rem; }
.login-form { display: flex; flex-direction: column; gap: 0.8rem; }
.login-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.login-form input { padding: 0.5rem 0.6rem; font-size: 1rem; }
.login-form .btn { align-self: flex-start; margin-top: 0.4rem; }
.error-text { color: var(--red); }
.tillfalligt-losenord { background: #fff8e6; border: 1px solid #f1d78a; border-radius: 6px; padding: 0.75rem 1rem; margin: 0.75rem 0; }
.tillfalligt-losenord code { font-size: 1.1rem; letter-spacing: 0.05em; }
table.review .inline-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
table.review .inline-form input[type=text] { width: 9rem; }
.punkt-form { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.punkt-form textarea { width: 100%; resize: vertical; }
.punkt-form .node-actions { margin-top: 0.5rem; }
.fraga { margin: 0 0 0.9rem; }
.fraga label.check { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 1rem; }
.kommentar-box { margin-bottom: 0.5rem; }
.ovriga-upplysningar { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; margin: 0.5rem 0 1rem; }
.ovriga-upplysningar .uppgifter-form { margin-top: 0.25rem; }
.box-preview { background: #f4f6f8; border-left: 3px solid var(--primary); padding: 0.5rem 0.75rem; margin-top: 0.5rem; font-size: 0.9rem; }

/* ---- Förberedelselistan (omarbetad 2026-09-23) -------------------------- */
.notice-banner.warning { background: #fff4e0; border-color: #f0d9a0; color: #7a5a00; }
.fl-head { display: flex; gap: 1.5rem; align-items: stretch; flex-wrap: wrap; }
.fl-head-text { flex: 1 1 22rem; min-width: 0; }
.fl-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem 1.5rem; margin-top: 0.75rem; }
.fl-link { flex: 1 1 26rem; margin: 0; flex-direction: column; align-items: stretch; justify-content: center; }
.fl-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.fl-toolbar h3 { margin: 0; }
.fl-filter { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.fl-chip {
  border: 1px solid var(--border); background: #fff; color: var(--text-muted);
  border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.78rem; cursor: pointer;
}
.fl-chip:hover { border-color: var(--primary); color: var(--primary); }
.fl-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
#fl-search { padding: 0.3rem 0.6rem; font-size: 0.82rem; border: 1px solid var(--border); border-radius: 999px; min-width: 12rem; margin-left: 0.35rem; }
.fl-table th { text-align: left; }
.fl-category-row th {
  background: var(--bg); color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border);
}
.fl-row td { vertical-align: top; }
.fl-row:hover td { background: #fafbfc; }
.fl-name { width: 40%; }
.fl-name .badge { margin-top: 0.25rem; }
.fl-status { width: 22%; }
.fl-files { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.3rem; }
.fl-files a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; display: block; }
.fl-upload { width: 30%; }
.fl-upload .dropzone { min-width: 0; }
.fl-actions { width: 3rem; text-align: right; }
.fl-actions .btn-icon { color: var(--text-muted); }
.fl-actions .btn-icon:hover { color: var(--red); border-color: var(--red); background: #fdecea; }
.fl-actions .btn-icon.disabled { opacity: 0.35; cursor: not-allowed; border-style: dashed; }
.fl-add { margin-top: 0.9rem; }
.fl-add > summary { display: inline-flex; list-style: none; cursor: pointer; }
.fl-add > summary::-webkit-details-marker { display: none; }
.fl-add-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; padding: 0.75rem; background: var(--bg); border-radius: var(--radius); }
.fl-add-form input[type=text] { flex: 1 1 16rem; }
.fl-add-form .fl-grow { flex: 1 1 24rem; }
.fl-hidden { margin-top: 0.9rem; }
.fl-hidden > summary { cursor: pointer; }
.fl-hidden-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.fl-hidden-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid var(--border); font-size: 0.86rem; }
.fl-questions { list-style: none; padding: 0; margin: 0; counter-reset: fraga; }
.fl-question { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0; border-top: 1px solid var(--border); counter-increment: fraga; }
.fl-question:first-child { border-top: none; }
.fl-question-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; }
.fl-question-text { font-weight: 600; }
.fl-question-text::before { content: counter(fraga) ". "; color: var(--text-muted); font-weight: 500; }
.fl-question-text .badge, .fl-question-text .muted { font-weight: 400; margin-left: 0.35rem; }
.fl-question-answer .badge { margin-right: 0.4rem; }
.fl-question .btn-icon { color: var(--text-muted); }
.fl-question .btn-icon:hover { color: var(--red); border-color: var(--red); background: #fdecea; }
.fl-answered .fl-question-text { font-weight: 500; }
@media (max-width: 800px) {
  .fl-question-main { grid-template-columns: 1fr; gap: 0.3rem; }
  .fl-name, .fl-status, .fl-upload { width: auto; }
}
.fl-link .client-link-row input[type=text], .fl-link .client-link-row input[type=email] { flex: 1 1 12rem; width: auto; min-width: 0; }
.fl-link .client-link-row { flex-wrap: nowrap; }

/* ---- Förberedelsemallar ---- */
.fl-mall { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 0.9rem; background: var(--bg); border-radius: var(--radius); order: 3; }
.fl-mall-status { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: 0.86rem; }
.fl-mall-forms { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.fl-mall-form { display: flex; gap: 0.35rem; align-items: center; }
.fl-mall-form select, .fl-mall-form input[type=text] { font-size: 0.82rem; padding: 0.3rem 0.5rem; }
.fm-profil { margin: 1.25rem 0 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
.fm-table { margin-bottom: 0.25rem; }
.fm-head { display: flex; flex-direction: column; gap: 0.6rem; }
.fm-head-fields { display: flex; gap: 1rem; flex-wrap: wrap; }
.fm-head-fields label { display: flex; flex-direction: column; gap: 0.15rem; }
.fm-head-fields input { min-width: 16rem; }
.fm-head-fields .fl-grow { flex: 1 1 20rem; }
.fm-head-fields .fl-grow input { width: 100%; }
.fm-head-meta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.fm-head-actions { display: flex; gap: 0.5rem; }
.fm-table th { text-align: left; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; }

/* ---- Kundkännedom (KYC) ---- */
.kyc-grid { align-items: start; }
.kyc-table td, .kyc-table th { vertical-align: top; }
.kyc-table input[type=text], .kyc-table select { width: 100%; font-size: 0.82rem; padding: 0.3rem 0.4rem; }
.kyc-q { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--border); }
.kyc-q:first-of-type { border-top: none; }
.kyc-q-text { font-weight: 600; font-size: 0.9rem; }
.kyc-q-text .muted { font-weight: 400; margin-top: 0.15rem; }
.kyc-q-answer { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; }
.kyc-q-answer label { white-space: nowrap; font-size: 0.9rem; }
.kyc-q-answer input[type=text] { flex: 1 1 12rem; min-width: 0; font-size: 0.82rem; }
.kyc-q-answer textarea { width: 100%; font-family: inherit; font-size: 0.86rem; }
.kyc-multi { columns: 2; column-gap: 1.5rem; width: 100%; font-size: 0.86rem; }
.kyc-multi label { display: block; white-space: normal; padding: 0.1rem 0; }
.kyc-sparr { background: #fdecea; border-radius: var(--radius); padding: 0.7rem; }
.kyc-risk { gap: 0.4rem; }
.kyc-riskval { border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; cursor: pointer; }
.kyc-riskval.risk-1 { background: #e6f4ea; } .kyc-riskval.risk-2 { background: #eef2f5; } .kyc-riskval.risk-3 { background: #fff4e0; }
.kyc-riskval.risk-4 { background: #fde3d9; } .kyc-riskval.risk-5 { background: #fdecea; color: var(--red); }
.kyc-riskfaktorer { background: #fff4e0; border: 1px solid #f0d9a0; border-radius: var(--radius); padding: 0.6rem 0.9rem; margin-bottom: 0.75rem; }
.kyc-riskfaktorer ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.kyc-actions { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.kyc-bekraftelse { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kyc-kort { border-left: 4px solid var(--primary); }
@media (max-width: 800px) { .kyc-q, .kyc-bekraftelse { grid-template-columns: 1fr; } .kyc-multi { columns: 1; } }
.kyc-q[hidden] { display: none; }
#hm-table th:nth-child(1), #hm-table td:nth-child(1) { width: 22%; }
#hm-table th:nth-child(2), #hm-table td:nth-child(2) { width: 18%; }
#hm-table th:nth-child(3), #hm-table td:nth-child(3) { width: 22%; }
#hm-table td:last-child { width: 2.5rem; }

/* ---- Uppdragsbrev ---- */
.ub-actions { white-space: nowrap; text-align: right; }
.ub-actions .btn, .ub-actions form { margin-left: 0.25rem; }
.ub-form h4 { margin: 0 0 0.5rem; }
.ub-pdf { width: 100%; height: 75vh; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.ub-portal { max-width: 1000px; }

/* ---- Signering ---- */
.sg-steg { border-left: 4px solid var(--border); }
.sg-steg.sg-pagaende { border-left-color: var(--amber); }
.sg-steg.sg-klar { border-left-color: var(--green); }
.sg-steg.sg-avbrutet { border-left-color: var(--red); }
.sg-nr { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.85rem; margin-right: 0.3rem; }
.sg-grid { align-items: start; }
.sg-grid h4 { margin: 0.2rem 0 0.4rem; }
.sg-doklankar { display: flex; gap: 0.3rem; align-items: center; }
.sg-stegknappar { display: flex; gap: 0.25rem; }
.sg-parter input { width: 100%; font-size: 0.82rem; padding: 0.3rem 0.4rem; }
.sg-dokval { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.sg-mallsteg { margin: 0; padding-left: 1.2rem; }
.sg-stegred { list-style: none; padding: 0; margin: 0.75rem 0; counter-reset: steg; }
.sg-stegrad { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0.5rem 0.75rem; align-items: center; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; background: var(--bg); border-radius: var(--radius); counter-increment: steg; }
.sg-stegrad::before { content: counter(steg); grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.8rem; }
.sg-stegrad { grid-template-columns: 1.6rem minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.sg-stegrad .sg-dokval { grid-column: 2 / -1; }
.sg-stegrad .btn-icon { grid-column: 5; grid-row: 1; }

/* Signering: släppytor och förlopp */
.sg-dropzone { min-width: 200px; padding: 0.35rem 0.6rem; font-size: 0.78rem; }
.sg-dropzone-steg { min-width: 260px; }
.dropzone.dropzone-fel { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); background: #fdecea; }
.sg-bar { height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 0.5rem 0; }
.sg-bar.small { height: 6px; margin: 0.3rem 0 0; }
.sg-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; }
.sg-bar-fill.klar { background: #27ae60; }
.sg-bar-fill.avbrutet { background: #c0392b; }
.sg-tidslinje { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sg-tidslinje li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.sg-tidslinje .sg-tl-nr { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; background: var(--border); color: var(--text-muted); }
.sg-tidslinje li.sg-tl-pagaende { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(41,128,185,.12); }
.sg-tidslinje li.sg-tl-pagaende .sg-tl-nr { background: var(--primary); color: #fff; }
.sg-tidslinje li.sg-tl-klar .sg-tl-nr { background: #27ae60; color: #fff; }
.sg-tidslinje li.sg-tl-avbrutet .sg-tl-nr { background: #c0392b; color: #fff; }
.sg-tidslinje li.sg-tl-vantar { opacity: .75; }
.sg-tl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.sg-tl-text .small { color: var(--text-muted); }
.sg-stegstatus { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.6rem; font-size: 0.85rem; color: var(--text-muted); }
.sg-forlopp { min-width: 180px; }
.risk-text { color: #c0392b; }

/* Fortnox */
.fx-gem { margin-left: 0.3rem; font-size: 0.8rem; color: var(--primary); white-space: nowrap; }
.fx-panel { border-left: 4px solid #2e7d32; }
.nowrap { white-space: nowrap; }
.fx-val { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.fx-val form { margin: 0; }
.fx-gem { text-decoration: none; padding: 0 0.15rem; border-radius: 4px; }
.fx-gem:hover { background: #eaf2f8; }

/* Verifikatpanel i huvudboken (gemet) */
.doc-preview-panel.wide { width: min(75vw, 1200px); }
.fxp { position: fixed; inset: 0; background: var(--bg); z-index: 50; display: flex; flex-direction: column; }
.fxp-inner { display: flex; flex-direction: column; height: 100%; padding: 0.6rem 0.8rem; gap: 0.4rem; box-sizing: border-box; }
.fxp-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fxp-knappar { display: flex; gap: 0.3rem; align-items: center; }
.fxp-bladdra { display: inline-flex; gap: 0.25rem; align-items: center; margin-right: 0.5rem; }
.fxp-bladdra [data-fx-pos] { min-width: 4.5rem; text-align: center; white-space: nowrap; }
.fxp-bladdra button[disabled] { opacity: 0.4; cursor: default; }
.fxp-kontering summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.fxp-tabell { font-size: 0.8rem; margin-top: 0.3rem; }
.fxp-tabell td, .fxp-tabell th { padding: 0.2rem 0.4rem; }
.fxp-aktuell td { background: #eaf2f8; font-weight: 600; }
.fxp-kommentar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.fxp-kommentar input[type="text"] { flex: 1; min-width: 200px; }
.fxp-bilagor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.fxp-flikar { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.fxp-flikar .aktiv { background: var(--primary); color: #fff; }
.fxp-bild { flex: 1; width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; min-height: 200px; }
.fxp[hidden] { display: none; }
/* Tom "bild" när verifikationen saknar underlag. */
.fxp-tom { flex: 1; min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius); background: #fafafa; padding: 1rem; }
.fxp-tom p { margin: 0.3rem auto 0; max-width: 32rem; }
/* Avstämd transaktion i stickprovslistorna (granskningsmomenten). */
.doc-table tr.trans-reconciled td { background: #e3f4e6; }

/* Signering: hinder-lista (spärren, services/signeringskrav.py) */
.sg-hinder { list-style: none; padding: 0; margin: 0 0 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sg-hinder li { display: flex; gap: 0.5rem; align-items: flex-start; }
.sg-hinder-ikon { color: #b3261e; font-weight: 700; flex: 0 0 1.2rem; }
.card.sg-sparr-av { border-color: #e0a100; box-shadow: inset 4px 0 0 #e0a100; }
.undertecknare-val { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.25rem; }
.undertecknare-val .field-label { font-weight: 600; font-size: 0.85rem; }
.signerad-ruta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
/* Filter över uppdragslistan (startsidan) */
.lista-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; }
.lista-filter input[type="search"] { flex: 1 1 14rem; min-width: 12rem; }
.lista-filter select { max-width: 14rem; }
.lista-filter .check { margin: 0; white-space: nowrap; }
/* Dialoger (Ny kund / Nytt uppdrag) */
dialog.dialog { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; width: min(34rem, 92vw); box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
dialog.dialog::backdrop { background: rgba(20, 30, 40, 0.45); }
.dialog-form { display: flex; flex-direction: column; gap: 0.6rem; }
.dialog-form .field { margin: 0; }
.dialog-form select, .dialog-form input[type="text"] { width: 100%; }
.period-falt { display: flex; gap: 0.5rem; align-items: center; }
.dialog-knappar { display: flex; gap: 0.5rem; margin: 0.4rem 0 0; }
/* Kundkortets statusrad och offertregistret */
.kund-statusrad { margin: 0.5rem 0; }
.kund-status h3 { font-size: 0.95rem; }
.inline-details { display: inline-block; position: relative; }
.inline-details summary { list-style: none; cursor: pointer; }
.inline-details summary::-webkit-details-marker { display: none; }
.inline-popover { position: absolute; right: 0; z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem; box-shadow: 0 6px 20px rgba(0,0,0,0.15); min-width: 22rem; margin-top: 0.3rem; }
.inline-popover input[type="text"] { width: 9rem; }
/* Tidtagaren i topplisten */
.tid-indikator { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: rgba(255,255,255,0.8); margin-right: 0.6rem; white-space: nowrap; text-decoration: none; }
.tid-punkt { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #888; display: inline-block; }
.tid-indikator.aktiv .tid-punkt { background: #4cd964; box-shadow: 0 0 6px #4cd964; }
.tid-indikator.paus .tid-punkt { background: #f0ad4e; }
/* Dagsvy och rapport */
.tid-dagnav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.tid-tabell input[type="time"] { width: 6.5rem; }
.tid-tabell input[type="text"] { width: 100%; }
.tid-tabell select { max-width: 13rem; }
.tid-tabell tr.tid-manuell td { background: #f3f7fb; }
.tid-tabell tr.tid-flagg td { background: #fff4e5; }
.tid-summa { font-size: 1.4rem; font-weight: 700; }
.tid-kundrad td { background: #eef2f5; font-weight: 600; }
/* Intern chatt (services/chatt.py) */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
.chatt-sida { display: grid; grid-template-columns: 16rem 1fr; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .chatt-sida { grid-template-columns: 1fr; } }
.chatt-kanal-lank { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.5rem; border-radius: var(--radius); text-decoration: none; color: inherit; }
.chatt-kanal-lank:hover { background: #eef2f5; }
.chatt-kanal-lank.aktiv { background: var(--primary); color: #fff; }
.chatt-olasta, .notis-antal, .chatt-flik-olasta { background: #d9534f; color: #fff; border-radius: 999px; font-size: 0.7rem; padding: 0.05rem 0.45rem; font-weight: 700; }
.chatt-widget { display: flex; flex-direction: column; min-height: 20rem; }
.chatt-lista { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fafbfc; padding: 0.5rem; }
.chatt-rad { display: flex; gap: 0.5rem; margin: 0.35rem 0; align-items: flex-start; }
.chatt-rad.egen { flex-direction: row-reverse; }
.chatt-avatar { flex: 0 0 auto; width: 2rem; height: 2rem; font-size: 0.75rem; }
.chatt-bubbla { background: #fff; border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.4rem 0.7rem; max-width: 80%; }
.chatt-rad.egen .chatt-bubbla { background: #e3ecfb; }
.chatt-meta { font-size: 0.8rem; margin-bottom: 0.15rem; }
.chatt-verktyg a { color: var(--text-muted); text-decoration: none; margin-left: 0.2rem; }
.chatt-text { font-size: 0.92rem; word-break: break-word; }
.chatt-tagg { background: #fff3b0; border-radius: 4px; padding: 0 0.2rem; font-weight: 600; }
.chatt-skriv { display: flex; gap: 0.5rem; margin-top: 0.5rem; position: relative; align-items: flex-end; }
.chatt-skriv textarea { flex: 1; resize: vertical; }
.chatt-forslag { position: absolute; bottom: 100%; left: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,0.15); z-index: 30; min-width: 16rem; }
.chatt-forslag-rad { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0.4rem 0.6rem; cursor: pointer; }
.chatt-forslag-rad.aktiv, .chatt-forslag-rad:hover { background: #eef2f5; }
.chatt-flik { position: fixed; right: 0; top: 40%; z-index: 40; transform: rotate(-90deg) translateY(-100%); transform-origin: right top;
  background: var(--primary); color: #fff; border: 0; border-radius: var(--radius) var(--radius) 0 0; padding: 0.4rem 0.9rem; cursor: pointer; font-size: 0.85rem; display: inline-flex; gap: 0.4rem; align-items: center; }
.chatt-flik span { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatt-panel { position: fixed; right: 0; top: 0; height: 100vh; width: min(30rem, 95vw); background: #fff; border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(0,0,0,0.15); z-index: 45; padding: 0.8rem; display: flex; flex-direction: column; box-sizing: border-box; }
.chatt-panel[hidden] { display: none; }
.chatt-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.chatt-panel .chatt-widget { flex: 1; min-height: 0; }
.notis-klocka { position: relative; margin-right: 0.6rem; }
.notis-knapp { background: none; border: 0; cursor: pointer; font-size: 1rem; color: #fff; position: relative; }
.notis-knapp .notis-antal { position: absolute; top: -0.4rem; right: -0.6rem; }
.notis-lista { position: absolute; right: 0; top: 130%; width: 24rem; max-height: 24rem; overflow-y: auto; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,0.2); z-index: 60; }
.notis-rad { display: block; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; font-size: 0.85rem; }
.notis-rad.olast { background: #fff8e1; }
.notis-rad:hover { background: #eef2f5; }
/* Dockad chatt */
:root { --chatt-dock-w: 24rem; }
.chatt-dock { position: fixed; right: 0; top: 0; height: 100vh; width: var(--chatt-dock-w); background: #fff; border-left: 1px solid var(--border);
  box-shadow: -4px 0 16px rgba(0,0,0,0.08); z-index: 45; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; box-sizing: border-box; }
.chatt-dock[hidden] { display: none; }
.chatt-dock-head { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.chatt-dock-head select { flex: 1; min-width: 0; font-size: 0.85rem; }
.chatt-dock-info { margin: 0.2rem 0 0.4rem; }
.chatt-dock .chatt-widget { flex: 1; min-height: 0; }
.chatt-dock .chatt-bubbla { max-width: 92%; }
body.chatt-dock-oppen .topbar, body.chatt-dock-oppen .tabs, body.chatt-dock-oppen main { margin-right: var(--chatt-dock-w); }
body.chatt-dock-oppen .chatt-flik { display: none; }
body.chatt-dock-oppen .topbar { flex-wrap: wrap; row-gap: 0.2rem; }
/* Förhandsgranskningspanelen lägger sig till vänster om dockan när den är öppen. */
body.chatt-dock-oppen .doc-preview-panel.open { right: var(--chatt-dock-w); }
body.chatt-dock-oppen .topbar .assignment-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { :root { --chatt-dock-w: 20rem; } }
@media (max-width: 800px) { .chatt-dock { width: 100vw; } body.chatt-dock-oppen .topbar, body.chatt-dock-oppen .tabs, body.chatt-dock-oppen main { margin-right: 0; } }
.chatt-flik { top: 45%; }
.chatt-gem { padding: 0.35rem 0.6rem; cursor: pointer; }
.chatt-bilagor { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.chatt-bild img { max-width: 260px; max-height: 180px; border-radius: 0.4rem; border: 1px solid var(--border); display: block; }
.chatt-fil { display: inline-block; background: #f3f5f8; border: 1px solid var(--border); border-radius: 0.4rem; padding: 0.2rem 0.5rem; font-size: 0.85rem; text-decoration: none; }
.chatt-widget.chatt-drop .chatt-lista { outline: 2px dashed var(--primary); }
.chatt-laddar { margin-top: 0.2rem; }
/* Nyhetsflöde */
.nyheter-kort summary::-webkit-details-marker { display: none; }
.nyheter-kort summary h2::before { content: "▸ "; color: var(--text-muted); font-size: 0.9em; }
.nyheter-kort[open] summary h2::before { content: "▾ "; }
.nyheter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.nyhet { display: block; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; background: #fafbfc; }
.nyhet:hover { background: #eef2f5; }
.nyhet strong { display: block; margin: 0.2rem 0; font-size: 0.92rem; line-height: 1.3; }
.nyhet p { margin: 0.2rem 0 0; }
.nyhet-meta { font-size: 0.75rem; }
.badge.nyhet-kalla { background: #e3ecfb; color: #1f4e9c; }
.nyheter-lista { display: flex; flex-direction: column; gap: 0.5rem; }
/* Nyhetsdockan */
.nyheter-flik { top: calc(45% + 7.5rem); background: #6b4f9e; }
body.chatt-dock-oppen .nyheter-flik { display: none; }
.nyheter-dock-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding-right: 0.2rem; }
.nyheter-dock .nyhet { background: #fff; }
/* Kalender (services/kalender.py) */
.kal-layout { display: grid; grid-template-columns: 1fr 20rem; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .kal-layout { grid-template-columns: 1fr; } }
.kal-manad { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kal-manad th { font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); padding: 0.3rem; text-align: left; }
.kal-manad th.kal-v, .kal-manad td.kal-v { width: 2rem; text-align: center; }
.kal-dag { vertical-align: top; height: 6.2rem; border: 1px solid var(--border); padding: 0.25rem; cursor: pointer; background: #fff; }
.kal-dag:hover { background: #f6f8fa; }
.kal-utanfor { background: #fafafa; color: var(--text-muted); }
.kal-idag .kal-dagnr { background: var(--primary); color: #fff; border-radius: 999px; display: inline-block; min-width: 1.4rem; text-align: center; }
.kal-dagnr { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.15rem; }
.kal-mote { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid; border-radius: 3px; padding: 0.1rem 0.3rem; margin: 0.1rem 0; font-size: 0.74rem;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-tidtext { color: var(--text-muted); }
.kal-kund { background: #e3ecfb; border-color: #1f4e9c; }
.kal-internt { background: #e6f4ea; border-color: #2e7d32; }
.kal-deadline { background: #fde8d8; border-color: #c0392b; }
.kal-prick { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin: 0 0.3rem 0 0.2rem; border: 2px solid; vertical-align: middle; }
.kal-prick.kal-kund { background: #1f4e9c; border-color: #1f4e9c; } .kal-prick.kal-internt { background: #2e7d32; border-color: #2e7d32; } .kal-prick.kal-deadline { background: #c0392b; border-color: #c0392b; }
.kal-kommande { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.kal-kommande-rad, .kal-startkort { display: block; width: 100%; text-align: left; background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.45rem 0.6rem; cursor: pointer; font: inherit; font-size: 0.88rem; }
.kal-kommande-rad:hover, .kal-startkort:hover { background: #eef2f5; }
.kal-startrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.kalender-dialog { width: min(44rem, 94vw); }
.kal-rad { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.kal-rad .field { margin: 0; flex: 0 0 auto; }
.kal-deltagare { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.kal-deltagare .check { margin: 0; }
.aktiv-filter { background: var(--primary); color: #fff; }
.btn[hidden], a.btn[hidden] { display: none !important; }

/* Planering (services/planering.py) */
.pl-filter label input { display: block; }
.pl-vyval { display: inline-flex; gap: 0.25rem; }
.pl-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 0.8rem 0; }
.pl-nyckeltal { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1.1rem; }
.pl-nyckeltal strong { font-size: 1.7rem; font-weight: 700; }
.pl-nyckeltal.pl-gront strong { color: #1e7b45; }
.pl-nyckeltal.pl-rott strong { color: #b3261e; }
.pl-text-rott { color: #b3261e; fill: #b3261e; }
.pl-text-gront { color: #1e7b45; }
.pl-grafer { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 1100px) { .pl-grafer, .pl-kort { grid-template-columns: 1fr; } }
.pl-svg { width: 100%; height: auto; display: block; }
.pl-bar-plan, .pl-pt-plan { fill: #2a5d9f; }
.pl-bar-kap, .pl-pt-kap { fill: #8fbf8f; }
.pl-bar-sen { fill: #c9463d; }
.pl-linje-plan { fill: none; stroke: #2a5d9f; stroke-width: 2.5; }
.pl-linje-kap { fill: none; stroke: #5a9b5a; stroke-width: 2.5; stroke-dasharray: 6 4; }
.pl-axel { stroke: #c8c8c8; stroke-width: 1; }
.pl-val { font-size: 11px; fill: #333; }
.pl-lab { font-size: 11px; fill: #666; }
.pl-leg { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 2px; }
.pl-leg-plan { background: #2a5d9f; } .pl-leg-kap { background: #8fbf8f; } .pl-leg-sen { background: #c9463d; }
.pl-tabell td.num, .pl-tabell th.num { text-align: right; white-space: nowrap; }
.pl-tabell input[type=number], .pl-tabell input[type=date] { padding: 0.2rem 0.35rem; }
.pl-forsenad td { background: #fff3f2; }
.pl-summa td { border-top: 2px solid #ddd; font-weight: 600; }
.pl-franvaro-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-end; }
.pl-franvaro-form input, .pl-franvaro-form select { display: block; }
.pl-startkort { padding: 0.8rem 1.1rem; }
.pl-stapel { height: 8px; background: #e6ecf3; border-radius: 4px; margin-top: 0.5rem; overflow: hidden; }
.pl-stapel span { display: block; height: 100%; background: #2a5d9f; border-radius: 4px; }
.pl-stapel span.pl-rott-bg { background: #c9463d; }

.pl-urval { position: relative; }
.pl-urval summary { list-style: none; cursor: pointer; display: inline-block; }
.pl-urval summary::-webkit-details-marker { display: none; }
.pl-urval-lista { position: absolute; right: 0; top: 2.2rem; z-index: 20; background: #fff; border: 1px solid #d7dde6; border-radius: 8px; padding: 0.6rem 0.8rem; box-shadow: 0 6px 20px rgba(0,0,0,0.12); display: flex; flex-direction: column; gap: 0.3rem; min-width: 14rem; }
.pl-team-vald { background: #2a5d9f; color: #fff; }

/* Regelverksbiblioteket som uppslagsverk (services/regelverk.py) */
.rv-sok { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rv-sok input[type=search] { flex: 1; min-width: 16rem; font-size: 1rem; padding: 0.5rem 0.7rem; }
.rv-traffar, .rv-trafflista { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.rv-traff { display: block; padding: 0.55rem 0.75rem; border: 1px solid #e2e7ee; border-radius: 8px; color: inherit; text-decoration: none; background: #fff; }
.rv-traff:hover { border-color: #2a5d9f; background: #f6f9fd; }
.rv-traff-meta { margin-bottom: 0.2rem; }
.rv-utdrag { color: #333; line-height: 1.4; }
.rv-utdrag mark, .rv-stycke mark, .rv-traff mark { background: #fff1a8; padding: 0 1px; border-radius: 2px; }
.rv-ref { font-weight: 600; color: #2a5d9f; white-space: nowrap; }
.rv-notis { color: #7a5a00; }
.rv-tva { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.8rem; align-items: start; }
.rv-upp { display: flex; flex-direction: column; gap: 0.5rem; }
.rv-notrad { display: block; padding: 0.45rem 0; border-top: 1px solid #eee; color: inherit; text-decoration: none; }
.rv-notrad:hover { background: #f6f9fd; }
.rv-layout { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.rv-layout .rv-sida { order: -1; }
@media (max-width: 1100px) { .rv-layout, .rv-tva { grid-template-columns: 1fr; } .rv-layout .rv-sida { position: static; max-height: none; } }
.rv-sida { position: sticky; top: 4.5rem; max-height: calc(100vh - 5rem); overflow: auto; }
.rv-bladdra { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rv-hopp input[type=number] { width: 4.5rem; }
.btn.disabled { pointer-events: none; opacity: 0.4; }
.rv-sidmarke { font-size: 0.72rem; color: #999; text-transform: uppercase; letter-spacing: 0.06em; border-top: 1px dashed #ddd; margin: 1rem 0 0.4rem; padding-top: 0.2rem; }
.rv-rubrik { margin: 0.9rem 0 0.3rem; font-size: 1rem; }
.rv-stycke { padding: 0.3rem 0.4rem; border-radius: 6px; border-left: 3px solid transparent; }
.rv-stycke:hover { background: #f7f9fc; }
.rv-stycke.rv-traff { border-left-color: #e3b800; background: #fffbe8; }
.rv-stycke.rv-fokus { border-left-color: #2a5d9f; background: #eef4fc; }
.rv-stycke.rv-har-not { border-left-color: #7a5a00; }
.rv-stycke.rv-ar-rubrik .rv-stycke-text { font-weight: 600; }
.rv-stycke-rad { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: start; }
.rv-stycke-text { line-height: 1.5; }
.rv-notknapp { visibility: hidden; background: none; border: 1px solid #c9d3df; border-radius: 6px; font-size: 0.75rem; padding: 0.1rem 0.45rem; cursor: pointer; color: #2a5d9f; white-space: nowrap; }
.rv-stycke:hover .rv-notknapp, .rv-stycke.rv-fokus .rv-notknapp { visibility: visible; }
.rv-not { margin: 0.4rem 0 0.2rem 6.5rem; padding: 0.45rem 0.7rem; background: #fff7df; border: 1px solid #f0dfa3; border-radius: 6px; font-size: 0.9rem; }
.rv-not-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; font-size: 0.8rem; margin-bottom: 0.2rem; }
.rv-not-knappar { margin-left: auto; display: inline-flex; gap: 0.3rem; }
.rv-not-knappar button { background: none; border: none; color: #2a5d9f; cursor: pointer; text-decoration: underline; padding: 0; }
.rv-not-text { white-space: pre-wrap; }
.rv-notform { margin: 0.4rem 0 0.2rem 6.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.rv-notform textarea { width: 100%; }
.rv-notform-rad { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 800px) { .rv-stycke-rad { grid-template-columns: 1fr; } .rv-not, .rv-notform { margin-left: 0; } }
.rv-notform[hidden] { display: none !important; }
.rv-stycke.rv-ar-rubrik { margin-top: 0.7rem; }
.rv-ref-forts { opacity: 0.35; font-weight: 400; font-size: 0.8rem; }

.rv-lagtraffar { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.rv-lagtraff { display: flex; justify-content: space-between; gap: 0.6rem; align-items: center; padding: 0.45rem 0.6rem; border: 1px solid #e2e7ee; border-radius: 8px; }
.rv-lagtraff.rv-upphavd { opacity: 0.6; }
.rv-lagtraff-knappar { display: inline-flex; gap: 0.3rem; align-items: center; white-space: nowrap; }
/* Läsvyn v2: hela dokumentet, innehållsförteckning, sök i webbläsaren */
.rv-topp { position: sticky; top: 0; z-index: 15; background: var(--bg, #f3f5f8); padding: 0.4rem 0 0.6rem; margin-bottom: 0.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.rv-topp-titel h1 { font-size: 1.35rem; }
.rv-sokrad { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; flex: 1; justify-content: flex-end; min-width: 20rem; }
.rv-sokfalt { position: relative; flex: 1; min-width: 18rem; max-width: 36rem; }
.rv-sokfalt input { width: 100%; padding: 0.5rem 7rem 0.5rem 0.7rem; font-size: 0.95rem; }
.rv-sokinfo { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.rv-filter { white-space: nowrap; }
.rv-text { padding: 1rem 1.4rem 1.4rem; }
.rv-kapitel { font-size: 1.25rem; margin: 1.6rem 0 0.4rem; padding-top: 0.8rem; border-top: 2px solid #e3e8ef; scroll-margin-top: 7rem; }
.rv-kapitel:first-child { border-top: none; margin-top: 0.2rem; padding-top: 0; }
.rv-rubrik { font-size: 1rem; margin: 1rem 0 0.25rem; scroll-margin-top: 7rem; }
.rv-stycke { scroll-margin-top: 7rem; }
.rv-stycke.rv-aktuell { border-left-color: #e3b800; background: #fff3c4; }
.rv-dold { display: none !important; }
.rv-filtrerad .rv-stycke { margin-bottom: 0.4rem; border-bottom: 1px solid #eee; }
.rv-ref { text-decoration: none; }
.rv-ref:hover { text-decoration: underline; }
.rv-toc { padding: 0.8rem 0 0.6rem; }
.rv-toc > .flex-between { padding: 0 1rem 0.5rem; }
.rv-toc nav { max-height: calc(100vh - 15rem); overflow: auto; border-top: 1px solid #e6eaf0; }
.rv-toc-avsnitt { display: block; padding: 0.55rem 1rem; background: #eef1f5; color: #2b3a4a; font-weight: 700; font-size: 0.86rem; text-decoration: none; border-bottom: 1px solid #e0e5ec; }
.rv-toc-avsnitt:hover { background: #e4e9f0; }
.rv-toc-kap { border-bottom: 1px solid #edf0f4; }
.rv-toc-kap summary { cursor: pointer; padding: 0.5rem 1rem; list-style: none; display: block; }
.rv-toc-kap summary::-webkit-details-marker { display: none; }
.rv-toc-kap summary a { color: #1f2a37; text-decoration: none; font-weight: 500; font-size: 0.88rem; line-height: 1.35; display: block; }
.rv-toc-kap summary:hover { background: #f5f7fa; }
.rv-toc-kap.rv-toc-aktiv summary { background: #dff2ee; border-left: 3px solid #1b9c85; padding-left: calc(1rem - 3px); }
.rv-toc-kap.rv-toc-aktiv summary a { font-weight: 700; }
.rv-toc-kap[open] summary a { text-decoration: underline; text-underline-offset: 3px; }
.rv-toc-kap ul { list-style: none; margin: 0; padding: 0.15rem 0 0.4rem; background: #fafbfc; }
.rv-toc-kap li a { display: block; padding: 0.28rem 1rem 0.28rem 1.6rem; font-size: 0.84rem; color: #2b3a4a; text-decoration: none; line-height: 1.3; }
.rv-toc-kap li a:hover { background: #eef4fc; color: #2a5d9f; }
.rv-toc-kap li a.rv-toc-aktiv-under { color: #1b7f6c; font-weight: 600; }
.rv-avsnitt { font-size: 1.45rem; margin: 2rem 0 0.2rem; scroll-margin-top: 7rem; }
.rv-avsnitt + .rv-kapitel { border-top: none; margin-top: 0.2rem; padding-top: 0; }
.rv-toc-alla { background: none; border: none; color: #2a5d9f; cursor: pointer; text-decoration: underline; }

.rv-doktoc { margin: 0.4rem 0 1rem; border: 1px solid #e2e7ee; border-radius: 8px; padding: 0.4rem 0.8rem; background: #fafbfd; }
.rv-doktoc summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.rv-doktoc-lista { margin-top: 0.5rem; columns: 2; column-gap: 2rem; }
.rv-doktoc-rad { display: flex; align-items: baseline; gap: 0.3rem; font-size: 0.85rem; padding: 0.1rem 0; break-inside: avoid; }
.rv-doktoc-rad.rv-doktoc-n1 { font-weight: 600; margin-top: 0.3rem; }
.rv-doktoc-rad.rv-doktoc-n2 { padding-left: 1rem; color: #444; }
.rv-doktoc-punkter { flex: 1; border-bottom: 1px dotted #bbb; min-width: 1rem; transform: translateY(-3px); }
.rv-doktoc-sida { color: #777; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .rv-doktoc-lista { columns: 1; } }
.rv-doktoc-rad { color: inherit; text-decoration: none; }
.rv-doktoc-rad:hover span:first-child { color: #2a5d9f; text-decoration: underline; }
.rv-rubrik-liten { font-size: 0.85rem; color: #555; text-transform: uppercase; letter-spacing: 0.04em; margin: 0.7rem 0 0.15rem; }
.rv-tva.rv-en { grid-template-columns: 1.6fr 1fr; }