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 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:
*
*
* --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å Beskrivning/
Anteckning/etc. */
.data-table tbody td.cell-text {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
/* ⚠️⚠️ NAMNCELLEN KLIPPS MED ELLIPS — DEN BRYTS INTE.
*
* ⚠️ MÄTT FÖRE: ett namn på 200 tecken utan mellanslag gav i leverantörslistan
* vid 1440 px en namnkolumn på 617 px och en rad på 98,6 px mot 48,5 px för en
* vanlig rad — FEM rader text. Tabellen växte däremot INTE (1198 px = omslagets
* 1198 px): #998:s `overflow-wrap: anywhere` band redan bredden, för en sträng
* som får brytas var som helst har en minsta innehållsbredd på ett tecken.
* Felet är alltså inte längre bredden utan HÖJDEN — en rad som sväljer två.
*
* ⚠️⚠️ VARFÖR PÅ `td.cell-title` OCH INTE I VARJE LISTA. #998 byggde
* `.cell-title__namn` (ellips + title + min-width-kedjan) men hann bara sätta
* den i leverantorsfakturor.js — EN av tjugoen namnceller. En fix i markupen
* hade krävt tjugo ändringar och missat den tjugoförsta; regeln här når alla
* genom klassen de redan delar. Listan som har komponenten påverkas inte: dess
* cell innehåller element, och `text-overflow` verkar bara på cellens EGNA
* inline-innehåll.
*
* ⚠️ `max-width` behövs. Med `nowrap` blir strängens minsta innehållsbredd hela
* strängen igen, och då växer tabellen ut i `.table-wrapper`s rullning — precis
* felet som fanns FÖRE #998. Gränsen binder kolumnen; ellipsen gör det läsbart.
*
* ⚠️ BESKRIVNINGSCELLER (`.cell-text`) BRYTS SOM FÖRUT. En beskrivning är
* flerradig till sin natur; ett namn är det inte. */
.data-table tbody td.cell-title {
max-width: 32ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 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-text {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* ⚠️⚠️ KORTET BINDS AV TABELLEN, INTE AV CELLEN — och det tog tre mätningar.
*
* `max-width: 100%` på cellen gav en tabell på 2290 px i ett 375 px fönster:
* en procent räknas mot cellens egen box, och den boxen växer med innehållet.
* `calc(100vw - 32px)` gav 369 px mot omslagets 327 — bättre, men fortfarande
* en gissning om sidans marginaler.
*
* Rätt nivå är TABELLEN. I stacken är raderna kort, inte ett rutnät, så
* kolumnfördelningen betyder ingenting: `table-layout: fixed` med `width:
* 100 %` binder tabellen till omslaget, och då binder cellens procent i sin
* tur namnet. En fix på cellnivå kunde aldrig nå dit. */
.data-table--stack { table-layout: fixed; width: 100%; }
.data-table--stack tbody td.cell-title { max-width: 100%; }
}
/* 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=
* ""` 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 ä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);
}
/* ⚠️⚠️ FILTREN FÄLLS IHOP PÅ MOBIL — 633 px innan första fakturan.
*
* Mätt vid 375 px: rubrik, «Registrera faktura», fyra chips, två datumfält,
* sökfält, sorteringsväljare och en summarad tog 633 px INNAN första kortet.
* På en lista med EN faktura började den under vikningen.
*
* ⚠️ DESKTOP FÄLLER INTE IHOP NÅGOT. Över 760 px räcker bredden för allt på en
* rad, och en utfällning där hade varit ett extra klick utan vinst. Rubriken
* göms och kroppen visas oavsett `open` — `` respekterar `display`. */
.filter-bar__falla { display: contents; }
.filter-bar__falla-rub { display: none; }
/* ⚠️ På desktop är kroppen «genomskinlig»: dess barn blir direkta poster i
* .filter-bar och raden ser exakt ut som förut. `is-oppen` spelar ingen roll
* här — över 760 px fälls ingenting ihop. */
.filter-bar__falla-kropp { display: contents; }
@media (max-width: 760px) {
.filter-bar__falla {
display: block;
width: 100%;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-card);
}
.filter-bar__falla-rub {
display: flex;
width: 100%;
background: none;
border: none;
text-align: left;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
/* ⚠️ Tryckytan är hela raden, inte bara texten. */
min-height: var(--tap-target);
}
/* ⚠️ «filter aktivt» till höger, i varningsfärg — den säger VARFÖR listan är
* kortare än man väntade sig. Utan den är en tom lista oförklarlig. */
.filter-bar__falla-markering {
margin-left: auto;
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--warning-deep);
}
/* ⚠️⚠️ HOPFÄLLD SOM FÖRVAL, UTFÄLLD MED KLASSEN. Att låta CSS äga
* synligheten är hela skälet till att det inte är ett : den taggen
* döljer sitt innehåll själv, och den regeln går inte att häva över
* brytpunkten. */
.filter-bar__falla-kropp { display: none; }
.filter-bar__falla.is-oppen .filter-bar__falla-kropp {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: 0 var(--space-3) var(--space-3);
}
/* Fälten tar hela bredden i utfällt läge — de delar ingen rad med något. */
.filter-bar__falla-kropp .filter-bar__group { flex-wrap: wrap; }
.filter-bar__falla-kropp .filter-date { flex: 1 1 0; min-width: 0; }
.filter-bar__falla-kropp .filter-search { flex: 1 1 100%; min-width: 0; }
}
.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; }
/* ⚠️⚠️ UTOM IKONKNAPPEN, SOM ÄR EN KVADRAT — och som raden ovan tyst släppte.
*
* `.btn-icon` sätter `width: var(--tap-target)` långt ovanför, med samma
* specificitet. Den här raden ligger senare i filen och vann därför på ordning
* ensam: varje knapp med både `.btn` och `.btn-icon` fick `width: auto`, alltså
* sitt innehåll. Ikonen är 18 px.
*
* ⚠️ MÄTT I CHROMIUM på inkorgens åtgärdsrad vid 1280 px: papperskorgen blev
* 20 px bred — höjden stod kvar på 44, så felet såg ut som en smal knapp och
* inte som en halverad träffyta. 44 px är tumtrycket, inte en åsikt (WCAG).
*
* ⚠️ SPECIFICITETEN LÖSER DET, INTE ORDNINGEN. Att flytta `.btn-icon` hit ned
* hade fungerat tills nästa rad om `.btn` skrivs under den. */
.btn.btn-icon { width: var(--tap-target); }
.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 | |