/* ===========================================================
 * components.css — UI-omskinning, Etapp 0 (Pilot)
 *
 * Ett ställe för återkommande mönster från UI-inventeringen.
 * Lagras EFTER style.css i app/layout.tsx så reglerna här
 * vinner i kaskaden där samma klasser definieras tidigare.
 *
 * Alla värden via tokens.css. Inga råa hexar. Inga sid-specifika
 * media-queries — sidorna ska konsumera dessa klasser och bli
 * responsiva by default.
 *
 * BREAKPOINTS (synkad mellan komponenter):
 *   • 760px — split → kolumn (matchar lev-faktura #381)
 *   • 480px — telefon (en kolumn, kompakt padding)
 *
 * STANDARD-VAL för datatabell på mobil: HORISONTELL SCROLL
 * (.table-wrapper får -webkit-overflow-scrolling: touch).
 * Stack-på-mobil-varianten (.data-table--stack) införs i etapp
 * 1 för listor som har naturliga "rad-kort"-representationer
 * (faktura/kvittolistor).
 * =========================================================== */


/* ─── 1. Page header — Fraunces större för designharmoni ─────── */

.page-header {
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.page-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text-primary);
  line-height: 1.1;
  margin: 0;
}

.page-subtitle {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin-top: var(--space-1);
  letter-spacing: 0;
}


/* ─── 2. Surface card — mjuk, ljus, landningssidans känsla ───── */

.card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;   /* så hörnen på header-bakgrund kapas */
  /* ROTORSAKSFIXEN (docs/KORT_INRE_PADDING_DIAGNOS.md): .card var paddinglös
     och förlitade sig på att författaren kände till .card-body-konventionen —
     rå class="card" gav klistrande innehåll (lager #720, auth #521,
     avskrivningsvyn …). Nu är RÄTT padding default; kant-till-kant kräver
     explicit .card--flush (aktivt, granskningsbart beslut). */
  padding: var(--card-pad-y) var(--card-pad-x);
}

/* Strukturerade kort (.card-header/.card-body sätter sin egen padding som
   förr) ska INTE dubbelpaddas — :has-neutraliseringen gör dem BIT-IDENTISKA
   utan migrering. (:has stöds i plattformens målmiljö: Chrome/Edge 105+,
   Safari 15.4+, Firefox 121+ — samma nivå som redan använda 100dvh/clamp.) */
.card:has(> .card-header),
.card:has(> .card-body) {
  padding: 0;
}

/* Explicit kant-till-kant (tabell-/listkort där innehållet ska nå ramen). */
.card--flush { padding: 0; }

.card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.card-title {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
}

.card-body { padding: var(--space-5) var(--space-6); }


/* ─── 3. Stat-cards — display-stort tal i Fraunces ──────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stat-card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.05;
  color: var(--text-primary);
  letter-spacing: -.015em;
}
.stat-value.green { color: var(--success); }
.stat-value.red   { color: var(--danger);  }


/* ─── 4. Responsiv två-kolumn — grid-2 ──────────────────────── */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}


/* ─── 5. Datatabell — horisontell scroll på mobil ───────────── */

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-5);
  text-align: left;
  background: var(--surface-inset);
  border-bottom: 1px solid var(--line);
}

tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background .12s ease;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--hover-tint); }

tbody td {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-body);
  color: var(--text-body);
}


/* ─── 6. Knapphierarki — landningssidans cirkulära form ─────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  min-height: var(--tap-target);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .15s, border-color .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-primary {
  background: var(--info);
  color: var(--paper);
  box-shadow: 0 8px 20px -8px rgba(37,99,235,.5);
}
.btn-primary:hover {
  background: var(--info-deep);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--line);
}
.btn-secondary:hover {
  border-color: var(--text-primary);
  background: var(--hover-tint);
}

.btn-danger {
  background: var(--danger);
  color: var(--paper);
}
.btn-danger:hover { background: var(--danger-deep); }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--hover-tint); }

/* Kompakt variant — minst 36px höjd, fortfarande gott för tumtryck
   när den ligger i en sekundär actions-rad (t.ex. "Visa alla" intill
   en card-header eller en tabellrads-knapp). */
.btn-sm {
  padding: 0 var(--space-4);
  min-height: 36px;
  font-size: var(--fs-sm);
}

.btn-icon {
  padding: 0;
  width: var(--tap-target);
  min-height: var(--tap-target);
  border-radius: 999px;
}


/* ─── 7. Badges — semantiska tokens ─────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
}

.badge-green  { background: var(--success-soft); color: var(--success-deep); }
.badge-yellow { background: var(--warning-soft); color: var(--warning-deep); }
.badge-red    { background: var(--danger-soft);  color: var(--danger-deep);  }
.badge-blue   { background: var(--info-soft);    color: var(--info-deep);    }
.badge-gray   { background: var(--surface-inset); color: var(--text-secondary); }
/* badge-amber (docs/BOKSLUT_MASTER_DETAIL.md, commit 4): "Påbörjat"-status i
   bokslut.js/bokslut-skal.js använde denna klass utan motsvarande regel —
   ostylad/default utseende innan denna rad. Samma semantik som badge-yellow. */
.badge-amber  { background: var(--warning-soft); color: var(--warning-deep); }

/* FLAGGAS: badge-orange/-teal har ingen passande befintlig token —
   används av lev-faktura-AI-statusbadges. Konvertera till
   --info-soft eller introducera --secondary-* i etapp 1. */


/* ─── 8. Empty-state ──────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-5);
  color: var(--text-secondary);
}
.empty-state svg {
  width: 48px; height: 48px;
  opacity: .35;
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
}
.empty-state p {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin: 0;
}


/* ============================================================
 * ETAPP 0B — komponenter receipts-pilot konsumerar
 * (utdrag ur etapp 1-listan — resten väntar tills etapp 1)
 * ============================================================ */


/* ─── 9. Section header — eyebrow + titel + actions ─────────── */

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.section-header__main { min-width: 0; flex: 1 1 320px; }
.section-header__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.section-header__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--info-deep);
}
.section-header__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--text-primary);
  margin: var(--space-1) 0 0;
}
.section-header__lead {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}


/* ─── 10. List row — generaliserat .attest-row ──────────────── */

/* Vi *aliasar* .attest-* så befintliga sidor (inkorg, arkiv) ärver
   automatiskt. Nya sidor använder .list-row. När alla sidor migrerat
   kan .attest-*-aliaserna tas bort (sannolikt etapp 7+). */
.list-row,
.attest-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  transition: background .12s ease;
}
.list-row:last-child,
.attest-row:last-child { border-bottom: none; }
.list-row:hover,
.attest-row:hover { background: var(--hover-tint); }

.list-row__ico,
.attest-ico {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--surface-inset);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.list-row__ico svg,
.attest-ico svg { width: 18px; height: 18px; }

.list-row__main,
.attest-main {
  flex: 1;
  min-width: 0;
}
.list-row__title,
.attest-titel {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row__sub,
.attest-sub {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.list-row__actions,
.attest-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  /* Listrader stack:as på mobil så att actions hamnar under main */
  .list-row,
  .attest-row {
    flex-wrap: wrap;
  }
  .list-row__actions,
  .attest-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ─── 11. Datatabell — stack-på-mobil-VARIANTEN ─────────────── */

/* STANDARD-VAL: <table class="data-table data-table--stack"> blir
 * rad-kort på <= 760px. Datacellerna får data-label-attribut som
 * blir den vänstra "etiketten" på mobil.
 *
 * Detta är mobilstandarden för listor med naturliga rad-kort.
 * .table-wrapper (horisontell scroll) finns kvar för listor som
 * inte stack:as bra (t.ex. SIE/rapport-utskrifter).
 *
 * Markup-konvention:
 *   <table class="data-table data-table--stack">
 *     <thead>
 *       <tr><th>Datum</th><th>Belopp</th>…</tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td data-label="Datum">…</td>
 *         <td data-label="Belopp">…</td>
 *       </tr>
 *     </tbody>
 *   </table>
 */
.data-table { width: 100%; border-collapse: collapse; }

@media (max-width: 760px) {
  .data-table--stack thead { display: none; }
  .data-table--stack tbody { display: block; }
  .data-table--stack tbody tr {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow);
  }
  .data-table--stack tbody tr:hover {
    background: var(--surface-card); /* override hover-tint på mobil */
  }
  .data-table--stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border: none;
    font-size: var(--fs-body);
  }
  .data-table--stack tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .data-table--stack tbody td:empty,
  .data-table--stack tbody td[data-label=""] { display: none; }
  /* När en cell innehåller åtgärder (knappar) — låt dem ta full bredd
     under etiketten */
  .data-table--stack tbody td.has-actions { flex-direction: column; align-items: stretch; }
  .data-table--stack tbody td.has-actions::before { margin-bottom: var(--space-1); }
}


/* ─── 12. Status-chip — tokeniserade varianter ─────────────── */

/* Ett tokeniserat chip med modifierare. Receipts-pilot mappar de 8
 * DB-statusvärdena via klassnamn (.status-chip + .status-chip--<variant>).
 * Tidigare hade vi 8 hex-färgpar i style.css — nu sex semantiska
 * varianter ger same+klarare visuell hierarki. */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-3);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.status-chip--neutral    { background: var(--surface-inset); color: var(--text-secondary); }
.status-chip--processing { background: var(--info-soft);     color: var(--info-deep); animation: status-chip-pulse 1.5s ease-in-out infinite; }
.status-chip--warning    { background: var(--warning-soft);  color: var(--warning-deep); }
.status-chip--danger     { background: var(--danger-soft);   color: var(--danger-deep); }
.status-chip--success    { background: var(--success-soft);  color: var(--success-deep); }
.status-chip--success-strong { background: var(--success);   color: var(--paper); }

@keyframes status-chip-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .58; }
}


/* ─── 13. Helpers för smutsande inline-styles ──────────────── */

.helper-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.row-sub {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin-top: 2px;
}
/* Specialfall: löpnummer i cell-title som bara visas på mobil. På desktop
 * finns numret redan i sin egen kolumn — undvik dubbletten. */
.cell-nr-mobil { display: none; }
@media (max-width: 760px) {
  .cell-nr-mobil { display: block; }
}

/* Cell-title med inline-element bredvid titeln (t.ex. bilaga-ikon, status-tag). */
.cell-title__row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* Bilaga-ikon: synlig BARA på mobil i cell-title (desktop har egen kolumn).
 * Desktop visar den i .cell-bilaga-kolumnen i st.f. */
.cell-title__bilaga-mobil { display: none; }
@media (max-width: 760px) {
  .cell-title__bilaga-mobil { display: inline-flex; }
}
/* Status-tag visad inline bredvid titeln — på desktop ENDAST (mobil
 * har en egen status-rad i .row-sub i .cell-title). Möjliggör att
 * sidan tar bort sin Status-kolumn helt (std #22 "märk undantaget"). */
.cell-title__status-desktop { display: inline-flex; }
@media (max-width: 760px) {
  .cell-title__status-desktop { display: none; }
}
.bilaga-ikon {
  color: var(--info);
  flex-shrink: 0;
  vertical-align: -2px;
}
.cell-bilaga {
  width: 32px;
  text-align: center;
}
/* GEM-DUBBLETT-FIX: på mobil visas ikonen inline i .cell-title (via
 * .cell-title__bilaga-mobil). Kolumn-cellen MÅSTE gömmas dubbelt-säkert
 * — data-mobile="hide" beror på .data-table--stack-scope:n, vilket inte
 * alltid hjälpte vid varierande table-klass-kombinationer. Klass-baserad
 * regel fångar oberoende av föräldraklassen. */
@media (max-width: 760px) {
  .cell-bilaga { display: none !important; }
}

/* Inline status-tag — liten "pill"-text bredvid titeln. Används BARA
 * för avvikande status (std #22 "märk undantaget, inte normen").
 * Varianter speglar row--variant-systemet. */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-tag--warning {
  background: var(--warning-soft);
  color: var(--warning-deep);
}
.status-tag--danger {
  background: var(--danger-soft);
  color: var(--danger-deep);
}
.status-tag--processing {
  background: var(--blue-soft);
  color: var(--info);
}
.status-tag--success {
  background: var(--success-soft);
  color: var(--success-deep);
}
.status-tag--success-strong {
  background: var(--success);
  color: var(--paper);
}
.status-tag--neutral {
  background: var(--surface-inset);
  color: var(--text-secondary);
}
.action-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.action-group--end { justify-content: flex-end; }
.action-group--inline-cell {
  display: inline-flex;
  margin-left: var(--space-2);
}


/* ─── 14. Tom-state-kort (centrerat innehåll i en .card) ───── */

.card--empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--text-secondary);
}


/* ============================================================
 * ETAPP 0B — JUSTERINGAR EFTER GRANSKNING (uppdaterad standard)
 *
 * Ändringar:
 *   • Status flyttas FRÅN chip-kolumn TILL radfärg (vänsterkant
 *     + svag bakgrundstoning) + klartext i radens underrad.
 *     Etapp 1-sidor konsumerar samma row--variant-mönster.
 *   • Mobilkort blir kompaktare via mindre padding + möjlighet att
 *     dölja kolumner via data-mobile="hide".
 *
 * VIKTIGT (a11y):
 *   • Färg får ALDRIG vara enda bäraren — alltid kombinerad med
 *     status i klartext i raden.
 * ============================================================ */


/* ─── 15. Rad-status-varianter (för list-row OCH tabellrader) ─ */

/* DESKTOP-STANDARD (etapp 0B runda 2): bara 3px färgad vänsterkant.
 * Ingen bakgrundstoning på desktop — hela raden upplevs annars för
 * mättad. MOBIL behåller svag --*-soft-bg eftersom mobilkortet är
 * fysiskt avskilt och drar nytta av tonen.
 *
 * Mönstret är identiskt för .list-row och för <tr> i en .data-table —
 * inkommande etapper kan applicera samma klassnamn på båda. */

.row--success    { box-shadow: inset 3px 0 0 0 var(--success);  }
.row--warning    { box-shadow: inset 3px 0 0 0 var(--warning);  }
.row--danger     { box-shadow: inset 3px 0 0 0 var(--danger);   }
.row--processing { box-shadow: inset 3px 0 0 0 var(--info);     }
.row--neutral    { box-shadow: inset 3px 0 0 0 var(--text-secondary); }
.row--success-strong { box-shadow: inset 3px 0 0 0 var(--success-deep); }

/* Mobil-stack: svag bg-toning syns endast under 760px */
@media (max-width: 760px) {
  .row--success        { background: var(--success-soft); }
  .row--warning        { background: var(--warning-soft); }
  .row--danger         { background: var(--danger-soft);  }
  .row--processing     { background: var(--info-soft);    }
  .row--success-strong { background: var(--success-soft); }
}

/* Hover ska INTE radera radfärgen — bara förstärka den. */
.list-row.row--success:hover,
.list-row.row--warning:hover,
.list-row.row--danger:hover,
.list-row.row--processing:hover,
.list-row.row--neutral:hover,
.list-row.row--success-strong:hover,
.data-table tbody tr.row--success:hover,
.data-table tbody tr.row--warning:hover,
.data-table tbody tr.row--danger:hover,
.data-table tbody tr.row--processing:hover,
.data-table tbody tr.row--neutral:hover,
.data-table tbody tr.row--success-strong:hover { background: var(--hover-tint); }

/* Processing-pulse — diskret kant-färg-pulsning, inte bg, inte
   opacity, så raderna inte hoppar och desktop fortsatt utan bg. */
.row--processing {
  animation: row-pulse 1.8s ease-in-out infinite;
}
@keyframes row-pulse {
  0%, 100% { box-shadow: inset 3px 0 0 0 var(--info); }
  50%      { box-shadow: inset 3px 0 0 0 var(--blue-soft); }
}

/* Status-i-klartext i radens underrad (mobil-mönstret). Färg får
   INTE vara enda bäraren av status. */
.row-status-text {
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
  color: var(--text-secondary);
  font-weight: 600;
}


/* ─── 16. View-chips ("Att hantera" / "Bokförda" / "Alla") ──── */

/* Tre primära vy-chipsen som filtrerar listan på statusgrupper.
   Mönstret ärvs av etapp 1-sidor (lev-fakturor, kundfakturor):
     • Default: "Att hantera" — alla statusar utom slutpunkter
     • "Bokförda" / motsvarande slutpunkt
     • "Alla"
   Statuschipsen från filter-row är finjustering inom vald vy.

   Klient-side filtrering (inte server-query) — listan hämtas en gång
   så räknare för andra vyer kan beräknas utan extra rundresor. */

.view-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}


/* ─── 17. Kompaktare data-table--stack på mobil ─────────────── */

/* Override:ar och ersätter regelblocket i komponent #11.
   Standard uppdaterad (Etapp 0B-justeringen):
     • Mindre padding (12px) och gap (4px) per kort
     • data-mobile="hide" på en <td> döljer den helt på mobil
     • första cell-raden ska vara titel + belopp (titel-vänster,
       belopp-höger) — markup-konventionen är att titel-cellen INTE
       får data-label (den blir radens "namn") och beloppet får
       data-label="Belopp" men renderas till höger via td.text-right.
   Mål: ett kort ≈ 2 rader högt, flera kort per skärm. */

@media (max-width: 760px) {
  /* Kompaktare yttre padding och inre vertikal-rytm */
  .data-table--stack tbody tr {
    padding: var(--space-3);
    gap: 2px;
    margin-bottom: var(--space-2);
  }
  .data-table--stack tbody td {
    padding: var(--space-1) 0;
    font-size: var(--fs-body);
    line-height: 1.35;
  }
  .data-table--stack tbody td::before {
    font-size: 10px;
    letter-spacing: .12em;
  }
  /* Cell som ska vara dold på mobil */
  .data-table--stack tbody td[data-mobile="hide"] { display: none; }

  /* Cell utan data-label-värde (eller med tom data-label) renderas
     utan etiketten — för "titel-cellen" som inte vill ha "Datum:"-
     prefix. Inkluderar fall där data-label saknas helt. */
  .data-table--stack tbody td:not([data-label]),
  .data-table--stack tbody td[data-label=""] { display: flex; }
  .data-table--stack tbody td:not([data-label])::before,
  .data-table--stack tbody td[data-label=""]::before { content: none; }

  /* Höjd-/typografi-finish för title-cellen */
  .data-table--stack tbody td.cell-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-md);
  }
  /* Belopp till höger i samma kort på första raden (om passande
     plats) — receipts använder text-right på beloppscellen som
     redan finns. */
}

/* ── --tight: kompaktare mobilkort för korta, många rader ────
 *
 * Verifikat (och liknande historie-listor) har korta, ensartade
 * rader och tjänar på TÄTARE kort så att fler ryms per skärm.
 * Lev-fakturor/kvitton har längre rader och behåller den vanliga
 * densiteten. Sidor väljer densitet via klass:
 *   <table class="data-table data-table--stack data-table--stack--tight">
 *
 * --tight justerar vertikala rytmen + skalar ned underradens
 * typografi men ändrar INTE layout-strukturen — alla regler från
 * #11 + #17 fortsätter gälla. */
@media (max-width: 760px) {
  .data-table--stack.data-table--stack--tight tbody tr {
    padding: var(--space-2) var(--space-3);
    gap: 0;
    margin-bottom: var(--space-1);
  }
  .data-table--stack.data-table--stack--tight tbody td {
    padding: 1px 0;
    font-size: var(--fs-sm);
    line-height: 1.25;
  }
  .data-table--stack.data-table--stack--tight tbody td::before {
    font-size: 9px;
  }
  .data-table--stack.data-table--stack--tight tbody td.cell-title {
    font-size: var(--fs-body);
  }
  /* Underraden i cell-title är muted + ännu mindre på tight. */
  .data-table--stack.data-table--stack--tight tbody td.cell-title .row-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
  }
}


/* ─── 18. Layout-härdning mot innehållstryck (STANDARD) ───────
 *
 * Mobil-layout spricker när lång obruten text (felmeddelanden,
 * filnamn, base64-blob) flödar ut. Standard: ska vara OMÖJLIGT
 * för innehåll att spränga layouten oavsett status/textlängd.
 *
 *   • min-width: 0 på flex-barn — bryter default 'auto' som
 *     hindrar shrink under content-min-size och därmed expanderar
 *     föräldern utanför skärmen.
 *   • overflow-wrap: anywhere — låter textbrytning ske var som helst
 *     (inkl. mitt i ord), aggressivare än normal word-break.
 *   • max-width: 100% — sista skyddsnätet.
 *
 * Etapp 1: alla nya komponenter som tar emot text MÅSTE klara
 * det här testet — kasta in en 200-tecken-utan-mellanslag-sträng
 * och verifiera att raden inte sprängs.
 * ============================================================ */

.list-row,
.attest-row { min-width: 0; max-width: 100%; }

.list-row > *,
.attest-row > * { min-width: 0; }

.list-row__main, .list-row__title, .list-row__sub,
.attest-main, .attest-titel, .attest-sub,
.row-status-text,
.helper-text {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.data-table { table-layout: auto; max-width: 100%; }

/* DESKTOP-STANDARD (Etapp 0B runda 4):
 * Tabellceller bryter ALDRIG teckenvis som default — datum/belopp/
 * status/konto är formaterade och korta, ska visas som hela tokens.
 * Long-text-celler (titel/beskrivning) OPT-IN via .cell-title eller
 * .cell-text för att TILLÅTA brytning av extrema strängar (filnamn
 * utan mellanslag, base64, etc).
 *
 * Tidigare runda 2-regeln "overflow-wrap: anywhere på alla td" satte
 * datum-/beloppskolumner i teckenvis brytning ("20" / "26" / ...) på
 * klämda kolumnbredder — bytte alltså en bugg (mobil-spräng) mot en
 * annan (desktop-tecken-bryt). Den här standarden scopar regeln till
 * RÄTT celler. */
.data-table tbody td {
  min-width: 0;
  white-space: nowrap;
}

/* DESKTOP-DENSITET — NY BAS (#425):
 * Listor (verifikat, kvitton, lev-fakturor, kundfakturor m.fl.) är
 * ARBETSVERKTYG, inte läsupplevelser. Default-rytmen är därför KOMPAKT
 * på desktop — tätare radavstånd + mindre text → fler rader synliga,
 * mindre scroll, snabbare överblick.
 *
 * Override:ar de generella `thead th`/`tbody td`-baseline-värdena
 * (var(--space-3) var(--space-5) / var(--space-4) var(--space-5)) för
 * ALLA `.data-table`-konsumenter samtidigt. Per-sida-opt-in behövs
 * inte → migrerade listor ärver detta direkt utan markup-ändringar.
 *
 * Mobilstacken (.data-table--stack på <= 760px) håller fortfarande sin
 * generösare card-padding (touch-friendly + readability). --tight-
 * varianten kvarstår som mobil-extra-tät opt-in.
 *
 * Status-taggar/gem-ikon/row-färgskanten klipps inte: de har egen
 * inre padding/box-shadow och påverkas inte av cell-paddingen. Touch-
 * targets på checkboxar/btn-icon (>= 44px) styrs mobil-only i
 * .receipts-checkbox-col-blocket och påverkas inte heller. */
.data-table thead th {
  padding: var(--space-2) var(--space-3);
}
.data-table tbody td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
}

/* Text-tunga celler — opt-in till brytning. Används på Leverantör/
   Beskrivning/Anteckning/etc. */
.data-table tbody td.cell-title,
.data-table tbody td.cell-text {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* Kryssrute-kolumn: fast smal bredd så rader MED och UTAN kryssruta
   får samma kolumnlayout. Andra kolumner stjäls inte utrymme av
   kryssrute-cellen. */
.data-table thead th.receipts-checkbox-col,
.data-table tbody td.receipts-checkbox-col,
.data-table thead th.list-row__check,
.data-table tbody td.list-row__check {
  width: var(--tap-target);
  min-width: var(--tap-target);
  padding: 0;
  text-align: center;
}

/* MOBIL-STACK: kortets celler är vertikalt staplade. Anywhere-brytning
   gäller BARA text-tunga celler (.cell-title / .cell-text) — så att
   långa filnamn/beskrivningar bryter rätt UTAN att identifierare
   (ver.nr/LF-nr), datum och belopp bryter teckenvis. Tidigare regel
   (anywhere på ALLA td) gav vertikalt staplade siffror i smala kort:
   bytte mobil-spräng-buggen mot en mobil-bryt-bugg. Den här är fixen.
   F12 (200-tecken-utan-mellanslag-test) körs mot .cell-title. */
@media (max-width: 760px) {
  .data-table--stack tbody tr { min-width: 0; max-width: 100%; }
  .data-table--stack tbody td.cell-title,
  .data-table--stack tbody td.cell-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Underrader i cell-title som bär identifierare (ver.nr / LF-nr) får
 * ALDRIG brytas teckenvis — formaterat token-värde. Tag-elementen
 * bredvid (status-tag etc) har egen nowrap så hela enheten håller ihop
 * eller wrappar som ett block. */
.row-sub.cell-nr-mobil {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}


/* ─── 19. Status-cell i tabell — egen smal kolumn på desktop ──
 *
 * STANDARD från Etapp 0B runda 2: status visas som EGEN smal
 * kolumn (litet, muted) i tabellen — namnet håller sig till en
 * rad. Mobil-stack:en behåller datum-och-status-på-rad-2-mönstret
 * via data-label.
 */
.cell-status {
  width: 120px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .cell-status { width: auto; white-space: normal; }
}


/* ─── Filter-dropdown (std #25 reviderad) ───────────────────
 *
 * Panel: position fixed, position sätts via JS (anchored mot
 * triggern). Display defaultar till INGENTING — bara :not([hidden])
 * får display: flex. Tidigare regel `.filter-dropdown__panel
 * { display: flex }` övertrumfade UA-stylet `[hidden]
 * { display: none }` så panelen syntes ALLTID.
 *
 * Trigger: kan stå i th (region, desktop) eller filter-baren
 * (shell, mobil). Båda får samma `data-filter-dropdown-trigger=
 * "<panelId>"` så sidans delegerade handler hanterar dem identiskt.
 */
.filter-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: var(--tap-target);
}
.filter-dropdown__trigger:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.filter-dropdown__icon {
  width: 14px;
  height: 14px;
  opacity: 0.55;
  flex-shrink: 0;
}
.filter-dropdown__trigger.is-active .filter-dropdown__icon,
.filter-dropdown__trigger[aria-expanded="true"] .filter-dropdown__icon {
  opacity: 1;
  color: var(--info);
}
.filter-dropdown__count {
  font-size: var(--fs-sm);
  color: var(--info);
  font-weight: 600;
}

/* PANELEN — fixed position, position via JS. Default = utan display-
 * regel; `:not([hidden])` aktiverar flex. [hidden] behåller därmed
 * sitt UA-standardbeteende (display: none). */
.filter-dropdown__panel {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  max-width: min(320px, 90vw);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.filter-dropdown__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.filter-dropdown__panel label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 0;
  /* Tap-target gäller BARA mobil (--mobile-trigger öppnar samma panel
   * — där behöver raderna tumvänlig höjd). Desktop använder pekare och
   * får vara tätare; en 7-statusars meny ska kännas som en meny, inte
   * en formulärsida. */
}
.filter-dropdown__panel label input { flex-shrink: 0; }
.filter-dropdown__panel .filter-dropdown__rensa {
  margin-top: 6px;
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 4px var(--space-2);
  color: var(--info);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.filter-dropdown__panel .filter-dropdown__rensa:hover { text-decoration: underline; }

/* Mobil-tap-target: tumvänlig höjd bara här. */
@media (max-width: 760px) {
  .filter-dropdown__panel label {
    min-height: var(--tap-target);
    padding: 8px 0;
  }
  .filter-dropdown__panel .filter-dropdown__rensa {
    min-height: var(--tap-target);
    padding: 8px var(--space-2);
  }
}

/* Mobil-trigger: kompakt knapp i filter-baren (eftersom <th> är dold
 * av .data-table--stack). Syns bara ≤760px. */
.filter-dropdown__trigger--mobile {
  display: none;
  padding: 6px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
  min-height: 36px;
}
@media (max-width: 760px) {
  .filter-dropdown__trigger--mobile { display: inline-flex; }
}


/* ─── 20. Datum-filter (från/till) bredvid view-chips ────────── */

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.filter-bar__group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.filter-bar__label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
}
.filter-bar input[type="text"].filter-date {
  font-size: var(--fs-body);
  padding: 6px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--text-body);
  min-height: 36px;
  width: 130px;
}
.filter-bar input[type="text"].filter-date:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: var(--focus-ring);
}
@media (max-width: 480px) {
  .filter-bar input[type="text"].filter-date { width: 100%; }
  .filter-bar__group { width: 100%; flex-wrap: wrap; }
}

/* Generell filter-select (per-serie / per-kategori-dropdown) i filter-baren.
 * Samma höjd och kantformer som filter-date — visuell linje genom raden. */
.filter-bar select.filter-select {
  font-size: var(--fs-body);
  padding: 6px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--text-body);
  min-height: 36px;
}
.filter-bar select.filter-select:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: var(--focus-ring);
}
@media (max-width: 480px) {
  .filter-bar select.filter-select { width: 100%; }
}

/* Notice-banner med klickbar pil (t.ex. "Utkast att granska" → att-granska-vy).
 * Återanvänder .alert + .alert-info-tonen men beter sig som en knapp. */
.att-granska-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-4);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.att-granska-banner__chevron {
  font-size: var(--fs-lead);
  line-height: 1;
}

/* Diskret summarad i filter-baren (std #23 — listsidor får en summa när den
 * tillför något utöver chips-räknarna). Aldrig stat-kort-markup. */
.filter-bar__summary {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-left: auto;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .filter-bar__summary {
    width: 100%;
    margin-left: 0;
  }
}


/* ─── 21. Knapp-hierarki STANDARD för detaljvyer ──────────────
 *
 * STANDARD: Auto-bredd inline på desktop, full bredd i mobil-
 * stack (<=760px). Höjd kvar 44px (--tap-target).
 *
 * Hierarki per detalj-vy:
 *   • Primär (1 max)        — .btn-primary, höger i actions-rad
 *   • Sekundär outline     — .btn-secondary (Spara, neutral handling)
 *   • Flödesåtgärd (varning) — .btn-warning (Avvisa) — outline amber
 *   • Destruktiv (1 max)    — .btn-ghost-danger separerad LÄNGST VÄNSTER
 *                             — röd text utan fyllnad, in-app confirm.
 *
 * REGEL: max EN röd åtgärd per vy. Aldrig två destruktivt-lika
 * intill varandra (Avvisa + Radera bredvid varandra → Avvisa
 * blir warning, Radera blir ghost-danger).
 */

/* Auto-bredd på desktop — knappar tar bara plats för innehållet */
.btn { width: auto; }

.btn-stack {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.btn-stack--space-between { justify-content: space-between; }
.btn-stack__sep { flex: 1; }

@media (max-width: 760px) {
  /* I mobil-stack: knappar full bredd, stackade vertikalt.
     Radera-knappen (ghost-danger) hamnar sist via visuell
     separation (margin-top eller flex-order). */
  .btn-stack {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .btn-stack__sep { display: none; }
  .btn-stack .btn { width: 100%; }
  /* Säkerställ att destruktiv ligger sist på mobil oavsett DOM-ordning */
  .btn-stack .btn-ghost-danger { order: 99; margin-top: var(--space-3); }
}

/* Outline-warning — amber text + kant, för flödesåtgärder som
   "Avvisa". Inte röd eftersom det är ett FLÖDE, inte destruktivt. */
.btn-warning {
  background: transparent;
  color: var(--warning-deep);
  border-color: var(--warning);
}
.btn-warning:hover {
  background: var(--warning-soft);
  border-color: var(--warning-deep);
}
.btn-warning:focus-visible {
  box-shadow: 0 0 0 3px rgba(245,158,11,.30);
}

/* Ghost-danger — röd text utan fyllnad, för destruktiv åtgärd
   som "Radera". Endast EN per vy. */
.btn-ghost-danger {
  background: transparent;
  color: var(--danger-deep);
  border-color: transparent;
}
.btn-ghost-danger:hover {
  background: var(--danger-soft);
  color: var(--danger-deep);
}
.btn-ghost-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(220,38,38,.30);
}


/* ─── 22. Form-spacing STANDARD (Etapp 0B runda 3) ───────────
 *
 * Strammare luft mellan formulär-rader och fält. Använt av
 * receipts-detalj.js + framtida etapp 1-2 sidor. Riktmärke: tät
 * men läsbar, label nära sitt fält, sektioner skiljs med måttlig
 * luft — INTE dubbla tomrader.
 *
 * Vänta med .form-group / .form-row komplett mönster till etapp 1
 * (de behöver mer designarbete). Detta är en första standard som
 * stramar åt visning av befintliga utskrifter.
 */

/* Lägre vertikal rytm i formulär — ärvs av <form>-noder med
   klassen .form-stack samt vissa befintliga detalj-formulär. */
.form-stack,
.receipt-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.form-stack > label,
.receipt-edit-form > label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
}
.form-stack > label > input,
.form-stack > label > select,
.form-stack > label > textarea,
.receipt-edit-form > label > input,
.receipt-edit-form > label > select,
.receipt-edit-form > label > textarea {
  font-size: var(--fs-body);
  color: var(--text-body);
}
/* Sektions-separator: lägg .form-section runt ett block av
   relaterade fält så får det måttlig luft ovanför, ALDRIG dubbla
   tomrader. */
.form-section { margin-top: var(--space-5); }
.form-section + .form-section { margin-top: var(--space-6); }


/* ─── 23. Bulk-checkbox touch-target ─────────────────────────
 *
 * Mobil-spec: kryssrutor minst 44px touch-yta. Själva input:t
 * kan visuellt vara 20-24px — det är PADDING runt som lyfter
 * träffytan utan att flytta layouten.
 */
.receipts-checkbox-col input[type="checkbox"],
.list-row__check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
}
@media (max-width: 760px) {
  .receipts-checkbox-col,
  .list-row__check {
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ─── 24. Sortering — desktop th-rubriker, mobil select ─────
 *
 * STANDARD i tabell-mönstret. Etapp 1-listor (lev-fakturor, kund-
 * fakturor) ärver detta direkt.
 *
 * Desktop: klickbara th med data-sort="<field>". Aktiv kolumn får
 * aria-sort="ascending|descending" + synlig pil-indikator.
 *
 * Mobil: <select class="sort-mobile"> i filter-baren. Delad state
 * — samma sort-param i URL driver båda.
 *
 * Default: datum fallande (nyast först). Endast EN aktiv kolumn.
 */

.data-table thead th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--space-6);
  transition: color .12s ease;
}
.data-table thead th[data-sort]:hover { color: var(--text-primary); }
.data-table thead th[data-sort]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

.sort-indicator {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity .12s ease;
  color: var(--text-secondary);
}
.data-table thead th[data-sort]:hover .sort-indicator { opacity: .45; }
.data-table thead th[aria-sort] .sort-indicator { opacity: 1; color: var(--info-deep); }

/* Mobil-sort-select i filter-baren. Döljs på desktop, syns på <=760px
   eftersom tabell-rubrikerna då är gömda av .data-table--stack. */
.sort-mobile { display: none; }
@media (max-width: 760px) {
  .sort-mobile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
  }
  .sort-mobile select {
    font-size: var(--fs-body);
    padding: 6px var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-card);
    color: var(--text-body);
    min-height: 36px;
  }
}


/* ─── 25. Paginering — klient-side pipeline ─────────────────
 *
 * STANDARD i tabell-mönstret. Pipeline: filtrera → sortera →
 * paginera. Sidstorlek 20/50/100 (default 20). Vy-chip-räknare
 * speglar TOTALEN efter filter, inte synlig sida.
 *
 * Mobil ≤760px: numrerade sidor + sidstorleks-väljare döljs.
 * Kvar: prev/next + "X av Y". Touch-targets ≥44px på knapparna.
 */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
}
.pagination__info {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.pagination__page-size {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.pagination__page-size select {
  font-size: var(--fs-body);
  padding: 4px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--text-body);
  min-height: 36px;
}
.pagination__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  background: transparent;
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.pagination__page:hover { background: var(--hover-tint); }
.pagination__page--active {
  background: var(--info);
  border-color: var(--info);
  color: var(--paper);
  font-weight: 600;
}
.pagination__page--active:hover { background: var(--info-deep); }
.pagination__page--ellipsis {
  cursor: default;
  color: var(--text-secondary);
}
.pagination__page--ellipsis:hover { background: transparent; }
.pagination__nav .btn:disabled,
.pagination__page:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 760px) {
  .pagination { gap: var(--space-3); }
  .pagination__page-size { display: none; }
  .pagination__pages { display: none; }
  .pagination__info {
    flex: 1;
    text-align: center;
    font-size: var(--fs-sm);
  }
}


/* ─── 26. Bulk-bar — info om val rensat vid sidbyte ────────── */

.bulk-action-bar__notice {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Desktop vs mobil-text växling i .pagination__info */
.pagination__info-mobile { display: none; }
@media (max-width: 760px) {
  .pagination__info-desktop { display: none; }
  .pagination__info-mobile  { display: inline; }
}


/* ─── 27. Bulk är desktop-mönster — mobil använder detaljvyn ──
 *
 * STANDARD (Etapp 0B runda 5):
 *   • Bulk-åtgärder (mass-markera + mass-bokföra) är ett DESKTOP-
 *     mönster. Touch-flöden på mobil är inte rustade för flerklicks-
 *     val — bättre att konsulten öppnar kvitton ett i taget i
 *     detaljvyn där bokföring redan finns (PR #399 standard #13).
 *   • Kryssrute-kolumnen DÖLJS helt på mobil i .data-table--stack.
 *     Kortet blir kompakt och fri från ett extra meta-fält.
 *   • Bulk-action-bar DÖLJS helt på mobil — ingen "Bokför valda"-knapp.
 *
 * Etapp 1 ärver: lev-fakturor/kundfakturor som inför bulk får samma
 * desktop-only-behandling.
 */
@media (max-width: 760px) {
  .data-table--stack thead th.receipts-checkbox-col,
  .data-table--stack tbody td.receipts-checkbox-col,
  .data-table--stack thead th.list-row__check,
  .data-table--stack tbody td.list-row__check { display: none; }

  /* Bulk-bar gömd helt — varken vid markering eller notice */
  .bulk-action-bar { display: none; }
  .bulk-action-bar__notice { display: none; }
}


/* ─── 28. Sök-input i filter-bar ─────────────────────────────── */

.filter-bar input[type="search"].filter-search {
  font-size: var(--fs-body);
  padding: 6px var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--text-body);
  min-height: 36px;
  width: auto;
  min-width: 200px;
}
.filter-bar input[type="search"].filter-search:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: var(--focus-ring);
}
@media (max-width: 480px) {
  .filter-bar input[type="search"].filter-search { width: 100%; }
}


/* ═══ ETAPP 2 — DETALJVY-KOMPONENTER (pilot: kundfaktura-detalj) ═══ */

/* ─── 26. Modal-storlekar (std) ───────────────────────────────
 *
 * Basen .modal (style.css) har max-width: 560px. Varianterna sätter
 * explicit storlek per användning:
 *   --sm  480px — bekräftelser med ett fält (skäl-textarea, datum)
 *   --md  680px — formulär med rader (ny faktura)
 *   --lg  840px — breda tabeller / förhandsvisning
 *
 * Mobil ≤760px: alla modal-storlekar går till nära-fullskärm med
 * 100dvh-beteendet från inkorgens preview-modal (dvh hanterar
 * mobil-browserns adressfält korrekt; vh klipper). */
.modal--sm { max-width: 480px; }
.modal--md { max-width: 680px; }
.modal--lg { max-width: 840px; }
@media (max-width: 760px) {
  .modal--sm, .modal--md, .modal--lg {
    max-width: 100%;
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
  .modal-overlay:has(.modal--sm),
  .modal-overlay:has(.modal--md),
  .modal-overlay:has(.modal--lg) {
    padding: 0;
    align-items: stretch;
  }
}

/* ─── 27. Form-standard: .form-section / .form-group / .form-row ──
 *
 * Kompletterar #22-utkastet (form-stack). Tät men läsbar:
 *   .form-section — grupp av relaterade fält med sektionsluft
 *   .form-group   — label + kontroll + ev. hjälptext/fel
 *   .form-row     — flera form-groups sida vid sida, kollapsar på mobil
 *
 * Alla inputs i .form-group är 100 % breda inom sin grupp (mobil
 * B-klass: inga fasta bredder som spränger små skärmar). */
.form-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.form-row > .form-group {
  flex: 1 1 180px;
  min-width: 0;
  margin-bottom: 0;
}
.form-row + .form-row,
.form-row + .form-group,
.form-group + .form-row { margin-top: var(--space-3); }
.form-group > input,
.form-group > select,
.form-group > textarea {
  width: 100%;
  max-width: 100%;
}
.form-group .form-error {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--danger-deep);
}
.form-group .helper-text { margin-top: var(--space-1); }
/* type="search" ingår INTE i style.css:s globala fältregel (att lägga till
 * den globalt skulle övertrumfa .reg-search m.fl. — specificitet 0-1-1 mot
 * 0-1-0). Scopa i stället till .form-group så sökfält i formulärstandarden
 * får samma utseende som övriga fält (lager-listans sökruta, #720). */
/* Lager-formulärens fältrader (#720-styling): .form-group i inline-layouter
 * (flex med align-items:end / täta grids) — global margin-bottom:16px skulle
 * feljustera fält mot knappar i end-justerade rader (jfr .bk-modal-grid). */
.lager-faltrad .form-group { margin-bottom: 0; }
.form-group > input[type="search"] {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

/* ─── 28. Meta-grid — etikett/värde-rutnät för detaljvyer ─────
 *
 * Generaliserad .kfd-meta-grid: 3 kolumner desktop, 2 på surfplatta,
 * 1 på mobil. Etikett som overline, värde i brödtext.
 *
 * Etapp 2-skala: detaljvyer är ARBETSYTOR, inte landningssidor —
 * tätare vertikal rytm än stat-grid. */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
}
.meta-grid__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.meta-grid__value {
  font-size: var(--fs-body);
  color: var(--text-primary);
  overflow-wrap: anywhere;
  min-width: 0;
}
.meta-grid__value .meta-grid__sub {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
@media (max-width: 760px) {
  .meta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}
@media (max-width: 480px) {
  .meta-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ─── 29. Summary-stack — högerställda summeringsrader ────────
 *
 * Generaliserad .kfd-summor: label/value-par i högerkolumn med
 * totalrad markerad via border-top. Tabular-nums för belopp.
 * Tätare än landningssidans stat-rader. */
.summary-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  padding: var(--space-3) 0;
}

/* VMB-märkning på avyttringsfaktura (lagkrav 9a kap ML) — visas tydligt
   under summeringen. Faktatext, ej hjälptext. */
.kfd-vmb-markning {
  margin-top:    var(--space-3);
  padding:       var(--space-2) var(--space-3);
  border-left:   3px solid var(--warning-deep);
  background:    var(--warning-soft);
  color:         var(--warning-deep);
  border-radius: var(--radius);
  font-size:     var(--fs-sm);
  font-weight:   500;
}
.summary-stack__row {
  display: flex;
  gap: var(--space-6);
  font-size: var(--fs-body);
}
.summary-stack__label {
  color: var(--text-secondary);
  min-width: 110px;
  text-align: right;
}
.summary-stack__value {
  min-width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.summary-stack__row--total {
  font-weight: 700;
  font-size: var(--fs-md);
  border-top: 2px solid var(--line);
  padding-top: var(--space-2);
  margin-top: 2px;
}

/* ─── 30. Detaljvy-header: nyckelvärde + tillbaka-länk ────────
 *
 * .page-header__keyvalue — detaljvyns viktigaste siffra (totalbelopp)
 * synlig direkt i headern utan scroll. Fraunces, men SKALAD NER
 * mot stat-value: detaljvyer är arbetsytor, totalen ska vara synlig
 * men inte dominerande.
 *
 * .back-link — diskret tillbaka-navigation ovanför page-header.
 * EN navigationsväg per vy (ingen Stäng-dubblett). */
.page-header__keyvalue {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}
.page-header__keyvalue-label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
  margin-bottom: var(--space-3);
}
.back-link:hover { color: var(--text-primary); }

/* ─── 31. Detaljvyns åtgärdsrad (knapp-hierarki #21) ──────────
 *
 * .detail-actions — destruktiv åtgärd (ghost-danger) längst till
 * vänster, separerad; flödesåtgärder + primär till höger.
 * Mobil: ärver .btn-stack-mönstret (full bredd, destruktiv sist). */
.detail-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.detail-actions__destructive { margin-right: auto; }
@media (max-width: 760px) {
  .detail-actions { flex-direction: column; align-items: stretch; }
  .detail-actions .btn { width: 100%; }
  .detail-actions__destructive { margin-right: 0; order: 99; margin-top: var(--space-3); }
}

/* ─── 32. Modal-formulärets hjälpklasser (ny/redigera faktura) ──
 *
 * .form-group--anchor — position-context för autocomplete-dropdown
 * (kund-sök).
 *
 * .kf-rader-tabell är ny-/redigera-faktura-modalens rad-tabell.
 * Den ÄRVER .data-table--stack-beteendet på mobil (samma standard
 * som detaljvyns radtabell, std #33).
 *
 * KOLUMNBREDDER (desktop): beskrivning flytande; antal/à-pris
 * snäva men läsbara; moms-kolumnen RYMMER "25 %" inom selecten utan
 * att klippa; belopp högerställd nowrap; ta-bort-kolumnen är fast
 * tap-target-bredd. */
.form-group--anchor { position: relative; }

.kf-rader-tabell { table-layout: fixed; width: 100%; }
.kf-rader-tabell th:nth-child(2), .kf-rader-tabell td:nth-child(2) { width: 64px; }   /* Antal */
.kf-rader-tabell th:nth-child(3), .kf-rader-tabell td:nth-child(3) { width: 110px; position: relative; }   /* Enhet (fritext + autocomplete) */
.kf-rader-tabell th:nth-child(4), .kf-rader-tabell td:nth-child(4) { width: 96px; }   /* À-pris */
.kf-rader-tabell th:nth-child(5), .kf-rader-tabell td:nth-child(5) { width: 92px; }   /* Moms % */
.kf-rader-tabell th:nth-child(6), .kf-rader-tabell td:nth-child(6) { width: 110px; white-space: nowrap; }  /* Belopp */
.kf-rader-tabell .kf-rader__rm { width: var(--tap-target); text-align: center; }

.kf-rader-tabell td { padding: 6px var(--space-2); }
.kf-rader-tabell td input,
.kf-rader-tabell td select {
  width: 100%;
  max-width: 100%;
  padding: 6px var(--space-2);
  font-size: var(--fs-sm);
}
/* Belopp-cellen visar bara text — inget input-padding. */
.kf-rader-tabell td .r-belopp { font-size: var(--fs-sm); }
/* Ta-bort-knappen ärver btn-icon (≥44px tap-target). */
.kf-rader-tabell .btn-rm { width: var(--tap-target); min-height: var(--tap-target); }

/* ── Tre kollapsbara sektioner i kundfaktura-formuläret (0194) —
 * återanvänder .lf-extra-toggle/.lf-extra-panel-mönstret men utanför
 * lev-fakturans kort. Neutraliserar togglens negativa sido-marginal
 * (den förutsätter ett kort med var(--space-3)-padding) så den inte
 * spränger 375px, och ger panelen eget luft-utrymme. ── */
.kf-sektioner { margin-top: var(--space-3); }
.kf-sektioner .lf-extra-toggle { margin-left: 0; margin-right: 0; }
.kf-sektioner .lf-extra-panel { padding: var(--space-3) 0 var(--space-1); }
.kf-sektioner .lf-extra-panel .form-row:not(:first-child) { margin-top: var(--space-2); }

/* ── ROT/RUT-radväljaren (PR 1) — knapp + utfällbar panel i
 * beskrivningscellen. Panelen är en kompakt grid som kollapsar till
 * en kolumn på smala skärmar (mobil 375px).
 *
 * 375px-FIXEN (justerings-PR): stack-standarden gör cellerna till
 * FLEX-RADER på mobil (.data-table--stack td { display:flex; ... }) →
 * ROT/RUT-blocket lades BREDVID beskrivnings-inputen och panelens
 * minmax(170px)-kolumner kunde inte krympa → tabellen sprängde 375px.
 * Fix: cellen får wrap:a, blocket tar FULL BREDD på egen rad och
 * panelen är enkolumnig på mobil. min(170px, 100%) skyddar även smala
 * desktop-celler. ── */
.r-rotrut { margin-top: var(--space-1); }
.r-rotrut-btn { min-height: var(--tap-target); }
.r-rotrut-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 100%;
  min-width: 0;
}
.r-rotrut-panel .form-group { margin-bottom: 0; }
.r-rotrut-panel label { font-size: var(--fs-sm); }

@media (max-width: 760px) {
  .kf-rader-tabell td.cell-title { flex-wrap: wrap; }
  .kf-rader-tabell .r-rotrut {
    flex-basis: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .r-rotrut-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* table-layout: fixed ärver kolumnbredderna även när stack:en är
   * aktiv — bryt fastlagda bredder så cell-stack:en kan rendera
   * cellerna fullbredd. */
  .kf-rader-tabell { table-layout: auto; }
  .kf-rader-tabell th:nth-child(n), .kf-rader-tabell td:nth-child(n) { width: auto; }
  /* Touch-target + iOS-zoom-skydd på inputs/selects (#427). Padding/fs
   * från desktop-regeln ovan räcker inte för 44px min-height på alla
   * enheter, och fs < 16px triggar iOS-Safari-zoom-in på fokus. */
  .kf-rader-tabell td input,
  .kf-rader-tabell td select {
    min-height: var(--tap-target);
    font-size: 16px;
  }
}

/* Legacy: ver-rader (bokföring) — inline-bredder via klass. */
.ver-rader th.ver-rader__antal  { width: 70px; }
.ver-rader th.ver-rader__apris  { width: 100px; }
.ver-rader th.ver-rader__moms   { width: 80px; }
.ver-rader th.ver-rader__belopp { width: 90px; }
.ver-rader td input,
.ver-rader td select {
  width: 100%;
  max-width: 100%;
  padding: 6px var(--space-2);
}

/* ─── 33. Detaljvy-page — overflow-skydd + TÄT arbetsyta-skala (#429) ──
 *
 * .detail-page wrappar alla etapp 2-detaljvyer (kundfaktura, verifikat,
 * kvitto). Tre syften:
 *
 *   1. INGEN HORISONTELL SCROLL på sidan (samma anda som #398:s
 *      mobil-härdning). Innehåll som inte ryms måste antingen stack:as
 *      (data-table--stack) eller få intern scroll inom sitt kort.
 *
 *   2. TÄT arbetsyta-skala (#429): detaljvyer är ARBETSVERKTYG, inte
 *      läsupplevelser. Stramare än landningssidan PÅ ALLA NIVÅER:
 *      page-header → sektion → kort → form-grupp → label.
 *      Sektionsgränser markeras med EN måttlig lucka, inte staplade
 *      marginaler. Märkbart mer innehåll per skärm.
 *
 *   3. Touch-target och läsbarhet OFÖRÄNDRADE: 44px-höjd på inputs
 *      (#427), löptext-line-height orörd. Tighter = mindre LUFT, inte
 *      mindre KLICKYTOR eller text.
 *
 * Skala (rationella språng — varje nivå ungefär halvbredd från ovan):
 *
 *   .page-header    → margin-bottom: var(--space-3)
 *   .section-header → margin-bottom: var(--space-3)
 *   .card-body      → padding:        var(--space-3) var(--space-4)
 *                     (mobil ≤480:    var(--space-2) var(--space-3))
 *   .form-section   → margin-top:     var(--space-3)
 *   .form-section + .form-section → margin-top: var(--space-4)
 *   .form-group     → margin-bottom: var(--space-2)
 *   .form-group label → margin-bottom: 3px (var: 5px globalt)
 *   .form-row + .form-row → margin-top: var(--space-2)
 *   .meta-grid      → gap: var(--space-2) var(--space-4); mb: var(--space-3)
 *   .summary-stack  → padding: var(--space-2) 0
 */
.detail-page {
  max-width: 100%;
  overflow-x: clip;
}
.detail-page .page-header { margin-bottom: var(--space-3); }
.detail-page .card-body { padding: var(--space-3) var(--space-4); }
@media (max-width: 480px) {
  .detail-page .card-body { padding: var(--space-2) var(--space-3); }
}

/* Form-rytm: tätare per-grupp + tätare sektionsavstånd. Overrider de
 * globala .form-group/label-marginalerna (style.css:847/849) BARA inom
 * .detail-page. Landningssidor/inställningar behåller sin generösa
 * läs-skala. */
.detail-page .form-group { margin-bottom: var(--space-1); }
.detail-page .form-group > label,
.detail-page .form-group > span:first-child,
.detail-page label > span:first-child { margin-bottom: 2px; }
.detail-page .form-row + .form-row,
.detail-page .form-row + .form-group,
.detail-page .form-group + .form-row { margin-top: 6px; }
.detail-page .form-section { margin-top: var(--space-3); }
.detail-page .form-section + .form-section { margin-top: var(--space-4); }

/* TÄT FORMULÄRRYTM #430 — desktop input/select/btn-höjd ned till ~32px.
 * Mellanrummen mellan grupper ska vara TYDLIGT MINDRE än fälthöjden
 * (~⅓). Tidigare gav default 9px/12px-padding ~38px → mellanrum (8px)
 * nästan lika stort som fältet → "luftiga" formulär som krockade med
 * arbetsyta-andan.
 *
 * Mobil OFÖRÄNDRAD (#427-kravet): 44px touch + font-size 16px (annars
 * zoomar iOS-Safari in på input-fokus). Tabellrader (.kf-rader-tabell,
 * .data-table--rader) ärver desktop-tightningen → formulär och tabeller
 * får samma rytm.
 *
 * Scopas till BÅDE .detail-page OCH .modal så formulärrutor i
 * modaler (motboka, "Ändra", kundfakturarads-modal m.fl.) följer samma
 * skala. */
@media (min-width: 761px) {
  .detail-page input[type="text"],
  .detail-page input[type="number"],
  .detail-page input[type="date"],
  .detail-page input[type="email"],
  .detail-page input[type="tel"],
  .detail-page input[type="password"],
  .detail-page select,
  .detail-page textarea,
  .modal input[type="text"],
  .modal input[type="number"],
  .modal input[type="date"],
  .modal input[type="email"],
  .modal input[type="tel"],
  .modal input[type="password"],
  .modal select,
  .modal textarea {
    padding: 5px 10px;
    font-size: var(--fs-sm);
    min-height: 32px;
    line-height: 1.3;
  }
  .detail-page .btn,
  .modal .btn {
    padding: 6px 14px;
    font-size: var(--fs-sm);
  }
  .detail-page .btn-sm,
  .modal .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
  }
}

/* Mobil: 44px touch-target + 16px font för ALLA inputs/selects i
 * detalj-/modal-kontext (utvidgar #427-skyddet bortom data-table--rader). */
@media (max-width: 760px) {
  .detail-page input[type="text"],
  .detail-page input[type="number"],
  .detail-page input[type="date"],
  .detail-page input[type="email"],
  .detail-page input[type="tel"],
  .detail-page input[type="password"],
  .detail-page select,
  .modal input[type="text"],
  .modal input[type="number"],
  .modal input[type="date"],
  .modal input[type="email"],
  .modal input[type="tel"],
  .modal input[type="password"],
  .modal select {
    min-height: var(--tap-target);
    font-size: 16px;
  }
  .detail-page .btn,
  .modal .btn { min-height: var(--tap-target); }
}

/* Meta-grid + summary-stack i detalj-kontext: tätare gap. */
.detail-page .meta-grid {
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
@media (max-width: 760px) {
  .detail-page .meta-grid { gap: var(--space-2); }
}
.detail-page .summary-stack { padding: var(--space-2) 0; }

/* Sektionsrubriker hör till sitt innehåll — INTE flyta mellan. */
.detail-page .section-header { margin-bottom: var(--space-3); }

/* Säkerhetsnät: tabeller inom detaljvyer som SAKNAR stack-behandling
 * faller tillbaka till intern horisontell scroll i sitt eget kort
 * (.table-wrapper). Sidans body scrollar INTE i sidled. */
.detail-page .table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* .data-table--stack--lineitem — belopps-rader på mobil
 *
 * Std-tillägg till #33. För rader som är "PRIS-rader" (fakturarader,
 * lev-faktura-kontering, kvittorader): mobilkortet komprimeras till
 *   Rad 1: BESKRIVNING (fet, bryts) + BELOPP höger (fet, nowrap)
 *   Rad 2: muted metarad "antal enhet × à-pris · moms %"
 * Tätare densitet än bas-stack (data-table--stack--tight-anda).
 *
 * Markup-konvention:
 *   <td class="cell-title cell-lineitem__title" data-label="Beskrivning">
 *     Beskrivning
 *     <span class="cell-lineitem__meta">2 h × 750 kr · 25 %</span>
 *   </td>
 *   ...
 *   <td class="cell-amount cell-lineitem__amount" data-label="Belopp">
 *     1 500 kr
 *   </td>
 *
 * Antal/Enhet/À-pris/Moms-cellerna döljs på mobil eftersom de finns i
 * meta-raden — desktop visar dem som vanligt i sin egen kolumn. */
.cell-lineitem__meta {
  display: none;
}
.cell-amount { white-space: nowrap; }

@media (max-width: 760px) {
  .data-table--stack--lineitem tbody tr {
    padding: var(--space-2) var(--space-3);
    gap: 0;
    margin-bottom: var(--space-2);
    /* Lyfter belopp-cellen upp på rad 1 via grid. */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  /* Titel-cellen tar vänster kolumn och spänner rad 1; meta-spanen
   * blir rad 2 inom samma cell. */
  .data-table--stack--lineitem tbody td.cell-lineitem__title {
    grid-column: 1;
    grid-row: 1;
    font-weight: 600;
    font-size: var(--fs-body);
    padding: 0;
    display: block;
    min-width: 0;
  }
  .data-table--stack--lineitem tbody td.cell-lineitem__title::before {
    display: none;
  }
  .data-table--stack--lineitem tbody td.cell-lineitem__amount {
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
    font-size: var(--fs-body);
    padding: 0;
    text-align: right;
    white-space: nowrap;
    display: block;
  }
  .data-table--stack--lineitem tbody td.cell-lineitem__amount::before {
    display: none;
  }
  /* Meta-raden under titeln — muted, kompakt. */
  .data-table--stack--lineitem .cell-lineitem__meta {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-secondary);
  }
  /* Övriga cellerna (Antal, Enhet, À-pris, Moms) finns redan i meta-
   * raden ovan — dölj dem på mobil för att undvika dubbeltext. */
  .data-table--stack--lineitem tbody td:not(.cell-lineitem__title):not(.cell-lineitem__amount) {
    display: none;
  }
}

/* Modal-varianten med inputs ska INTE komprimera till lineitem på mobil —
 * användaren behöver redigera varje fält. Stacken används som vanligt
 * (rad 1 beskrivning, rad 2+ antal/enhet/à-pris/moms/belopp). */
@media (max-width: 760px) {
  .kf-rader-tabell.data-table--stack--lineitem tbody tr {
    display: block;
    grid-template-columns: none;
  }
  .kf-rader-tabell tbody td:not(.cell-lineitem__title):not(.cell-lineitem__amount) {
    display: flex;
  }
  .kf-rader-tabell tbody td.cell-lineitem__title,
  .kf-rader-tabell tbody td.cell-lineitem__amount {
    grid-column: auto;
    grid-row: auto;
  }
  .kf-rader-tabell .cell-lineitem__meta {
    display: none;
  }
}

/* Detaljvyns rad-tabell desktop — Enhet-kolumnen är breddare än
 * #416-versionen eftersom enhetstexten nu är fritext (kan vara
 * "förpackningar", "licenser" etc). Ellipsis vid extrema längder. */
.kfd-rader-tabell th:nth-child(3),
.kfd-rader-tabell td:nth-child(3) {
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

/* .data-table--rader — DUBBELBOKFÖRINGS-RADER på mobil (kompakt tabell)
 *
 * Std-tillägg till #33. Verifikatrader läses via BÅDA debet/kredit-
 * kolumnerna (tvåkolumnsbelopp). Lineitem-mönstret komprimerar bort
 * just det — det är ett mönster för EN-BELOPPSRADER (fakturarader,
 * kvitton). För dubbelbokföring behåller vi TABELLFORMEN på mobil och
 * göm sidokolumner med data-mobile="hide" istället för att linearisera.
 *
 *   Mobil-kolumner: Konto · Debet · Kredit
 *   Hidden:         Benämning, Transaktionsinfo, Kontosaldo
 *   Kontonamn:      som .row-sub i konto-cellen (synligt enbart på mobil)
 *
 * Genomstrukna rader (.row--struck) fungerar oförändrat.
 *
 * Markup-konvention:
 *   <table class="data-table data-table--rader">
 *     <thead><tr>
 *       <th>Konto</th>
 *       <th data-mobile="hide">Benämning</th>
 *       <th data-mobile="hide">Transaktionsinfo</th>
 *       <th class="text-right">Debet</th>
 *       <th class="text-right">Kredit</th>
 *       <th class="text-right" data-mobile="hide">Kontosaldo</th>
 *     </tr></thead>
 *     <tbody><tr>
 *       <td>1510<span class="row-sub cell-konto__namn">Kundfordringar</span></td>
 *       <td data-mobile="hide">Kundfordringar</td>
 *       …
 *     </tr></tbody>
 *   </table>
 */
/* Desktop-densitet: stramare padding så tabellen ryms i .detail-split__left
 * även med underlag-panelen öppen (~360px höger). Namn som row-sub i
 * konto-cellen — Benämning-kolumnen är borttagen helt. Tinfo ellipsis:as
 * via .cell-tinfo så långa beskrivningar inte breddar tabellen. */
.data-table--rader th,
.data-table--rader td {
  padding: var(--space-2) var(--space-3);
}

/* Smala kolumner enligt cell-matrisen (#18 + #33-tillägg):
 *   .cell-konto   ~72px (BAS-konton är 4 siffror; namn-row-sub bryts under)
 *   .cell-belopp  ~130px (rymmer "18 159,75" m. andningsrum, nowrap; #436)
 *   .cell-tinfo   ellipsis 240px (fulltext i title)
 * Med smala kolumner ryms tabellen i .detail-split__left även med under-
 * lagspanelen öppen, OCH Benämning-kolumnen återupptas i läsläget utan
 * att återinföra sidledsscrollen.
 *
 * STANDARD-REGEL (#18-tillägg, #426/#427): fasta kolumn-/inputbredder
 * är DESKTOP-EGENSKAPER. I mobilstacken är alla rad-fält ALLTID
 * fullbredda (mobilskärmen ger inte plats för komprimering, och
 * inputfönster < 44px bryter touch-targets). Wrap:a därför ALLA fixed
 * widths i `@media (min-width: 761px)` så de inte läcker till stacken.
 * Konsumenter (verifikat ny/redigera, kf-rader-tabell, framtida liknande)
 * följer samma mönster.
 */
@media (min-width: 761px) {
  .data-table--rader .cell-konto {
    width: 72px;
    white-space: nowrap;
  }
  .data-table--rader td.cell-konto {
    vertical-align: top;
  }
  .data-table--rader .cell-belopp {
    width: 130px;
    /* HARD FLOOR (#437): belopp ger ALDRIG vika när panelen kläms.
     * table-layout: auto krymper annars kolumnen proportionellt →
     * talet kapas. min-width tvingar fältet att behålla sin storlek;
     * Benämning får ge vika i st.f. (regel nedan).
     *
     * Behållit 130px (var tillfälligt höjt till 150 i #449 för
     * italic-rotorsakshypotes; #450 backar — den riktiga rotorsaken
     * var font-style: italic på auto-rader, inte cellbredd. Italic
     * borttagen → 130px räcker även för "1 999 999,75" normal). */
    min-width: 130px;
    white-space: nowrap;
  }
  /* Benämning ger vika FÖRST när panelen tar bredd (#437). Ellipsis +
   * title-attribut bevarar läsbarhet för hela namnet vid hover. */
  .data-table--rader td.cell-text {
    max-width: 200px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .data-table--rader .cell-tinfo {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Edit/ny-läget: input.r-konto begränsad till 4-siffriga BAS-koder
   * på desktop. Dropdown-listan ankras via .form-group--anchor (cell-vid),
   * så vi smalna BARA inputen — autocomplete behåller sin egen bredd. */
  .data-table--rader .cell-konto input.r-konto {
    width: 56px;
    font-family: var(--font-mono, monospace);
    text-align: left;
  }
  .data-table--rader .cell-belopp input.r-debet,
  .data-table--rader .cell-belopp input.r-kredit {
    /* INGEN max-width — fyller hela cellen (130px) så manuell + auto
     * får IDENTISK bredd. Tidigare 120px införde en synlig storleks-
     * skillnad mot auto-rader (som fick max-width:none i #448). #450
     * konsoliderar — en delad regel, bara disabled-attributet skiljer
     * auto från manuell. */
    width: 100%;
    text-align: right;
  }
  .data-table--rader .r-namn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* Kontonamnet som row-sub i konto-cellen — synligt BARA på mobil där
 * Benämning-kolumnen göms (data-mobile="hide"). På desktop visas namnet
 * i sin egen kolumn → dubblett undviks. */
.data-table--rader .cell-konto__namn {
  display: none;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
  font-family: var(--font-sans, inherit);
  line-height: 1.2;
  margin-top: 1px;
}
.data-table--rader .cell-amount__tom {
  color: var(--text-secondary);
}

/* Mobil: inputs fyller hela stack-cellen, ≥44px touch-target. Inget
 * font-size < 16px på inputs (annars zoomar iOS-Safari in). */
@media (max-width: 760px) {
  .data-table--rader td input,
  .data-table--rader td select {
    width: 100%;
    min-height: var(--tap-target);
    font-size: 16px;
  }
  /* Tätare radkort (#428): default-stack-paddingen ger för mycket luft i
   * verifikatets editor — kortet känns "tomt" mellan inputs. Strama åt
   * yttre kort-padding + cell-gap; behåll inputs 44px-höjd via min-height
   * ovan. */
  .data-table--rader.data-table--stack tbody tr {
    padding: var(--space-2);
    gap: 4px;
    margin-bottom: var(--space-2);
  }
  .data-table--rader.data-table--stack tbody td {
    padding: 2px 0;
  }
  .data-table--rader.data-table--stack tbody td::before {
    font-size: 10px;
  }
}

@media (max-width: 760px) {
  .data-table--rader thead th[data-mobile="hide"],
  .data-table--rader tbody td[data-mobile="hide"] {
    display: none;
  }
  /* Kontonamnet visas alltid (även mobil) — bara typografi-finish här. */
  .data-table--rader .cell-konto__namn {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 1px;
    line-height: 1.2;
    /* row-sub ärver font-family från tbody (sans), kontonumret ovan
     * är font-mono. row-sub i konto-cellen ska INTE vara mono. */
    font-family: var(--font-sans, inherit);
  }
  /* Kompaktera densiteten — verifikat-rader är många och korta. */
  .data-table--rader {
    font-size: var(--fs-sm);
  }
  .data-table--rader th,
  .data-table--rader td {
    padding: var(--space-1) var(--space-2);
    vertical-align: top;
  }
  .data-table--rader td.cell-amount,
  .data-table--rader td.text-right {
    white-space: nowrap;
  }
}

/* ─── 34. Autocomplete-dropdown — .konto-dropdown / .konto-option ──
 *
 * Standard-komponent för dropdown-listor under text-inputs
 * (konto-sök i bokföring, kund-sök i ny faktura-modalen,
 * leverantör-sök etc). Kräver `position: relative` på föräldern
 * (.form-group--anchor eller motsvarande).
 *
 * BAKGRUND: stilarna har historiskt varit inline-injicerade av
 * bokforing.js:s injectStyles(). Det betydde att alla ANDRA sidor
 * (ny faktura, lev-faktura osv) hade ostylda dropdowns som inte
 * syntes om användaren inte besökt /bokforing först — en
 * regressions-fälla. Här är de en riktig standard-komponent.
 *
 * Default = display:none → JS sätter style.display='block' när
 * träffar finns. (Långsiktigt: byt till [hidden]-attribut + en
 * :not([hidden])-regel i stil med filter-dropdown #25.) */
.konto-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 260px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 2px;
}
/* Portal-varianten (PR #539) — renderas i <body> och positioneras med
   position:fixed av libben. Override de in-place-positions så styling
   förblir konsekvent men klippet av föräldra-overflow:hidden undviks.
   z-index hög nog att ligga ovanför modaler. */
.konto-dropdown.konto-dropdown--portal {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1000;
  margin: 0;
}
.konto-option {
  padding: 8px var(--space-3);
  font-size: var(--fs-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  /* Default: en rad, ellipsis vid trångt — kundnr/orgnr stannar
   * efter namnet med ett tunt skiljetecken. */
  flex-wrap: nowrap;
  white-space: nowrap;
}
.konto-option:hover,
.konto-option.active {
  background: var(--hover-tint);
}
/* Bokföring-konto-mönstret (rad 1665+ i bokforing.js): konto-nr +
 * konto-namn på samma rad. Behålls för bakåtkompatibilitet. */
.konto-option .konto-nr {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  min-width: 40px;
}
.konto-option .konto-namn {
  color: var(--text-secondary);
}
/* Etapp 2-mönstret (kund-autocomplete): namn fet vänsterställd,
 * meta (kundnr · orgnr) muted till höger på SAMMA rad. */
.konto-option__namn {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.konto-option__meta {
  color: var(--text-secondary);
  font-size: var(--fs-eyebrow);
  margin-left: auto;
  flex-shrink: 0;
}
/* Mobil: om båda inte ryms — låt meta bryta ned till rad 2.
 * Touch-target uppfylls fortsatt via min-height. */
@media (max-width: 480px) {
  .konto-option {
    flex-wrap: wrap;
    white-space: normal;
  }
  .konto-option__meta {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ─── 35. Fältets val-status (helper-text data-state) ─────────
 *
 * Helper-text under autocomplete-fält som speglar val-staten:
 *   data-state=""        — default ("Skriv för att söka…")
 *   data-state="pending" — varning (text utan match, måste välja)
 *   data-state="ok"      — bekräftelse (kund vald)
 *
 * Komplement till disabled-knapp-mönstret #21: när knappen är aktiv
 * men submit-validering kan slå behöver användaren se VARFÖR direkt
 * i fältets område, inte bara efter klick. */
.helper-text[data-state="pending"] {
  color: var(--warning-deep);
}


/* ═══ ETAPP 2 — VERIFIKAT-DETALJ / NY / REDIGERA (std #36 + co) ═══ */

/* ─── 36. .detail-split — vänster huvudinnehåll + höger sidopanel ──
 *
 * Generaliserad split-layout för detaljvyer som har en bilage-/
 * underlag-panel eller annan kontext-panel till höger. Designad
 * mot verifikat-detaljen (första riktiga konsumenten). Lev-faktura-
 * detaljens .lf-split aliasas till samma mönster så den ärver
 * automatiskt vid sin egen migration; verifikat-detaljens .ver-split
 * är också alias så befintliga klassnamn fortsätter fungera men
 * pekar mot std-CSS:en.
 *
 * BREAKPOINT 760px (matchar #381 och övriga komponenter).
 *
 * Höger-panelen är default-stängd via .detail-split__right[hidden]
 * (eller legacy-klassen .bilaga-dold/.is-collapsed). Toggle:as via
 * en knapp i page-headern. På mobil staplas panelen UNDER huvud-
 * innehållet med max-height:50vh + intern scroll så den inte tar
 * över hela vyn (samma mönster som lev-faktura).
 *
 *  Markup-konvention:
 *
 *    <div class="detail-split">
 *      <div class="detail-split__left">…</div>
 *      <div class="detail-split__handle"></div>   <!-- desktop resize, dold mobil -->
 *      <div class="detail-split__right" hidden>…</div>
 *    </div>
 */
.detail-split,
.lf-split,
.ver-split {
  display: flex;
  align-items: stretch;
  min-height: 0;
  gap: 0;
}
.detail-split__left,
.lf-split-left,
.ver-split-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.detail-split__handle,
.ver-resize-handle {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--line);
  align-self: stretch;
  transition: background .1s;
}
.detail-split__handle:hover,
.detail-split__handle.aktiv,
.ver-resize-handle:hover,
.ver-resize-handle.aktiv {
  background: var(--info);
}
.detail-split__right,
.lf-split-right,
.ver-split-right {
  width: 360px;
  flex-shrink: 0;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .15s;
}
/* Stängd panel: width 0 + border/skugga bort. Stöder:
 *   - hidden-attr (std för synlighet)
 *   - .is-collapsed (legacy)
 *   - .bilaga-dold (JS-mekanismen som verifikat/lev-faktura använder).
 * REGRESSION-FIX (#425): tidigare saknades .detail-split__right.bilaga-dold
 * i selektorn → JS-klassen tog inte effekt på den nya komponenten medan
 * den fortsatte funka på legacy-aliasen .ver-split-right/.lf-split-right.
 * Detaljens markup hade dessutom `hidden` hårdkodat → toggle togglade
 * BARA klassen, [hidden] låg kvar → panelen gick inte att öppna. */
.detail-split__right[hidden],
.detail-split__right.is-collapsed,
.detail-split__right.bilaga-dold,
.lf-split-right.bilaga-dold,
.ver-split-right.bilaga-dold {
  display: flex;          /* hidden:attr-default är display:none — vi vill ha animationen */
  width: 0 !important;
  border: none;
  box-shadow: none;
  min-height: 0;
  overflow: hidden;
}
.detail-split__handle.is-collapsed,
.detail-split__handle.bilaga-dold,
.ver-resize-handle.bilaga-dold {
  cursor: default;
  background: transparent;
}

/* Mobil — staplad layout, panel ovan/under huvudinnehållet med
 * intern scroll och egen border-radius. Handle:n göms (ingen vettig
 * funktion vid stack). */
@media (max-width: 760px) {
  .detail-split,
  .lf-split,
  .ver-split {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    overflow: visible;
  }
  .detail-split__left,
  .lf-split-left,
  .ver-split-left { height: auto; overflow: visible; }
  .detail-split__right,
  .lf-split-right,
  .ver-split-right {
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
    flex-shrink: 1;
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
    margin-top: var(--space-3);
  }
  .detail-split__right[hidden],
  .detail-split__right.is-collapsed,
  .lf-split-right.bilaga-dold,
  .ver-split-right.bilaga-dold { display: none; }
  .detail-split__handle,
  .ver-resize-handle { display: none; }
}

/* Lev-faktura-detalj — TVÅPANELS-layout (regression-fix): vänsterkolumnen
 * (förslag + kontering + spara/bokföra/avbryt) scrollar som EN enhet och når
 * knapparna längst ner; höger PDF/JPG-underlag står FAST i FULL storlek (med
 * inzoomning). Föregångaren använde position:sticky + align-self:flex-start UTAN
 * definierad höjd → höger panels flex-barn (iframe/bild med flex:1) kollapsade
 * (~10 % i hörnet, zoom-UI dolt) och sidscroll-beroendet gjorde knapparna
 * onåbara. Nu: bunden höjd på splitten + intern scroll vänster, höger stretchad.
 * SCOPAD till .lf-detail-page → verifikat-detaljen (delar .detail-split) orörd.
 * (Desktop ≥761px; mobil ≤760px behåller den staplade layouten ovan.) */
@media (min-width: 761px) {
  .lf-detail-page .detail-split {
    /* Bunden till visningsytan under topbaren (sticky) + sidluft → panelerna
       kan ha egen scroll utan fragila offset-gissningar. */
    height: calc(100vh - var(--topbar-h) - 2 * var(--page-pad-y));
    min-height: 360px;                      /* korta skärmar: kollapsa ej orimligt */
    align-items: stretch;                   /* båda kolumnerna full höjd */
  }
  .lf-detail-page .detail-split__left {
    overflow-y: auto;                       /* scrollar som enhet → når knapparna */
    min-height: 0;
  }
  .lf-detail-page .detail-split__right {
    min-height: 0;                          /* full höjd (stretch) → underlag + zoom syns */
  }
}


/* ─── 37. .voucher-totals — summa/differens-band under bokföringstabell ──
 *
 * Horisontellt band med Summa debet / Summa kredit / Differens.
 * Plats: under voucher-tabellen (både läs- och redigeringsläge).
 * Differens får färgklass .balance-indicator--ok/--off (#38). */
.voucher-totals {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}
.voucher-totals__cell {
  display: inline-flex;
  gap: var(--space-2);
}
.voucher-totals__label { color: var(--text-secondary); }
.voucher-totals__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
@media (max-width: 480px) {
  .voucher-totals {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
  }
}


/* ─── 38. .balance-indicator — debet/kredit-balans ─────────────
 *
 * --ok  = balansen är ren (debet = kredit eller |diff| < 0.01)
 * --off = avvikelse (rött, kräver åtgärd). Används i voucher-totals
 * och kan återanvändas av andra bokföringsformulär (t.ex. lev-
 * faktura-kontering, motboknings-flöden). */
.balance-indicator--ok  { color: var(--success-deep); }
.balance-indicator--off { color: var(--danger-deep); }


/* ─── 39. .attach-panel — bilage-/underlag-galleri ────────────
 *
 * Generaliserad från verifikat-detaljens bilaga-panel — också för
 * lev-faktura-underlag och kvitto-bilder i framtiden. Strukturen:
 *
 *   <div class="attach-panel">
 *     <div class="attach-panel__header">
 *       <span>Underlag</span>
 *       <button class="btn btn-secondary btn-sm">+ Lägg till</button>
 *     </div>
 *     <div class="attach-panel__list">
 *       <div class="attach-panel__item">
 *         <img class="attach-panel__thumb" src="…">
 *         <div class="attach-panel__item-footer">
 *           <span class="attach-panel__item-name">filnamn.jpg</span>
 *           <button class="btn btn-ghost btn-sm">Ta bort</button>
 *         </div>
 *       </div>
 *     </div>
 *     <div class="attach-panel__dropzone">Dra hit eller klicka…</div>
 *   </div>
 *
 * Legacy-aliaser (.bilaga-panel-header → __header etc) finns i sista
 * blocket i sektionen så bokforing.js-städningen blir gradvis. */
.attach-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.attach-panel__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.attach-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.attach-panel__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-card);
}
.attach-panel__thumb {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}
.attach-panel__item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--line);
  gap: var(--space-2);
}
.attach-panel__item-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.attach-panel__dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-3);
  margin: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--text-secondary);
  text-align: center;
  font-size: var(--fs-sm);
}
.attach-panel__dropzone:hover,
.attach-panel__dropzone.drag-over {
  border-color: var(--info);
  background: var(--hover-tint);
}

/* Legacy-aliaser från bokforing.js:s injectVerStyles. Hänger med
 * tills bilaga-bindningarna i koden själv städas (samma logik som
 * .lf-split-aliaserna ovan). */
.bilaga-panel-header,
.attach-panel__header { /* delar samma stil */ }
.bilaga-lista { /* alias */
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bilaga-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-card);
}
.bilaga-thumb { width: 100%; height: auto; display: block; cursor: zoom-in; }
.bilaga-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--line);
}
.bilaga-item-namn {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.bilaga-upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: border-color .15s;
  color: var(--text-secondary);
}
.bilaga-upload-zone:hover,
.bilaga-upload-zone.drag-over { border-color: var(--info); }


/* ─── 40. Voucher-rad utility: genomstruken rad (BFL-rättelse) ──
 *
 * När en bokförd voucher rättas via motbokning markeras strukna
 * rader på audit-trail. Visas både i läs- och redigeringsläget. */
.ver-struck,
.row--struck,
tr.row--struck td {
  text-decoration: line-through;
  color: var(--text-secondary);
}


/* ─── 41. Voucher-header (form-row stack för Beskrivning/Serie/Datum) ──
 *
 * Mönstret från ritaNy/ritaRedigera. Ärver .form-row men har
 * specifik flex-fördelning: beskrivning större (flex:2), serie
 * fast bredd, datum fast bredd. */
.voucher-header .form-group { min-width: 180px; }
.voucher-header .voucher-header__beskrivning { flex: 2 1 280px; }

/* Inline FY-varning under bokföringsdatum (#458): tight under inputet,
 * mindre vertikal margin än standard-alert så formuläret inte hoppar. */
.datum-fy-warning-slot:empty { display: none; }
.datum-fy-warning {
  margin-top: 6px;
  margin-bottom: 0;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
}


/* ─── 42. lev-faktura-detalj — flyttat från injectStyles() (#431) ──
 *
 * Etapp 2-städning av leverantörsfaktura-detaljen. Tidigare injicerade
 * detaljen ~92 rader CSS i document.head via injectStyles() (F16-fällan
 * — delade komponenter får inte sprida sin egen CSS inline). Reglerna
 * flyttade hit som standardstilar; selektorerna scope:as till
 * .lf-detail-page för att inte läcka. */

/* Topbar-raden i detaljvyns kort. */
.lf-detail-page .lf-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.lf-detail-page .lf-topbar__rubrik {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-primary);
}
.lf-detail-page .lf-topbar__meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.lf-detail-page .lf-topbar__meta--paid { color: var(--success-deep); }
.lf-detail-page .lf-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.lf-detail-page .lf-topbar__back:hover { color: var(--success); }

/* Scrollyta (formulär + tabell). */
.lf-detail-page .lf-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-2) var(--space-3);
}

/* Form-rader: kompakta grid-layouter inom detaljen. */
.lf-detail-page .lf-grid--meta {
  display: grid;
  grid-template-columns: 1fr 130px 130px auto;
  gap: 6px;
  align-items: end;
  margin-bottom: 6px;
}
.lf-detail-page .lf-grid--belopp {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.lf-detail-page .lf-grid--extra {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
/* Fyra fält (Valuta · Belopp i vald valuta · Kurs · Momstyp) i FYRA kolumner —
 * samma spår som .lf-grid--extra direkt ovanför, så de två raderna i panelen
 * "Ytterligare uppgifter" ligger i linje kolumn för kolumn. Tidigare stod här
 * `70px 90px 1fr`: tre spår för fyra fält → Valuta klämdes till 70px, Kurs fick
 * allt överskott (1fr) och Momstyp föll ned på en implicit rad i 70px-spåret. */
.lf-detail-page .lf-grid--valuta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
}
.lf-detail-page .lf-grid--tillagg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
  .lf-detail-page .lf-grid--meta,
  .lf-detail-page .lf-grid--belopp,
  .lf-detail-page .lf-grid--extra,
  .lf-detail-page .lf-grid--valuta,
  .lf-detail-page .lf-grid--tillagg {
    grid-template-columns: 1fr 1fr;
  }
}

/* Inköpsland-toggle: tre knappar i en pill. */
.lf-toggle-group {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.lf-toggle-btn {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--surface-card);
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  border-right: 1px solid var(--line);
}
.lf-toggle-btn:last-child { border-right: none; }
.lf-toggle-btn.vald {
  background: var(--success);
  color: var(--paper);
}

/* Ytterligare uppgifter — kollapsbar. */
.lf-extra-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  user-select: none;
  background: var(--surface-inset);
  margin: 4px calc(var(--space-3) * -1) 0;
}
.lf-extra-toggle:hover { color: var(--text-primary); }
.lf-chevron {
  transition: transform .2s;
  margin-left: auto;
}
.lf-extra-toggle.is-open .lf-chevron { transform: rotate(180deg); }

/* Konteringsregister-rubrik och summa-rad. */
.lf-konto-section { margin-top: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.lf-konto-section__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.lf-konto-summa {
  display: flex;
  justify-content: flex-end;
  gap: 32px;
  padding: var(--space-2) 0;
  font-size: 13px;
  border-top: 1px solid var(--line);
}

/* Inleverans-underrad (lager, diagnos DEL D): visas under en konteringsrad
 * när radens konto är ett lagerkonto. Dämpad bakgrund = härledd/valfri
 * tilläggsinfo (samma signalspråk som auto-raderna nedan). Fälten ligger i
 * .form-group så plattformens fältstyling gäller (ej native). */
.lf-inl-rad .lf-inl-cell {
  background: var(--surface-inset);
  padding: var(--space-2) var(--space-3);
}
.lf-inl-falt {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.lf-inl-falt .form-group { margin: 0; }
.lf-inl-falt .r-antal { max-width: 120px; }
/* Sökbar artikelväljare: växer och fyller raden; söktextinput full bredd. */
.lf-inl-artikel-group { flex: 1 1 220px; min-width: 0; }
.lf-inl-artikel-group .r-artikel-sok { width: 100%; box-sizing: border-box; }

/* Skapa-ny-artikel-modal: två kolumner, stackar på smal mobil (375px). */
.lf-artikelmodal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.lf-artikelmodal-grid .lf-artikelmodal-full { grid-column: 1 / -1; }
.lf-artikelmodal-grid .form-group { margin: 0; }
.lf-artikelmodal-grid input,
.lf-artikelmodal-grid textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 480px) {
  .lf-artikelmodal-grid { grid-template-columns: 1fr; }
}
.lf-inl-etikett {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding-bottom: var(--space-2);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .lf-inl-falt { flex-direction: column; align-items: stretch; }
  .lf-inl-falt .r-antal { max-width: none; }
}

/* Auto-rader (osparbara, härleds från belopp/inköpsland).
 *
 * BARA visuell särdrag (dämpad bakgrund + text), INGA bredd-/storleks-
 * skillnader mot manuella rader. font-style: italic borttagen i #450:
 * DevTools-bevis från användaren visade att italic var ROTORSAKEN till
 * kapningen av "1 999 999,75" — italic-glyphen tar mer plats än
 * normal vid samma punkt-storlek. Normal text är dessutom mer läsbar
 * för belopp. Auto-radens disabled-attribut + denna dämpade visual
 * räcker som signal om att raden är härledd. */
input.r-auto-amt {
  background: var(--surface-inset);
  color: var(--text-secondary);
}

/* Leverantörsväljare-anchor (autocomplete-dropdown ligger inom cellen). */
.lf-lev-wrap { position: relative; }
.lf-lev-wrap .konto-dropdown { top: 100%; left: 0; right: 0; z-index: 100; }

/* Åtgärdsbar längst ned i detalj-vyns kort. */
.lf-detail-page .lf-actionbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface-card);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.lf-detail-page .lf-actionbar__group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Splitlayoutens left har en card-look — wrappar formuläret. */
.lf-detail-page .detail-split__left {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lf-detail-page .detail-split {
  height: calc(100vh - 112px);
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 760px) {
  .lf-detail-page .detail-split {
    height: auto;
    overflow: visible;
  }
  .lf-detail-page .detail-split__left {
    height: auto;
    overflow: visible;
  }
}


/* Småklasser för lev-faktura-detaljens layout (#431). */
.lf-detail-page .lf-alert-slot { flex-shrink: 0; padding: 0 var(--space-3); }
.lf-detail-page .lf-alert-slot .alert { margin-bottom: var(--space-2); }
.lf-detail-page .lf-ai-slot { flex-shrink: 0; padding: 0 var(--space-3); }
.lf-detail-page .lf-extra-panel { padding-top: var(--space-2); }
.lf-detail-page .lf-lagg-till-btn { margin-top: 4px; }

/* attach-panel: empty-state när faktura inte är sparad. */
.attach-panel__empty {
  padding: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-4);
}

/* lev-faktura-topbar mittsektion. */
.lf-detail-page .lf-topbar__main {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex: 1;
  flex-wrap: wrap;
}

/* KONTERING-RADERNAS DENSITET = LISTVYNS (#432) ─────────────────────
 * Konteringsregister i detaljvyer (lev-faktura, verifikat, kvitto) ska
 * ha samma vertikala rytm som bokföringens LISTVY. Listdensiteten
 * (#33b/#425): tbody td padding var(--space-2) var(--space-3) + font
 * --fs-sm. Med 32px input (#430) i en td blir radhöjden ~48px, listans
 * är ~30px → ute ur takt.
 *
 * Här tightare: td padding 2px vertikalt (cellen blir nästan kollapsad),
 * input min-height 26px, padding 2px 6px → radhöjd ~30px. Bara desktop.
 * Mobil orörd (#427 — 44px touch-target + 16px font).
 */
/* KONTERING-RADERNAS DENSITET — INTE @media-scopad (#434-fix)
 *
 * RECON (#434, empirisk via jsdom): #432-regeln för densiteten låg inom
 * `@media (min-width: 761px)`-wrap som av oklar anledning INTE matchade
 * konsekvent i utkast/granska-läget — bas-regeln i style.css
 * (`input { padding: 9px 12px; font-size: 13.5px }`, specificitet (0,1,1))
 * vann. JSDOM-testet (test/unit/lev-faktura-densitet-recon.test.ts)
 * isolerade: identisk regel UTAN media-wrap matchar (computed height=26px,
 * padding=2px 6px); MED wrap blir det 9px 12px = bas-regeln. Bokfört-
 * läget såg "rätt" eftersom disabled-inputs visuellt smälter in.
 *
 * Fix: regeln scope:as på `.detail-page` (utan media) — gäller alla
 * detaljvyer (lev-faktura, verifikat, kvitto). Mobil-skyddet (#427:
 * 44px touch + 16px font) ligger i egen @max-width-regel med samma
 * specificitet → vinner via media-match. INGA defensiva lager till.
 *
 * UTKAST/BOKFÖRT/GRANSKA-LÄGEN: nu identiska eftersom regeln matchar
 * oberoende av input-state och rita() ritar samma markup för alla.
 */
.detail-page .data-table--rader tbody td {
  padding: 2px var(--space-3);
}
.detail-page .data-table--rader thead th {
  padding: var(--space-1) var(--space-3);
}
.detail-page .data-table--rader td input[type="text"],
.detail-page .data-table--rader td input[type="number"],
.detail-page .data-table--rader td select,
.detail-page .data-table--rader td input.r-konto,
.detail-page .data-table--rader td input.r-debet,
.detail-page .data-table--rader td input.r-kredit,
.detail-page .data-table--rader td input.r-tinfo {
  min-height: 26px;
  height: 26px;
  padding: 2px 6px;
  line-height: 1.2;
  font-size: var(--fs-sm);
}

/* AUTO-RAD-OVERRIDE BORTTAGEN (#450)
 *
 * #446/#448 lade en padding/max-width-override för r-auto-amt eftersom
 * italic kapades. Användarens devtools-bevis (#450) visade att italic
 * SJÄLV var rotorsaken — inte padding eller max-width. När italic är
 * borta (se input.r-auto-amt-regeln ovan, rad ~2892) räcker den delade
 * regeln på rad ~2176 (width 100%, ingen max-width) för båda rad-typer.
 *
 * Auto + manuell har nu IDENTISK bredd/storlek/padding — bara
 * disabled-attributet + dämpad bakgrund/färg skiljer dem. En delad
 * regel, ingen parallell.
 */

/* TA BORT NUMBER-SPINNERS GLOBALT (#436)
 *
 * Upp/ned-pilarna (±0,01) stör mer än hjälper på belopp/antal-fält.
 * Plattformsbred CSS — gäller alla number-inputs (verifikat-rader,
 * faktura-modal, lev-faktura, kvitto, lön m.fl.). Tangentbord +
 * validering oförändrade — bara visuell/interaktiv borttagning.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* KONTO-CELLEN — VÄNSTERLINJERA INPUT OCH SPAN (#436)
 *
 * RECON: auto-rader (_insertAutoTr) renderar konto som <span class="font-mono">,
 * user-rader (laggTillRad) som <input class="r-konto">. Input har bas-
 * regelns border (1px) + #434:s padding (6px left). Span saknar både.
 * → konto-text på user-rad börjar ~7px höger om auto-rad → ur linje.
 *
 * FIX: spannen får samma box-modell — padding + transparent border —
 * så texten startar på samma x-position. Höjd matchar inputens 26px
 * så cell-baseline blir likadan oavsett rad-typ.
 */
.detail-page .data-table--rader td.cell-konto > span.font-mono {
  display: inline-block;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid transparent;
  height: 26px;
  line-height: 20px;
  vertical-align: middle;
}

/* TA-BORT-KNAPPEN (#435): user-raderna (laggTillRad) har en .btn-icon
 * .r-rm-knapp i sista cellen. Bas-regeln .btn-icon { width: 44px;
 * min-height: 44px; } driver upp HELA radhöjden till 44px (touch-target)
 * och får user-rader att se ~50% högre ut än auto-rader (~30px).
 *
 * Fix på samma princip som densiteten ovan: tät desktop UTAN @media,
 * mobil-touch-target via @max-width-override. Knappen blir 24×24px
 * desktop = matchar input-höjden (26px) → radhöjd identisk med auto-
 * raderna. Mobil-touch-target (#427) behålls. */
.detail-page .data-table--rader .btn-icon.r-rm {
  width: 24px;
  min-height: 24px;
  height: 24px;
  padding: 0;
  font-size: 14px;
}

/* Mobil-skydd: 44px touch-target + 16px font.
 * Samma selektor-specificitet (0,3,2) som desktop-regeln ovan — vinner
 * via media-query-match på mobil. Återställer height: auto så att
 * inputs kan växa till touch-targetet. */
@media (max-width: 760px) {
  .detail-page .data-table--rader td input[type="text"],
  .detail-page .data-table--rader td input[type="number"],
  .detail-page .data-table--rader td select,
  .detail-page .data-table--rader td input.r-konto,
  .detail-page .data-table--rader td input.r-debet,
  .detail-page .data-table--rader td input.r-kredit,
  .detail-page .data-table--rader td input.r-tinfo {
    min-height: var(--tap-target);
    height: auto;
    padding: 6px 8px;
    font-size: 16px;
  }
  /* Touch-target på ta-bort-knappen återställs på mobil. */
  .detail-page .data-table--rader .btn-icon.r-rm {
    width: var(--tap-target);
    min-height: var(--tap-target);
    height: var(--tap-target);
    font-size: 16px;
  }
}


/* ─── 43. AI-granskningskortet — etapp 2-skin (#432) ──────────────
 *
 * Kompakta förslagsrader med intern scroll så kortet aldrig växer
 * under skärmkanten. Försvinner när AI-förslaget tillämpats — då
 * visar detaljvyn en liten AI-ikon vid konteringsrubriken (.ai-marker)
 * istället. */

.ai-kort {
  border-color: var(--info-soft);
  margin-bottom: var(--space-3);
}
.ai-kort__header {
  background: rgba(37, 99, 235, .04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ai-kort__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ai-kort__placeholder-alert { margin-bottom: var(--space-3); }

.ai-kort__lev-section { margin-bottom: var(--space-3); }
.ai-kort__lev-heading {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.ai-kort__lev-info {
  background: var(--surface-inset);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 12.5px;
}
.ai-kort__lev-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.ai-kort__lev-select {
  flex: 1;
  min-width: 200px;
}

/* Förslags-sektionen: tabellen i tät listdensitet + INTERN SCROLL. */
.ai-kort__forslag-heading {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.ai-kort__forslag-scroll {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  /* Maxhöjd så kortet aldrig växer under skärmkanten oavsett radantal.
   * Räknat på ~6-7 rader plus thead/summa-rader: 240px. Hellre lite
   * mer scroll än en sida som flödar ner. */
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}
.ai-kort__forslag-tabell {
  width: 100%;
  font-size: 12.5px;
}
.ai-kort__forslag-tabell thead th {
  background: var(--surface-inset);
  padding: 4px var(--space-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}
.ai-kort__forslag-tabell tbody td {
  padding: 4px var(--space-2);
  border-top: 1px solid var(--line);
}
.ai-kort__forslag-summa td {
  border-top: 2px solid var(--line) !important;
  font-weight: 600;
}
.ai-kort__forslag-brutto td {
  font-weight: 600;
}

.ai-kort__forslag-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Kurs-banner (utländsk valuta). */
.ai-kort__kurs-banner {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.ai-kort__kurs-label {
  font-size: 12.5px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.ai-kort__kurs-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.ai-kort__kurs-row input {
  width: 140px;
}
.ai-kort__kurs-status {
  font-size: 12px;
  color: var(--text-secondary);
}

.ai-conf-pill { font-size: 10px; padding: 0 4px; }


/* ─── 44. AI-ikon i listrader (#434) ───────────────────────────────
 *
 * Listans ✨-ikon på AI-konterade fakturarader. Konsoliderat från
 * detaljvyns "konteringsrubrik-markör" (borttagen i #434 — nyttan
 * fanns enbart i listan). Asterisk-distinktionen (orörd/redigerad)
 * utgår också.
 *
 * Bara ikon-stilning återstår: .cell-ai-kolumnen (rad 4615) bestämmer
 * positionen; .cell-title__ai-mobil (samma fil) renderar mobil-inline-
 * placeringen.
 */
.ai-marker__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: inline-block;
  color: var(--info-deep);
}


/* ─── 45. Källunderlag inline i attach-panel (#432 — punkt 3) ───
 *
 * .attach-panel renderar nu KÄLLUNDERLAGET (PDF/bild) som egen sektion
 * överst, sedan eventuella vanliga bilagor under. Källunderlaget kommer
 * från supplier_invoices.underlag_blob_pathname via API-routen
 * /api/leverantorsfakturor/{id}/underlag som strömmar bloben inline.
 *
 *   <div class="attach-panel">
 *     <div class="attach-panel__source-section">    <!-- NY -->
 *       <div class="attach-panel__source-header">Källunderlag</div>
 *       <iframe class="attach-panel__source-pdf" …>   för PDF
 *       <img    class="attach-panel__source-img" …>   för bild
 *       <div class="attach-panel__source-meta">filnamn</div>
 *     </div>
 *     <div class="attach-panel__source-divider"></div>
 *     <div class="attach-panel__header">…</div>     <!-- ÖVRIGA BILAGOR -->
 *     …
 *   </div>
 */
.attach-panel__source-section {
  border-bottom: 1px solid var(--line);
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.attach-panel__source-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: var(--info-deep);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.attach-panel__source-pdf {
  width: 100%;
  min-height: 320px;
  border: none;
  background: var(--surface-inset);
}
.attach-panel__source-img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--surface-inset);
  cursor: zoom-in;
}
.attach-panel__source-meta {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-panel__source-mobile-fallback {
  padding: var(--space-4) var(--space-3);
  text-align: center;
}
.attach-panel__source-mobile-fallback a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Mobil: PDF i iframe är pixiel-instabil — visa "Öppna i ny flik"-länk
 * i stället. Bilder funkar ok inline. */
@media (max-width: 760px) {
  .attach-panel__source-pdf {
    display: none;
  }
}


/* ─── 46. AI-markör i listrader (#433-1b) ─────────────────────────
 *
 * Liten ✨-ikon på fakturarader vars kontering tillämpats från AI.
 * Mönstret speglar gem-ikonen (cell-bilaga / #426): fast smal kolumn
 * desktop, inline vid titeln på mobil (EN gång — punkt 1a-läxan om
 * dubblettrisk).
 *
 * Distinktionen orörd/redigerad (asterisk) är detalj-exklusiv så listans
 * rendering förblir billig (klient-side O(rader) per faktura räcker).
 */
.cell-ai {
  width: 32px;
  text-align: center;
}
/* Mobil: göm kolumnen — dubblettsäkrad på samma sätt som .cell-bilaga
 * (klass-baserad regel oberoende av stack-scopet, #426-fixen). */
@media (max-width: 760px) {
  .cell-ai { display: none !important; }
}

/* Inline-ikon i titel-cellen — synlig BARA mobil (desktop har egen kolumn). */
.cell-title__ai-mobil { display: none; }
@media (max-width: 760px) {
  .cell-title__ai-mobil { display: inline-flex; }
}


/* ─── 47. Attach-panel — källunderlag full höjd (#433-2) ──────────
 *
 * När fakturan har KOPPLAT källunderlag tar den sektionen hela panel-
 * höjden — preview viktigast. Drop-zonen ersätts av en kompakt
 * "Bifoga fler underlag"-knapp i panel-headern. Tomt-läge oförändrat
 * (drop-zonen som tidigare när inget innehåll finns).
 *
 * Standardregel — gäller alla .attach-panel-konsumenter (lev-faktura
 * först, verifikat-detalj ärver).
 */
.attach-panel--source-fill .attach-panel__source-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.attach-panel--source-fill .attach-panel__source-pdf,
.attach-panel--source-fill .attach-panel__source-img {
  flex: 1 1 auto;
  min-height: 0;
}
.attach-panel--source-fill .attach-panel__source-pdf {
  height: 100%;
}
.attach-panel--source-fill .attach-panel__source-img {
  max-height: 100%;
  height: auto;
  object-fit: contain;
}
/* Övriga bilagor + dropzone får kompakt botten-sektion när källunderlag finns. */
.attach-panel--source-fill .attach-panel__list { flex: 0 0 auto; max-height: 30vh; }
.attach-panel--source-fill .attach-panel__dropzone[hidden] { display: none; }


/* ─── 48. Register-utility-klasser (#438 — etapp 3a-1) ────────────
 *
 * Små utility-klasser från register-utils.js, flyttade hit från inline-
 * styles. Konsumenter: artiklar/projekt/integrationer (wrappers över
 * byggRegisterSida) — samma generella registerlista. */

.reg-toolbar--full {
  margin: 0;
  width: 100%;
}
.reg-alert {
  margin: var(--space-5);
}
.reg-actions-col {
  width: 80px;
}
.reg-actions-col--narrow {
  width: 48px;
}
.reg-row-actions {
  display: flex;
  gap: 6px;
}
.row-clickable {
  cursor: pointer;
}
.empty-state__icon {
  font-size: 48px;
  margin: 0 0 var(--space-3);
}
.empty-state__title {
  margin: 0 0 var(--space-2);
}
.empty-state__lead {
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
}


/* ─── 49. Betalningar-/payment-batches-utility (#438) ────────────── */
.bet-alert        { margin-bottom: var(--space-4); }
.bet-stats        { margin-bottom: var(--space-6); }
.bet-actions-col  { width: 110px; }
/* Betalningsspärrad leverantör i urvalslistan: synlig men ej valbar. */
.bet-sparr-note   { margin: var(--space-3) var(--space-4) 0; }
.bet-rad--sparrad td { opacity: .72; }
.bet-sparr-ikon   { font-size: var(--fs-sm, 13px); }
.bet-sparr-badge  { margin-left: var(--space-2); }
.stats-grid--3    { grid-template-columns: repeat(3, 1fr); }

/* ── Betalningslistan: filter/sortering + orsaker + mobil-kort ─────────── */
.bet-filter        { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--line, #e5e7eb); }
.bet-filter .filter-input,
.bet-filter .filter-num,
.bet-filter .filter-select,
.bet-filter .filter-date {
  height: 34px; padding: 0 var(--space-3); border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 8px); background: var(--surface, #fff);
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm, 14px);
}
.bet-filter .filter-input { min-width: 220px; flex: 1 1 220px; }
.bet-filter .filter-num   { width: 84px; }
.bet-filter__summary,
.bet-filter [data-filter-summary] { flex-basis: 100%; margin-top: var(--space-1); }
.bet-listregion { overflow-x: auto; }

/* Sorterbara kolumnrubriker (samma mönster som leverantörsfakturalistan). */
.bet-tabell .th-sortable { cursor: pointer; white-space: nowrap; user-select: none; }
.bet-tabell .th-sortable:hover { color: var(--brand, #1a365d); }
.bet-tabell .sort-indicator { margin-left: 4px; color: var(--text-muted); font-size: var(--fs-sm, 12px); }

/* Uteslutna rader: tydligt markerade, ALDRIG dolda (skälet till utebliven betalning). */
.bet-rad--utesluten td { background: var(--danger-bg, #fef2f2); }
.bet-utesluten-ikon { font-size: var(--fs-sm, 13px); }
.bet-orsaker { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bet-orsak-badge { white-space: normal; }
.bet-utanfor { color: var(--text-secondary); font-size: var(--fs-sm, 13px); margin: 0 var(--space-3); }

/* Mobil 375px: filter-baren staplar, listan blir stackade kort (data-table--stack
   sköter label:värde). Orsaks-badgar och markering får ALDRIG döljas. */
@media (max-width: 600px) {
  .bet-filter { flex-direction: column; align-items: stretch; }
  .bet-filter .filter-bar__group { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .bet-filter .filter-input,
  .bet-filter .filter-num { width: 100%; flex: 1 1 auto; }
  .bet-filter .filter-num { min-width: 0; }
  .bet-listregion { overflow-x: visible; }
  .bet-tabell .bet-orsaker { margin-top: var(--space-2); }
  .bet-tabell .bet-orsak-badge { display: inline-block; }
}

/* Mobil-toolbar ("Markera alla") syns bara på mobil (theaden är dold av stacken). */
.bet-mobil-toolbar { display: none; }

/* ── C1: MARKERING PÅ MOBIL ────────────────────────────────────────────
   Den delade .data-table--stack-regeln (komponent #24) DÖLJER
   receipts-checkbox-col + .bulk-action-bar på ≤760px (bulk = desktop-only
   för lev-/kundlistorna). Betalningar ÄR en mobil-markeringslista → återställ
   dem, scopat till .bet-tabell / #bet-bulkbar så andra listor är oförändrade. */
@media (max-width: 760px) {
  /* Checkrutan tillbaka som tumnåbart 44px-mål, uppe till höger i kortet. */
  .bet-tabell.data-table--stack tbody tr { position: relative; padding-right: 52px; }
  .bet-tabell.data-table--stack tbody td.receipts-checkbox-col {
    display: flex; position: absolute; top: var(--space-2); right: var(--space-2);
    min-width: var(--tap-target, 44px); min-height: var(--tap-target, 44px);
    align-items: center; justify-content: center; margin: 0; padding: 0;
  }
  .bet-tabell.data-table--stack tbody td.receipts-checkbox-col::before { content: none; }
  .bet-tabell.data-table--stack tbody td.receipts-checkbox-col input[type="checkbox"] { width: 22px; height: 22px; }

  /* Bulk-baren tillbaka (scopad) + fast längst ned, full-breddsknapp. */
  #bet-bulkbar .bulk-action-bar {
    display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
    position: sticky; bottom: 0; z-index: 5;
    background: var(--surface-card); border-top: 1px solid var(--line);
    padding: var(--space-3);
  }
  #bet-bulkbar .bulk-action-bar .btn { width: 100%; }

  /* "Markera alla" på mobil (thead-checkboxen är dold). */
  .bet-mobil-toolbar { display: flex; align-items: center; padding: var(--space-1) 0 var(--space-3); }
  .bet-mobil-markera { display: flex; align-items: center; gap: var(--space-2);
    min-height: var(--tap-target, 44px); cursor: pointer; font-size: var(--fs-sm, 14px); }
  .bet-mobil-markera input[type="checkbox"] { width: 22px; height: 22px; }
}

/* ── Statuskort: Att betala + Förfallna (två kort) ─────────────────────── */
.bet-stats { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) {
  /* Stapla vertikalt i stående; hel text, ingen ellips (antal OCH summa ryms). */
  .bet-stats { grid-template-columns: 1fr; }
  .bet-stats .stat-value { font-size: var(--fs-h2, 1.5rem); line-height: 1.15; overflow-wrap: anywhere; }
}

/* ── C7: betaldatum-väljare i urvalet (bulk-baren) ─────────────────────── */
.bet-betaldatum { display: flex; flex-direction: column; gap: 2px; }
.bet-betaldatum label { font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--text-secondary); }
.bet-betaldatum input[type="date"] {
  min-height: 40px; padding: 0 var(--space-2); border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 8px); background: var(--surface, #fff);
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm, 14px);
}
.bet-satt-betaldag-rad { display: flex; gap: var(--space-2); align-items: center; }
.bet-betaldatum-hint  { font-size: var(--fs-sm, 12px); color: var(--text-muted); }
/* Justerings-/varningsnotis: ALDRIG dold — visar när pengarna lämnar kontot. */
.bet-betaldatum-notis { font-size: var(--fs-sm, 13px); color: var(--text-secondary); }
.bet-betaldatum-notis div { margin-top: 2px; }
@media (max-width: 760px) {
  #bet-bulkbar .bet-betaldatum { width: 100%; }
  #bet-bulkbar .bet-betaldatum input[type="date"] { width: 100%; min-height: var(--tap-target, 44px); }
}

/* ── Betaldag-kolumn i listan (per faktura, före filskapande) ──────────── */
.bet-betaldag-input {
  box-sizing: border-box; min-width: 0; max-width: 100%;
  min-height: 34px; padding: 0 var(--space-2); border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius, 8px); background: var(--surface, #fff);
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-sm, 14px);
}
/* Notis wrappar ALLTID (lång varningstext får aldrig spränga kortet i sidled). */
.bet-betaldag-notis { font-size: var(--fs-sm, 12px); margin-top: 2px; max-width: 100%; overflow-wrap: anywhere; }
.bet-notis-flytt   { color: var(--text-secondary); }
.bet-notis-varning { color: var(--danger, #b91c1c); font-weight: 600; }
.bet-atgard { background: none; border: none; padding: 0; color: var(--brand, #1a365d);
  font: inherit; text-decoration: underline; cursor: pointer; }
/* Låst betaldag (fakturan i en batch): läsbart + lås-ikon, ALDRIG dolt. */
.bet-betaldag-last { color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 760px) {
  /* ⚠️ ROT till sidled-spräng: <table> är kvar som display:table i stack-läget →
     tabell-algoritmen sträcker den till innehållets min-bredd (bl.a. date-inputens
     intrinsiska min) TROTS width:100%, och den absoluta checkrutan hamnade utanför
     vyn. Gör bet-tabellen till ett blockelement på mobil (scopat — andra listor
     orörda) så den fyller exakt containern. */
  .bet-tabell.data-table--stack { display: block; width: 100%; max-width: 100%; }
  .bet-tabell.data-table--stack tbody tr { max-width: 100%; }
  /* ⚠️ Stacken (#24) gör td:n till en flex-RAD → input + notis låg sida vid sida
     och sprängde kortet i sidled (och sköt den absoluta checkrutan ut ur vyn).
     Stapla betaldag-cellens innehåll vertikalt (som .has-actions) så fältet blir
     full bredd och varningstexten wrappar under. */
  .bet-tabell.data-table--stack tbody td.bet-betaldag-cell {
    flex-direction: column; align-items: stretch; gap: var(--space-1); min-width: 0;
  }
  .bet-tabell.data-table--stack tbody td.bet-betaldag-cell::before { margin-bottom: 2px; }
  /* Tumnåbart fält på mobil; notis/varning aldrig dold (stackens kort visar dem). */
  .bet-tabell .bet-betaldag-input { width: 100%; min-height: var(--tap-target, 44px); }
  /* Orsaks-badgar (utesluten-rader) wrappar till EGEN rad INNANFÖR kortet i stället
     för att sträcka leverantörscellen och tränga ut badge/checkruta ur vyn. */
  .bet-tabell.data-table--stack tbody td[data-label="Leverantör"] { flex-wrap: wrap; min-width: 0; }
  .bet-tabell .bet-orsaker { flex-basis: 100%; margin-top: var(--space-1); }
  .bet-tabell .bet-orsak-badge { white-space: normal; overflow-wrap: anywhere; }
}


/* ─── 50. Transaktioner-listutility (#438 — etapp 3a-1) ────────── */
.tr-search-input  { width: 220px; margin: 0; }
.tr-col-datum     { width: 110px; white-space: nowrap; }
.tr-col-ver       { width: 90px;  white-space: nowrap; }
.tr-col-konto     { width: 80px; }
.tr-col-belopp    { width: 120px; white-space: nowrap; }


/* ─── 51. Insikter-utility (#438 — etapp 3a-1) ─────────────────── */
.stats-grid--4              { grid-template-columns: repeat(4, 1fr); }
.insikter-stats             { margin-bottom: var(--space-6); }
.insikter-bar-block         { margin-bottom: var(--space-4); }
.insikter-bar-row           { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.insikter-bar-track         { height: 8px; background: var(--surface-inset); border-radius: 999px; overflow: hidden; }
.insikter-bar-fill          { height: 100%; transition: width .25s ease; }
.insikter-bar-fill--green   { background: var(--success); }
.insikter-bar-fill--red     { background: var(--danger); }
.insikter-bar-value         { font-weight: 600; }
.insikter-bar-value--green  { color: var(--success); }
.insikter-bar-value--yellow { color: var(--warning); }
.insikter-bar-stack         { display: flex; flex-direction: column; gap: var(--space-4); }
.insikter-summary           { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.insikter-summary__label    { color: var(--text-secondary); }
.insikter-summary__value    { font-size: 18px; font-weight: 700; }
.insikter-summary__value.is-positive { color: var(--success); }
.insikter-summary__value.is-negative { color: var(--danger); }


/* ─── 52. Integrationer-grid (#438 — etapp 3a-1) ───────────────── */
.integration-grid              { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.integration-card__body        { text-align: center; padding: var(--space-5); }
.integration-card__icon        { font-size: 40px; margin-bottom: var(--space-3); }
.integration-card__title       { font-weight: 600; margin-bottom: var(--space-2); }
.integration-card__desc        { margin-bottom: var(--space-4); }

@media (max-width: 760px) {
  .stats-grid--4 { grid-template-columns: repeat(2, 1fr); }
}


/* ─── 53. Tidrapporter-listutility (#438 — etapp 3a-1) ─────────── */
.tr-row__cta                 { color: var(--brand); font-size: var(--fs-sm); white-space: nowrap; }
.tr-row__badges              { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-2); }
.tr-period-filter            { padding: var(--space-4); margin-bottom: var(--space-3); }
.tr-period-filter__row       { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tr-period-filter__label     { font-size: var(--fs-sm); font-weight: 600; }
.tr-period-filter__select    { font-size: var(--fs-md); padding: var(--space-2) var(--space-2); }
.tr-period-filter__year      { width: 90px; font-size: var(--fs-md); padding: var(--space-2); }
.tr-period-filter__help      { margin: var(--space-3) 0 0; }


/* ─── 54. Arkiv-listutility (#438 — etapp 3a-1) ───────────────── */
.arkiv-sok                   { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.arkiv-sok__input            { flex: 1; min-width: 200px; font-size: var(--fs-md); padding: var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.arkiv-status                { margin-bottom: var(--space-2); }
.arkiv-anteckning            { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-primary); }
.arkiv-taggar                { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.arkiv-preview-title         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.arkiv-preview-footer        { display: flex; justify-content: flex-end; }
.arkiv-preview-mobile        { text-align: center; padding: var(--space-6) var(--space-4); }
.arkiv-preview-mobile__hint  { font-size: var(--fs-md); margin-bottom: var(--space-3); }
.arkiv-preview-fallback      { padding: var(--space-6); text-align: center; }


/* ─── 55. Payment-batches-utility (#439 — etapp 3a-2) ──────────── */
.btn-link--back              { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; }
.btn-link--back:hover        { text-decoration: underline; }

.pb-title-spaced             { margin-top: var(--space-2); }
.pb-alert                    { margin-top: var(--space-4); }

.pb-col-datum                { width: 110px; white-space: nowrap; }
.pb-col-msgid                { width: 140px; }
.pb-col-bank                 { width: 120px; }
.pb-col-status               { width: 110px; }
.pb-col-belopp               { width: 130px; white-space: nowrap; }
.pb-col-faktura              { width: 110px; }
.pb-col-bgpg                 { width: 100px; }
.pb-col-ocr                  { width: 110px; }
.pb-actions-col              { width: 100px; }
.pb-row-actions-col          { width: 90px; }
.pb-msgid                    { font-size: var(--fs-sm); }

.pb-debitor-card             { padding: var(--space-4); margin-bottom: var(--space-4); }
.pb-debitor-card__title      { margin: 0 0 var(--space-3); font-size: var(--fs-md); font-weight: 600; }
.pb-debitor-card__dl         { margin: 0; }

.pb-action-status            { margin-top: var(--space-3); }
.pb-action-status__alert     { display: flex; flex-direction: column; gap: var(--space-1); }
.pb-action-status__fallback  { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }


/* ─── 56. Kontoplan-utility (#439 — etapp 3a-2) ───────────────── */
.kp-card-body                { padding-bottom: 0; }
.kp-toolbar                  { margin-bottom: var(--space-3); }
.kp-search-input             { max-width: 320px; }
.kp-tabs                     { margin-bottom: 0; }

.kp-col-nr                   { width: 90px; }
.kp-col-typ                  { width: 110px; }
.kp-col-moms                 { width: 130px; }
.kp-col-sru                  { width: 80px; }
.kp-col-status               { width: 100px; }
.kp-code                     { font-size: var(--fs-sm); }

.kp-active-label             { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.kp-active-label--disabled   { cursor: default; }
.kp-active-toggle            { width: 16px; height: 16px; }

.kp-edit-btn                 { padding: var(--space-1) var(--space-2); }

.kp-form-group--number       { width: 140px; }
.kp-form-group--name         { flex: 1; }
.kp-form-group--type         { width: 160px; }
.kp-form-group--sru          { width: 120px; }
.kp-form-group--active       { width: 90px; }
.kp-form-active-wrap         { padding-top: var(--space-2); }

.kp-modal-error              { margin-top: var(--space-3); }
.kp-locked-hint              { margin-top: var(--space-2); font-style: italic; }


/* ─── 57. .data-table--compact-list — tät skummbar lista (#441) ──── *
 *
 * För långa uppslagslistor där bara 1-2 fält räknas — radlista,
 * INTE kort. Kontoplanen (~2000 rader) är typfallet; andra
 * kandidater: artiklar, BAS-kataloger, framtida katalog-listor.
 *
 * Desktop: klassen är no-op — vanlig data-table-rendering.
 * Mobil: thead dolt, varje rad = flex-rad med hårfin skiljelinje
 * (1px var(--line)) mot nästa. INGEN per-rad-ram, ingen skugga,
 * ingen radie, ingen kort-marginal — raden är tunn och tappbar
 * (~36-44px höjd, 44px tap-target via padding).
 *
 * Layout per rad: identifierare vänster (mono, dämpad, nowrap,
 * fast bredd), huvudtext mitten (ellipsis), ev. status-markör
 * höger. #22-andan: bara inaktiva taggas (Inaktiv-etikett), aktiva
 * utan brus.
 *
 * Använd tillsammans med modifieraren .kp-list-card på den
 * omslutande .card för att strippa kort-chrome (border/shadow/
 * radius/padding) på mobil så listan känns edge-to-edge.
 */
@media (max-width: 760px) {
  /* Strippa kort-chrome — listan ska kännas edge-to-edge */
  .kp-list-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .data-table--compact-list thead { display: none; }
  .data-table--compact-list,
  .data-table--compact-list tbody { display: block; width: 100%; }
  .data-table--compact-list tr {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--line);
    min-height: 44px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
  }
  .data-table--compact-list tr:last-child { border-bottom: none; }
  .data-table--compact-list td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .data-table--compact-list td[data-mobile="hide"] { display: none; }
  /* Rensa data-label-prefix (om någon hamnat från .data-table--stack-mönstret) */
  .data-table--compact-list td::before { content: none; display: none; }

  /* Identifierare — kompakt, dämpad, nowrap, fast bredd */
  .data-table--compact-list td.font-mono {
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    min-width: 56px;
    white-space: nowrap;
  }

  /* Huvudtext — fyller resten, truncates */
  .data-table--compact-list td.cell-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }

  /* Status-markör höger */
  .data-table--compact-list td:last-child {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* Inaktiv rad — dämpad text (gäller både desktop och mobil) */
.kp-row-inactive td,
.kp-row-inactive td.font-mono,
.kp-row-inactive td.cell-title { color: var(--text-muted); }

/* Inaktiv-etikett (#22-andan — bara inaktiva taggas) */
.kp-status-tag--inactive {
  display: inline-block;
  font-size: var(--fs-sm);
  padding: 2px var(--space-2);
  border-radius: var(--radius);
  background: var(--surface-inset);
  color: var(--text-muted);
}


/* ─── 58. Auth-sidlayout (#443 — etapp 3a-2-auth) ──────────────── *
 *
 * Centrerad-kort-layout för auth-sidor (login, register, byt-losenord,
 * aktivera, invitations, waiting-approval). Använder befintliga
 * komponentklasser (.card, .form-group, .btn-primary, .alert,
 * .helper-text) — denna sektion lägger bara till sidlayout-wrappers
 * och en handful små utilities. Samma visuella språk på alla 6 så de
 * känns som en familj.
 */
/* ── Fristående sidor (utanför .main-content) — rotorsaksfixen ──────────────
   .standalone-page är den DELADE wrappern för routes utanför SPA-skalet
   (login/register/aktivera m.fl.): samma sidluft-tokens som .main-content →
   EN definition av padding i hela plattformen. Inloggnings-grenen av den
   återkommande padding-buggen kan inte återuppstå: nya fristående sidor
   använder denna klass i stället för att uppfinna egen padding. */
.standalone-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: var(--page-pad-y) var(--page-pad-x);
}

.auth-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  /* Sidluft via delade tokens (var: --space-6/--space-5 hårdkopplat) */
  padding: var(--page-pad-y) var(--page-pad-x);
}

/* Login-vyn: subtil gradient + brand-block ovanför kortet.
   Övriga auth-vyer (register, invitations m.fl.) ärver bas-stilen. */
.auth-page--login {
  flex-direction: column;
  gap: var(--space-6);
  /* Subtil cream→paper-toning med blå accent högst upp — modern och
     lugn, matchar plattformens token-palett (--blue, --cream). */
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(37,99,235,.07) 0%, transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2);
}
.auth-brand__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(37,99,235,.45);
  letter-spacing: -1px;
}
.auth-brand__text { line-height: 1.2; }
.auth-brand__name {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.auth-brand__tag {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin-top: 2px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  /* MEDVETEN AVVIKELSE från .card-defaulten (--card-pad-*): inloggningskortet
     är generösare (28 px, Fortnox/Visma-stil). Regeln definieras efter .card
     och vinner cascaden — ingen dubbelpadding. */
  padding: var(--space-7);
  /* Tryggare skugga + lite extra luft — matchar branschstandarden
     för inloggningskort (Fortnox/Visma-stil). */
  box-shadow: var(--shadow-lg);
}
.auth-card--wide { max-width: 560px; }

.auth-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}
.auth-card__lead {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-5);
}
.auth-card__delrubrik {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
.auth-card__footer-link {
  display: block;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: var(--space-5);
}
.auth-link {
  color: var(--brand);
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }
.auth-link-muted {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: underline;
}

/* Stepper — register-flödets steg 1/2 */
.auth-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
}
.auth-stepper__step--active   { font-weight: 700; color: var(--brand); }
.auth-stepper__step--inactive { color: var(--text-muted); }
.auth-stepper__line           { flex: 1; height: 1px; background: var(--line); }

/* Full-width-variant av .btn — generisk */
.btn-block { width: 100%; justify-content: center; }

/* Action-rad: backbutton + primärknapp */
.auth-action-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.auth-action-row .btn-block { flex: 1; }

/* Module-väljare (register, invitations) */
.auth-module-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--surface-inset);
}
.auth-module-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
  padding: var(--space-2) 0;
}
.auth-module-row__title { font-weight: 500; font-size: var(--fs-sm); }
.auth-module-row__desc  { font-size: var(--fs-eyebrow); color: var(--text-secondary); }

/* Lösenords-checklista (byt-losenord, aktivera) */
.auth-pwd-checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  font-size: var(--fs-eyebrow);
}
.auth-pwd-checklist li {
  color: var(--text-muted);
  padding: 2px 0;
}
.auth-pwd-checklist li.is-ok { color: var(--success); }

/* Status-rad (waiting-approval) */
.auth-status-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.auth-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.auth-status-row:last-child { border-bottom: none; }
.auth-status-row__state--pending  { color: var(--warning); }
.auth-status-row__state--approved { color: var(--success); }
.auth-status-row__state--rejected { color: var(--danger); }

/* Meddelande-box (invitations - inbjudningsmeddelande) */
.auth-message-box {
  background: var(--surface-inset);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

/* Readonly-input (invitation pre-fyllt email) */
.input--readonly {
  background: var(--surface-inset);
  cursor: not-allowed;
}

/* Hjälptext under fält */
.auth-field-hint {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}


/* ─── 59. Detalj-form-mönster (#447 — etapp 3b) ─────────────── *
 *
 * Delas av kunder-detalj + leverantor-detalj (identiska form-mönster:
 * back-link, tabs, form-grid, toggle-knappar, section-headings). Båda
 * sidorna hade tidigare egen injectStyles (F16-fälla) med samma värden
 * — konsoliderat hit. Återanvänd vid framtida liknande form-detaljvyer.
 */

/* Tabs-strip inom form-detalj (Grunduppgifter / Faktureringsuppgifter etc.) */
.detail-form-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}
.detail-form-tabs__btn {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  font-family: var(--font-body);
}
.detail-form-tabs__btn:hover { color: var(--text-primary); }
.detail-form-tabs__btn.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Form-grid — två-kolumns layout med valbar 3-kolumns variant */
.detail-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-7);
}
.detail-form-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.detail-form-grid--tight { gap: var(--space-3) var(--space-6); }
.detail-form-grid__full { grid-column: 1 / -1; }

/* Sektionsrubrik inom grid:en (Betalinformation, Bokföring etc) */
.detail-form-grid__section {
  grid-column: 1 / -1;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  margin: var(--space-1) 0 0;
}

/* Toggle-knappgrupp (Ja/Nej, Aktiv/Inaktiv etc) */
.detail-form-toggle-group {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.detail-form-toggle-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--surface-card);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  border-right: 1px solid var(--line);
}
.detail-form-toggle-btn:last-child { border-right: none; }
.detail-form-toggle-btn.is-active {
  background: var(--brand);
  color: var(--paper);
}

/* Postnummer + ort på samma cell (smal postnr-prefix) */
.detail-form-postnr-ort {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-3);
}

/* Action-rad i sidhuvudet (Spara/Avbryt/Radera) */
.detail-actions-bar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Inline alert med marg under (för spara-feedback) */
.detail-form-alert { margin-bottom: var(--space-4); }


/* ─── 60. Anläggningsregister-modal (#447 — etapp 3b) ──────── */
.anl-modal               { max-width: 540px; }
.anl-form-group--big     { flex: 2; }
.anl-form-group--small   { flex: 1; }
.anl-cell-konto-info     { font-size: var(--fs-eyebrow); }
.anl-row-actions         { display: flex; gap: var(--space-1); }
.anl-actions-col         { width: 80px; }
.anl-checkbox-row        { align-items: center; gap: var(--space-6); }
.anl-checkbox-label      { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.anl-error               { margin-top: var(--space-2); }
/* Direktavdrag (Fas 2): auto-förslagsbanner i utkast-vyn */
.anl-direkt-forslag      { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }

/* Skattemässig avskrivning (Fas 3) */
.anl-skatt-arvaljare     { min-width: 140px; }
.anl-skatt-rad           { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.anl-skatt-rad:last-child { border-bottom: none; }
.anl-skatt-rad--sum      { font-weight: 600; border-top: 1px solid var(--border); border-bottom: none; margin-top: var(--space-1); padding-top: var(--space-3); }
.anl-skatt-regler        { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.anl-skatt-vald          { border: 2px solid var(--brand); }
.anl-skatt-badge         { display: inline-block; font-size: 12px; font-weight: 600; color: var(--white); background: var(--brand); border-radius: 999px; padding: 2px 8px; margin-left: var(--space-2); }
.anl-skatt-ib-rad        { align-items: end; }
.anl-skatt-ib-spara      { display: flex; align-items: flex-end; }
@media (max-width: 640px) {
  .anl-skatt-regler      { grid-template-columns: 1fr; }
}
.stats-grid--3-anl       { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--space-6); }
@media (max-width: 540px) {
  /* På smala viewports stackar de 3 stat-korten under varandra istället
     för att spränga skärmen i sidled (375px iPhone-SE-baseline). */
  .stats-grid--3-anl     { grid-template-columns: 1fr; }
}

/* ── Detaljvy för enskild anläggningstillgång (PR #535) ────────────── */
.anl-row-clickable       { cursor: pointer; }
.anl-row-clickable:hover { background: var(--surface-inset); }
.anl-detalj-card         {
  padding:       var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.anl-detalj-h            {
  font-size:   var(--fs-lg);
  font-weight: 600;
  margin:      0 0 var(--space-3) 0;
}
.anl-detalj-actions      {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  margin: var(--space-4) 0;
}
/* Konto-fält: bara EN form-group per rad (autocomplete-input). Fältet
   visar "nr – namn" i vilo, växlar till bara nr vid fokus.
   PR #538 tog bort den dubblerade "Bokförs på"-eko-raden — input
   visar nu valt konto med namn direkt. */
.anl-konto-rad           { align-items: flex-end; gap: var(--space-4); }
.anl-konto-input-group   {
  position: relative;
  /* Långa kontonamn ska inte spränga viewport på mobil 375px. text-overflow
     på input går via white-space + overflow när fältet inte är i fokus —
     vid fokus visar webbläsaren ändå hela texten i edit-läget. */
  max-width: 100%;
}
.anl-link                { color: var(--brand); text-decoration: underline; }

/* Kategori-tabb i inställningar (PR #541) */
.anl-kat-card             { margin-bottom: var(--space-4); }
.anl-kat-actions          { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
.installningar-card-footer { display: flex; justify-content: flex-end; margin-top: var(--space-3); }

/* Anläggningsnummer-prefix (PR #541) */
.anl-nummer-prefix { color: var(--text-secondary); font-weight: 500; font-size: 0.85em; }

/* Bokslut-flik (BOKSLUT_SLUTFIX): label + "Återställ till standard"-länk på
   samma rad. flex-wrap så det inte klipps på mobil 375px. */
.bsk-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.bsk-reset { font-size: var(--fs-sm); white-space: nowrap; }
.th--nummer        { width: 56px; }

/* Avskrivningsvyns per-tillgång preview-tabell (#544) — kompakt så
   många tillgångar får plats. font-size matchar fs-sm för täthet. */
.avskr-preview-table td,
.avskr-preview-table th { font-size: var(--fs-sm); }

/* Las-banner när avskrivning påbörjats (#545 Del 3) — informerar om
   att vissa fält är låsta. Disabled-fält ärver Browser-default-graytone. */
.anl-las-banner { margin-bottom: var(--space-4); }

/* Lev-faktura → anläggning-matchnings-banner (#547 Del 2) */
.lf-anl-matchningar  { margin: var(--space-3) 0; }
.lf-anl-banner       {
  background:    var(--surface-inset);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  padding:       var(--space-3) var(--space-4);
}
.lf-anl-rad {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  gap:            var(--space-3);
  padding-top:    var(--space-2);
  flex-wrap:      wrap;
}
.lf-anl-rad__info { font-size: var(--fs-sm); }

/* Lager-spegeln av bannern ovan (diagnos DEL D, #695 = mall): samma
 * banner/rad-klasser återanvänds; detta är inline-fälten som lagrets
 * ifyllnad behöver — anläggningen navigerar till ett utkastformulär i
 * stället. FLERRADS-läget: en .lm-rad per artikel (en klumprad på lager-
 * kontot kan bära flera artiklar) med BELOPP per rad (à-pris/total —
 * bara varukostnaden, frakt hålls utanför lagervärdet). */
.lf-lager-rad { display: block; }
.lm-rad {
  display:     flex;
  align-items: flex-end;
  gap:         var(--space-3);
  flex-wrap:   wrap;
  margin-top:  var(--space-2);
}
.lm-rad .lm-artikel { min-width: 220px; }
.lm-rad .lm-antal   { width: 100px; }
.lm-rad .lm-belopp  { width: 150px; }
.lm-kvar { font-weight: 600; }
@media (max-width: 640px) {
  .lm-rad { flex-direction: column; align-items: stretch; }
  .lm-rad .lm-antal, .lm-rad .lm-belopp { width: 100%; }
}

/* Status-badges (#546 Fas 4a) — visas bredvid benämning i lista och
   som etikett i detaljvyn. Färg på intent: grå (inactive), röd-mjuk
   (scrapped/sold), gul (written_down). */
.anl-status-badge {
  display:        inline-block;
  margin-left:    var(--space-2);
  padding:        2px 8px;
  border-radius:  10px;
  font-size:      var(--fs-eyebrow);
  font-weight:    600;
  text-transform: none;
  vertical-align: middle;
}
.anl-status-scrapped { background: var(--danger-soft); color: var(--danger-deep); }
.anl-status-sold     { background: var(--success-soft); color: var(--success-deep); }
.anl-status-written  { background: var(--warning-soft); color: var(--warning-deep); }
.anl-status-inactive { background: var(--surface-inset); color: var(--text-secondary); }

/* Status-pill — fem-stegs livscykelstatus i lista + detaljvy (delad
   härledning i lib/anlaggning-status.js). Variant mappar på samma
   intent-tokens som row--variant-systemet. */
.anl-status-pill {
  display:        inline-block;
  padding:        2px 8px;
  border-radius:  10px;
  font-size:      var(--fs-eyebrow);
  font-weight:    600;
  white-space:    nowrap;
  vertical-align: middle;
}
.page-title .anl-status-pill { margin-left: var(--space-2); }
.anl-status-pill--success { background: var(--success-soft); color: var(--success-deep); }
.anl-status-pill--warning { background: var(--warning-soft); color: var(--warning-deep); }
.anl-status-pill--neutral { background: var(--surface-inset); color: var(--text-secondary); }

/* Avyttrad rad (sold/scrapped) — hela raden gråas, samma dämpning som
   låsta fält i detaljvyn (#544). Fortfarande klickbar (öppnar historik). */
.anl-row-avyttrad td { color: var(--text-secondary); }
.anl-row-avyttrad .cell-title { color: var(--text-secondary); font-weight: 400; }
.anl-row-avyttrad { background: var(--surface-inset); }
.anl-row-avyttrad:hover { background: var(--hover-tint); }

/* Avyttrings-knappraden i Grunduppgifter (flyttad från egen box) — ligger
   under Anteckningar, högerställda knappar med förklarande hjälptext. */
.anl-avyttring-rad {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  gap:            var(--space-3);
  flex-wrap:      wrap;
  margin-top:     var(--space-3);
  padding-top:    var(--space-3);
  border-top:     1px solid var(--line);
}
.anl-avyttring-knappar { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Tabbar i detaljvyn (PR #536) — egna URL:er, browser-back funkar. */
.anl-tabs {
  display:        flex;
  gap:            var(--space-1);
  border-bottom:  1px solid var(--line);
  margin-bottom:  var(--space-4);
}
.anl-tab {
  padding:        var(--space-2) var(--space-4);
  color:          var(--text-secondary);
  text-decoration: none;
  border-bottom:  2px solid transparent;
  font-weight:    500;
  margin-bottom:  -1px;
}
.anl-tab:hover { color: var(--text-primary); }
.anl-tab--active {
  color:          var(--brand);
  border-bottom-color: var(--brand);
}
/* Mobil-fix (docs/BOKSLUT_MASTER_DETAIL.md, generalisering av tabs-mobile.js):
   samma <select>-ersättning som .tabs (style.css) — måste stå EFTER
   .anl-tabs-regeln ovan (samma fil) för att vinna cascaden, eftersom
   components.css laddas efter style.css. */
@media (max-width: 640px) {
  .anl-tabs { display: none; }
}

/* ── Avskrivningsvy (#/avskrivningar) ────────────────────────────── */
/* Den gamla punkt-paddingen (var(--space-5) var(--space-6)) är RENSAD —
   .card har numera samma padding som DEFAULT via --card-pad-* (rotorsaks-
   fixen, docs/KORT_INRE_PADDING_DIAGNOS.md), så egenlösningen var redundant.
   Kvar är bara stegens vertikala rytm. */
.avskr-step                 {
  margin-bottom: var(--space-4);
}
.avskr-step-title           {
  font-size:    var(--fs-lg);
  font-weight:  600;
  margin:       0 0 var(--space-3) 0;
}
.avskr-check-col            { width: 36px; text-align: center; }
.avskr-asset-toolbar        {
  display:      flex;
  gap:          var(--space-2);
  margin-bottom: var(--space-3);
}
.avskr-future-warning       { margin-top: var(--space-3); }
.avskr-preview              { margin-top: var(--space-4); }
.avskr-preview-summary      {
  background:    var(--surface-card);
  border:        1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:       var(--space-4);
  margin-bottom: var(--space-4);
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  gap:           var(--space-3);
  flex-wrap:     wrap;
}
.avskr-preview-total        { display: flex; flex-direction: column; gap: var(--space-1); }
.avskr-preview-meta         { color: var(--text-muted); font-size: var(--fs-sm); }
.avskr-preview-h            {
  font-size:   var(--fs-md);
  font-weight: 600;
  margin:      var(--space-4) 0 var(--space-2) 0;
}
.avskr-confirm-actions      {
  margin-top: var(--space-4);
  display:    flex;
  justify-content: flex-end;
}


/* ─── 61. Tidrapporter-detalj (#447 — etapp 3b) ────────────── *
 *
 * Konsult-detaljvy: status-info, summering, godkänn/avvisa-knappar,
 * kalender-edit-modal. 51 inline-styles + 23 hex konsoliderade.
 */
.trd-page-header           { margin-bottom: var(--space-3); }
.trd-title                 { font-size: var(--fs-h3); margin: 0 0 var(--space-1); }
.trd-meta-row              { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-1); }
.trd-meta-row--last        { margin-bottom: var(--space-4); }
.trd-status-paid           { margin-top: var(--space-2); }   /* alert--warning förstärks via danger-overlay */
.trd-status-paid.alert     { background: var(--danger-soft); border-left: 4px solid var(--danger); }
.trd-status-approved-info  { font-size: var(--fs-sm); color: var(--success-deep); }
.trd-status-rejected.alert { margin-top: var(--space-2); }
.trd-reopen-hint.alert     { margin-top: var(--space-2); font-size: var(--fs-sm); }

.trd-summary-card          { padding: var(--space-4) var(--space-5); }
.trd-summary-header        {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--space-2);
}
.trd-summary-row           { display: flex; justify-content: space-between; padding: 3px 0; }
.trd-summary-total         {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-2);
  margin-top: var(--space-1);
  border-top: 1px solid var(--border);
  font-weight: 600;
}
.trd-summary-empty         { color: var(--text-muted); margin: 0; }

.trd-action-bar            { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* Kalender-modal */
.trd-kal-overlay           {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 1000;
}
.trd-kal-box               {
  background: var(--surface-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
}
.trd-kal-header            {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3);
  position: sticky; top: 0;
  background: var(--surface-card);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.trd-kal-title             { font-size: var(--fs-lg); margin: 0; }
.trd-kal-subtitle          { font-size: var(--fs-eyebrow); color: var(--text-muted); margin-top: 2px; }
.trd-kal-banner.alert      { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.trd-kal-banner--erroneous { background: var(--warning-soft); border-left: 4px solid var(--warning-deep); padding: var(--space-3); }
.trd-kal-banner__title     { margin-bottom: var(--space-2); }
.trd-kal-banner__hint      { font-size: var(--fs-eyebrow); color: var(--warning-deep); margin-top: var(--space-2); }

.trd-bulk-section          {
  margin: 0 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-inset);
}
.trd-bulk-section__summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.trd-bulk-grid             {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}
.trd-bulk-grid__full       { grid-column: span 2; display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.trd-bulk-input            { width: 100%; padding: var(--space-1); font-size: var(--fs-sm); }
.trd-bulk-fill-btn         { width: 100%; margin-top: var(--space-2); }
.trd-bulk-hint             { font-size: var(--fs-eyebrow); color: var(--text-muted); margin: var(--space-2) 0 0; }

.trd-per-day-hint          { font-size: var(--fs-eyebrow); color: var(--text-muted); margin: 0 0 var(--space-2); }
.trd-day-rows              { font-size: var(--fs-sm); }
.trd-day-row               {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border);
}
.trd-day-row--weekend      { background: var(--surface-inset); }
.trd-day-row__label        { min-width: 60px; font-size: var(--fs-sm); }
.trd-day-row__dow          { color: var(--text-muted); }
.trd-hours-input           { width: 65px; font-size: var(--fs-sm); padding: var(--space-1); }
.trd-leave-select          { flex: 1; font-size: var(--fs-sm); padding: var(--space-1); }
.trd-save-btn-sm           { font-size: var(--fs-eyebrow); padding: var(--space-1) var(--space-2); }
.trd-erroneous-badge       {
  font-size: var(--fs-eyebrow);
  color: var(--danger-deep);
  background: var(--danger-soft);
  padding: 2px var(--space-2);
  border-radius: var(--radius);
  margin-left: var(--space-1);
}

/* Avvisa-modal (centrerad, fast bredd) */
.trd-avvisa-overlay        {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.trd-avvisa-box            {
  background: var(--surface-card);
  border-radius: var(--radius);
  padding: var(--space-6);
  width: 100%; max-width: 480px;
  margin: var(--space-4);
}
.trd-avvisa-title          { font-size: var(--fs-md); margin: 0 0 var(--space-3); }
.trd-avvisa-lead           { font-size: var(--fs-md); color: var(--text-primary); margin: 0 0 var(--space-3); }
.trd-avvisa-textarea       {
  width: 100%; padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-md);
}
.trd-avvisa-actions        { display: flex; gap: var(--space-2); margin-top: var(--space-4); justify-content: flex-end; }


/* ─── 62. Medlemmar + medlems-modal (#449 — etapp 3b-2) ─────── *
 *
 * /medlemmar-sidan: medlemslista, pending-inbjudningar, invite-modal,
 * hantera-medlem-modal med farliga åtgärder. 36 inline-styles + 13
 * hex konsoliderade. RBAC-flöden orörda (server-guards är solida —
 * sista-ägare, self-demote, promote-demoterar-andra).
 */
.mlm-card-spaced       { margin-bottom: var(--space-4); }
.mlm-section-title     { margin-top: 0; }
.mlm-status-active     { color: var(--text-muted); font-size: var(--fs-eyebrow); }
.mlm-status-inactive   {
  background: var(--danger-soft);
  color: var(--danger-deep);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill, 8px);
  font-size: var(--fs-eyebrow);
}

/* Modal-innehåll (invite + hantera-medlem) — använder standard
 * .modal--md från sektion #56, ingen egen wrap-klass behövs (#450). */
.mlm-modules-box       {
  padding: var(--space-3);
  background: var(--surface-inset);
  border-radius: var(--radius);
}
.mlm-module-label      {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.mlm-error-text        { color: var(--danger); font-size: var(--fs-sm); }

/* Farliga åtgärder-zon (botten av hantera-medlem-modal) */
.mlm-danger-zone       {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--danger-soft);
}
.mlm-danger-zone__title{
  margin: 0 0 var(--space-2);
  color: var(--danger-deep);
  font-size: var(--fs-md);
}
.mlm-danger-zone__hint {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.mlm-danger-zone__hint--italic {
  font-style: italic;
  margin: 0;
}
.mlm-danger-zone__buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Deactivate-knappen (varning) + Activate-knappen (success) */
.mlm-btn-deactivate {
  background: var(--warning-soft);
  color: var(--warning-deep);
  border: 1px solid var(--warning);
}
.mlm-btn-deactivate:hover {
  background: var(--warning);
  color: var(--paper);
}
.mlm-btn-activate {
  background: var(--success-soft);
  color: var(--success-deep);
  border: 1px solid var(--success);
}
.mlm-btn-activate:hover {
  background: var(--success);
  color: var(--paper);
}

/* Bredbordstabell-rad klickbar */
.mlm-row-clickable     { cursor: pointer; }


/* ─── 63. Rapport-tabeller (#452 — etapp 3c-1) ────────────────── *
 *
 * Resultaträkning + Balansräkning (ÅRL-uppställning). injectStyles-
 * F16-fällan i rapporter.js städad — alla regler hit. Skärm-CSS,
 * INTE print (jämför drilldown som whitelistades för A4-print).
 *
 * Tabellerna har sektion-rubriker (colspan), delsumma-rader,
 * mellansumma-rader (RÖRELSERESULTAT etc.) och totalsummor
 * (SUMMA TILLGÅNGAR etc.). Stack-stil olämplig pga colspan på
 * sektionsrader → mobil-strategin är att DÖLJA jämförelse-kolumner
 * via data-mobile="hide" och behålla horisontell layout. Kontorad
 * + belopp prioriteras.
 */
/* Framstegsrad för rapport-körning: spinner + "Arbetar… (Xs)" + Avbryt. */
.rp-arbetar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  color: var(--text-secondary);
}

.rapport-table {
  width: 100%;
  font-size: var(--fs-sm);
}
.rapport-table thead th    { padding: var(--space-2) var(--space-4); }
.rapport-table tbody td    { padding: var(--space-2) var(--space-4); }
.rapport-table td.text-right { white-space: nowrap; }

/* Namn-kolumnen får ellipsis när trångt — desktop håller 320px
 * max, mobil 160px (skärmen ger inte plats för långa namn). */
.rapport-table tbody td:nth-child(2) {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Klickbara konto-rader → drilldown (öppnar i ny flik) */
.rapport-rad-klickbar         { cursor: pointer; }
.rapport-rad-klickbar:hover   { background: var(--surface-inset); }

/* Sektion-rubrik (nettoomsättning, ravaror, personal etc.) */
.rapport-section-row          {
  background: var(--surface-inset);
  font-weight: 600;
}

/* Delsumma per sektion (italic + bottom-border) */
.rapport-section-sum          {
  font-style: italic;
  border-bottom: 1px solid var(--border);
}

/* Mellansumma (RÖRELSERESULTAT, FINANSNETTO, etc.) */
.rapport-mellan-row           {
  font-weight: 700;
  border-top: 2px solid var(--border);
  background: var(--surface-inset);
}

/* Balans-rapportens huvudgrupp-rubrik (Anläggningstillgångar etc.) */
.rapport-huvud-row            {
  font-weight: 700;
  background: var(--surface-inset);
}
.rapport-huvud-row td:first-child { padding-top: var(--space-3); }

/* Huvudgrupp-summa (Summa anläggningstillgångar etc.) */
.rapport-huvud-sum            {
  font-weight: 700;
  border-top: 2px solid var(--border);
}

/* Totalsumma (SUMMA TILLGÅNGAR / SUMMA EGET KAPITAL OCH SKULDER) */
.rapport-total-row            {
  font-weight: 700;
  border-top: 3px double var(--border);
  background: var(--surface-inset);
}

/* Tomrum mellan sektioner (ej-klassificerade-skiljare) */
.rapport-spacer-cell          { padding-top: var(--space-3); }

/* Sammanfattnings-kort (Årets resultat / Beräknat resultat) */
.rapport-summary-card         {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}
.rapport-summary-card__label  { font-size: var(--fs-md); font-weight: 600; }
.rapport-summary-card__value  { font-size: var(--fs-md); font-weight: 600; }
.rapport-summary-card__value--positive { color: var(--success); }
.rapport-summary-card__value--negative { color: var(--danger); }
.rapport-summary-card__value-block {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}
.rapport-summary-card__value-block .main {
  font-size: 22px;
  font-weight: 700;
}
.rapport-summary-card__value-block .sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Info-rad (Bokfört årets resultat 8990–8999) */
.rapport-info-row             {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rapport-info-row__label      { font-size: var(--fs-md); color: var(--text-muted); }
.rapport-info-row__value      { font-size: var(--fs-md); font-weight: 600; }

/* Mobil: dölj jämförelse-kolumner via data-mobile="hide" + dölj
 * delsumme-rader-belopp som inte motsvarar synlig kolumn. Behåller
 * horisontell tabell-layout (colspan funkar inte med stack). */
@media (max-width: 760px) {
  .rapport-table th[data-mobile="hide"],
  .rapport-table td[data-mobile="hide"] { display: none; }
  .rapport-table thead th    { padding: var(--space-2) var(--space-3); }
  .rapport-table tbody td    { padding: var(--space-2) var(--space-3); }
  .rapport-table tbody td:nth-child(2) { max-width: 160px; }

  .rapport-summary-card      { gap: var(--space-3); flex-wrap: wrap; }
  .rapport-summary-card__value-block .main { font-size: var(--fs-h3); }
}


/* ─── 64. IB-diff-banner + räkenskapsår-actions (#454) ─────── */
.ib-diff-banner {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.ib-diff-banner__msg { flex: 1; min-width: 240px; }

.ry-action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}


/* ─── 65. Serie-info-ikon (#455) ──────────────────────────── */
.serie-info-ikon {
  margin-left: var(--space-1);
  color: var(--info);
  cursor: help;
  font-size: var(--fs-sm);
}


/* ─── 66. Inkorgen — presentationsskal (etapp 3c-2 PR A) ───────
 *
 * Bryter ut inline-styles ur inkorg.js till tokens/komponentklasser.
 * Logiken (AI-triage, blob-upload, routning, arkivering) är orörd —
 * bara presentationsskalet städas. Arkivera-modalen ärver storlek
 * från .modal--md (#56). Preview-modalens egna .inkorg-preview-modal-
 * stilar (style.css) lämnas orörda — viewport-fit-flex-mönstret är
 * specifikt för dokumentförhandsvisning. */

/* Upload-kortet runt dropzonen. */
.inkorg-upload-card { margin-bottom: var(--space-4); }

/* Dropzonen — drag-och-släpp-yta + klickbar. */
.inkorg-dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--surface-page);
}
.inkorg-dropzone--aktiv {
  border-color: var(--brand);
  background: rgba(37, 99, 235, .06);
}
.inkorg-dropzone__ikon {
  width: 36px;
  height: 36px;
  color: var(--brand);
  margin-bottom: var(--space-2);
}
.inkorg-dropzone__titel {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.inkorg-dropzone__hint {
  font-size: 12.5px;
  color: var(--text-secondary);
}
.inkorg-dropzone__hint-action {
  color: var(--brand);
  text-decoration: underline;
}
.inkorg-dropzone__input { display: none; }

/* Upload-status — staplade alert-rader under dropzonen. */
.inkorg-upload-status { margin-top: var(--space-3); }
.inkorg-upload-status .alert { margin-bottom: var(--space-1); }
.inkorg-upload-status__link {
  color: inherit;
  text-decoration: underline;
}
/* Retry-knappen sitter längst till höger i alert-raden — synlig först
 * när upload misslyckats (PR B). */
.upl-retry {
  margin-left: auto;
  padding: 0;
  font-size: var(--fs-sm);
}

/* Klickbar yta i listraden — öppnar preview. */
.inkorg-preview-trigger { cursor: pointer; }

/* Tom-state ("Allt är hanterat"). */
.inkorg-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-5);
}
.inkorg-empty-state__ikon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  opacity: .5;
  color: var(--text-secondary);
}
.inkorg-empty-state__titel {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.inkorg-empty-state__text { color: var(--text-secondary); }

/* Preview-modalens rubrik — ellipsis vid långa filnamn. */
.inkorg-preview-modal__titel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Fallback för icke-stödda mime-typer. */
.inkorg-preview-fallback {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
}

/* PDF-fallback för mobila webbläsare (iframe renderas tomt). */
.inkorg-preview-mobile-pdf {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.inkorg-preview-mobile-pdf__msg {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.inkorg-preview-mobile-pdf__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Dämpad radera-knapp i listrad + modal-fot. */
.btn-radera { color: var(--text-secondary); }

/* Arkivera-modalen — storleken kommer från .modal--md. */
.inkorg-arkiv-modal__inledning {
  margin-bottom: var(--space-3);
  font-size: 13px;
}
.inkorg-arkiv-modal__faltgrupp { margin-bottom: var(--space-3); }
.inkorg-arkiv-modal__faltgrupp:last-child { margin-bottom: 0; }
.inkorg-arkiv-modal__label {
  font-weight: 600;
  font-size: 12.5px;
}
.inkorg-arkiv-modal__label-extra {
  font-weight: 400;
  color: var(--text-secondary);
}
.inkorg-arkiv-modal__hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.inkorg-arkiv-modal__input,
.inkorg-arkiv-modal__textarea {
  width: 100%;
  font-size: 13px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  box-sizing: border-box;
}
.inkorg-arkiv-modal__textarea { resize: vertical; }


/* ─── 67. Global vertikal komprimering — desktop bas-skala ───────
 *
 * Stramare DELAD skala för alla generella ytor (listsidor,
 * inställningar, formulärsidor utanför .detail-page, dashboard)
 * så att kommande etapp 3-sidor ärver tätheten utan att klämma de
 * redan-strama detaljvyerna.
 *
 * SCOPE: @media (min-width: 761px) — mobil OFÖRÄNDRAD. Mobil
 * tappar inte vertikal luft (#427-skyddet håller tap-targets +
 * iOS-zoom-skydd intakta).
 *
 * SPECIFICITET: bas-klasserna (.page-header, .card-body, .form-
 * group, etc.) har specificitet 0,1,0. .detail-page-overriderna
 * i sektion #56 har 0,2,0 → vinner alltid → detail-skalan
 * (#413/#429/#430) är OFÖRÄNDRAD.
 *
 * BEHÅLLNINGAR (explicit oförändrade):
 *   • 44 px tap-targets (input/select/btn min-height-regler).
 *   • Bas-input-padding (9 px 12 px) → inga klämda fält.
 *   • Label margin-bottom (5 px global) → klick-yta intakt.
 *   • Löptext-line-height (1.5 / 1.45) → läsbarhet orörd.
 *
 * RIKTMÄRKE: en typisk bas-sida tappar ~30–40 % vertikal luft
 * över första fold:en. Skalan blir konsistent: detail > base ≈ 1,3×
 * tätare än landning, men landning fortfarande lite luftigare än
 * detail (önskat — bas-sidor är inte arbetsverktyg på samma sätt).
 *
 * FLAGGA: .form-group margin-bottom landar på --space-3 (12 px) i
 * detta steg. Om det fortfarande känns luftigt efter test —
 * nästa snäpp är 10 px (snappas till samma --space som tabellen
 * eller introducera --space-2-5 om mönstret återkommer).
 */
@media (min-width: 761px) {
  /* Page-header: störst luftbespariing (32 → 20 px = −12 px). */
  .page-header { margin-bottom: var(--space-5); }

  /* Card-yttre och inre padding: 20 24 → 16 20. */
  .card-header { padding: var(--space-4) var(--space-5); }
  .card-body   { padding: var(--space-4) var(--space-5); }

  /* Form-rytm: 16 → 12 px per grupp, 20 → 16 px per sektion,
   * 24 → 20 px mellan sektioner. */
  .form-group { margin-bottom: var(--space-3); }
  .form-section { margin-top: var(--space-4); }
  .form-section + .form-section { margin-top: var(--space-5); }

  /* Dashboard: stats-grid 32 → 24 px bottom, 20 → 16 px gap. */
  .stats-grid {
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  .stat-card { padding: var(--space-5); }

  /* Två-kolumn-layout: 24 → 20 px gap. */
  .grid-2 { gap: var(--space-5); }
}


/* ─── 68. Min profil (#/min-profil) ─────────────────────────────
 *
 * Personliga uppgifter — namn/mejl (readonly), telefon (editerbar)
 * + spara-knapp med inline-status. Lösenord-byte länkar till
 * befintliga /byt-losenord. Telefon-fältet är PR 1 i lön-tab-
 * borttagningsplanen — AGI-kontakt (PR 2) hämtas härifrån. */
.min-profil-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.min-profil-status--ok  { color: var(--success-deep); }
.min-profil-status--fel { color: var(--danger-deep); }


/* ─── 69. Anställda — org-inställning i header (#/anstallda) ────
 *
 * "Standardutbetalningsdag för nya anställda" är en legitim org-
 * inställning (förvalt värde för anstallda-form.js när nya anställda
 * skapas). PR 4 — lön-tab-borttagningen — flyttar UI:t hit från den
 * borttagna lön-tabben. Liten kompakt rad ovanför listan, inte ett
 * helt kort. */
.anstallda-orgsetting {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.anstallda-orgsetting__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.anstallda-orgsetting__input {
  width: 70px;
  flex: 0 0 auto;
}
.anstallda-orgsetting__hint {
  flex-basis: 100%;
  margin-top: 0;
}
.anstallda-orgsetting__status--ok  { color: var(--success-deep); }
.anstallda-orgsetting__status--fel { color: var(--danger-deep); }

/* Anställd-listans sökruta + kolumnsortering. Speglar transaktioner-sökets
 * placering i .card-header och bokföringslistans th[data-sort]-mönster. */
.anstallda-search-input { width: 240px; margin: 0; }
.anstallda-table thead th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--space-6);
  transition: color .12s ease;
}
.anstallda-table thead th[data-sort]:hover { color: var(--text-primary); }
.anstallda-table thead th[data-sort]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}
.anstallda-table .sort-indicator {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity .12s ease;
  color: var(--text-secondary);
}
.anstallda-table thead th[data-sort]:hover .sort-indicator { opacity: .45; }
.anstallda-table thead th[aria-sort] .sort-indicator { opacity: 1; color: var(--info-deep); }
@media (max-width: 600px) {
  .anstallda-search-input { width: 100%; }
}


/* ─── 70. Inställningar — etapp 3c PR A städstilar ──────────────
 *
 * Stöd för Företag / Moduler / Import-Export-tabbarna. Bryter ut
 * inline-styles till klasser så att kommande PR B/C (övriga tabbar)
 * kan ärva samma mönster.
 *
 * orgNr-låset (BFL-identitet) hanteras på två lager: UI-readonly +
 * server-422 i PUT /api/orgs/current. CSS-readonly-stilen kommer
 * från det globala input:read-only-mönstret som etablerades i #465. */

/* Full-bredds-row i .form-grid-2 — ersätter style="grid-column:1/-1". */
.form-grid-2__full { grid-column: 1 / -1; }

/* Faktureringsinställningar (bokföringsfliken) — grupperade fält. */
.form-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.form-fieldset > legend { padding: 0 var(--space-2); font-weight: 600; font-size: var(--fs-sm); color: var(--text-secondary); }
.fakt-check { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
/* Mobil 375px: tvåkolumnsrutnätet staplar. */
@media (max-width: 480px) {
  .form-fieldset .form-grid-2 { grid-template-columns: 1fr; }
}

/* Checkbox-rad i form-grid-2 (F-skatt-mönstret): label-flex med
 * top-offset så checkbox-raden hänger ihop med inputs i grid-rytmen. */
.installningar-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  margin-top: var(--space-6);
}

/* Card-header-subtitle (muted-text efter card-title). */
.installningar-card-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Hjälptext över fält-grupper (t.ex. logo-uppladdning). */
.installningar-hjalptext {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

/* Hjälptext under låst fält (orgNr) eller annan kontext-info. */
.installningar-locked-hint {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Logotyp-platshållare (legacy TODO-rad — kvar för bakåtkomp.). */
.logotyp-placeholder {
  padding: var(--space-3);
  background: var(--surface-inset);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-secondary);
}

/* Logotyp-uppladdning i Företag-tabben. Tre varianter (wide/square/icon)
   i grid på desktop, staplade på mobil. */
.logotyp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.logotyp-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
}
.logotyp-block__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.logotyp-block__hint {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  line-height: 1.4;
  min-height: 2.2em;  /* lika höjd över blocken */
}
.logotyp-preview {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.logotyp-preview img {
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
}
/* Variant-specifika preview-mått matchar varianternas naturliga form. */
.logotyp-preview--wide   { width: 100%;  height: 80px;  }
.logotyp-preview--square { width: 120px; height: 120px; margin: 0 auto; }
.logotyp-preview--icon   { width: 80px;  height: 80px;  margin: 0 auto; }
.logotyp-tom {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--space-2);
}
.logotyp-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.logotyp-file-input {
  /* Visuellt dolt men tillgängligt (klick via <label for>) */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.logotyp-knapp { cursor: pointer; }
.logotyp-knapp-radera {
  background: var(--danger-soft);
  color: var(--danger-deep);
  border: 1px solid var(--danger);
}
.logotyp-knapp-radera:hover {
  background: var(--danger);
  color: var(--paper);
}
.logotyp-status { width: 100%; }
.logotyp-status:empty { display: none; }

/* Val av logo-variant för kundfaktura-rendering. Ligger under
   varianten-griden så valet uppenbart hör ihop med dem. */
.logotyp-faktura-val {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--surface-inset);
  border-radius: var(--radius);
}
.logotyp-faktura-val__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.logotyp-faktura-val__radios {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.logotyp-faktura-val__radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.logotyp-faktura-val__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .logotyp-grid { grid-template-columns: 1fr; }
  .logotyp-actions { width: 100%; }
  .logotyp-faktura-val__radios { flex-direction: column; gap: var(--space-2); }
}

/* Moduler-tabb — request-list + status-meta. */
.modules-request-list {
  padding: var(--space-3);
  background: var(--surface-inset);
  border-radius: var(--radius);
}
.modules-request-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-1) 0;
  cursor: pointer;
}
.modules-request-row__checkbox { margin-top: 3px; flex: 0 0 auto; }
.modules-request-row__desc {
  font-size: 12px;
  color: var(--text-secondary);
}
.modules-request-error {
  color: var(--danger-deep);
  font-size: 13px;
  min-height: 1em;
}
.modules-status-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.modules-lead { font-size: 13px; color: var(--text-secondary); }
.modules-list  { margin-top: var(--space-3); }
.modules-request-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Inställningar — section-rubriker i Import/Export-tabben. */
.installningar-section { margin-top: var(--space-6); }
.installningar-section--divided {
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  margin-top: var(--space-8);
}
.installningar-section__heading {
  font-size: 15px;
  margin: 0 0 var(--space-1);
}
.installningar-section__lead {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0 0 var(--space-3);
}
.installningar-section__hint {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}


/* ─── 71. Inställningar — etapp 3c PR B (Bankkonton/Räkenskapsår/
 *      Periodstängning) ────────────────────────────────────────
 *
 * Bryter ut inline-styles + bygger bk-modalen på den delade .modal-
 * standarden istället för en lokal inline-implementation.
 *
 * VAKTHUNDAR — kommentar:
 *   • Räkenskapsår: handlers/endpoint-anrop (stäng/återöppna/rulla-om-IB)
 *     är OFÖRÄNDRADE — bara klasser/markup byter. Den delade
 *     ib-diff-banner.js-helpern (#458) röras inte.
 *   • Bankkonton: IBAN-/avtals-ID-validering är server-side i
 *     /api/orgs/current/bank-accounts — inga frontend-ändringar i
 *     valideringen. medUpptagen läggs runt mutations-anropen.
 *   • Periodstängning: LIFO-spärren ligger i /api/perioder/stang —
 *     UI:t skickar bara år/månad/reason. Spärren är server-side.
 */

/* Tabell-cell-meddelanden (loading/empty/error i tom tabell). */
.table-cell-message {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-secondary);
}
.table-cell-alert { margin: var(--space-3); }

/* Räkenskapsår-tabben */
.ry-preset-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.ry-preview {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  min-height: 1.2em;
}
.ry-skapa-msg { margin-top: var(--space-3); }
.ry-banner-slot { margin-bottom: var(--space-4); }
.ry-card--lista { margin-top: var(--space-4); }

/* Periodstängning-tabben */
.ps-form-grow { flex: 1; min-width: 200px; }
.ps-ar-input  { width: 120px; }
.ps-stang-msg { margin-top: var(--space-3); }
.ps-card--lista { margin-top: var(--space-4); }
.ps-actions-col { width: 90px; }

/* Bankkonton-tabben — listans tabell + tom-state */
.bk-empty {
  padding: var(--space-5);
  text-align: center;
}
.bk-table th.th--narrow { width: 80px; }              /* fix: selektorn saknade punkt → matchade aldrig */
.bk-table td.td--center { text-align: center; }
.bk-table-actions {
  display: inline-flex;
  gap: var(--space-1);
}

/* Bankkonton-modalen — ärver .modal modal--md för storlek. Det här
 * är 2-col-formgrid INNE i .modal-body. */
.bk-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
@media (max-width: 560px) {
  .bk-modal-grid { grid-template-columns: 1fr; }
}
.bk-modal-grid__full { grid-column: 1 / -1; }
.bk-modal-grid .form-group { margin-bottom: 0; }
.bk-modal-grid .helper-text { margin-top: var(--space-1); }

/* Inline alert i modal-body (#bk-modal-err innan formuläret). */
.bk-modal-err:empty { display: none; }
.bk-modal-err .alert { margin: 0 0 var(--space-3); }

/* Checkbox-rad inom bk-modal (utan top-margin från Företag-tabbens
 * grid-rytm). */
.bk-modal-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* Listrad-klick: ersätter listradsknappar (Ändra/X) — radering bara
 * via modal-detalj (#397-mönstret, skydd för pain.001-data). */
.bk-row { cursor: pointer; }
.bk-row:hover { background: var(--hover-tint); }
.bk-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}


/* ─── 72. Inställningar — etapp 3c PR C (Serier / Std-serie /
 *      Utlägg) + UX-fixar från PR B-test ─────────────────────── */

/* Spara-status-text bredvid spara-knapp — delad av serier-/utlägg-/
 * moduldefaults-footers + ev. fler. */
.spara-status {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-height: 1em;
}
.spara-status--ok  { color: var(--success-deep); }
.spara-status--fel { color: var(--danger-deep); }

/* Card-footer (action-rad i nedre delen av kort). Två varianter:
 *   • bas: margin-top, ingen border (samma kort, andra raden)
 *   • --divided: border-top + padding (avgränsad sektion) */
.installningar-card-footer {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  align-items: center;
}
.installningar-card-footer--divided {
  margin-top: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}

/* Serier-tabellens kolumn-bredder + cell-stil.
   FIX (desktop-PR A): selektorerna saknade punkt (`th--kod` matchar aldrig
   `<th class="th--kod">`) → kolumnerna delade lika på full bredd och sträcktes
   ut. Nu punkt-prefixade + tabell-tak + centrerade kryssrutor + kapat namn-fält
   → tät, läsbar tabell i stället för full-bredds-utsträckning. */
.serier-table               { width: auto; max-width: 720px; }
.serier-table th.th--kod    { width: 60px; }
.serier-table th.th--aktiv  { width: 120px; text-align: center; }
.serier-table th.th--manuell{ width: 180px; text-align: center; }
.serier-table td.td--kod    { font-weight: 600; }
.serier-table td.td--center { text-align: center; }
.serier-table .s-namn       { max-width: 320px; width: 100%; }

/* Utläggskonto-sektionen */
.utlagg-select-wrap { max-width: 420px; }
.utlagg-empty-msg   {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}
.utlagg-empty-msg[hidden] { display: none; }

/* ── ROT/RUT-statusfliken (PR 4) — nyckeltalskort + tabell ── */
.rr-nyckeltal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.rr-nyckeltal__varde { font-size: var(--fs-h2, 1.5rem); font-weight: 700; }
.rr-tabell .rr-valj { width: 36px; }
.rr-tabell .rr-handling { white-space: nowrap; }
@media (max-width: 760px) {
  .rr-tabell .rr-handling { white-space: normal; }
}

/* ROT/RUT-kontots tomma-kontoplan-varning: .alert sätter display:flex som
 * annars ÖVERTRUMFAR hidden-attributet (UA-regeln [hidden]{display:none}
 * förlorar mot klass-display) → en tom gul ruta syntes alltid. Samma
 * skyddsregel som utläggskontots. */
.rotrut-skv-empty-msg[hidden] { display: none; }

/* Inline-alert i kort-body (utan extra margin). */
.installningar-inline-alert { margin: 0; }

/* Modal-footer-split: knappgrupp vänster + höger (PR C bankkonto-
 * radering i modal). */
.modal-footer--split { justify-content: space-between; }
.modal-footer-left,
.modal-footer-right {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}


/* ─── 73. Lön-paketet — skal (etapp 3d) ─────────────────────────
 * Delade markup-mönster som tidigare smutsade lon.js, lon-detalj.js,
 * lon-semesterskuld.js, lon-semesterarsavslut.js och anstalld/lon/*.
 * Inga nya hexar — allt går via tokens. Prefix .lon-* så de inte
 * krockar med andra moduler.
 * ─────────────────────────────────────────────────────────── */

/* Wrappers: konsult-vyns max-bredd och centrering för smal/medium/wide.
 * overflow-x: clip håller wizard-sidor inom viewporten — om en inre
 * tabell/banner/inline-row skulle överrymma så scrollar den inuti sitt
 * eget block (.lon-card--scrollx) i stället för att tvinga page-scroll
 * sidleds. Mobil-säker — matchar #413-standarden från detaljvyerna.
 *
 * --full: bred wizard-layout som nyttjar desktop-yta. Capp:ad vid 1600 px
 * så ultrawide-skärmar inte sträcker rad-längden bortom läsbart. Används
 * av semester-wizards där anställd-tabellen är bred (10+ kolumner). */
.lon-wrap         { max-width: 880px;  overflow-x: clip; }
.lon-wrap--wide   { max-width: 1000px; overflow-x: clip; }
.lon-wrap--narrow { max-width: 640px;  overflow-x: clip; }
.lon-wrap--full   { max-width: 1100px; overflow-x: clip; }   /* desktop-PR A: 1600 var i praktiken otakat på vanliga skärmar */

/* "Eyebrow"-rubrik i lönespec-sektioner (uppercase, dämpad). */
.lon-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-3);
}

/* Padding-utility för kort som inte är .card-header/.card-body. */
.lon-card-pad    { padding: var(--space-4); }
.lon-card-pad-lg { padding: var(--space-6); }
.lon-card--stack { margin-bottom: var(--space-4); }
.lon-card--center {
  padding: var(--space-6);
  text-align: center;
}

/* Inset-tabell (totaler / preview-summor). Mjuk yta, kompakt cell. */
.lon-totals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.lon-totals-table td {
  padding: var(--space-1) 0;
  vertical-align: baseline;
}
.lon-totals-table .lon-totals-table__label { color: var(--text-secondary); }
.lon-totals-table .lon-totals-table__value {
  text-align: right;
  font-weight: 600;
}
.lon-totals-table tr.lon-totals-row--sum td {
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  font-weight: 600;
}
.lon-totals-table .lon-totals-value--ok  { color: var(--success-deep); }
.lon-totals-table .lon-totals-value--warn { color: var(--warning-deep); }

/* Liten textstil (info/hint) återanvänds av många små noter. */
.lon-info-text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.lon-info-text--xs    { font-size: var(--fs-eyebrow); }
.lon-info-text--ok    { color: var(--success-deep); font-weight: 600; }
.lon-info-text--warn  { color: var(--warning-deep); font-weight: 600; }
.lon-info-text--danger{ color: var(--danger-deep);  font-weight: 600; }
.lon-info-text--center{ text-align: center; }
.lon-info-text--stack { margin-top: var(--space-2); }
.lon-info-text--inline{ display: inline; }
.lon-info-text--p1    { padding: var(--space-1) 0; }
.lon-info-text--right { text-align: right; }

/* Lite eyebrow-meta (datatabell hint / per-emp meta). */
.lon-meta-line {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin-top: 2px;
}
.lon-meta-line--warn {
  color: var(--danger-deep);
  margin-top: var(--space-1);
}

/* Per-anställd cell — text-right + small font för dense table. */
.lon-cell--right { text-align: right; font-size: var(--fs-sm); }
.lon-cell--brand { color: var(--brand); }
.lon-cell--ok    { color: var(--success-deep); }
.lon-cell--warn  { color: var(--warning-deep); }
.lon-cell--muted { color: var(--text-secondary); }
.lon-cell--num-input { min-width: 180px; }
.lon-cell--num-input .lon-num-input {
  width: 70px;
  font-size: var(--fs-sm);
}
.lon-cell--num-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.lon-cell--inset { background: var(--surface-inset); }

/* Tabellrad i Semesterskuld-vyn (delim på borderfärg). */
.lon-skuld-row { border-bottom: 1px solid var(--line); }
.lon-skuld-row th,
.lon-skuld-row td { text-align: left; padding: 6px var(--space-1); }
.lon-skuld-row th.lon-skuld-cell--right,
.lon-skuld-row td.lon-skuld-cell--right { text-align: right; }
.lon-skuld-row td.lon-skuld-cell--muted { color: var(--text-secondary); }

/* Klickbar rad (cursor + hover) — list-row light. */
.lon-row-clickable { cursor: pointer; }

/* "Inkomstinfo"-rad i body med fetare text. */
.lon-key-line {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.lon-key-line__date {
  font-size: var(--fs-md);
  font-weight: 600;
}
.lon-key-line__hint {
  color: var(--text-secondary);
  font-size: var(--fs-eyebrow);
  margin-left: var(--space-1);
}

/* Modal-bredder (matchar projektets befintliga modal-sizes #1553). */
.lon-modal--sm { max-width: 480px; }
.lon-modal--md { max-width: 500px; }
.lon-modal--mdp { max-width: 600px; }
.lon-modal--lg { max-width: 640px; }
.lon-modal--xl { max-width: 700px; }

/* Filter-bar med "skjut till höger"-kluster. */
.lon-actionbar {
  margin: var(--space-4) 0;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.lon-actionbar__right {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
}
.lon-actionbar--simple { margin: var(--space-4) 0; }

/* Compact 2-kol grid för "label:värde"-summor (AGI preview). */
.lon-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* Inline-rad (label + chips i radform). */
.lon-inline-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.lon-inline-row--tight { gap: var(--space-2); }

/* Form-rader: "två inputs på samma rad" (start-date + start-time). */
.lon-form-row {
  display: flex;
  gap: var(--space-3);
}
.lon-form-row > .form-group { flex: 1; }
.lon-form-row .lon-flex-1 { flex: 1; }
.lon-form-row .lon-flex-2 { flex: 2; }
.lon-form-row--tight { gap: var(--space-2); }

/* Endags-banner (varning i exp-create) — varning-soft yta.
 * Hidden-läge styrs via [hidden] eller .lon-endags-banner[hidden]. */
.lon-endags-banner {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  color: var(--warning-deep);
  padding: var(--space-3);
  border-radius: 6px;
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}

/* Receipt-rad inom exp-create-modalen. */
.lon-receipt-row {
  border: 1px solid var(--line);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: 6px;
  background: var(--surface-inset);
}
.lon-receipt-row__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}
.lon-receipt-row__body { flex: 1; }
.lon-receipt-row__amount {
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
}
.lon-receipt-row__ok {
  font-size: var(--fs-sm);
  color: var(--success-deep);
  margin-top: var(--space-1);
}
.lon-receipt-row__decl {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Receipt-inline-form (öppnas inom modalen). */
.lon-receipt-form {
  border: 2px solid var(--brand);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
  border-radius: 6px;
  background: var(--info-soft);
}
.lon-receipt-form h4 { margin-top: 0; }

/* Filupload-rad och dess preview (img/PDF-stub). */
.lon-file-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.lon-file-hidden { display: none; }
.lon-file-name {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.lon-file-preview { margin-top: var(--space-2); }
.lon-file-preview img,
.lon-preview-img {
  max-width: 200px;
  max-height: 150px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.lon-preview-img--lg {
  max-width: 300px;
  max-height: 200px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.lon-preview-img--clickable { cursor: pointer; }
.lon-preview-pdf {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: inline-block;
  font-size: var(--fs-sm);
}
.lon-preview-pdf--lg {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

/* "Sammanfattning"-kort på inset-yta. */
.lon-summary-card {
  margin-top: var(--space-4);
  background: var(--surface-inset);
}
.lon-summary-card h3 { margin-top: 0; }

/* Form-sektions-bryt (mileage → utlägg) — överliggande rad. */
.lon-form-section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.lon-form-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

/* Inline-fel (bredvid form-fält / kort), röd liten text. */
.lon-inline-error {
  margin-top: var(--space-2);
  color: var(--danger-deep);
  font-size: var(--fs-sm);
}

/* Granska-modalens dag-/kvittolista. */
.lon-doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lon-doc-list__item {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}
.lon-doc-list__item--row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}
.lon-doc-list__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.lon-doc-list__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-body);
  margin-top: 2px;
}

/* AGI-row submitted-toggle + checkbox-rad. */
.lon-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Avbruten-rad: efterföljande korrigeringslänk. */
.lon-cancelled-hint {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-left: var(--space-2);
}

/* Avvisa-modalens textarea — bredd 100% + sane border. */
.lon-textarea--full {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--fs-body);
}

/* Avvisa-modalen ligger ovanpå granska-modalen. */
.lon-overlay--stacked { z-index: 1100; }

/* Bas-20-triangel (semesterårsavslut). */
.lon-bas20-icon {
  cursor: pointer;
  color: var(--warning);
  font-size: var(--fs-lg);
  margin-left: 6px;
  user-select: none;
}

/* Bubbel-tooltip (semesterårsavslut) — Float position styrs i JS. */
.lon-tooltip-bubble {
  position: absolute;
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 6px var(--space-3);
  border-radius: 4px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  max-width: 240px;
  box-shadow: var(--shadow);
  z-index: 1000;
  white-space: normal;
}

/* Semesterårsavslut "avslutad"-info-kort. */
.lon-avslutad-info {
  padding: var(--space-5);
  background: var(--success-soft);
  border-left: 4px solid var(--success-deep);
  margin-bottom: var(--space-4);
}
.lon-avslutad-info p { margin: 0; }
.lon-avslutad-info p + p { margin-top: var(--space-2); }

/* Avslut-årgångsrad. */
.lon-argang-row {
  font-size: var(--fs-sm);
  padding: 2px 0;
}
.lon-argang-row__exp {
  color: var(--text-secondary);
}

/* Center-loader inom .card. */
.lon-loader {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
}

/* Anställd-vyns "Utbetalas"-hero. */
.lon-utbet-hero {
  background: var(--brand);
  color: var(--paper);
  border-radius: 8px;
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  text-align: center;
}
.lon-utbet-hero__eyebrow {
  font-size: var(--fs-eyebrow);
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lon-utbet-hero__amount {
  font-size: 32px;
  font-weight: 700;
  margin: 6px 0;
  font-family: var(--font-heading);
}
.lon-utbet-hero__date {
  font-size: var(--fs-sm);
  opacity: .9;
}
.lon-utbet-hero__bank {
  font-size: var(--fs-sm);
  opacity: .7;
  margin-top: var(--space-2);
}

/* Anställd-vyns lönespec rad-typer. */
.lon-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-1) 0;
  font-size: var(--fs-body);
}
.lon-row__label { color: var(--text-body); }
.lon-row__value { color: var(--text-primary); }

.lon-row--bold {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) 0 var(--space-1);
  margin-top: var(--space-1);
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
  font-weight: 600;
}

/* Anställd: utlägg-rad (utlägg-recept). */
.lon-utlagg-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: var(--fs-body);
  gap: var(--space-3);
}
.lon-utlagg-row__supplier {
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lon-utlagg-row__date {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.lon-utlagg-row__amount {
  color: var(--text-primary);
  white-space: nowrap;
}
.lon-utlagg-row__arrow {
  margin-left: var(--space-1);
  color: var(--brand);
}

/* Anställd: "Sektion"-titel ovanför kort. */
.lon-section-title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-3);
}

/* Anställd: "Arbetsgivare"-värden. */
.lon-org-name {
  font-size: var(--fs-body);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.lon-org-orgnr {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Anställd-listan: år-grupp + årsrubrik. */
.lon-year-group { margin-bottom: var(--space-6); }
.lon-year-heading {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-2);
}

/* Anställd-listan: rad-länken. */
.lon-list-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.lon-list-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lon-list-card__right { text-align: right; }
.lon-list-card__amount {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}
.lon-list-card__arrow {
  font-size: var(--fs-sm);
  color: var(--brand);
  margin-top: var(--space-1);
}

/* Anställd: tillbaka-länk + PDF-länk-knapp. */
.lon-back-link {
  color: var(--brand);
  font-size: var(--fs-sm);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-3);
}
.lon-pdf-link {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--paper);
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-sm);
}
.lon-pdf-wrap {
  margin-top: var(--space-6);
  text-align: center;
}
.lon-title--inner {
  font-size: var(--fs-lg);
}

/* Lon-detalj: redovisar tabellraden för procent-vacation. */
.lon-pvp-table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: collapse;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.lon-pvp-table td {
  padding: var(--space-1) var(--space-2);
}
.lon-pvp-table td:first-child {
  color: var(--text-body);
}
.lon-pvp-table td:last-child {
  text-align: right;
}
.lon-pvp-row--divider td { border-top: 1px solid var(--line); }
.lon-pvp-row--sum td {
  border-top: 1px solid var(--line);
  font-weight: 600;
}

/* Lon-detalj: disabled "auto"-fält (semestertillägg). */
.lon-input--disabled-auto {
  background: var(--surface-inset);
  color: var(--text-body);
}

/* Lon-detalj: action-bar för status-knappar. */
.lon-action-bar {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.lon-status-extra-margin { margin-left: var(--space-2); }

/* Full-bredd-knapp (mobile-first action). */
.lon-btn-full { width: 100%; }
.lon-btn--flex { flex: 1; min-width: 180px; }
.lon-btn--sm   { font-size: var(--fs-sm); }

/* Marginal till alert som körs ovanpå container utan padding. */
.lon-alert-margin { margin: var(--space-4); }

/* Tabellrad-skala (semesterårsavslut → compact). */
.lon-table--compact { font-size: var(--fs-sm); min-width: 100%; }

/* Scroll-bar för stora horisontella tabeller i kortet. */
.lon-card--scrollx { overflow-x: auto; }

/* Bold label (formulär-rad-titel). */
.lon-label--bold { font-weight: 600; }

/* Smal år-input (4 siffror). */
.lon-input--year { width: 90px; padding: 6px; font-size: var(--fs-body); }

/* Liten badge-storlek (xs-chip i argangar-rad). */
.lon-badge--xs { font-size: 10px; }

/* Cell-xs (mycket liten skala — argang-text). */
.lon-cell--xs { font-size: var(--fs-eyebrow); }

/* Lon-detalj specifika klasser. */
.lon-warn-li { display: list-item; margin: 2px 0; }
.lon-warn-body { margin-top: 6px; }
.lon-warn-list {
  list-style: disc;
  padding-left: 20px;
  margin: var(--space-2) 0 6px;
}
.lon-warn-foot {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.lon-alert--hard {
  background: var(--danger-soft);
  border-left: 4px solid var(--danger-deep);
}
.lon-row-strong { font-weight: bold; }
.lon-voucher-note {
  display: block;
  color: var(--text-secondary);
}
.lon-cell-expense { font-size: var(--fs-sm); }
.lon-cell--bold { font-weight: bold; }
.lon-hint-info {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

/* Småskal-utilities som dyker upp många gånger i SPA:n. */
.lon-card--gap-sm { margin-top: var(--space-2); }
.lon-h3--mt-lg   { margin-top: var(--space-6); }
.lon-h4--stack   { margin-top: var(--space-4); }
.lon-stack-top   { margin-top: var(--space-2); }
.lon-info-text--sm     { font-size: var(--fs-sm); }
.lon-info-text--avvisa { margin: 0 0 var(--space-3); }
.lon-doc-list__note    { margin: 0 0 var(--space-2); }
.lon-select--full      { width: 100%; }

/* Måltidsraden i exp-create (per dag). */
.lon-meal-day {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.lon-meal-day__head { min-width: 180px; }

/* Anställd-lönespec: liten not under bilförmånen. */
.lon-benefit-note {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

/* Anställd-lönespec: AGA-blockets margin-top. */
.lon-org-aga-wrap { margin-top: var(--space-3); }

/* ─────────────────────────────────────────────────────────────────
 * Sektion #74 — Moms-paketet skal (etapp 3e PR A)
 *
 * Ersätter 28+ inline-styles och 4 hex i public/js/pages/moms.js med
 * token-driven utility-klasser. RÖR INTE moms-engine, moms-koder eller
 * moms-eskd — det är myndighetskänslig SKV-export (snapshot i declarations-
 * tabellen, behandlas som AGI). Endast markup/spacing/färg-tokens här.
 *
 * Färg-mappning (de 4 hex → tokens):
 *   #f0fdf4 (success bg-light) → var(--success-soft)
 *   #166534 (success text-dark) → var(--success-deep)
 *   #86efac (success border)    → var(--success-deep)
 *   #f3f4f6 (light gray bg)     → var(--surface-inset)
 *   #4b5563 (text-secondary)    → var(--text-secondary)
 *
 * Befintliga .moms-*-klasser i style.css (hero/period-meta/box-table/
 * frequency-options/etc.) är intakta — denna sektion lägger till NYA
 * utility-klasser för spacing/lists/modaler.
 * ───────────────────────────────────────────────────────────────── */

/* Tabs-marginal (tidigare style="margin-bottom:24px"). */
.moms-tabs--stack { margin-bottom: var(--space-6); }

/* Generiska stack-marginalvarianter för alerts/cards/sections. */
.moms-stack--3 { margin-bottom: var(--space-3); }
.moms-stack--4 { margin-bottom: var(--space-4); }
.moms-card--stack { margin-top: var(--space-5); }
.moms-actions-wrap { margin: var(--space-4) 0; }

/* Period-väljare-label (tidigare inline font-size+color+margin). */
.moms-period-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-right: var(--space-2);
}

/* Success-banner: "Perioden är deklarerad och betald" (de 3 hex → tokens). */
.moms-banner-success {
  background: var(--success-soft);
  color:      var(--success-deep);
  border:     1px solid var(--success-deep);
  padding:    var(--space-3) var(--space-4);
  border-radius: var(--radius);
}

/* "Baserat på N bokföringsrader" foot-note. */
.moms-meta-foot {
  margin-top: var(--space-3);
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
}

/* Inset-box för deklara-bekräftelse + post-deklaration nästa-steg.
 * Tidigare style="background:#f3f4f6" → surface-inset. */
.moms-info-box {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface-inset);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.moms-info-box--lg { padding: var(--space-4); }
.moms-info-box__head {
  margin: 0 0 var(--space-2);
  font-weight: 500;
}
.moms-info-list {
  margin: 0;
  padding-left: var(--space-5);
  line-height: 1.6;
}
.moms-info-list--lg {
  margin: 0;
  padding-left: var(--space-5);
  line-height: 1.7;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Råd under deklara-confirm ("Du behöver fortfarande …"). */
.moms-note-small {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.moms-num-list {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}
.moms-row-line { margin: var(--space-1) 0; }

/* Empty-state i historik-fliken. */
.moms-empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--text-secondary);
}
.moms-empty-state-text {
  color: var(--text-secondary);
  font-style: italic;
}

/* Inställningar-info-alert under formuläret. */
.moms-info-installningar {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
}

/* Modal-storleksvarianter (moms har egna än lön-paketet). */
.moms-modal--sm { max-width: 480px; }
.moms-modal--md { max-width: 520px; }
.moms-modal--lg { max-width: 580px; }

/* Post-deklaration: stor checkmark + status-text. */
.moms-success-block {
  text-align: center;
  padding: var(--space-4) 0;
}
.moms-success-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--space-3);
}
.moms-success-text {
  margin: 0;
  font-size: var(--fs-md);
}

/* Foot-note under inset-box. */
.moms-foot-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Deklaration-detalj modal: period-meta + eyebrow-rubriker. */
.moms-modal-meta { margin-bottom: var(--space-5); }
.moms-modal-section { margin: var(--space-5) 0; }
.moms-modal-section--top { margin-top: var(--space-5); }
.moms-modal-eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-secondary);
  margin: 0 0 var(--space-2);
}
.moms-modal-eyebrow--lg { margin: 0 0 var(--space-3); }

/* Verifikat-lista i detalj-modalen. */
.moms-verifikat-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.moms-link { color: var(--success); }
.moms-link-desc {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* Anteckning-rad i detalj-modalen. */
.moms-note-box {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--bg);
  border-radius: 6px;
  font-size: var(--fs-sm);
}

/* "Markera som betald"-knappen längst ner i detalj-modalen. */
.moms-modal-action {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Bekräftelse-modal: error-slot under footer. */
.moms-bek-err { padding: 0 var(--space-5) var(--space-4); }

/* Småutilities: vikt + inline-knapp-mellanslag + hjälptext. */
.moms-meta-value--strong { font-weight: 600; }
.moms-btn--inline { margin-left: var(--space-2); }
.moms-help-inline {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-left: var(--space-2);
}

/* Klickbar historik-rad (cursor: pointer ovanpå hover-regeln i style.css). */
.moms-historik-row { cursor: pointer; }

/* ─────────────────────────────────────────────────────────────────
 * Medföljande: semester-wizard-tabeller (semesterårsavslut +
 * semesterskuld) — mindre rubriker + tajtare kolumn-padding så
 * tabellen ryms bredvid vänstermenyn (220 px) på ~1440 px desktop
 * utan intern scroll. Scope:ad till .lon-table--compact (används
 * bara av dessa två wizard-tabeller). Mobil oförändrad — i smala
 * fönster faller fortfarande tillbaka på .lon-card--scrollx.
 * ───────────────────────────────────────────────────────────────── */
.lon-table--compact thead th {
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-2);
  letter-spacing: 0;
}
.lon-table--compact tbody td {
  padding: var(--space-2) var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────
 * Sektion #75 — Anstallda-form skal (etapp 3e PR C)
 *
 * Ersätter 57 inline-styles + 27 hex i public/js/pages/anstallda-form.js.
 * RÖR INTE personal-number-Luhn, validators/bank, schema-mappning öre↔kr,
 * workSchedule-härledning eller semester-beräkningsparametrar — det är
 * GDPR/legal-kritisk validering+persistens. Endast markup/spacing/färg-
 * tokens här.
 *
 * Färg-mappning (27 hex → tokens):
 *   Banner-aktiv (success):
 *     #E8F7EF → var(--success-soft)
 *     #00A550 → var(--success)
 *     #1a202c → var(--text-primary)
 *   Banner-inbjuden (warning):
 *     #FFFFF0 → var(--warning-soft)
 *     #D69E2E → var(--warning)
 *   Banner-utgangen (danger):
 *     #FFF5F5 → var(--danger-soft)
 *     #FCA5A5 → var(--danger)
 *     #991B1B → var(--danger-deep)
 *   Banner-ingen (neutral):
 *     #F7FAFC → var(--surface-inset)
 *     #E2E8F0 → var(--border)
 *     #4a5568 → var(--text-secondary)
 *   Schedule-chip:
 *     #cbd5e0 → var(--border)
 *     #EFF6FF → var(--info-soft)
 *   Invite-modaler: använder standard .modal-overlay + .modal-regler
 *     från style.css (modal-dismiss-vägen) — rgba(0,0,0,.5)/#fff/#ccc
 *     försvinner därmed
 *   Semester-overview (vacation-balance card):
 *     #F0FFF4 → var(--success-soft)
 *     #9AE6B4 → var(--success)
 *     #22543d → var(--success-deep)
 *     #ECFDF5 → var(--success-soft)
 *     #10b981 → var(--success)
 *     #FEF3C7 → var(--warning-soft)
 *     #d97706 → var(--warning)
 *     #92400e → var(--warning-deep)
 *     #E0E7FF → var(--info-soft)
 *     #3730A3 → var(--info-deep)
 *     #f1f5f9 → var(--surface-inset)
 *     #64748b → var(--text-secondary)
 *     #9b2c2c → var(--danger-deep)
 * ───────────────────────────────────────────────────────────────── */

/* Form-error-banner — tidigare style="display:none". */
.anstallda-form-error[hidden] { display: none; }

/* Portal-inbjudan-banner: gemensam bas + varianter per status. */
.anstallda-portal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}
.anstallda-portal-banner__msg {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
.anstallda-portal-banner--aktiv {
  background: var(--success-soft);
  border: 1px solid var(--success);
}
.anstallda-portal-banner--inbjuden {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
}
.anstallda-portal-banner--utgangen {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
}
.anstallda-portal-banner--utgangen .anstallda-portal-banner__msg {
  color: var(--danger-deep);
}
.anstallda-portal-banner--ingen {
  background: var(--surface-inset);
  border: 1px solid var(--border);
}
.anstallda-portal-banner--ingen .anstallda-portal-banner__msg {
  color: var(--text-secondary);
}

/* Field-warning för samordningsnummer-detektion (visuell tilstånd via hidden). */
.anstallda-warning[hidden] { display: none; }

/* Sjuklönsraden — döljs när lönetyp != hourly. */
.anstallda-row--toggle[hidden] { display: none; }

/* Sjuklöns-checkbox-label (display:flex inline). */
.anstallda-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* Veckoschema: chips-grid. */
.anstallda-work-schedule {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.anstallda-work-day {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px var(--space-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-sm);
  background: var(--paper);
}
.anstallda-work-day.is-active {
  background: var(--info-soft);
}

/* Workplace-fields-toggle — döljs när "använd företagets adress" är på. */
.anstallda-workplace-fields[hidden] { display: none; }

/* Invite-modal: utility-klasser för intern layout (modalen själv är
 * standard .modal-overlay + .modal från style.css → modal-dismiss
 * fungerar out-of-the-box). */
.anstallda-invite-modal__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
  color: var(--text-primary);
}
.anstallda-invite-modal__text {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.anstallda-invite-modal__label {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: 6px;
}
.anstallda-invite-modal__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-body);
  margin-bottom: var(--space-4);
}

/* ── Semester-översikt (renderSemesterOverview) ─────────────────── */
.semester-overview {
  margin-bottom: 1rem;
  background: var(--success-soft);
  border: 1px solid var(--success);
}
.semester-overview__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.semester-overview__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--success-deep);
}
.semester-overview__metod {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
}
.semester-overview__horizont {
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.semester-overview__horizont-note {
  font-size: 10px;
  color: var(--text-secondary);
}
.semester-overview__row {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-size: var(--fs-body);
}
.semester-overview__row--small {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.semester-overview__row-label { color: var(--text-secondary); }
.semester-overview__adj,
.semester-overview__unpaid {
  font-size: var(--fs-eyebrow);
  margin-top: var(--space-1);
}
.semester-overview__adj { color: var(--text-secondary); }
.semester-overview__unpaid { color: var(--danger-deep); }

/* Loading-state-card för semester-balansen. */
.semester-overview-loading {
  margin-bottom: 1rem;
  background: var(--success-soft);
  border: 1px solid var(--success);
}
.semester-overview-loading__text {
  font-size: var(--fs-sm);
  color: var(--success-deep);
}

/* Procentregel-block (16b §) — semesterlöneskuld-detaljer. */
.semester-procent {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--success);
}
.semester-procent__title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--success-deep);
  margin-bottom: 6px;
}
.semester-procent__fiktiv {
  font-size: var(--fs-sm);
  color: var(--success-deep);
  margin-top: var(--space-1);
  padding: 6px var(--space-2);
  background: var(--success-soft);
  border-left: 3px solid var(--success);
  border-radius: 2px;
}
.semester-procent__cols {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.semester-procent__runs {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.semester-procent__warning {
  font-size: 11px;
  color: var(--warning-deep);
  background: var(--warning-soft);
  border-left: 3px solid var(--warning);
  padding: 6px var(--space-2);
  margin-top: var(--space-2);
  border-radius: 2px;
}
.semester-procent__missing {
  font-size: var(--fs-sm);
  color: var(--danger-deep);
}

/* Run-id-chip (de små "abcdef12"-chipsen för payroll-runs). */
.semester-run-chip {
  display: inline-block;
  padding: 2px 6px;
  background: var(--info-soft);
  color: var(--info-deep);
  border-radius: 3px;
  font-size: 11px;
  margin: 2px;
}

/* Inline-code-styling för kolumn-namn (procentregel: included columns). */
.semester-procent__code {
  font-size: 11px;
  background: var(--surface-inset);
  padding: 1px 4px;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────
 * Sektion #76 — GDPR-maskering (PR 2)
 *
 * Maskerar PNR/bank/lön i UI by default. "Visa"-toggle avmaskar fullt
 * värde inline. Skyddar mot över-axeln-titt och skärmdump — RBAC (PR 1)
 * skyddar själva åtkomsten.
 *
 * Två mönster:
 *   .masked-text   — read-only-visning (lista, detalj, audit-log)
 *   .masked-field  — input-wrap (form): swap mellan display + input
 *
 * Båda har samma toggle-knapp .masked-toggle.
 * ───────────────────────────────────────────────────────────────── */

.masked-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.masked-text__display {
  font-family: var(--font-body);
  letter-spacing: 0;
}

.masked-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-eyebrow);
  padding: 2px var(--space-2);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.2;
  transition: color .12s ease, border-color .12s ease;
}
.masked-toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.masked-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Form-input-varianten: två element som swap:ar via HTML `hidden`-attribut.
 * Display-span syns default, input syns när revealed. Input behåller
 * sitt riktiga värde hela tiden så form-submit får rätt data.
 *
 * `hidden` är browser-garanterat (samma effekt som display:none men kan
 * inte överskrivas av globala CSS-regler — t.ex. `.form-field input`
 * med högre specificitet). Klassen .is-revealed sätts ändå för styling-
 * hooks om någon vill stila revealed-state separat. */
.masked-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.masked-field__display {
  flex: 1;
  font-family: var(--font-body);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-inset);
  color: var(--text-secondary);
}
.masked-field__input { flex: 1; }
/* Säkerhetsnät: även om global `.form-field input` skulle sätta display
 * tar [hidden] över via attribute-selektor + standard-semantik. */
.masked-field__display[hidden],
.masked-field__input[hidden] { display: none; }

/* Salary-specific styling — visas centrerat i tabeller. */
.masked-text--salary { display: inline-flex; }
.masked-text--salary .masked-text__display {
  font-weight: 600;
  color: var(--text-primary);
}


/* Smal select-variant — för kort-värdes-fält som mallnamn där fullbredd
 * ser ut som ett glapp på desktop. Mobil får fortfarande 100 % bredd
 * (samma mönster som sökfälten: kompakt desktop, fullbredd mobil). */
.select--narrow { width: 280px; max-width: 100%; }
@media (max-width: 600px) {
  .select--narrow { width: 100%; }
}

/* ── Anställd-portal: lön self-service-polish (YTD + år-filter + ladda ner) ── */
/* Listkort: stapla huvudrad (period+belopp) över ladda-ner-knappen. */
.lon-list-card {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.lon-list-card__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.lon-dl-btn {
  align-self: flex-end;
  font-size: var(--fs-sm);
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
}
.lon-dl-btn:active { opacity: 0.7; }

/* YTD-kort */
.lon-ytd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.lon-ytd-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lon-ytd-cell__label {
  font-size: var(--fs-xs, 12px);
  color: var(--text-secondary);
}
.lon-ytd-cell__value {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

/* År-filter-flikar */
.lon-year-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.lon-year-tab {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--surface-card);
}
.lon-year-tab--active {
  background: var(--brand);
  color: var(--paper);
  border-color: var(--brand);
}

/* Lönekörnings-översikt: visa/dölj avbrutna-toggle. */
.lon-runs-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-2);
}
.lon-show-cancelled {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP-LAYOUT — opt-in breddtak + förtätning (desktop-PR A)
   Referens: docs/DESKTOP_GENOMGANG_RECON.md. Rör EJ .main-content globalt.
   MOBIL: alla max-width > 375px → 100% (ingen effekt); .field-grid kollapsar
   INTRINSISKT till 1 kolumn utan media query. Inget mobilt regresserar.
   ═══════════════════════════════════════════════════════════════════════ */

/* Yttersta vy-wrapper. Sätts opt-in per route på router-staging (app.js),
   ELLER manuellt som klass på en vys yttersta <div>. */
.content-max         { max-width: 1040px; margin-inline: auto; }
.content-max--narrow { max-width: 760px;  margin-inline: auto; }
.content-max--wide   { max-width: 1200px; margin-inline: auto; }
.content-max--tight  { max-width: 820px;  margin-inline: auto; }

/* Intrinsiskt responsiv kolumnläggning för glesa poster (formulärfält,
   konto-block, kort). N kolumner på desktop, 1 på mobil — utan media query. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3) var(--space-4);
}
.field-grid--sm   { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.field-grid__full { grid-column: 1 / -1; }

/* Etikett↔värde med tak (ersätter space-between-utsträckning). */
.kv-row      { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); max-width: 640px; }
.kv-row__val { text-align: right; font-variant-numeric: tabular-nums; }

/* Smala tabeller krymper till innehåll i stället för width:100%. */
.table-compact           { width: auto; max-width: 720px; }
.table-compact .col-text { max-width: 320px; }

@media (min-width: 1024px) {
  /* Kompakt desktop-knapp (behåll 44px touch-mål < 1024px). Endast storlek. */
  .btn    { min-height: 38px; padding: 0 var(--space-4); font-size: var(--fs-sm); }
  .btn-sm { min-height: 32px; }
  /* Opt-in desktop-förtätad spacing på capade vyer. */
  .content-max--dense { --space-6: 20px; --space-8: 24px; --space-10: 32px; }
}

/* ── E-faktura (Peppol) — kort + förkontroller på kundfaktura-detalj ────────── */
.kfd-ef-huvud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.kfd-ef-kontroller {
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kfd-ef-kontroll {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.kfd-ef-kontroll__mark {
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1.4;
}
.kfd-ef-kontroll--ok    .kfd-ef-kontroll__mark { color: var(--success); }
.kfd-ef-kontroll--fel   .kfd-ef-kontroll__mark { color: var(--danger); }
.kfd-ef-kontroll--avtal .kfd-ef-kontroll__mark { color: var(--warning); }
.kfd-ef-kontroll .helper-text { display: block; }

/* ── Rapport-ramverk (Fler rapporter-fliken + generisk rapport-render) ──────── */
.rp-ramverk { display: flex; flex-direction: column; gap: var(--space-3); }
.rp-ramverk .detail-actions { flex-wrap: wrap; gap: var(--space-2); }
.rp-rapport { margin-top: var(--space-4); }
.rp-huvud { margin-bottom: var(--space-3); }
.rp-titel { font-size: var(--fs-lg); font-weight: 700; }
.rapport-table .rp-sektion td { font-weight: 700; padding-top: var(--space-3); }
.rapport-table .rp-summa td,
.rapport-table .rp-slutsumma td { font-weight: 700; border-top: 1px solid var(--border); }
.rapport-table .rp-slutsumma td { border-top-width: 2px; }
.rapport-table .rp-fet td { font-weight: 600; }
.rapport-table .rp-cell { padding: var(--space-1) var(--space-2); }
/* Datumfilter-varning (utanför räkenskapsåret) — inline, ej native. */
.rp-datum { display: flex; flex-direction: column; gap: var(--space-2); }
.rp-datum-varning {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--warning-deep);
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
}
@media (max-width: 375px) {
  .rp-ramverk .detail-actions .btn { flex: 1 1 100%; }
}

/* ── Avstämning (PR 1) — IB/UB-rader i kontovyn (mockupens struktur,
 *    plattformens tokens). Saldo-kontroll-raden kommer i PR 2. ── */
.avst-ib-rad, .avst-ub-rad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.avst-ib-rad {
  background: var(--brand-light);
  border-bottom: 1px solid var(--border);
}
.avst-ub-rad {
  background: var(--brand);
  color: #fff;
  border-top: 1px solid var(--border);
}

/* ── Avstämning (PR 2) — matchning: saldo-kontroll, kopplad post,
 *    kandidatlista i koppla-modalen. ── */
.text-danger { color: var(--danger-deep); }
.avst-check-rad {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.avst-check-ok {
  background: var(--success-soft);
  color: var(--success-deep);
  border-top: 1px solid var(--border);
}
.avst-check-diff {
  background: var(--danger-soft);
  color: var(--danger-deep);
  border-top: 1px solid var(--border);
}
.avst-verlank {
  font-weight: 600;
  text-decoration: none;
}
.avst-verlank:hover { text-decoration: underline; }
.avst-kandidatlista {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}
.avst-kandidat {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.avst-kandidat:hover { background: var(--brand-light); }

/* ══ DASHBOARD (widgets, etapp 1) ═══════════════════════════════════════════
   Hero-KPI (navy), tabulära/mono-siffror, eyebrow-labels, jorddämpat.
   12-kolumnersgrid på desktop; en kolumn på mobil (375px). ── */
.dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.dash-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
}
.dash-mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.dash-widget {
  grid-column: span 12;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 0;
}
.dash-widget[data-span="4"] { grid-column: span 4; }
.dash-widget[data-span="6"] { grid-column: span 6; }
.dash-widget[data-span="12"] { grid-column: span 12; }
.dash-widget-titel {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: 0 0 var(--space-3);
}
.dash-tom, .dash-hero-tom { color: var(--text-secondary); font-size: var(--fs-sm); padding: var(--space-2) 0; }

/* Hero (likviditet) — navy, stor mono-siffra. */
.dash-widget--hero {
  background: linear-gradient(155deg, var(--ink) 0%, #223049 100%);
  color: #fff;
  border-color: transparent;
}
.dash-widget--hero .dash-eyebrow { color: rgba(255,255,255,.6); }
.dash-hero-belopp {
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: var(--space-2) 0 var(--space-4);
}
.dash-hero-konton { display: flex; flex-direction: column; gap: 4px; }
.dash-hero-rad {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-size: var(--fs-sm); color: rgba(255,255,255,.82);
  padding: 4px 0; border-top: 1px solid rgba(255,255,255,.1);
}

/* KPI-widgets (att få in / betala / resultat). */
.dash-kpi-belopp { font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.dash-kpi-under { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 2px; }
.dash-kpi-forfallet { color: var(--danger-deep); font-size: var(--fs-sm); font-weight: 600; margin-top: var(--space-2); }
.dash-lank { display: inline-block; margin-top: var(--space-3); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.dash-lank:hover { text-decoration: underline; }

/* Att hantera — lista med antal + genväg. */
.dash-hantera-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-hantera-rad {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text-primary);
}
.dash-hantera-rad:hover { background: var(--surface-inset); }
.dash-hantera-antal {
  min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--brand-light); color: var(--brand); border-radius: var(--radius);
  padding: 2px 6px;
}
.dash-hantera-etikett { flex: 1; }
.dash-hantera-pil { color: var(--text-secondary); }
/* Fail-closed-felruta: betalnings-urvalet kunde inte beräknas serverside. */
.dash-hantera-fel {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--danger); border-radius: var(--radius);
  background: var(--danger-light); color: var(--danger-deep);
  font-size: var(--fs-sm);
}

/* Deadlines. */
.dash-deadline-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-deadline {
  display: block; text-decoration: none; color: var(--text-primary);
  padding: var(--space-3); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius);
}
.dash-deadline--warning { border-left-color: var(--warning, #d97706); }
.dash-deadline--danger  { border-left-color: var(--danger); }
.dash-deadline--neutral { border-left-color: var(--brand); }
.dash-deadline-titel { font-weight: 600; }
.dash-deadline-period { color: var(--text-secondary); font-size: var(--fs-sm); }
.dash-deadline-datum { font-size: var(--fs-sm); margin-top: 4px; }

@media (max-width: 900px) {
  .dash-widget[data-span="4"], .dash-widget[data-span="6"] { grid-column: span 12; }
}
@media (max-width: 375px) {
  .dash-grid { gap: var(--space-3); }
  .dash-widget { padding: var(--space-4); }
}

/* Dashboard redigeringsläge. */
/* Påminnelseflikens åtgärdsknappar — radbryts snyggt på smala skärmar (375px). */
.dash-paminn-atgard { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }

/* Kundfaktura-formulärets knapprad: Avbryt · Spara · split (Bokför ▾). */
.kf-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.kf-split { position: relative; display: inline-flex; }
/* Huvuddel + pil sitter ihop som en knapp (delad kant i mitten). */
.kf-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.kf-split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-left: 10px; padding-right: 10px; }
/* Default STÄNGD: ingen display här → UA-regeln [hidden]{display:none} vinner.
 * :not([hidden]) aktiverar flex (samma mönster som filter-dropdown #25 — en
 * `display: flex` i basregeln övertrumfar annars [hidden] och menyn syns alltid). */
.kf-split-meny {
  position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 30; min-width: 100%;
  background: var(--surface-card, #fff); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.12); overflow: hidden; white-space: nowrap;
}
.kf-split-meny:not([hidden]) { display: flex; flex-direction: column; }
.kf-split-val { background: none; border: none; text-align: left; padding: 8px 14px; font-size: var(--fs-sm); cursor: pointer; color: var(--text-primary); }
.kf-split-val:hover { background: var(--surface-hover, rgba(0,0,0,.05)); }
/* Mobil 375px: knapparna staplar i full bredd, splitten fyller raden. */
@media (max-width: 480px) {
  .kf-actions { justify-content: stretch; }
  .kf-actions > .btn, .kf-split { flex: 1 1 100%; }
  .kf-split { display: flex; }
  .kf-split-main { flex: 1; }
}

/* Kreditfaktura-modal (delvis): läges-val + radval. Staplar naturligt på mobil. */
.kfk-val { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.kfk-val label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); cursor: pointer; }
.kfk-rad { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: var(--fs-sm); cursor: pointer; }
.kfk-rad input { margin-top: 3px; flex: 0 0 auto; }
@media (max-width: 480px) {
  .kfk-val { flex-direction: column; gap: var(--space-2); }
}

.dash-redig-banner {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.dash-redig-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-redig-kort {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.dash-redig-titel { font-weight: 600; }
.dash-redig-ktrl { display: flex; align-items: center; gap: var(--space-2); }
.dash-redig-jmf {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; cursor: pointer;
}
.dash-redig-jmf input { cursor: pointer; }
.dash-redig-rubrik { font-family: var(--font-heading); font-size: 1rem; margin: var(--space-5) 0 var(--space-3); }
.dash-redig-bibliotek { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Dashboard etapp 3 — grupp 1 (kunder/fakturor): stapellista, åldersanalys,
   stort mätetal. Alla i platform-tokens; skalar 375px → desktop. */
.dash-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-bar-rad { display: grid; grid-template-columns: minmax(4.5rem, 8rem) 1fr auto; align-items: center; gap: var(--space-2); }
.dash-bar-namn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.dash-bar-spar { height: 8px; border-radius: 4px; background: var(--surface-sunken, rgba(0,0,0,.06)); overflow: hidden; }
.dash-bar-fyll { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.dash-bar-varde { font-size: var(--fs-sm); white-space: nowrap; }

.dash-aging-stapel { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-bottom: var(--space-3); background: var(--surface-sunken, rgba(0,0,0,.06)); }
.dash-aging-seg { display: block; height: 100%; }
.dash-aging-lista { display: flex; flex-direction: column; gap: var(--space-1); }
.dash-aging-rad { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.dash-aging-prick { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dash-aging-namn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-aging-antal { color: var(--text-secondary); font-size: var(--fs-xs); }
.dash-aging-belopp { white-space: nowrap; }

.dash-metric-stor { font-family: var(--font-heading); font-size: 2rem; line-height: 1.1; margin-bottom: var(--space-1); }
.dash-metric-enhet { font-size: 1rem; color: var(--text-secondary); }

/* Grupp 3 — prognos / ställning / nyckeltal. */
.dash-prognos-nu { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.dash-prognos-lista { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.dash-prognos-rad { display: flex; justify-content: space-between; align-items: baseline; }
.dash-prognos-horisont { color: var(--text-secondary); font-size: var(--fs-sm); }
.dash-est-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; background: var(--warning-bg, rgba(200,150,40,.15)); color: var(--warning-fg, #8a6d1f); }
.dash-est-not { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.4; }
.dash-nyckeltal { display: flex; gap: var(--space-4); }
.dash-nyckeltal-cell { flex: 1; }
.dash-nyckeltal-varde { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.1; }
.dash-nyckeltal-etikett { font-size: var(--fs-sm); color: var(--text-secondary); }

/* Insikts-widget — roterande härledda observationer. */
.dash-insikter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.dash-insikt { font-size: var(--fs-sm); line-height: 1.4; padding-left: var(--space-3); border-left: 2px solid var(--brass, #b08d57); }

/* Dashboard etapp 2 — kontonamn-ellipsis + förfallna-tabell mobil. */
.dash-hero-konto {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Förfallna: riktig tabell även på mobil; fakturanr-kolumnen döljs smått. */
@media (max-width: 560px) {
  .dash-forfallna-tabell .dash-col-mobildold { display: none; }
}

/* Dashboard etapp 2 — grafer (staplar, donut, linje, sparkline). */
.dash-spark { width: 100%; height: 26px; display: block; margin: var(--space-2) 0; }

.dash-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: var(--space-2); }
.dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.dash-bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--brand); }
.dash-bar--neg { background: var(--danger-soft); border: 1px solid var(--danger); }
.dash-bar-cap { font-size: 10px; color: var(--text-secondary); }

.dash-donut-wrap { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.dash-donut { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; position: relative; }
.dash-donut::after { content: ""; position: absolute; inset: 24px; background: var(--surface-card); border-radius: 50%; }
.dash-legend { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); min-width: 0; flex: 1; }
.dash-legend-rad { display: flex; align-items: center; gap: 8px; }
.dash-legend-sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.dash-legend-namn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-legend-pct { color: var(--text-secondary); margin-left: auto; }

.dash-linje svg { width: 100%; height: 130px; display: block; }
.dash-linje-etiketter { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); margin-top: 6px; }

@media (max-width: 375px) {
  .dash-bars { height: 110px; }
  .dash-donut { width: 96px; height: 96px; }
  .dash-donut::after { inset: 20px; }
}

/* Dashboard etapp 2 — drag-och-släpp i redigeringsläget. */
.dash-redig-kort[draggable="true"] { cursor: grab; }
.dash-redig-handtag { color: var(--text-secondary); cursor: grab; user-select: none; margin-right: var(--space-1); }
.dash-redig-kort.dash-drar { opacity: .5; }
.dash-redig-kort.dash-drop-over { outline: 2px dashed var(--brand); outline-offset: 2px; }

/* Dashboard etapp 2 — sektions-eyebrow med hårfin avdelare (mockupen). */
.dash-eyebrow-sektion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  margin: var(--space-6) 0 var(--space-3);
}
.dash-eyebrow-sektion::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.dash-grid + .dash-eyebrow-sektion { margin-top: var(--space-6); }

/* Dashboard etapp 3 — SVG-diagram med axlar (delad grafik.js). */
.dash-graf { width: 100%; height: auto; max-height: 200px; display: block; }
.dash-graf-grid { stroke: var(--border); stroke-width: .35; opacity: .7; }
/* Nollinjen tydligt kraftigare än stödlinjerna (upp/ner-referens). */
.dash-graf-noll { stroke: var(--text-secondary); stroke-width: 1; }
.dash-graf-ytext { font-size: 7px; fill: var(--text-secondary); text-anchor: end; dominant-baseline: middle; }
.dash-graf-xtext { font-size: 7px; fill: var(--text-secondary); text-anchor: middle; }
.dash-graf-stapel { fill: var(--brand); }
.dash-graf-stapel--neg { fill: var(--danger); }
.dash-graf-linje { stroke: var(--brand); stroke-width: 1.4; }
.dash-graf-yta { fill: var(--brand-light); stroke: none; }
.dash-graf-punkt { fill: var(--brand); }
.dash-graf-jmf { stroke: var(--brass, #b08d57); stroke-width: 1.2; stroke-dasharray: 3 2; }
.dash-graf-legend { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-2); display: flex; align-items: center; gap: 6px; }
.dash-graf-legend--tom { font-style: italic; }
.dash-graf-legend-jmf { display: inline-block; width: 14px; height: 0; border-top: 2px dashed var(--brass, #b08d57); }
.dash-graf-legend-lin { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--brand); }

.dash-graf-stapel--pos { fill: var(--success); }
/* Hel-höjds hover-band per x-kolumn: osynligt men "målat" (fill-opacity:0) så
   det tar emot pekhändelser tillförlitligt → native <title>-tooltip för hela
   tidpunkten. Svag markering vid hover som affordans. */
.dash-graf-hover { fill: var(--brand, #1a365d); fill-opacity: 0; pointer-events: all; cursor: crosshair; }
.dash-graf-hover:hover { fill-opacity: .06; }

/* ── Artikel-import (Inställningar → Import/Export) ───────────────────── */
.imp-art-rad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.imp-art-fil-grupp { min-width: 0; flex: 1 1 220px; }
.imp-art-fil-grupp input[type="file"] { max-width: 100%; }
@media (max-width: 480px) {
  .imp-art-rad { flex-direction: column; align-items: stretch; }
  .imp-art-rad .btn { width: 100%; }
}

/* ── Importguide (artiklar) — stegvis, återanvänder SIE:s wiz-step ──────── */
.imp-guide { max-width: 900px; margin: 0 auto; }
.imp-guide__titel { margin-top: 0; }
.imp-guide__lead { color: var(--text-secondary); margin-bottom: var(--space-4); }
.imp-guide__steg { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }
/* wiz-step: samma mönster/känsla som SIE-importens stegindikator. */
.wiz-step { padding: 8px 16px; border-radius: var(--radius, 6px); background: var(--surface-inset, #e5e7eb); color: var(--text-secondary, #6b7280); font-size: var(--fs-sm, 14px); }
.wiz-step.active { background: var(--brand-navy, #1a365d); color: #fff; }
.wiz-step.done { background: #d1fae5; color: #065f46; }
.imp-guide__kort { padding: var(--space-5); }
.imp-guide__innehall .imp-ignorerad td { color: var(--text-secondary); }
.imp-guide__fel { color: var(--danger, #c00); margin-top: var(--space-3); }
.imp-guide__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.imp-guide__nav-hoger { display: flex; gap: var(--space-2); }
@media (max-width: 480px) {
  .imp-guide__steg { flex-direction: column; }
  .imp-guide__nav { flex-direction: column-reverse; align-items: stretch; }
  .imp-guide__nav-hoger { flex-direction: column; }
  .imp-guide__nav .btn { width: 100%; }
}

/* ── Importguide: redigerbar preview + filter ──────────────────────────── */
.imp-valj-rad { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.imp-valj-rad .btn { flex: 0 1 auto; }
@media (max-width: 480px) { .imp-valj-rad { flex-direction: column; align-items: stretch; } }
/* Fältutökad granskning: full bredd + sticky identitet/huvud + horisontell scroll + radpanel */
/* Granska-steget spränger wizardens 900px-tak och fyller innehållsytan (som redan
   tar hänsyn till sidomenyn, kollapsad eller ej) — så breda tabeller får plats. */
.imp-guide--bred { max-width: none; }
/* .imp-guide ligger i .content-max (1040px-tak som standard). Lyft taket helt
   just när det breda granska-steget är aktivt (klassen togglas i steg 3) → kortet
   fyller HELA innehållsytan och flexar med skärmbredden (minus sidomeny). */
.content-max:has(.imp-guide--bred) { max-width: none; }
.imp-guide__kort--bred { max-width: none; }
.imp-tabell-scroll { overflow-x: auto; max-width: 100%; }
.imp-tabell--bred { min-width: max-content; border-collapse: separate; border-spacing: 0; }
.imp-tabell--bred th, .imp-tabell--bred td { white-space: nowrap; padding: 6px 10px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: left; vertical-align: top; }
.imp-tabell--bred thead th { position: sticky; top: 0; z-index: 2; background: var(--surface, #fff); }
.imp-tabell--bred .imp-stick { position: sticky; left: 0; z-index: 3; background: var(--surface, #fff); box-shadow: 1px 0 0 var(--border, #e5e7eb); }
.imp-tabell--bred thead .imp-stick { z-index: 4; }
.imp-tabell--bred .imp-ident { display: flex; flex-direction: column; min-width: 140px; }
.imp-tabell--bred .imp-ident__nr { font-weight: 600; }
.imp-tabell--bred .imp-ident__namn { color: var(--text-secondary); font-size: var(--fs-sm, 13px); }
.imp-tabell--bred tbody .imp-rad { cursor: pointer; }
.imp-tabell--bred tbody .imp-rad:hover td { background: var(--surface-hover, #f3f4f6); }
.imp-tabell--bred tbody .imp-rad:hover .imp-stick { background: var(--surface-hover, #f3f4f6); }
.imp-tabell--bred tbody .imp-rad--vald .imp-stick { box-shadow: 1px 0 0 var(--brand-navy, #1a365d), inset 3px 0 0 var(--brand-navy, #1a365d); }
/* Radredigering = centrerad modal-overlay (växer med innehållet, alltid i vy
   oavsett hur lång tabellen är). Bakgrundsklick/Escape/Stäng stänger. */
.imp-radpanel {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 6vh, 64px) 16px;
  background: rgba(17, 24, 39, .55);
  overflow-y: auto; overscroll-behavior: contain;
}
.imp-radpanel[hidden] { display: none; }
.imp-radpanel__dialog {
  width: min(920px, 100%);
  max-height: calc(100vh - clamp(32px, 12vh, 128px));
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
  padding: var(--space-5);
}
.imp-radpanel__huvud { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; margin-bottom: var(--space-3); flex: 0 0 auto; }
.imp-radpanel__body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.imp-panel-grupp { margin-top: var(--space-2); }
body.imp-modal-open { overflow: hidden; }   /* lås bakgrundsscroll medan modalen är öppen */
/* Mobil 375px: kollapsa till identitet + status + anmärkning; detaljer i panelen (ingen scroll-röra) */
@media (max-width: 600px) {
  .imp-tabell--bred { min-width: 100%; }
  .imp-tabell--bred td[data-f], .imp-tabell--bred thead th:nth-child(n+3):nth-last-child(n+2) { display: none; }
  .imp-tabell--bred .imp-ident { min-width: 0; }
  .imp-radpanel { padding: 0; }
  .imp-radpanel__dialog { width: 100%; max-height: 100vh; border-radius: 0; padding: var(--space-4); }
  .detail-form-grid { grid-template-columns: 1fr; }   /* ett fält per rad på liten skärm */
}
.imp-filter-rad { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.imp-filter { padding: 6px 14px; border: 1px solid var(--border, #d0d5dd); border-radius: 999px; background: var(--surface, #fff); color: var(--text-secondary); font-size: var(--fs-sm, 14px); cursor: pointer; }
.imp-filter--aktiv { background: var(--brand-navy, #1a365d); color: #fff; border-color: var(--brand-navy, #1a365d); }
.imp-tabell .imp-in { width: 100%; min-width: 90px; box-sizing: border-box; padding: 4px 6px; }
.imp-tabell .imp-in--pris { min-width: 80px; text-align: right; }
.imp-tabell .imp-in--konto { min-width: 90px; }
.imp-tabell td.imp-moms { white-space: nowrap; color: var(--text-secondary); }
.imp-rad--fel { background: var(--danger-bg, #fef2f2); }
.imp-rad--dubblett { background: var(--surface-inset, #f3f4f6); }
@media (max-width: 640px) {
  /* data-table--stack ger redan kort-layout på mobil; inputs blir fullbredd. */
  .imp-tabell .imp-in { min-width: 0; }
}