arbetsytan och sidfoten
Under 880 px löses .shell-sida upp (display: contents). Toppen
blir en vit topprad med logotyp och bolag, och menyn en vit
bottenrad med suddig bakgrund. Samma markering på båda, så att
bolagsmenyn bara finns en gång och app.js hittar den.
============================================================ */
.shell { min-height: 100svh; display: flex; align-items: stretch; }
.shell-sida {
flex: none; width: var(--sidomeny-bredd);
align-self: flex-start;
position: sticky; top: 0; z-index: 40;
height: 100svh;
display: flex; flex-direction: column;
background: var(--yta-kort);
border-right: 1px solid var(--linje);
}
.shell-topbar {
display: grid; gap: 1.125rem;
padding: 1.375rem 0.75rem 1rem;
}
.shell-brand {
justify-self: start;
display: inline-flex; align-items: center;
min-height: 2rem; padding-inline: 0.625rem;
border-radius: var(--r-liten);
}
.shell-brand img { height: 1.25rem; width: auto; display: block; }
.shell-nav { padding: 0.25rem 0.75rem 1.25rem; }
.shell-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.shell-nav-list a {
display: flex; align-items: center; gap: 0.75rem;
min-height: 2.5rem; padding-inline: 0.625rem;
border-radius: var(--r-liten);
font-size: var(--t-14); font-weight: 500;
color: var(--text-dampad); text-decoration: none;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.shell-nav-list svg {
width: 1.25rem; height: 1.25rem; flex: none;
color: var(--text-svag);
transition: color var(--t-fast) var(--ease);
}
.shell-nav-list a:hover { background: var(--yta-hov); color: var(--text); }
.shell-nav-list a:hover svg { color: var(--text-dampad); }
/* Den aktiva raden står i handlingens ton. Det är den enda färgen
i menyn, och den säger var man är. */
.shell-nav-list a[aria-current="page"] {
background: var(--handling-ton);
color: var(--handling-djup); font-weight: 600;
}
.shell-nav-list a[aria-current="page"] svg { color: var(--handling); }
.shell-nav-list a:focus-visible { outline-offset: -2px; }
/* Arbetsytan */
.shell-body {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column;
background: var(--yta-arbete);
}
.shell-main { flex: 1 1 auto; min-width: 0; padding: 0 0 3.5rem; }
/* Arbetsytans bredd. Tabeller och kort får plats, men raderna blir
inte så långa att ögat tappar dem. */
.shell-body .wrap { max-width: 76rem; padding-inline: clamp(1rem, 3.2vw, 2.5rem); }
.shell-foot {
padding-block: 1.25rem 2rem;
border-top: 1px solid var(--linje);
}
.shell-foot .legal { margin: 0; font-size: var(--t-13); color: var(--text-dampad); }
.shell-foot .legal a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--linje-stark); }
.shell-foot .legal a:hover { color: var(--text); text-decoration-color: currentColor; }
/* ------------------------------------------------------------
BOLAGSVÄLJAREN
Överst i sidomenyn på datorn, till höger i toppraden i mobilen.
Visar vilket bolag man är inne i och öppnar listan med de
kopplade bolagen. Brickan med initialen är smörgul, eftersom den
är en identitet och inte något som utförs.
------------------------------------------------------------ */
.account-wrap { position: relative; }
.account {
display: flex; align-items: center; gap: 0.625rem;
width: 100%;
min-height: 3rem; padding: 0.375rem 0.625rem 0.375rem 0.375rem;
border: 1px solid var(--linje-stark);
border-radius: var(--r-falt);
background: var(--yta-kort);
box-shadow: var(--skugga-kort);
font: inherit; font-size: var(--t-14); font-weight: 600;
color: var(--text); text-align: left;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.account:hover { border-color: var(--linje-hov); background: var(--yta-svag); }
.account[aria-expanded="true"] { border-color: var(--handling); box-shadow: var(--fokus-ring); }
.account-mark,
.account-item-mark,
.company-mark {
display: grid; place-items: center; flex: none;
width: 2rem; height: 2rem;
border-radius: var(--r-liten);
background: var(--marke); color: var(--text);
font-size: var(--t-13); font-weight: 700;
}
.account-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret {
width: 1rem; height: 1rem; flex: none;
color: var(--text-svag);
transition: transform var(--t-fast) var(--ease);
}
.account[aria-expanded="true"] .account-caret { transform: rotate(180deg); }
.account-menu {
position: absolute; z-index: 50;
top: calc(100% + 0.375rem); left: 0; right: 0;
min-width: 14rem;
}
.account-menu-label {
margin: 0.375rem 0.625rem 0.375rem;
font-size: var(--t-12); font-weight: 500;
color: var(--text-dampad);
}
.account-list { list-style: none; margin: 0 0 0.25rem; padding: 0; display: grid; gap: 0.125rem; }
.account-item,
.account-lank,
.account-add,
.account-logout {
display: flex; align-items: center; gap: 0.625rem; width: 100%;
min-height: 2.75rem; padding: 0.375rem 0.625rem;
border: 0; border-radius: var(--r-liten);
background: transparent; text-align: left;
font: inherit; font-size: var(--t-14); font-weight: 500;
color: var(--text); text-decoration: none;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.account-item { min-height: 3rem; padding-left: 0.375rem; }
.account-item:hover,
.account-lank:hover,
.account-add:hover,
.account-logout:hover { background: var(--yta-hov); }
.account-item.is-active { background: var(--handling-ton); }
.account-item-text { flex: 1 1 auto; min-width: 0; display: grid; }
.account-item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-item-orgnr { font-family: var(--font-mono); font-size: var(--t-12); color: var(--text-dampad); font-variant-numeric: tabular-nums; }
.account-item-check { flex: none; width: 1.0625rem; height: 1.0625rem; color: var(--handling); }
/* Ö8.7: antalet som väntar i ett annat bolag, och en punkt på brickan
när listan är stängd. Blått, eftersom det är något kunden ska göra. */
.account-item-vantar {
flex: none; display: grid; place-items: center;
min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem;
border-radius: var(--r-pill);
background: var(--handling); color: var(--text-pa-handling);
font-size: var(--t-12); font-weight: 600; font-variant-numeric: tabular-nums;
}
.account { position: relative; }
.account-punkt {
position: absolute; top: -0.25rem; right: -0.25rem;
width: 0.625rem; height: 0.625rem; border-radius: 50%;
background: var(--handling); box-shadow: 0 0 0 2px var(--yta-kort);
}
.account[aria-expanded="true"] .account-punkt { display: none; }
/* Under listan: bolagets inställningar, lägg till och logga ut,
med en linje mot bolagen ovanför. */
.account-list { padding-bottom: 0.25rem; border-bottom: 1px solid var(--linje); }
.account-lank svg,
.account-add svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--text-dampad); }
.account-logout { color: var(--text-dampad); }
.account-logout:hover { color: var(--text); }
/* På datorn står Bokslut och Inställningar i sidomenyn, inte i
bolagsmenyn. Skriv till din konsult och Hjälp har ingen plats i
sidomenyn och står kvar i bolagsmenyn på alla bredder. */
@media (min-width: 881px) {
.account-lank:not(.account-lank-alltid) { display: none; }
}
/* ------------------------------------------------------------
SKALET PÅ TELEFON
------------------------------------------------------------ */
@media (max-width: 880px) {
.shell { display: block; }
.shell-sida { display: contents; }
.shell-topbar {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 3.5rem;
padding: 0.375rem max(1rem, env(safe-area-inset-right, 0px)) 0.375rem max(1rem, env(safe-area-inset-left, 0px));
background: var(--yta-kort);
border-bottom: 1px solid var(--linje);
transition: box-shadow var(--t-fast) var(--ease);
}
/* En skugga först när innehållet har glidit in under raden. Vakten
sätter data-stuck, se initTopbarKant i app.js. */
.shell-topbar[data-stuck="true"] { box-shadow: 0 4px 16px -10px rgba(15, 23, 41, 0.2); }
.shell-brand { padding-inline: 0; }
.shell-brand img { height: min(1.125rem, 5vw); }
.account-wrap { min-width: 0; }
.account {
width: auto; max-width: min(15rem, calc(100vw - 8.5rem));
min-height: var(--h-kontroll); padding: 0.25rem 0.5rem 0.25rem 0.25rem;
box-shadow: none;
}
.account-mark { width: 1.875rem; height: 1.875rem; font-size: var(--t-12); }
.account-menu { left: auto; right: 0; width: 18rem; max-width: calc(100vw - 2rem); }
/* Bottenraden. Vit med suddig bakgrund, så att innehållet anas
under den utan att gå att läsa. */
.shell-nav {
position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
padding: 0.25rem max(0.5rem, env(safe-area-inset-right, 0px)) calc(0.25rem + env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
background: var(--chrome-bg);
-webkit-backdrop-filter: var(--chrome-blur);
backdrop-filter: var(--chrome-blur);
border-top: 1px solid var(--linje);
}
/* Auto-kolumner, så att antalet flikar kan ändras i HTML utan att
någon räknar om här. Kolumnen får krympa under sitt innehåll. */
.shell-nav-list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
/* Bokslut och Inställningar står i bolagsmenyn i mobilen, så att
bottenraden har högst fem flikar. */
.shell-nav-list li:has(.nav-konto, .nav-dator) { display: none; }
.shell-nav-list a {
flex-direction: column; justify-content: center; gap: 0.1875rem;
min-height: 3.375rem; padding: 0.25rem 0.125rem;
border-radius: var(--r-falt);
font-size: var(--t-11); font-weight: 500; line-height: 1.15;
text-align: center;
}
.shell-nav-list a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.shell-nav-list a:hover { background: none; }
/* Den aktiva fliken bär tonen i en kapsel bakom ikonen, och inte
över hela fliken, så att raden fortfarande läses som en rad. */
.shell-nav-list svg {
width: min(3rem, 18vw); height: 1.75rem;
padding: 0.1875rem 0.875rem;
border-radius: var(--r-pill);
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.shell-nav-list a[aria-current="page"] { background: none; }
.shell-nav-list a[aria-current="page"] svg { background: var(--handling-ton); }
.shell-main { padding: 0 0 2rem; }
/* Bottenraden ligger över sidan, så sidfoten behöver plats under
sig för att inte hamna bakom den. */
.shell-foot { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
.account { max-width: min(12rem, 55vw); }
}
/* ------------------------------------------------------------
REMSAN I DEN LOKALA MILJÖN
Samma ton som en väntande status, som testläget i Stripe: den
syns, men den ropar inte. Dold på app.accounto.se, se
initProtobar i app.js.
------------------------------------------------------------ */
.protobar {
padding: 0.375rem 1rem;
background: var(--vantar-ton);
color: var(--vantar);
border-bottom: 1px solid var(--linje);
font-size: var(--t-12); line-height: 1.4;
}
.protobar b { color: var(--vantar); font-weight: 600; }
/* ------------------------------------------------------------
INLOGGNINGEN
En centrerad platta på arbetsytans egen ton. Här låg tre
färgtoningar i smörgult och blått bakom kortet. Det är den
bakgrund varje ny tjänst på nätet har, och den säger ingenting
om vad det här är för företag. En jämn yta och ett vitt kort
med hårfin ram säger mer, för då är det enda man ser det man
ska göra.
------------------------------------------------------------ */
.gate {
min-height: 100svh;
display: grid;
grid-template-rows: auto 1fr auto;
background: var(--yta-arbete);
}
.gate-top { padding: 1.5rem 0; }
/* Loggan till vänster, genvägen till höger. Raden ser likadan ut
utan genvägen, eftersom loggan då är enda barnet. */
.gate-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* Genvägen förbi BankID, bara under utveckling. Medvetet diskret och
streckad, den ska aldrig se ut som en väg kunden ska ta. Knappen
finns i HTML men är hidden tills miljo.js säger annat. */
.gate-genvag {
display: inline-block;
padding: 0.4rem 0.85rem;
border: 1px dashed currentColor;
border-radius: 999px;
background: transparent;
font: inherit;
font-size: 0.8125rem;
opacity: 0.55;
cursor: pointer;
}
.gate-genvag:hover { opacity: 1; }
/* hidden vinner inte över display ovan, se AGENTS.md. */
.gate-genvag[hidden] { display: none; }
/* "safe center" och inte "center": när kortet är högre än
fönstret ska överskottet hamna i botten och gå att scrolla
till, inte skäras bort i toppen. Äldre webbläsare som inte
känner till safe hoppar över raden och lägger kortet överst,
vilket också går att läsa. */
.gate-body {
display: flex; flex-direction: column; align-items: center;
justify-content: safe center;
padding: 1rem 0 3rem;
}
.gate-foot { padding: 0 0 2rem; }
.gate-body:has(.gate-card.is-journey) { justify-content: flex-start; padding-top: clamp(0.5rem, 4vh, 2.5rem); }
.gate-card {
width: 100%; max-width: 27rem;
margin-inline: auto;
padding: 2.25rem;
border: 1px solid var(--linje-stark);
border-radius: var(--r-xl);
background: var(--yta-kort);
}
.gate-card h1 {
font-size: var(--t-26);
line-height: 1.15; letter-spacing: -0.021em;
margin: 0 0 0.625rem;
}
.gate-card > p { color: var(--text-dampad); font-size: var(--t-14); margin: 0 0 1.5rem; max-width: 34ch; }
.gate-card .btn { width: 100%; }
/* Raden under knappen: hjälplänkar, inte konkurrerande knappar. */
.gate-aside {
display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
margin-top: 1.25rem; padding-top: 1.25rem;
border-top: 1px solid var(--linje);
font-size: 0.9375rem;
}
.gate-aside a, .gate-aside .linkish { color: var(--text-dampad); font-weight: 400; text-decoration: none; border-bottom: 1px solid var(--linje-stark); border-radius: 0; }
.gate-aside a:hover, .gate-aside .linkish:hover { color: var(--text); border-color: var(--text); }
.gate-aside[hidden] { display: none; }
/* ------------------------------------------------------------
BANKID-ARKET
Ligger som dialog över inloggningen. Mörkläggningen bakom
är till för att visa att bakgrunden är avstängd, inte
för att det ska se häftigt ut.
------------------------------------------------------------ */
.sheet {
border: none; padding: 0;
width: min(28rem, calc(100vw - 2rem));
max-height: calc(100svh - 2rem);
border-radius: var(--r-ark);
background: var(--yta-kort);
color: var(--text);
box-shadow: var(--skugga-sval), 0 0 0 1px var(--linje);
overflow-y: auto;
overscroll-behavior: contain;
}
/* ------------------------------------------------------------
ARKETS VÄG IN OCH UT
------------------------------------------------------------
Låg tidigare i ett @keyframes som bara hade en väg in. Arket
tonade fram och försvann sedan tvärt, så de två riktningarna
såg ut att lyda olika regler. Ett keyframe går dessutom inte
att avbryta halvvägs: griper du tag i ett ark som är på väg
någonstans måste du vänta ut animationen först.
Nu är stängt läge utgångsläget, öppet läge målet, och vägen
mellan dem en övergång. Samma sträcka åt båda hållen, med
spegelvända kurvor: --ease-out bromsar in på vägen fram,
--ease-in accelererar på vägen hem. En övergång startar alltid
från det värde som står på skärmen just nu, vilket är precis
det som gör den avbrytbar.
allow-discrete håller kvar display och overlay medan arket
tonar ut. Utan de två raderna hoppar dialogen till display:
none direkt och det finns ingen utgång att se.
------------------------------------------------------------ */
.sheet {
opacity: 0;
scale: 0.98;
translate: 0 14px;
transform-origin: center bottom;
transition: opacity var(--t-fast) var(--ease-in),
scale var(--t-fast) var(--ease-in),
translate var(--t-fast) var(--ease-in),
overlay var(--t-fast) allow-discrete,
display var(--t-fast) allow-discrete;
}
.sheet[open] {
opacity: 1;
scale: 1;
translate: 0 0;
transition: opacity var(--t-fast) var(--ease-out),
scale var(--t-fast) var(--ease-out),
translate var(--t-fast) var(--ease-out),
overlay var(--t-fast) allow-discrete,
display var(--t-fast) allow-discrete;
}
@starting-style {
.sheet[open] { opacity: 0; scale: 0.98; translate: 0 14px; }
}
.sheet::backdrop {
background: var(--slojan);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity var(--t-fast) var(--ease-in),
overlay var(--t-fast) allow-discrete,
display var(--t-fast) allow-discrete;
}
.sheet[open]::backdrop { opacity: 1; transition-timing-function: var(--ease-out); }
@starting-style { .sheet[open]::backdrop { opacity: 0; } }
/* Medan fingret håller i arket sköter rorelse.js positionen, och
då får ingen övergång lägga sig emellan: en övergång som räknar
ikapp ett finger blir eftersläpning, och eftersläpning är det
enda som säkert tar bort känslan av att hålla i något. */
.sheet.ar-dras,
.sheet.ar-fjadrar,
.sheet.ar-stanger { transition: none; }
.sheet.ar-dras { will-change: translate; }
/* Mörkläggningen tonar bort medan arket glider ut, inte efteråt.
Skulle den ligga kvar full styrka tills arket är borta ser
stängningen ut att ske i två steg. */
.sheet.ar-stanger::backdrop {
opacity: 0;
transition: opacity var(--t-fast) var(--ease-in);
}
/* Går arkets innehåll att scrolla vinner scrollen, och dragningen
finns bara i greppet. Ryms allt utan scroll sätter app.js den
här klassen, och då går hela arket att ta tag i. */
.sheet.ar-dragbar { touch-action: none; }
.sheet-grepp { touch-action: none; }
/* ------------------------------------------------------------
ARKET SOM BOTTENSHEET
------------------------------------------------------------
På telefon fäster arket i nederkanten i stället för att sväva
i mitten. Det är formen alla känner igen, det är dit tummen
når, och det är först då det blir begripligt att kunna dra ner
det för att stänga. Vägen in blir samma väg som vägen ut: upp
underifrån, ner samma håll.
------------------------------------------------------------ */
@media (max-width: 640px) {
.sheet {
width: 100vw;
max-width: none;
max-height: calc(100svh - 3rem);
margin: auto auto 0;
border-radius: var(--r-ark) var(--r-ark) 0 0;
scale: 1;
translate: 0 100%;
}
.sheet[open] { scale: 1; translate: 0 0; }
@starting-style { .sheet[open] { scale: 1; translate: 0 100%; } }
.sheet-inner { padding-bottom: calc(clamp(1.5rem, 4vw, 2rem) + env(safe-area-inset-bottom, 0px)); }
}
/* Greppet. Ren affordans, och därför aria-hidden i markeringen:
den som lyssnar på sidan har redan Avbryt och Escape. Visas
bara där dragningen finns, alltså när arket sitter i kanten. */
.sheet-grepp { display: none; }
@media (max-width: 640px) {
.sheet-grepp {
display: block;
width: 2.25rem; height: 0.3125rem;
margin: 0.625rem auto 0;
border-radius: var(--r-pill);
background: var(--linje-stark);
flex: none;
}
}
/* Mindre rörelse: kvar blir en ren intoning. Ingenting glider,
ingenting skalas, men arket syns fortfarande komma och gå. */
@media (prefers-reduced-motion: reduce) {
.sheet, .sheet[open] { translate: none; scale: none; }
}
.sheet-inner { padding: clamp(1.5rem, 4vw, 2rem); text-align: center; }
.sheet h2 { font-size: var(--t-20); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.375rem; }
.sheet-status { color: var(--text-dampad); margin: 0 0 1.5rem; min-height: 1.6em; }
/* Rött bara när kunden måste göra något: försöka igen eller stänga. */
.sheet-status[data-state="fel"] { color: var(--fel); }
/* QR-plattan. Koden byts var femte sekund, för BankIDs QR-kod är
animerad och en stillbild går inte att använda. Plattans vita
kant är kodens tysta zon. Bilden kommer som PNG från
BankSignering, eller som SVG i demoläget. */
.qr {
width: 13.5rem; height: 13.5rem;
margin: 0 auto 1.5rem;
padding: 0.875rem;
border-radius: var(--r-md);
background: var(--yta-kort);
border: 1px solid var(--linje);
}
.qr img { width: 100%; height: 100%; display: block; }
.sheet-spinner {
width: 2.75rem; height: 2.75rem; margin: 1.5rem auto;
border-radius: 50%;
border: 3px solid var(--handling-ton);
border-top-color: var(--handling);
animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Regeln nedan låg tidigare utan !important och vann därför aldrig
över den globala nedsläckningen i base.css, som sätter
animation-duration: 0.001ms !important på allt. Snurran frös i
stället för att gå långsamt, och en frusen snurra läses som att
tjänsten hängt sig.
Nu byter vi rotation mot en puls. Samma besked om att något
pågår, men ingenting rör sig i rummet. Specificiteten räcker för
att slå det globala stjärnselektorn. */
@keyframes sheet-puls { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
.sheet-spinner {
border-color: var(--handling);
animation: sheet-puls 1.6s ease-in-out infinite !important;
}
}
.sheet-done {
width: 3.5rem; height: 3.5rem; margin: 1.5rem auto;
display: grid; place-items: center;
border-radius: 50%;
background: var(--klar-ton); color: var(--klar);
}
.sheet-done svg { width: 1.75rem; height: 1.75rem; }
.sheet-actions { display: grid; gap: 0.625rem; }
.sheet-actions .btn { width: 100%; justify-content: center; padding-inline: 1.5rem; }
.sheet-actions .btn .btn-arrow { display: none; }
/* Demoväljaren. Finns bara i prototypen, tydligt märkt. */
.demo-switch {
margin: 1.25rem 0 0; padding: 1.25rem 0 0;
border: none; border-top: 1px dashed var(--linje-stark);
text-align: left;
}
.demo-switch legend {
font-size: var(--t-12); font-weight: 600; color: var(--text-dampad);
padding: 0;
}
.demo-options { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.demo-options label {
display: flex; align-items: center; gap: 0.625rem;
min-height: 2.75rem; padding: 0.5rem 0.875rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
font-size: 0.9375rem; cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.demo-options label:hover { border-color: var(--text-dampad); }
.demo-options input { accent-color: var(--handling); width: 1.125rem; height: 1.125rem; flex: none; }
.demo-options label:has(input:checked) { border-color: var(--handling); background: var(--handling-ton); }
.demo-options input:checked + span { font-weight: 600; }
/* Låst fält, ifyllt från BankID. Ska inte se ut som ett
avstängt fält, för det är inte trasigt, det är bevisat. */
.field-locked {
display: flex; align-items: center; gap: 0.75rem;
min-height: var(--h-kontroll); padding: 0.5rem 0.875rem;
border: 1px solid var(--linje); border-radius: var(--r-falt);
background: var(--yta-svag);
font-size: var(--t-15);
}
.field-locked svg { width: 1.0625rem; height: 1.0625rem; color: var(--klar); flex: none; }
.field-locked .src {
margin-left: auto; flex: none;
font-size: var(--t-12); font-weight: 600; color: var(--text-dampad);
}
/* Träffkortet från företagsregistret. */
.lookup {
margin-top: 0.75rem; padding: 1rem 1.125rem;
border: 1px solid var(--klar); border-radius: var(--r-falt);
background: var(--klar-ton);
}
.lookup[data-hinder] {
border-color: var(--fel);
background: var(--fel-ton);
}
.lookup[data-hinder] #lookup-status { color: var(--fel); font-weight: 600; }
.lookup-name { font-weight: 600; font-size: 1.0625rem; margin: 0 0 0.25rem; }
.lookup-meta {
display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0;
font-size: var(--t-13); color: var(--text-dampad); font-variant-numeric: tabular-nums;
}
.lookup-demo {
display: block; margin-top: 0.625rem;
font-size: var(--t-12); font-weight: 600; color: var(--text-dampad);
}
.lookup-demo[hidden] { display: none; }
/* Bolagsväljaren. Kunden är oftast företrädare för ett eller
två bolag, och då är att välja i en lista både snabbare och
säkrare än att skriva av tio siffror från ett papper.
Riktiga radioknappar och inte klickbara kort, för då kommer
piltangenterna och uppläsningen gratis. */
.picker { display: grid; gap: 0.625rem; }
.picker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pick {
display: grid; align-items: center;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.875rem;
padding: 0.9375rem 1.125rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.pick:hover { border-color: var(--text-dampad); }
.pick input { accent-color: var(--handling); width: 1.25rem; height: 1.25rem; margin: 0; flex: none; }
.pick:has(input:checked) { border-color: var(--handling); background: var(--handling-ton); }
.pick:has(input:focus-visible) { outline: 2px solid var(--handling); outline-offset: 2px; }
.pick-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.pick-meta {
display: block; margin-top: 0.125rem;
font-size: var(--t-13); color: var(--text-dampad); font-variant-numeric: tabular-nums;
}
/* Kontaktuppgiften när den redigeras: värdet, Ändra, och i läge
redigering ett fält med Spara och Avbryt. Felet ser ut som
fältfelen i formulären, se shared/base.css. */
.kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.kv dd input { flex: 1 1 12rem; min-width: 0; }
.kv .error { flex-basis: 100%; }
.kv .error[hidden] { display: none; }
.consent {
display: flex; gap: 0.75rem; align-items: flex-start;
font-size: 0.9375rem; line-height: 1.55;
}
.consent input { margin-top: 0.1875rem; }
.consent a { color: var(--handling); }
.consent + .error { margin: -0.75rem 0 0 1.875rem; }
.consent + .error:empty { display: none; }
/* ------------------------------------------------------------
LÄGESRADEN
Det första kunden ser, och svaret på de tre frågor hen
kommer hit med: vad väntar på mig, vad gör byrån, och när ska
nästa sak vara inne. Här stod tidigare fyra räknare i var sin
ruta. Ett antal är inte ett läge: att veta att tre underlag
är inlämnade säger ingenting om huruvida något behöver göras.
Ingen platta och ingen ram. Raden är sidans ingress och inte
ett kort, och den ska läsas som en mening. Fakta under står i
två kolumner med en hårfin linje emellan, vilket är hela
avgränsningen de behöver.
------------------------------------------------------------ */
.lage-huvud {
margin: 0;
max-width: 54ch;
font-size: var(--t-20); font-weight: 600;
letter-spacing: -0.014em; line-height: 1.3;
}
.lage-fakta {
display: grid; gap: 0.75rem 2.5rem;
margin: 1rem 0 0;
padding-top: 0.875rem;
border-top: 1px solid var(--linje);
}
@media (min-width: 720px) {
.lage-fakta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Linjen mellan kolumnerna går bara upp där det finns två
kolumner. På smal skärm ligger posterna under varandra och
då skulle en lodrät linje sakna betydelse. */
.lage-post + .lage-post { padding-left: 2.5rem; border-left: 1px solid var(--linje); margin-left: -1.25rem; }
}
.lage-post { min-width: 0; }
.lage-post dt {
margin: 0;
font-size: var(--t-13); color: var(--text-dampad);
}
.lage-post dd {
margin: 0.125rem 0 0;
font-size: var(--t-15); line-height: 1.45;
}
/* Högermarginalen i .btn är avsatt för pilbrickan. En knapp utan
bricka behöver samma luft som på vänster sida, annars står
etiketten snett i plattan. */
.btn-ren { padding-right: 0.875rem; }
/* ------------------------------------------------------------
NYCKELTALEN
Ett vitt kort med skiljelinjer, inte fyra svävande rutor.
Talen är samma mätning uppdelad i fyra, och fyra separata kort
påstår att de är fyra olika saker.
Första rutan var fylld i blekblått för att synas mest. Fylld
färg på en yta som inte går att trycka på är dekor, och blekt
blått mot vitt är dessutom den svagaste markeringen som finns.
Talet står i kungsblått i stället: en enda accent, på det enda
tal som har en tidsgräns.
------------------------------------------------------------ */
.stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
gap: 0; margin: 0;
border: 1px solid var(--linje); border-radius: var(--r-kort);
background: var(--yta-kort);
overflow: hidden;
}
.stat { min-width: 0; padding: 1rem 1.125rem; }
.stat + .stat { border-left: 1px solid var(--linje); }
.stat-value {
margin: 0;
font-family: var(--font-mono); font-weight: 600;
font-size: var(--t-24); letter-spacing: -0.02em; line-height: 1.15;
}
.stat-label {
margin: 0.3125rem 0 0;
font-size: var(--t-12); color: var(--text-dampad);
letter-spacing: 0;
}
.stats-bred { max-width: none; }
@media (max-width: 880px) {
.stats-bred { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Med två kolumner ska skiljelinjerna gå i båda riktningarna,
annars ser andra raden ut att höra till den första. */
.stats-bred .stat + .stat { border-left: 1px solid var(--linje); }
.stats-bred .stat:nth-child(2n + 1) { border-left: 0; }
.stats-bred .stat:nth-child(n + 3) { border-top: 1px solid var(--linje); }
}
/* De två inlämningsytorna. */
.dropzones { display: grid; gap: 1.25rem; }
@media (min-width: 880px) { .dropzones { grid-template-columns: 1fr 1fr; } }
.dz {
position: relative;
display: flex; flex-direction: column;
min-height: 16rem; padding: 1.25rem;
border: 1px dashed var(--linje-stark);
border-radius: var(--r-falt);
background: var(--yta-kort);
transition: border-color var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
.dz:hover { border-color: var(--linje-stark); background: var(--yta-hov); }
.dz.over {
border-color: var(--handling);
background: var(--handling-ton);
/* Inte border-style: solid. Den egenskapen går inte att tona, så
kanten hoppade från streckad till hel mitt i en mjuk övergång.
En inre ring i box-shadow ger samma fasta känsla och följer
med i övergången hela vägen. */
box-shadow: inset 0 0 0 1px var(--handling), var(--fokus-ring);
}
.dz h2 { font-size: var(--t-16); letter-spacing: 0; margin: 0 0 0.25rem; }
.dz > p { color: var(--text-dampad); font-size: var(--t-13); margin: 0 0 0.875rem; max-width: 46ch; }
/* Knappen är den riktiga vägen in. Dra och släpp är ett
tillägg ovanpå, aldrig enda sättet. */
.dz-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.625rem; }
/* Lika mycket luft på båda sidor. Den gamla vänstermarginalen var
gjord för pilen, som inte längre finns i tjänsten. */
.dz-actions .btn { padding-inline: 1.125rem; }
/* Filtyperna som en vanlig mening. Sex små brickor i rad läste
som en teknisk specifikation och tog mer plats än texten. */
.dz > p.dz-formats { margin: 0; font-size: var(--t-13); color: var(--text-dampad); }
/* Dra och släpp finns inte på en telefon. */
@media (hover: none) { .dz-dra { display: none; } }
.dz input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Kvitto på vad som just lades till. */
.dz-queue { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.dz-queue:empty { display: none; }
.dz-queue li {
display: flex; align-items: center; gap: 0.625rem;
padding: 0.625rem 0.875rem;
border-radius: var(--r-falt);
background: var(--yta-hov);
font-size: 0.875rem;
}
.dz-queue .mark { flex: none; color: var(--klar); }
.dz-queue li.err .mark { color: var(--fel); }
.dz-queue .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-queue .sz { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dampad); }
/* Felmeddelandet läggs på egen rad under filnamnet. Ligger de
på samma rad äter meddelandet upp hela bredden och namnet
krymper till en bokstav, vilket gör det omöjligt att se
vilken fil som inte gick igenom. */
.dz-queue li.err { background: var(--fel-ton); flex-wrap: wrap; }
.dz-queue li.err .mark { order: 1; }
.dz-queue li.err .nm { order: 2; }
.dz-queue li.err .rm { order: 3; }
.dz-queue li.err .sz {
order: 4; flex: 1 0 100%;
margin-left: 1.625rem; margin-top: 0.125rem;
white-space: normal;
color: var(--fel); font-weight: 600;
}
.dz-queue .rm {
flex: none; display: grid; place-items: center;
width: 1.75rem; height: 1.75rem; margin: -0.25rem -0.25rem -0.25rem 0;
border: none; border-radius: 50%; background: transparent;
color: var(--text-dampad); cursor: pointer;
}
.dz-queue .rm:hover { background: var(--yta-tryck); color: var(--text); }
.dz-queue .rm svg { width: 0.875rem; height: 0.875rem; }
/* Kolumnmappningen för CSV och Excel. */
.mapper { margin-top: 1.5rem; }
.mapper-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0.375rem 0.875rem; margin-bottom: 1rem; }
.mapper-head h3 { font-size: 1.0625rem; margin: 0; letter-spacing: 0; }
.kort-huvud.mapper-head { margin-bottom: 0; }
.mapper-head p { margin: 0; font-size: 0.875rem; color: var(--text-dampad); }
.preview { margin-top: 1.25rem; border: 1px solid var(--linje); border-radius: var(--r-md); overflow: hidden; }
.preview-scroll { overflow-x: auto; }
.preview table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.preview th, .preview td { padding: 0.625rem 0.875rem; text-align: left; white-space: nowrap; }
.preview thead th {
background: var(--yta-hov);
font-size: var(--t-12); font-weight: 600; color: var(--text-dampad);
}
.preview tbody tr + tr td { border-top: 1px solid var(--linje); }
.preview td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------
UNDERLAGSLISTAN
------------------------------------------------------------ */
.list-head h2 { font-size: var(--t-16); letter-spacing: 0; margin: 0; }
.list-head .cta { margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
/* Typerna och statusarna är två olika sätt att filtrera. En tunn
linje skiljer dem, så att raden inte läser som en enda lista. */
#docs-filter li:has([data-filter="mottaget"]) { margin-left: 0.25rem; padding-left: 0.75rem; border-left: 1px solid var(--linje-stark); }
/* En lista med delade linjer och inte tio flytande kort. Rader
som hör ihop ska sitta ihop, annars läser ögat varje rad som
ett eget dokument i stället för som en post i en tabell. */
.docs {
list-style: none; margin: 0; padding: 0;
border: 1px solid var(--linje); border-radius: var(--r-kort);
background: var(--yta-kort);
box-shadow: var(--skugga-kort);
overflow: hidden;
}
.kort .docs { box-shadow: none; }
.doc {
display: grid; align-items: center;
grid-template-columns: 2.25rem minmax(0, 1fr) auto;
gap: 0.5rem 0.875rem;
min-height: 3.5rem;
padding: 0.75rem 1rem;
background: var(--yta-kort);
transition: background-color var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.doc + .doc { border-top: 1px solid var(--linje); }
.doc:hover { background: var(--yta-hov); }
.doc-icon {
display: grid; place-items: center;
width: 2.25rem; height: 2.25rem;
border-radius: var(--r-liten);
background: var(--yta-neutral); color: var(--text-dampad);
}
.doc-icon svg { width: 1.0625rem; height: 1.0625rem; }
.doc-name { font-weight: 500; font-size: var(--t-14); color: var(--text); margin: 0; overflow-wrap: anywhere; }
/* Metaraden under ett namn är oftast en mening med ett datum i:
"15 mars 2026 · Bolagsverket · 1 500,00 kr", "Lämnas till
Skatteverket". Hela raden stod i mono, vilket gjorde orden
svårlästa utan att ge talen något tillbaka, eftersom raderna
inte står i kolumn under varandra. Plex Sans med fasta
sifferbredder ger samma stadga i talen och läsbara ord.
Mono hör hemma i tabellernas belopp- och datumkolumner. */
.doc-meta {
margin: 0.0625rem 0 0;
font-size: var(--t-13); color: var(--text-dampad);
font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
.doc { grid-template-columns: 2.75rem minmax(0, 1fr); }
.status { grid-column: 2; justify-self: start; }
}
/* ------------------------------------------------------------
BOLAGSLISTAN PÅ INSTÄLLNINGAR
Samma radmönster som underlagslistan, för att sidorna ska
kännas som samma system.
------------------------------------------------------------ */
.companies {
list-style: none; margin: 0; padding: 0;
border: 1px solid var(--linje); border-radius: var(--r-kort);
background: var(--yta-kort); overflow: hidden;
}
.company {
display: grid; align-items: center;
grid-template-columns: 2rem minmax(0, 1fr) auto;
gap: 0.5rem 0.875rem;
padding: 0.625rem 0.875rem;
background: var(--yta-kort);
transition: background-color var(--t-fast) var(--ease);
}
.company + .company { border-top: 1px solid var(--linje); }
.company:hover { background: var(--yta-hov); }
.company-name { font-weight: 500; font-size: var(--t-14); margin: 0; overflow-wrap: anywhere; }
.company-meta { margin: 0.0625rem 0 0; font-size: var(--t-13); color: var(--text-dampad); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.company-switch {
justify-self: end;
min-height: 2.25rem; padding: 0.25rem 0.875rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort); color: var(--text);
font: inherit; font-size: 0.875rem; font-weight: 600;
cursor: pointer; white-space: nowrap;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.company-switch:hover { border-color: var(--linje-hov); background: var(--yta-svag); }
@media (max-width: 620px) {
.company { grid-template-columns: 2.75rem minmax(0, 1fr); }
.company-switch, .company .status { grid-column: 2; justify-self: start; }
}
/* ------------------------------------------------------------
KONTOUPPGIFTER
------------------------------------------------------------ */
.kv { margin: 0; max-width: 30rem; display: grid; gap: 0.625rem; }
.kv-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: 0.875rem 1.125rem;
border: 1px solid var(--linje); border-radius: var(--r-falt);
background: var(--yta-kort);
}
/* ------------------------------------------------------------
HISTORIKEN
Materialet från åren före oss, ett räkenskapsår i taget.
Varje år är en
, så att sidan öppnar sig i den takt
man behöver den och inte kräver en rad JavaScript.
Raderna inuti är samma .doc som underlagslistan. Det är med
flit: det är samma sorts sak, en fil som hör till ett bolag,
och två olika radmönster för samma sak hade bara sett ut som
två olika system.
------------------------------------------------------------ */
.years { display: grid; gap: 0.875rem; }
.year {
border: 1px solid var(--linje); border-radius: var(--r-kort);
background: var(--yta-kort);
box-shadow: var(--skugga-kort);
overflow: hidden;
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.year:hover { border-color: var(--linje-stark); }
.year[open] { box-shadow: var(--skugga-kort); }
.year > summary {
display: grid; align-items: center;
grid-template-columns: 2rem minmax(0, 1fr) auto auto;
gap: 0.5rem 0.875rem;
padding: 0.75rem 0.875rem;
cursor: pointer;
list-style: none;
}
.year > summary::-webkit-details-marker { display: none; }
.year > summary {
transition: background-color var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.year > summary:hover { background: var(--yta-hov); }
.year-mark {
display: grid; place-items: center;
width: 2rem; height: 2rem;
border-radius: var(--r-liten);
background: var(--yta-neutral); color: var(--text-dampad);
}
.year-mark svg { width: 1.0625rem; height: 1.0625rem; }
.year-title { font-weight: 600; font-size: var(--t-14); margin: 0; letter-spacing: 0; }
.year-meta {
margin: 0.0625rem 0 0;
font-size: var(--t-13); color: var(--text-dampad); font-variant-numeric: tabular-nums;
}
/* Varifrån materialet kom. Ren upplysning, inte en status, så
den är dämpad och inte färgkodad per system. */
.source {
display: inline-flex; align-items: center; gap: 0.4375rem;
padding: 0.1875rem 0.5625rem;
border-radius: var(--r-pill);
background: var(--yta-neutral);
font-size: var(--t-12); font-weight: 600; white-space: nowrap;
color: var(--text-dampad);
}
.source svg { width: 0.8125rem; height: 0.8125rem; flex: none; }
.year-caret {
width: 1.125rem; height: 1.125rem; flex: none; justify-self: end;
color: var(--text-dampad);
transition: transform var(--t-fast) var(--ease);
}
.year[open] .year-caret { transform: rotate(180deg); }
.year-body {
padding: 0 0.875rem 0.875rem;
border-top: 1px solid var(--linje-stark);
background: var(--yta-arbete);
}
.year-body > p { margin: 0.875rem 0; color: var(--text-dampad); font-size: var(--t-13); max-width: 70ch; }
/* Listan ligger redan inne i en ram. En ram till hade ritat en
kant mot en kant. */
.year-body .docs { border: 0; border-radius: 0; background: transparent; }
.year-body .doc { background: transparent; }
.year-body .doc:hover { background: var(--yta-kort); }
.year-body .doc:first-child { border-top: 1px solid var(--linje); }
@media (max-width: 620px) {
.year > summary { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
.year .source { grid-column: 2; justify-self: start; }
}
/* Granskningspanelen för ett inläst arkiv. Egen ram runt hela
listan, så att det syns att innehållet ännu inte är tillagt. */
.arkiv-panel {
padding: 1.125rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
}
.arkiv-panel .form-note { max-width: 70ch; }
.arkiv-ar {
justify-self: end;
min-height: 2rem; padding: 0.25rem 0.5rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-liten);
background: var(--yta-kort); color: var(--text);
font: inherit; font-size: var(--t-13);
}
@media (max-width: 620px) {
.arkiv-ar { grid-column: 2; justify-self: start; }
}
/* Kortet som förklarar var materialet kommer ifrån. */
.note-card {
display: grid; grid-template-columns: 3rem minmax(0, 1fr);
gap: 1.25rem; align-items: start;
padding: clamp(1.25rem, 3vw, 1.75rem);
border: 1px solid var(--linje); border-radius: var(--r-lg);
background: var(--yta-kort);
box-shadow: var(--skugga-kort);
}
.note-card h3 { font-size: 1.0625rem; letter-spacing: 0; margin: 0 0 0.5rem; }
.note-card p { color: var(--text-dampad); font-size: 0.9375rem; margin: 0 0 0.75rem; }
@media (max-width: 520px) {
.note-card { grid-template-columns: 1fr; gap: 1rem; }
}
.kv-row dt { margin: 0; font-size: var(--t-13); color: var(--text-dampad); }
.kv-row dd { margin: 0; font-weight: 500; font-size: var(--t-14); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Rubrik för en grupp som inte är ett riktigt formulärfält.
Hjälpklasserna .t-center och .mt-* ligger i shared/base.css,
eftersom fler än den här domänen behöver dem. */
.field-title { font-size: 0.9375rem; font-weight: 600; margin: 0; }
/* ------------------------------------------------------------
KOPPLA BOLAG, ETT STEG I TAGET
En fråga per vy. Det registret redan vet frågar vi inte om,
vi ber kunden bekräfta det. Stegen överst visar vad som är
gjort och vad som valdes, så att ingen behöver backa för att
se sina egna svar.
------------------------------------------------------------ */
.gate-card.is-journey { max-width: 42rem; }
.resa {
list-style: none; margin: 0 0 1.75rem; padding: 0 0 1.25rem;
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
gap: 0.5rem;
border-bottom: 1px solid var(--linje);
}
.resa-station {
position: relative; min-width: 0;
display: grid; justify-items: center; align-content: start; gap: 0.3125rem;
text-align: center;
}
/* Linjen från föregående punkt fram till den här. Punkten är
0,875 rem bred, så linjen börjar och slutar en bit utanför den. */
.resa-station + .resa-station::before {
content: ""; position: absolute; top: 0.4375rem;
right: calc(50% + 0.75rem); width: calc(100% - 1rem);
height: 1px; background: var(--linje-stark);
}
.resa-station.is-klar + .resa-station::before { background: var(--handling); }
.resa-punkt {
width: 0.875rem; height: 0.875rem; border-radius: 50%;
border: 1.5px solid var(--linje-stark); background: var(--yta-kort);
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.resa-station.is-klar .resa-punkt { background: var(--handling); border-color: var(--handling); }
.resa-station[aria-current="step"] .resa-punkt { border-color: var(--handling); box-shadow: 0 0 0 4px var(--handling-ton); }
.resa-namn {
font-size: var(--t-12); font-weight: 600;
color: var(--text-dampad);
white-space: nowrap;
}
.resa-station[aria-current="step"] .resa-namn { color: var(--text); }
/* Svaret får två rader och bryts mellan orden. Kapat mitt i ett
ord ("Accounto Swed...") ser det ut som ett fel. */
.resa-svar {
max-width: 100%; overflow: hidden;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
font-size: var(--t-12); line-height: 1.35; color: var(--text-dampad);
}
.resa-svar:empty { display: none; }
@media (max-width: 620px) {
.resa-svar { display: none; }
/* Sex etiketter får inte plats bredvid varandra på en telefon.
Den aktuella står kvar, de andra läses fortfarande upp. */
.resa-station:not([aria-current="step"]) .resa-namn {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
}
.steg { display: grid; gap: 1rem; }
.steg h2 { font-size: var(--t-24); line-height: 1.2; margin: 0; }
.steg h2:focus { outline: none; }
.steg-ingress { color: var(--text-dampad); margin: 0; max-width: 56ch; }
.val { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.625rem; }
.val > legend.field-title { margin-bottom: 0.625rem; padding: 0; }
/* Valen är riktiga radioknappar. Knappen själv göms, men
piltangenterna, fokus och uppläsningen finns kvar. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips-manad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.chips-forsta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips-manad .chip, .chips-forsta .chip { padding-inline: 0.25rem; }
@media (max-width: 520px) {
.chips-manad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chips-forsta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tidslinjen över två kalenderår. Varje ruta är en månad, och de
som hör till räkenskapsåret är blå. */
.arsband { display: grid; gap: 0.3125rem; }
.arsband-rad {
display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px;
border-radius: var(--r-liten); overflow: hidden;
}
.arsband-rad span {
display: grid; place-items: center; height: 1.75rem;
background: var(--yta-svag);
font-size: 0.6875rem; font-weight: 600;
color: var(--text-dampad);
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.arsband-rad span.pa { background: var(--handling-ton); color: var(--handling-djup); font-weight: 700; }
.arsband-ar {
display: grid; grid-template-columns: 1fr 1fr;
font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-dampad);
}
.arsband-text { margin: 0; font-size: var(--t-14); font-weight: 600; }
.arsband-text:empty { display: none; }
@media (max-width: 520px) {
.arsband-rad span { font-size: 0; height: 1.25rem; }
}
.steg .error { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--fel); }
.steg .error:empty { display: none; }
/* Sammanfattningen. En rad per uppgift, och det som går att
ändra har en knapp som leder tillbaka till sitt steg. */
.sammanfattning {
margin: 0;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
}
.sammanfattning-rad {
display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
gap: 0.25rem 1rem; align-items: baseline;
padding: 0.625rem 0.875rem;
}
.sammanfattning-rad + .sammanfattning-rad { border-top: 1px solid var(--linje); }
.sammanfattning dt { font-size: var(--t-13); color: var(--text-dampad); }
.sammanfattning dd {
margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
font-size: var(--t-14); font-weight: 500; overflow-wrap: anywhere;
}
.sammanfattning .linkish { flex: none; font-size: var(--t-13); }
.sammanfattning-varde { display: grid; gap: 0.125rem; }
/* Varifrån svaret kom, när kunden aldrig fick frågan. */
.kalla-etikett {
font-size: var(--t-12); font-weight: 400;
color: var(--text-dampad);
}
@media (max-width: 520px) {
.sammanfattning-rad { grid-template-columns: minmax(0, 1fr); }
}
.noteringar { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.noteringar:empty { display: none; }
.noteringar li {
display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.625rem;
padding: 0.625rem 0.875rem;
border-radius: var(--r-falt);
background: var(--yta-neutral); color: var(--text-dampad);
font-size: var(--t-13);
}
.noteringar svg { width: 1rem; height: 1rem; margin-top: 0.125rem; }
.steg-knappar {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
margin-top: 0.5rem; padding-top: 1.25rem;
border-top: 1px solid var(--linje);
}
.gate-card .steg-knappar .btn { width: auto; }
.steg-knappar .btn-blue { margin-left: auto; }
.steg-knappar .btn-ghost { padding-inline: 1rem; }
@media (max-width: 520px) {
.steg-knappar { flex-direction: column-reverse; align-items: stretch; }
.gate-card .steg-knappar .btn { width: 100%; margin-left: 0; }
.steg-knappar .btn-ghost { justify-content: center; }
}
/* ------------------------------------------------------------
ÖVERSIKTEN
Tre frågor, i den ordning kunden ställer dem: vad behöver
jag göra, vad är kvar av uppstarten, och när ska saker vara
inne. Statistiken som stod här förut svarade inte på någon
av dem.
------------------------------------------------------------ */
.list-head-hoger { display: flex; align-items: baseline; gap: 1rem; }
/* "4 öppna" och "2 av 3 klara" är meningar med en siffra i, inte
tal i en kolumn, och hör därför till Plex Sans. Mono är kvar
där tal står under varandra och ska gå att jämföra. */
.antal {
font-size: var(--t-13); color: var(--text-dampad);
font-variant-numeric: tabular-nums;
}
/* Gruppnamnet över en lista. Det stod i monoversaler på tio
pixlar med tio procents spärr, alltså precis den lilla
etikett över rubriken som redan är avfärdad en gång. Här är
det en underrubrik: samma typsnitt som texten, gemener, och
satt i vikt i stället för i versaler. */
.grupp-etikett {
display: flex; align-items: center; gap: 0.5rem;
margin: 1.5rem 0 0.5rem;
font-size: var(--t-13); font-weight: 600;
letter-spacing: 0; text-transform: none; color: var(--text-dampad);
}
.grupp-etikett:first-child { margin-top: 0; }
.grupp-etikett .lookup-demo { display: inline; margin: 0; }
/* Raderna i en lista som leder vidare är länkar i sin helhet. */
.docs > li + li > .doc { border-top: 1px solid var(--linje); }
a.doc { color: inherit; text-decoration: none; }
a.doc:hover .doc-name { color: var(--handling-djup); }
.doc-pil { width: 1rem; height: 1rem; color: var(--text-dampad); justify-self: end; }
/* Datumen. Dagen står som ett block till vänster, så att listan
går att skumma nedåt utan att läsa titlarna. */
.doc.datum { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
.datum-mark {
display: grid; place-items: center; align-content: center; gap: 0.125rem;
width: 2.5rem; height: 2.5rem;
border-radius: var(--r-liten);
background: var(--yta-neutral); color: var(--text-dampad);
line-height: 1;
}
.datum-dag { font-family: var(--font-mono); font-size: var(--t-15); font-weight: 700; font-variant-numeric: tabular-nums; }
.datum-manad { font-size: 0.6875rem; font-weight: 600; }
@media (max-width: 620px) {
.doc.datum { grid-template-columns: 2.5rem minmax(0, 1fr); }
.doc-pil { display: none; }
}
/* Uppstarten. Bara det steg som är på tur är utfällt, de andra
står som en rad var så att helheten syns utan att ta sidan. */
.uppstart-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.uppstart-steg {
display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 0.875rem;
padding: 0.625rem 0;
}
.uppstart-steg + .uppstart-steg { border-top: 1px solid var(--linje); }
.uppstart-nr {
display: grid; place-items: center;
width: 1.75rem; height: 1.75rem; border-radius: 50%;
border: 1px solid var(--linje-stark);
font-family: var(--font-mono); font-size: var(--t-12); font-weight: 700; color: var(--text-dampad);
}
.uppstart-nr svg { width: 0.875rem; height: 0.875rem; }
.uppstart-steg.is-aktiv .uppstart-nr { background: var(--handling); border-color: var(--handling); color: var(--text-pa-handling); }
.uppstart-steg.is-klar .uppstart-nr { background: var(--klar-ton); border-color: transparent; color: var(--klar); }
.uppstart-huvud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; min-height: 1.75rem; }
.uppstart-titel { margin: 0; font-size: var(--t-14); font-weight: 600; }
.uppstart-steg.is-klar .uppstart-titel { font-weight: 500; color: var(--text-dampad); }
.uppstart-huvud .cta { min-height: auto; font-size: var(--t-13); }
.uppstart-vantar { flex: none; font-size: var(--t-13); color: var(--text-dampad); }
.uppstart-text { margin: 0.25rem 0 0.75rem; max-width: 62ch; color: var(--text-dampad); font-size: var(--t-13); }
/* ============================================================
NEDTRYCK
------------------------------------------------------------
Tjänsten hade tjugoen hover-regler och noll tryckregler. Hover
finns inte på en pekskärm, och tjänsten har en bottenmeny som
bara existerar på telefon. Resultatet var att den yta som
används mest var den enda som inte svarade när man rörde vid
den.
Återkopplingen ligger på nedtrycket, inte på släppet. Väntar
man på klicket har fingret redan lämnat skärmen, och trycket
känns obesvarat även när det gick fram.
Två storlekar: små kontroller sjunker tre procent, breda rader
en. En bred rad som krymper tre procent rör sina ytterkanter
flera pixlar, och det läser som att raden hoppar i stället för
att svara.
============================================================ */
.shell-nav-list a:active,
.pick:active,
.filters button:active,
.chip:active,
.account-add:active,
.account-logout:active {
scale: 0.97;
transition-duration: var(--t-press);
}
.account-item:active,
.company-switch:active,
.doc:active,
.year > summary:active {
scale: 0.99;
transition-duration: var(--t-press);
}
/* Mindre rörelse: samma besked, men ingenting krymper. */
@media (prefers-reduced-motion: reduce) {
.shell-nav-list a:active,
.pick:active,
.filters button:active,
.chip:active,
.account-add:active,
.account-logout:active,
.account-item:active,
.company-switch:active,
.doc:active,
.year > summary:active {
scale: none;
filter: brightness(0.95);
}
}
/* ------------------------------------------------------------
INLÄMNINGEN MOT SERVERN
Förlopp, återkallande, andra handlingar och arkiven som tagits
emot. Samma former som resten av tjänsten, inga nya färger
utöver felets röda, som redan används i kön.
------------------------------------------------------------ */
/* Den tredje ytan får hela bredden när ytorna står två och två. */
@media (min-width: 880px) {
.dropzones > .dz:nth-child(3):last-child { grid-column: 1 / -1; }
/* Över hela bredden fyllde innehållet bara vänstra halvan. Nu står
beskrivningen till vänster och valet med knappen till höger. */
.dropzones > .dz:nth-child(3):last-child {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 2.5rem; align-content: start; min-height: 0;
}
.dropzones > .dz:nth-child(3):last-child > .rund-ikon { grid-column: 1; grid-row: 1; }
.dropzones > .dz:nth-child(3):last-child > h2 { grid-column: 1; grid-row: 2; }
.dropzones > .dz:nth-child(3):last-child > p:not(.dz-formats) { grid-column: 1; grid-row: 3; }
.dropzones > .dz:nth-child(3):last-child > .dz-typ { grid-column: 2; grid-row: 1; align-self: end; max-width: none; margin: 0; }
.dropzones > .dz:nth-child(3):last-child > .dz-formats { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0.5rem; }
.dropzones > .dz:nth-child(3):last-child > .dz-actions { grid-column: 2; grid-row: 3; align-self: start; margin-top: 0.5rem; }
.dropzones > .dz:nth-child(3):last-child > .dz-queue { grid-column: 1 / -1; }
}
.dz-typ { margin: 0 0 0.25rem; max-width: 24rem; }
/* Valet av bankkonto står direkt under formaten, se skicka-in.html. */
.dz-formats + .dz-typ { margin-top: 0.75rem; }
.dz-typ label { font-size: var(--t-13); }
.dz-queue li.is-skickas .mark { color: var(--text-dampad); }
.dz-queue progress {
flex: 0 0 4.5rem; height: 0.375rem;
accent-color: var(--handling);
}
.doc-lank { display: block; color: inherit; text-decoration: none; }
.doc-lank:hover, .doc-lank:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.doc-fel { margin: 0.25rem 0 0; font-size: var(--t-13); font-weight: 600; color: var(--fel); }
.doc-atgarder {
justify-self: end;
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem;
}
/* Den lilla sekundärknappen i en rad: Återkalla, Kopiera adressen,
Ladda ner. Samma form som .btn-ghost, lägre. */
.doc-knapp {
display: inline-flex; align-items: center; justify-content: center;
min-height: 2.25rem; padding: 0.25rem 0.75rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort); color: var(--text);
font: inherit; font-size: var(--t-13); font-weight: 600;
cursor: pointer; white-space: nowrap;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.doc-knapp:hover { border-color: var(--linje-hov); background: var(--yta-svag); }
.doc-knapp:active { scale: 0.98; transition-duration: var(--t-press); }
@media (max-width: 880px) {
.doc-knapp { min-height: var(--h-kontroll); }
}
.doc-knapp:disabled { opacity: 0.5; cursor: default; }
.year-flaggor {
display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem;
}
.arkiv-forlopp {
display: block; width: 100%; height: 0.5rem;
accent-color: var(--handling);
}
.arkiv-forlopp[hidden] { display: none; }
.arkiv-panel[data-state="fel"] #arkiv-sammanfattning { color: var(--fel); font-weight: 600; }
@media (max-width: 620px) {
.doc-atgarder { grid-column: 2; justify-self: start; justify-content: flex-start; }
.year-flaggor { grid-column: 2 / -1; justify-content: flex-start; }
}
/* ------------------------------------------------------------
ÄRENDEN, DATUMSTATUS OCH UTLÄGG
------------------------------------------------------------ */
/* En rad i att göra-listan som öppnar en dialog. Ser ut som länkraden. */
.doc-knapp-rad {
width: 100%;
border: 0; border-radius: 0;
font: inherit; color: inherit; text-align: left;
cursor: pointer;
}
.doc-knapp-rad:focus-visible { outline: 2px solid var(--handling); outline-offset: -2px; }
.doc-text { display: block; min-width: 0; }
.doc-text .doc-name, .doc-text .doc-meta { display: block; }
/* Ärendets ark är ett formulär och läses uppifrån, till skillnad från
BankID-arket som är centrerat kring QR-koden. */
.arende-ark { width: min(36rem, calc(100vw - 2rem)); }
.arende-ark .sheet-inner { text-align: left; }
.arende-meta { margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: var(--t-12); color: var(--text-dampad); }
.arende-text { margin: 0 0 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.arende-dokument { display: inline-flex; margin: 0 0 0.75rem; }
.arende-tidigare { margin: 0.75rem 0; padding: 0.75rem 0.875rem; border-radius: var(--r-falt); background: var(--yta-svag); }
.arende-tidigare p { margin: 0 0 0.375rem; }
.arende-form { display: grid; gap: 0.875rem; margin-top: 0.75rem; }
.arende-val { margin: 0; padding: 0; border: 0; display: grid; gap: 0.5rem; }
.arende-val legend { margin-bottom: 0.375rem; font-weight: 600; font-size: 0.9375rem; }
.arende-alternativ { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; }
.arende-alternativ input { margin-top: 0.25rem; accent-color: var(--handling); }
.arende-form textarea { resize: vertical; }
.arende-knappar { justify-content: flex-start; }
.arende-fakta { margin: 0.5rem 0 0.75rem; }
.field[hidden] { display: none; }
.inkorg-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.inkorg-adress {
min-width: 0; overflow-wrap: anywhere;
font-family: var(--font-mono); font-size: var(--t-13); font-weight: 600;
}
.company-inkorg { overflow-wrap: anywhere; }
.utlagg-falt { display: grid; gap: 0.875rem; }
@media (min-width: 720px) {
.utlagg-falt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.utlagg-kvitto { grid-column: 1 / -1; }
}
.utlagg-form .error:empty { display: none; }
.utlagg-form .btn { margin-top: 0.5rem; justify-self: start; width: auto; }
/* Kvittofältet och bilagan till ett meddelande ser ut som de andra
fälten, med en egen knapp i
stället för webbläsarens grå Välj fil. */
:is(.utlagg-kvitto, .bilaga-falt) input[type="file"] {
width: 100%; min-height: var(--h-kontroll); padding: 0.3125rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort); color: var(--text-dampad); font-size: var(--t-14);
cursor: pointer;
}
:is(.utlagg-kvitto, .bilaga-falt) input[type="file"]::file-selector-button {
margin-right: 0.875rem; padding: 0.375rem 0.875rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-liten);
background: var(--yta-kort); color: var(--text);
font: inherit; font-weight: 600; cursor: pointer;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
:is(.utlagg-kvitto, .bilaga-falt) input[type="file"]:hover::file-selector-button { background: var(--yta-svag); border-color: var(--linje-hov); }
:is(.utlagg-kvitto, .bilaga-falt) input[type="file"]:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }
:is(.utlagg-kvitto, .bilaga-falt) input[type="file"] { font: inherit; font-size: var(--t-13); }
/* ------------------------------------------------------------
TABELLEN
Ekonomisk information hör hemma i kolumner. En lista där
datum, typ och status står inbakade i en mening går inte att
skumma, och två belopp går inte att jämföra om de inte står
under varandra.
Tre regler bär den: talen är högerställda och i mono med fasta
sifferbredder, rubrikraden är ord och inte en tonad platta, och
raderna skiljs med en hårfin linje i stället för med varannan
rad tonad. Zebrarandning är en lösning på ett problem som täta
linjer inte har.
------------------------------------------------------------ */
/* Ingen rullningsyta. En meny som fälls ut ur en tabellrad klipps
av en förälder med overflow, och den enda anledningen till
rullningen var smala skärmar. Där blir raderna kort i stället,
se brytpunkten nedan, så tabellen behöver aldrig vara bredare
än sin spalt. */
/* Med stor text får tabellen skrollas i sidled inom sin yta, så att
inte hela sidan gör det (WCAG 1.4.10 tillåter det för tabeller). */
.tabellyta { position: relative; max-width: 100%; overflow-x: auto; }
.tabellyta:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }
.tabellyta[hidden] { display: none; }
.tabell {
width: 100%;
border-collapse: collapse;
background: var(--yta-kort);
border: 1px solid var(--linje);
border-radius: var(--r-kort);
font-size: var(--t-14);
}
.tabell th, .tabell td {
padding: 0.6875rem 0.875rem;
text-align: left;
vertical-align: top;
}
.tabell thead th {
padding-block: 0.5rem;
font-size: var(--t-12); font-weight: 600;
color: var(--text-dampad);
border-bottom: 1px solid var(--linje-stark);
white-space: nowrap;
}
.tabell tbody tr + tr td { border-top: 1px solid var(--linje); }
.tabell .tal { text-align: right; }
.tabell th.tal { text-align: right; }
/* Talen står i mono, för det är här mono hör hemma: kolumner där
siffrorna ska gå att jämföra rad för rad. */
.tal-mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tabell-namn { display: block; font-weight: 500; }
.tabell-under { display: block; font-size: var(--t-12); color: var(--text-dampad); }
.ar-forsenad { color: var(--fel); }
.tabell-atgarder {
display: flex; flex-wrap: wrap; gap: 0.375rem;
justify-content: flex-end;
}
.tabell-atgarder a.doc-knapp { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 620px) {
/* På telefon står knapparna under varandra. Tre knappar i bredd
i en tabellcell gör raden bredare än skärmen. */
.tabell-atgarder { flex-direction: column; align-items: stretch; }
.tabell-atgarder > * { justify-content: center; }
}
@media (max-width: 900px) {
/* En tabell med sex kolumner är fel form på en liten skärm. Fast
kolumnbredd hjälper inte: 358 pixlar delat på sex blir sextio,
och ett bolagsnamn brutet till en bokstav per rad är inte
tätare information, bara oläsligt.
Raderna blir kort i stället. Uppgifterna är desamma och står
i samma ordning, men de ligger i två spalter över tre rader:
numret och beloppet överst, mottagaren under, förfallodagen
och statusen sist. Rubrikraden faller bort, och den enda
etikett som behövs skrivs ut på förfallodagen. */
.tabellyta { overflow: visible; }
.tabell { display: block; table-layout: auto; border: 0; background: none; }
.tabell thead { display: none; }
.tabell tbody { display: block; }
.tabell tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: 0.25rem 0.75rem;
margin-bottom: 0.625rem; padding: 0.875rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
}
.tabell tbody tr + tr td { border-top: 0; }
.tabell td { display: block; padding: 0; }
/* Fakturadatum faller bort. Det datum som räknas när man ser
efter på telefonen är förfallodagen. */
.tabell th:nth-child(3), .tabell td:nth-child(3) { display: none; }
.tabell td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
.tabell td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
.tabell td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.tabell td:nth-child(4) { grid-column: 1; grid-row: 3; align-self: center; }
.tabell td:nth-child(6) { grid-column: 2; grid-row: 3; justify-self: end; }
.tabell td:nth-child(7) { grid-column: 1 / -1; grid-row: 4; margin-top: 0.5rem; }
.tabell td:nth-child(4)::before { content: "Förfaller "; color: var(--text-dampad); }
.tabell-atgarder { justify-content: flex-start; }
}
/* ------------------------------------------------------------
FORMULÄRET I ETT KORT
Avsändaruppgifterna är många fält som hör ihop, och det är
precis vad ett kort är till för: att hålla ihop det som ska
läsas som en enhet.
------------------------------------------------------------ */
.kort-form {
padding: 1.25rem;
border: 1px solid var(--linje); border-radius: var(--r-kort);
background: var(--yta-kort);
}
.kort-form > .form-note:first-child { margin-top: 0; max-width: 68ch; }
/* Sex spalter, så att varje grupp får hela rader: namn och
organisationsnummer bredvid varandra, postnummer smalt och orten
brett. Med auto-fit blev det hål där en rad inte gick jämnt ut. */
.falt-rutnat {
display: grid; gap: 0.875rem 1rem;
margin: 1.25rem 0;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.falt-rutnat > * { grid-column: span 3; }
.falt-rutnat > .falt-2 { grid-column: span 2; }
.falt-rutnat > .falt-4 { grid-column: span 4; }
.falt-rutnat > .falt-brett { grid-column: 1 / -1; }
/* I mobilen ett fält per rad, utom de korta som går två och två:
postnummer och ort, bankgiro och plusgiro. */
@media (max-width: 40rem) {
.falt-rutnat > * { grid-column: 1 / -1; }
.falt-rutnat > .falt-2, .falt-rutnat > .falt-4 { grid-column: span 3; }
.falt-rutnat > .falt-ensam-mobil { grid-column: 1 / -1; }
}
.form-rad { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }
/* Fälten i grupper efter vad de handlar om: bolaget, adressen och
betalningen. Tolv fält i ett enda rutnät läste som en blankett,
tre korta grupper går att fylla i en i taget. Samma rubrikstil
som valet av mall nedanför. */
.falt-grupp { margin: 1.5rem 0 0; padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--linje); min-width: 0; }
/* En legend ligger annars mitt på fältgruppens kantlinje, med ett
glapp under sig. Flyter den över hela bredden hamnar den under
linjen som en vanlig rubrik. */
.falt-grupp legend, .stilval legend { float: left; width: 100%; padding: 0; margin-bottom: 0.25rem; font-size: var(--t-15); font-weight: 600; }
.falt-grupp > :not(legend), .stilval > :not(legend) { clear: both; }
.falt-grupp > .form-note { margin: 0.375rem 0 0; }
.falt-grupp .falt-rutnat { margin: 0.875rem 0 0; }
.falt-grupp .field > .form-note { margin: 0.375rem 0 0; }
/* Ett kort med ett besked och en knapp, till exempel det första
en ny kund ser på fakturasidan. */
.kort-notis h2 { margin: 0; font-size: var(--t-18); }
/* ------------------------------------------------------------
VALET AV FAKTURAMALL
------------------------------------------------------------ */
.stilval { margin: 1.75rem 0 0; padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--linje); }
.stilval legend { padding: 0; font-size: var(--t-15); font-weight: 600; }
.stilar {
display: grid; gap: 0.625rem; margin: 1rem 0 0; padding: 0;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.stil {
display: flex; gap: 0.75rem; height: 100%;
padding: 0.875rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.stil:hover { border-color: var(--text-dampad); }
.stil:has(input:checked) { border-color: var(--handling); background: var(--handling-ton); }
.stil:has(input:focus-visible) { outline: 2px solid var(--handling); outline-offset: 2px; }
.stil input { accent-color: var(--handling); width: 1.125rem; height: 1.125rem; margin: 0.1875rem 0 0; flex: none; }
.stil-text { display: grid; align-content: start; gap: 0.25rem; min-width: 0; }
.stil-namn { font-weight: 600; font-size: var(--t-14); }
.stil-om { font-size: var(--t-13); color: var(--text-dampad); }
.stil-lank { justify-self: start; font-size: var(--t-13); }
/* ------------------------------------------------------------
ARKET DÄR FAKTURAN SKRIVS
------------------------------------------------------------ */
/* Arket är bredare än de andra. Ett kvitto på en inloggning är en
mening, en faktura är ett formulär med fem fält i bredd, och i
en smal ruta hamnar varje fält på egen rad och arket blir en
halvmeter långt. */
.faktura-ark { width: min(46rem, calc(100% - 2rem)); max-width: none; }
.faktura-ark .sheet-inner { text-align: left; }
/* Mottagarens fält i fasta rader: namn och organisationsnummer,
momsnummer och adress, postnummer och ort, e-post och referens.
Rubriken säger att det gäller mottagaren, så etiketterna är
korta nog att läsas hela. */
.ark-egen {
display: grid; gap: 0.875rem 1rem; grid-column: 1 / -1;
grid-template-columns: repeat(6, minmax(0, 1fr));
align-items: start;
}
.ark-egen > .field { grid-column: span 3; }
.ark-egen > .field:nth-child(5) { grid-column: span 2; }
.ark-egen > .field:nth-child(6) { grid-column: span 4; }
.ark-egen > :not(.field), .ark-egen > .falt-kryss { grid-column: 1 / -1; }
@media (max-width: 40rem) {
.ark-egen > .field, .ark-egen > .field:nth-child(n) { grid-column: 1 / -1; }
.ark-egen > .field:nth-child(5), .ark-egen > .field:nth-child(6) { grid-column: span 3; }
}
.ark-egen[hidden] { display: none; }
.ark-rader { display: grid; gap: 0.875rem; }
.ark-rad {
display: grid; gap: 0.625rem 0.875rem;
padding: 0.875rem;
border: 1px solid var(--linje); border-radius: var(--r-falt);
background: var(--yta-arbete);
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}
.ark-rad .field:first-child { grid-column: 1 / -1; }
.ark-bort { grid-column: 1 / -1; justify-self: start; font-size: var(--t-13); }
.ark-brister {
margin: 1.25rem 0 0; padding: 0.875rem 0.875rem 0.875rem 2rem;
border-radius: var(--r-falt);
background: var(--fel-ton); color: var(--fel);
font-size: var(--t-13); font-weight: 500;
}
.ark-knappar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.625rem; margin-top: 1.5rem; }
@media (max-width: 620px) {
.ark-knappar { flex-direction: column-reverse; }
.ark-knappar > * { width: 100%; justify-content: center; }
}
/* ------------------------------------------------------------
FRÅGA FÖRST
Arket som frågar innan något tas bort eller inte går att ta
tillbaka. Byggs av fragaForst() i app.js, och fakturorna har en
egen variant med datumfält i samma form.
------------------------------------------------------------ */
.bekrafta-ark { width: min(30rem, calc(100vw - 2rem)); }
.bekrafta-ark .sheet-inner { text-align: left; }
.bekrafta-ark h2 { margin: 0 0 0.5rem; }
.bekrafta-text { margin: 0; font-size: var(--t-15); line-height: 1.55; color: var(--text-dampad); overflow-wrap: anywhere; }
.bekrafta-ark .form-status:not([hidden]) { margin-top: 1rem; }
@media (max-width: 640px) {
.bekrafta-ark { width: 100vw; }
}
/* En primär knapp för något som tar bort. Röd, eftersom den
ska läsas innan den trycks på. */
.knapp-primar.knapp-fara { --btn-bg: var(--fel); background: var(--fel); }
.knapp-primar.knapp-fara:hover { filter: brightness(0.9); }
/* ------------------------------------------------------------
ARKET: GRUPPER, VARNINGAR OCH FÖRHANDSGRANSKNING
Fälten är grupperade efter vem uppgiften handlar om, och varje
grupp bär sin rubrik. Utan grupperingen står Namn, Adress och
Ort utan att säga vems de är, och den som fyller i får gissa.
------------------------------------------------------------ */
.ark-grupp {
margin: 0 0 1.25rem; padding: 1.125rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
display: grid; gap: 0.75rem 1rem;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
/* Mottagarens fält bär sitt ägarskap i etiketten, och
"Mottagarens organisationsnummer" får inte plats i en tredjedel
av arket. Två kolumner i stället för tre, så att etiketten går
att läsa hel i stället för att kapas med tre punkter. */
.ark-grupp.ark-mottagare { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
/* Rubriken inne i rutan och inte mitt på ramen. En legend som
flyter räknas som ett vanligt element i rutnätet. */
.ark-grupp legend {
float: left; grid-column: 1 / -1; width: 100%;
padding: 0; font-size: var(--t-15); font-weight: 600;
}
.ark-om, .ark-vald, .ark-summa, .ark-ledtext {
grid-column: 1 / -1;
margin: 0; font-size: var(--t-13); color: var(--text-dampad);
}
.ark-om { margin-top: -0.25rem; max-width: 62ch; }
/* Summan till höger, där ögat letar efter den på en faktura. */
.ark-summa { text-align: right; font-size: var(--t-15); color: var(--text); font-variant-numeric: tabular-nums; }
.ark-vald[hidden] { display: none; }
.ark-vald {
padding: 0.625rem 0.75rem;
border-radius: var(--r-liten);
background: var(--yta-arbete);
}
.ark-summa {
margin-top: 0.25rem; padding-top: 0.75rem;
border-top: 1px solid var(--linje);
font-weight: 600; color: var(--text);
font-variant-numeric: tabular-nums;
}
.ark-rader, .ark-grupp > .doc-knapp { grid-column: 1 / -1; }
.ark-grupp > .doc-knapp { justify-self: start; }
/* Fältet och det som hör till det. Prefixet är seriebokstaven
framför fakturanumret, så att A och 1 läses som ett nummer. */
.falt-ruta { display: flex; align-items: center; gap: 0.5rem; }
.falt-ruta > input, .falt-ruta > select { flex: 1 1 auto; min-width: 0; }
.falt-prefix {
flex: none;
font-family: var(--font-mono); font-size: var(--t-14); font-weight: 600;
color: var(--text-dampad);
}
/* Varningen på ett fält som bara tar siffror. Gul och inte röd:
det som står i fältet går att rätta, och ingenting har gått
sönder. Ikonen står aldrig ensam, texten säger vad som gäller,
eftersom ingenting får bäras av färg allena. */
.falt-varning {
flex: none; display: inline-flex; align-items: center; gap: 0.25rem;
color: var(--vantar);
font-size: var(--t-12); font-weight: 600;
}
.falt-varning[hidden] { display: none; }
.falt-varning svg { width: 1.0625rem; height: 1.0625rem; color: var(--vantar); }
.field.ar-varnad input { border-color: var(--vantar); }
.field.ar-varnad input:focus { box-shadow: 0 0 0 3px var(--vantar-ton); }
.falt-hjalp { margin: 0.25rem 0 0; font-size: var(--t-12); color: var(--text-dampad); }
/* Samma gula ton som varningen i fältet: något att se över, inget fel. */
.falt-hjalp.ar-varnad { color: var(--vantar); }
.falt-kryss {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 0.5rem;
}
.falt-kryss input { accent-color: var(--handling); width: 1.0625rem; height: 1.0625rem; flex: none; }
.falt-kryss label { font-size: var(--t-14); font-weight: 400; }
/* Förhandsgranskningen. Handlingen ritas av samma mall som
mottagaren får, så det som granskas är det som skickas. */
.ark-granskning {
margin: 1rem 0 0.875rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-svag);
overflow: hidden;
}
.ark-pdf {
display: block; width: 100%; height: min(62vh, 34rem);
border: 0;
}
.ark-granskknappar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ark-granskknappar a.doc-knapp {
text-decoration: none; display: inline-flex; align-items: center;
}
@media (max-width: 620px) {
.ark-pdf { height: 52vh; }
.ark-granskknappar > * { flex: 1 1 auto; justify-content: center; }
}
/* ------------------------------------------------------------
FLYTANDE ETIKETTER
Etiketten står i fältet tills något skrivs, och flyttar sig då
upp i vänstra hörnet och krymper. Den tar därmed ingen egen rad
ovanför fältet, vilket gör formuläret nästan en tredjedel
kortare, och den försvinner aldrig, vilket en platshållare gör
just när man behöver den som mest.
Ingen JavaScript. :placeholder-shown svarar på om fältet är
tomt, och därför bär varje fält placeholder=" ", ett blanksteg.
Etiketten står efter fältet i markeringen för att syskonväljaren
ska nå den, och ligger ändå överst visuellt.
En select och ett datumfält har alltid ett värde och aldrig en
platshållare, så deras etikett står uppe från början.
------------------------------------------------------------ */
.field.flyt > label { display: none; }
.field.flyt .falt-ruta {
position: relative;
display: block;
}
.field.flyt .falt-ruta > input,
.field.flyt .falt-ruta > select,
.field.flyt .falt-ruta > textarea {
width: 100%;
min-height: 3.25rem;
padding: 1.375rem 0.8125rem 0.4375rem;
}
.field.flyt .falt-ruta > select { padding-top: 1.25rem; }
/* Mitt i fältets minsta höjd och inte i rutan, som sträcks ut när ett
grannfält på samma rad har en hjälptext under sig. */
.field.flyt .falt-ruta > .flyt-etikett {
position: absolute; left: 0.875rem; top: 1.625rem;
transform: translateY(-50%);
display: block;
max-width: calc(100% - 2.5rem);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--text-dampad); font-size: var(--t-14); font-weight: 400;
pointer-events: none;
transition: top var(--t-fast) var(--ease),
font-size var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.field.flyt .falt-ruta > input:focus ~ .flyt-etikett,
.field.flyt .falt-ruta > input:not(:placeholder-shown) ~ .flyt-etikett,
.field.flyt .falt-ruta > textarea:focus ~ .flyt-etikett,
.field.flyt .falt-ruta > textarea:not(:placeholder-shown) ~ .flyt-etikett,
.field.flyt .falt-ruta > select ~ .flyt-etikett {
top: 0.4375rem;
transform: none;
font-size: var(--t-11); font-weight: 600;
letter-spacing: 0.01em;
}
.field.flyt .falt-ruta > input:focus ~ .flyt-etikett,
.field.flyt .falt-ruta > textarea:focus ~ .flyt-etikett {
color: var(--handling);
}
@media (prefers-reduced-motion: reduce) {
.field.flyt .falt-ruta > .flyt-etikett { transition: none; }
}
/* Seriebokstaven framför fakturanumret ligger i fältet, och både
siffran och etiketten flyttar in bakom den. */
.field.flyt .falt-ruta.har-prefix > input { padding-left: 2.25rem; }
.field.flyt .falt-ruta.har-prefix > .falt-prefix {
position: absolute; left: 0.875rem; bottom: 0.4375rem;
font-family: var(--font-mono); font-size: var(--t-14); font-weight: 600;
color: var(--text-dampad);
}
.field.flyt .falt-ruta.har-prefix > .flyt-etikett { left: 2.25rem; }
/* Varningen sitter i fältets högerkant, och texten lämnar plats. */
.field.flyt .falt-ruta > .falt-varning {
position: absolute; right: 0.75rem; top: 50%;
transform: translateY(-50%);
}
.field.flyt .falt-ruta:has(.falt-varning:not([hidden])) > input { padding-right: 7.5rem; }
@media (max-width: 480px) {
/* På telefon får texten "Bara siffror" inte plats bredvid det
som skrivs. Då räcker triangeln, och texten läses upp av
skärmläsaren ur aria-describedby. */
.field.flyt .falt-varning-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.field.flyt .falt-ruta:has(.falt-varning:not([hidden])) > input { padding-right: 2.75rem; }
}
/* Raden som säger vad vi redan visste. Den står bara första
gången, och försvinner när uppgifterna är sparade. */
.form-hamtat {
margin: 0.875rem 0 0; padding: 0.75rem 0.875rem;
border-radius: var(--r-liten);
background: var(--klar-ton); color: var(--klar);
font-size: var(--t-13);
}
.form-hamtat[hidden] { display: none; }
/* ------------------------------------------------------------
NAMNFÖRSLAGEN
Listan under fältet när kunden söker efter ett bolag. Den ligger
ovanpå det som står under, så att den inte knuffar formuläret,
och den markerade raden följer både mus och piltangenter.
------------------------------------------------------------ */
.field.flyt { position: relative; }
.forslag {
position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.25rem);
margin: 0; padding: 0.25rem; list-style: none;
max-height: 15rem; overflow-y: auto;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
box-shadow: var(--skugga-sval);
}
.forslag[hidden] { display: none; }
.forslag li {
display: grid; gap: 0.0625rem;
padding: 0.5rem 0.625rem;
border-radius: var(--r-liten);
cursor: pointer;
}
.forslag li.ar-markerad { background: var(--handling-ton); }
.forslag-namn { font-size: var(--t-14); font-weight: 500; }
.forslag-om {
font-size: var(--t-12); color: var(--text-dampad);
font-variant-numeric: tabular-nums;
}
.forslag-not {
cursor: default;
padding-top: 0.5rem; margin-top: 0.25rem;
border-top: 1px solid var(--linje);
font-size: var(--t-11); color: var(--text-dampad);
}
.forslag-not.ar-markerad { background: none; }
/* ------------------------------------------------------------
ÅTERKOMMANDE FAKTUROR
------------------------------------------------------------ */
.upprepningar { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.upprepning {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 0.625rem 1rem;
padding: 0.875rem 1rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
}
.upprepning.ar-pausad { background: var(--yta-arbete); }
.upprepning-text { display: grid; gap: 0.125rem; min-width: 0; }
.upprepning-namn { font-size: var(--t-14); font-weight: 500; }
.upprepning-om {
font-size: var(--t-13); color: var(--text-dampad);
font-variant-numeric: tabular-nums;
}
.upprepning-knappar { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.upprepa-ark { width: min(30rem, calc(100% - 2rem)); max-width: none; }
.upprepa-ark .sheet-inner { text-align: left; }
/* ------------------------------------------------------------
MER-MENYN PÅ EN TABELLRAD
------------------------------------------------------------ */
.mer { position: relative; }
.mer > summary {
list-style: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 0.3125rem;
}
.mer > summary::-webkit-details-marker { display: none; }
.mer > summary::after {
content: ""; width: 0.375rem; height: 0.375rem; flex: none;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: translateY(-1px) rotate(45deg);
}
.mer[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.mer-lista {
position: absolute; z-index: 25; right: 0; top: calc(100% + 0.25rem);
display: grid; gap: 0.125rem;
min-width: 12rem; padding: 0.25rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
box-shadow: var(--skugga-sval);
}
.mer-val {
border: 0; background: none;
justify-content: flex-start; text-align: left;
width: 100%; padding: 0.4375rem 0.625rem;
border-radius: var(--r-liten);
}
.mer-val:hover { background: var(--yta-hov); border-color: transparent; }
@media (max-width: 900px) {
/* I kortlayouten finns gott om bredd, och menyn kan lika gärna
fälla ut sig på plats som att lägga sig ovanpå kortet. */
.mer { width: 100%; }
.mer-lista { position: static; min-width: 0; box-shadow: none; margin-top: 0.375rem; }
}
/* ============================================================
SIDHUVUDET OCH KORTEN
------------------------------------------------------------
Varje sida i skalet börjar likadant, direkt på arbetsytan och
utan band bakom: en dämpad rad överst, rubriken i IBM Plex Serif,
en mening om vad sidan är till för, och till höger sidans enda
primära knapp. Under det korten.
Räkenskapsår 2026
Fakturor
En mening.
Ny faktura
Rubrik 3
... listan direkt i kortet, eller
============================================================ */
.sidtopp {
padding: 2.5rem 0 1.75rem;
background: none;
color: var(--text);
}
.sidtopp-inre {
display: flex; flex-wrap: wrap; align-items: flex-end;
justify-content: space-between; gap: 1rem 2rem;
}
.sidtopp-text { min-width: 0; flex: 1 1 28rem; }
.sidtopp-meta {
display: flex; flex-wrap: wrap; gap: 0 0.5rem;
margin: 0;
font-size: var(--t-13); color: var(--text-dampad);
font-variant-numeric: tabular-nums;
}
.sidtopp-meta > [aria-hidden="true"] { color: var(--text-svag); }
.sidtopp-rubrik {
margin: 0.375rem 0 0;
font-family: var(--font-serif); font-weight: 400;
font-size: var(--t-sidrubrik); line-height: 1.15; letter-spacing: -0.01em;
color: var(--text);
text-wrap: balance;
}
.sidtopp-ingress {
margin: 0.5rem 0 0;
max-width: 62ch;
font-size: var(--t-brod); line-height: 1.55;
color: var(--text-dampad);
}
/* Knappen till höger står i nederkant av blocket, i linje med
ingressen, och krymper aldrig. Behövs fler än en knapp står de i
.sidtopp-knappar, men bara en av dem får vara primär. */
.sidtopp-inre > .knapp-primar,
.sidtopp-inre > .btn,
.sidtopp-knappar { flex: none; }
.sidtopp-knappar { display: flex; flex-wrap: wrap; gap: 0.625rem; }
@media (max-width: 620px) {
.sidtopp { padding: 1.5rem 0 1.25rem; }
.sidtopp-inre { gap: 1rem; }
.sidtopp-text { flex-basis: 100%; }
.sidtopp-knappar { width: 100%; }
.sidtopp-knappar > * { flex: 1 1 auto; }
}
/* Korten. Kolumnen får krympa under sitt innehåll, annars växer den
till det bredaste kortets innehåll när texten är stor, och sidan
blir bredare än skärmen. */
.ytor {
position: relative;
display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
}
@media (min-width: 1100px) {
.ytor { gap: 1.25rem; }
}
.kort {
border: 1px solid var(--linje);
border-radius: var(--r-kort);
background: var(--yta-kort);
box-shadow: var(--skugga-kort);
overflow: hidden;
}
.kort[hidden] { display: none; }
/* Märket till höger flyttar ned under rubriken först när de inte får
plats bredvid varandra, till exempel med stor text i mobilen. */
.kort-huvud {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
min-height: 3.5rem;
padding: 0.875rem var(--kort-kant) 0.75rem;
}
.kort-huvud > :first-child { flex: 1 1 12rem; min-width: 0; }
.kort-huvud h2 { margin: 0; font-size: var(--t-kortrubrik); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
/* En rad under kortets rubrik, när rubriken behöver en förklaring. */
.kort-besk { margin: 0.125rem 0 0; font-size: var(--t-13); color: var(--text-dampad); }
/* Innehåll med luft runt sig, till exempel en text eller ett
formulär. Listor ligger i stället direkt i kortet. */
.kort-inre { padding: 0 var(--kort-kant) var(--kort-kant); }
.kort-inre > :first-child { margin-top: 0; }
.kort-inre > :last-child { margin-bottom: 0; }
/* Ett kort utan huvud, till exempel ett läge eller ett besked. */
.kort-luft { padding: var(--kort-kant); }
.kort-notis { display: grid; justify-items: start; gap: 0.875rem; }
.kort-luft .lage-huvud { margin-top: 0; }
/* Listorna ligger direkt i kortet, utan egen ram. */
.kort > .docs, .kort-lista .docs {
border: 0; border-top: 1px solid var(--linje); border-radius: 0;
background: transparent;
}
.kort > .docs .doc, .kort-lista .doc { padding: 0.875rem var(--kort-kant); }
.kort-lista .grupp-etikett { margin: 1rem var(--kort-kant) 0.5rem; }
.kort-lista .grupp-etikett:first-child { margin-top: 0.25rem; }
.kort > .tom, .kort > .tom-rad, .kort > .empty { margin: 0 var(--kort-kant) var(--kort-kant); }
.kort > .filters { margin: 0; padding: 0.25rem var(--kort-kant) 1rem; }
.kort-huvud .cta, .kort-huvud .linkish { margin: 0; }
/* Bolagslistan och kontouppgifterna på Inställningar, som rader
direkt i kortet. */
.kort > .companies { border: 0; border-top: 1px solid var(--linje); border-radius: 0; }
.kort .company { padding: 0.875rem var(--kort-kant); }
.kort > .kv { max-width: none; gap: 0; border-top: 1px solid var(--linje); }
.kort .kv-row { padding: 0.875rem var(--kort-kant); border: 0; border-radius: 0; background: transparent; }
.kort .kv-row + .kv-row { border-top: 1px solid var(--linje); }
/* Fakturatabellen, de återkommande fakturorna och formuläret för
avsändaruppgifterna, direkt i kortet. */
.kort > .tabellyta { border-top: 1px solid var(--linje); }
.kort .tabell { border: 0; border-radius: 0; background: transparent; }
.kort .tabell th:first-child, .kort .tabell td:first-child { padding-left: var(--kort-kant); }
.kort .tabell th:last-child, .kort .tabell td:last-child { padding-right: var(--kort-kant); }
@media (max-width: 900px) {
.kort .tabell tr {
margin: 0; padding: 0.875rem var(--kort-kant);
border: 0; border-radius: 0; background: none;
}
.kort .tabell tr + tr { border-top: 1px solid var(--linje); }
.kort .tabell td:first-child, .kort .tabell td:last-child { padding: 0; }
}
.kort > .upprepningar { gap: 0; margin: 0; border-top: 1px solid var(--linje); }
.kort .upprepning { padding: 0.875rem var(--kort-kant); border: 0; border-radius: 0; }
.kort .upprepning + .upprepning { border-top: 1px solid var(--linje); }
.kort > .kort-form { padding: 0 var(--kort-kant) var(--kort-kant); border: 0; border-radius: 0; background: transparent; }
/* Historiken: talen, räkenskapsåren som rader, förklaringen om
byråbyte och granskningen av ett inläst arkiv. */
.kort > .stats { border: 0; border-radius: 0; background: transparent; }
.kort > .stats .stat { padding: 1.125rem var(--kort-kant); }
/* Historiken har tre tal, och tre tal i två spalter lämnar ett
ensamt på andra raden. De får plats i tre även på telefon. */
@media (max-width: 880px) {
.kort > .stats-bred { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kort > .stats-bred .stat:nth-child(n + 3) { border-top: 0; }
.kort > .stats-bred .stat + .stat { border-left: 1px solid var(--linje); }
}
.kort > .years { gap: 0; border-top: 1px solid var(--linje); }
.kort > .years > .year { border: 0; border-radius: 0; box-shadow: none; }
.kort > .years > .year + .year { border-top: 1px solid var(--linje); }
.kort > .years > .year > summary { padding: 0.875rem var(--kort-kant); }
.kort > .years .year-body { padding: 0 var(--kort-kant) 0.875rem; }
/* Ikonen ovanför texten, som i inlämningskortet bredvid. */
.note-card {
grid-template-columns: minmax(0, 1fr); gap: 0.875rem;
border: 1px solid var(--linje); border-radius: var(--r-kort);
box-shadow: var(--skugga-kort);
padding: var(--kort-kant);
}
.note-card h3 { font-size: var(--t-16); margin-bottom: 0.25rem; }
.note-card p { font-size: var(--t-14); }
.kort.arkiv-panel { padding: var(--kort-kant); border: 1px solid var(--linje); border-radius: var(--r-kort); background: var(--yta-kort); }
.arkiv-panel .mapper-head h2 { margin: 0; font-size: var(--t-16); letter-spacing: 0; }
/* Länken i kortets fot, som Visa alla konton i banken. */
.kort-fot {
display: flex; align-items: center; justify-content: center; gap: 0.375rem;
width: 100%; min-height: var(--h-kontroll);
padding: 0.75rem var(--kort-kant);
border: 0; border-top: 1px solid var(--linje);
background: none;
font: inherit; font-size: var(--t-14); font-weight: 600;
text-align: center; text-decoration: none;
color: var(--handling);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.kort-fot:hover { background: var(--yta-svag); color: var(--handling-hover); }
.kort-fot:focus-visible { outline: 2px solid var(--handling); outline-offset: -2px; }
.kort-fot[hidden] { display: none; }
.kort-fotnot {
margin: 0;
padding: 0.875rem var(--kort-kant) 1rem;
border-top: 1px solid var(--linje);
font-size: var(--t-12); color: var(--text-dampad);
}
/* Den runda ikonen, för det kunden kan skicka in. Handlingens ton,
eftersom den alltid sitter på något som går att trycka på. */
.rund-ikon {
display: grid; place-items: center; flex: none;
width: 3rem; height: 3rem;
border-radius: 50%;
background: var(--handling-ton); color: var(--handling);
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.rund-ikon svg { width: 1.375rem; height: 1.375rem; }
@media (max-width: 620px) {
.rund-ikon { width: 2.75rem; height: 2.75rem; }
}
/* ============================================================
ÖVERSIKTEN
============================================================ */
.ov-grid { display: grid; gap: 1rem; align-items: start; }
.ov-spalt { display: grid; gap: 1rem; min-width: 0; }
/* På smalare skärmar blir spalterna en lista, och läget står
först eftersom det är det kunden vill veta direkt. */
@media (max-width: 1099px) {
.ov-spalt { display: contents; }
.ov-laget { order: 1; }
.ov-att-gora { order: 2; }
.ov-kommande { order: 3; }
.ov-senast { order: 4; }
}
@media (min-width: 1100px) {
.ov-grid, .ov-spalt { gap: 1.25rem; }
.ov-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* Antalet öppna uppgifter får en prick, som de osignerade
betalningarna i banken. Tom text, ingen prick. */
#att-gora-antal:not(:empty)::before {
content: ""; display: inline-block;
width: 7px; height: 7px; margin-right: 0.4375rem;
border-radius: 50%; background: var(--handling);
vertical-align: 0.0625rem;
}
/* Datumlistan visar tre datum tills kunden fäller ut resten. */
.ov-datum:not([data-alla]) > li:nth-child(n+4) { display: none; }
/* Snabbvalen */
/* Lika breda kolumner för de snabbval som syns. Mejla in döljs när
bolaget saknar egen adress, se initOversikt i app.js. */
.ov-snabbval {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
padding: 0.75rem 0.5rem;
}
.ov-snabbval a {
display: grid; justify-items: center; align-content: start; gap: 0.5rem;
padding: 0.625rem 0.25rem;
border-radius: 12px;
font-size: var(--t-13); font-weight: 500; line-height: 1.2;
text-align: center; text-decoration: none;
color: var(--text);
}
.ov-snabbval a:hover { background: var(--yta-hov); }
.ov-snabbval a:hover .rund-ikon { background: var(--handling); color: var(--text-pa-handling); }
.ov-snabbval a:focus-visible { outline: 2px solid var(--handling); outline-offset: -2px; }
.snabb-text { display: grid; gap: 0.125rem; }
.snabb-besk { display: none; }
/* På bredare skärmar blir snabbvalen fyra rutor med en linje
emellan: ikonen till vänster, och under namnet en rad om vad
som skickas in. Fyra ensamma ikoner över hela bredden såg glesa
ut och sa inte vad knapparna gjorde. */
@media (min-width: 760px) {
.ov-snabbval { padding: 0; overflow: hidden; }
.ov-snabbval a {
grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center;
gap: 0.875rem; padding: 1.125rem 1.25rem; border-radius: 0;
text-align: left;
}
.ov-snabbval a + a { border-left: 1px solid var(--linje); }
.ov-snabbval .rund-ikon { width: 2.5rem; height: 2.5rem; }
.ov-snabbval .rund-ikon svg { width: 1.25rem; height: 1.25rem; }
.snabb-titel { font-size: var(--t-15); font-weight: 600; }
.snabb-besk { display: block; font-size: var(--t-13); font-weight: 400; color: var(--text-dampad); }
}
/* Uppstarten i ett kort */
.ov-uppstart .uppstart-lista { padding: 0 var(--kort-kant) 0.75rem; border-top: 1px solid var(--linje); }
/* Läget: närmaste datum stort och vad byrån gör. */
.ov-laget { padding: var(--kort-kant); }
.ov-etikett { margin: 0; font-size: var(--t-13); font-weight: 500; color: var(--text-dampad); }
.ov-frist-dag {
margin: 0.25rem 0 0;
font-size: 2.5rem; line-height: 1.1;
color: var(--text);
}
.ov-frist-siffra { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ov-frist-manad { font-weight: 500; letter-spacing: -0.01em; }
.ov-frist-titel { margin: 0.375rem 0 0; font-size: var(--t-16); font-weight: 600; }
.ov-frist-meta { margin: 0.125rem 0 0; font-size: var(--t-14); color: var(--text-dampad); }
.ov-byran { margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--linje); }
.ov-byran-text { margin: 0.25rem 0 0; font-size: var(--t-15); }
.ov-byran-konsult { margin: 0.5rem 0 0; font-size: var(--t-14); color: var(--text-dampad); overflow-wrap: anywhere; }
.ov-byran-konsult a { color: var(--handling); }
@media (max-width: 620px) {
.ov-snabbval { padding: 0.5rem 0.25rem; }
.ov-frist-dag { font-size: 2.125rem; }
}
/* ============================================================
SKICKA IN
------------------------------------------------------------
Tre inlämningsytor i var sitt kort, och under dem e-post och
utlägg. Ytorna hade en streckad ram för att visa att filer
kan släppas där. Knappen är den riktiga vägen in, och raden
"eller dra dem hit" säger resten, så kortet får se ut som
alla andra kort. Ramen tänds när en fil dras över.
============================================================ */
.dz {
border: 0;
border-radius: var(--r-kort);
box-shadow: var(--skugga-kort);
padding: var(--kort-kant);
min-height: 0;
}
.dz:hover { background: var(--yta-kort); }
.dz.over { background: var(--handling-ton); box-shadow: inset 0 0 0 2px var(--handling), var(--skugga-kort); }
.dz .rund-ikon { margin-bottom: 1rem; }
.dz h2 { font-size: var(--t-18); }
.dz > p { font-size: var(--t-14); }
.dz-actions { padding-top: 1.25rem; align-items: center; }
.kort.mapper { margin-top: 0; }
.kort.mapper .preview { margin-top: 0; }
.inkorg-rad { margin-top: 0.875rem; }
/* Att dra filer går inte på en pekskärm, så raden säger ingenting där. */
@media (hover: none) {
.dz-actions .form-note { display: none; }
}
/* ------------------------------------------------------------
UPPDRAGET: kundkännedom och uppdragsavtal
Frågorna läses uppifrån som ett formulär. Avtalet står i en
egen ruta med radbrytningarna kvar, eftersom det är exakt den
texten som visas i BankID-appen och skrivs under.
------------------------------------------------------------ */
.kk-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.125rem; }
.kk-form textarea { resize: vertical; }
/* Frågorna i grupper med en linje emellan, som avsändaruppgifterna
på fakturasidan. Legenden flyter för att hamna under linjen. */
.kk-grupp {
margin: 0; padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--linje);
display: grid; gap: 0.75rem; min-width: 0;
}
.kk-grupp > legend { float: left; width: 100%; margin-bottom: 0.25rem; padding: 0; font-size: var(--t-15); font-weight: 600; }
.kk-grupp > :not(legend) { clear: both; }
.kk-intyg { padding-top: 1.25rem; border-top: 1px solid var(--linje); }
/* Tomma felrader tar annars en hel rad i rutnätet. */
.kk-form .error:empty { display: none; }
.kk-grupp > .error, #kk-error { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--fel); }
.kk-huvudman { display: grid; gap: 0.5rem; }
/* En rad per person: namn, personnummer, skäl, andel och Ta bort. */
.kk-person {
display: grid; gap: 0.75rem;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) 5.5rem auto;
align-items: end;
padding: 0.875rem; border-radius: var(--r-falt); background: var(--yta-svag);
}
.kk-person .field { margin: 0; }
.kk-person .kk-ta-bort { align-self: center; margin-top: 1.5rem; font-size: var(--t-13); }
@media (max-width: 52rem) {
.kk-person { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kk-person .kk-ta-bort { justify-self: start; margin-top: 0; }
/* Namn och personnummer får hela bredden, skäl och andel delar rad. */
.kk-person > .field:nth-child(-n+2) { grid-column: 1 / -1; }
}
.valfritt { font-weight: 400; color: var(--text-dampad); }
.btn-liten { justify-self: start; }
.avtal-text {
max-height: 26rem; overflow: auto;
margin: 0.75rem 0 0; padding: 1rem 1.125rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt); background: var(--yta-kort);
white-space: pre-wrap; overflow-wrap: anywhere;
font-size: var(--t-14, 0.875rem); line-height: 1.6;
}
.avtal-text:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }
.uppdrag-lage { margin: 0.25rem 0 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.uppdrag-lage li { display: flex; gap: 0.625rem; align-items: baseline; }
.uppdrag-lage .is-aktiv { font-weight: 600; }
/* Frågorna inför bokslutet, en fråga per rad. */
.bokslut-fraga-rad { display: grid; gap: 0.5rem; padding: 0.75rem 0; border-top: 1px solid var(--linje); }
.bokslut-fraga-rad:first-of-type { border-top: 0; }
.bokslut-fraga { margin: 0; font-size: 0.9375rem; }
.bokslut-beskrivning { color: var(--text-dampad); white-space: pre-wrap; overflow-wrap: anywhere; }
.bokslut-lista { display: grid; gap: inherit; }
/* ------------------------------------------------------------
MINDRE RÖRELSE, FÖR HELA TJÄNSTEN (R34, U9.3)
Komponenterna har egna regler för prefers-reduced-motion, men en
ny övergång glöms lätt. Den här regeln gör att allt rörligt blir
omedelbart när kunden har bett om mindre rörelse. Den sista
bilden visas fortfarande, så att inget tillstånd går förlorat.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0s !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}
/* ------------------------------------------------------------
KLICKYTOR I MOBILEN (R32, U9.3)
Minst 44 x 44 px för allt som går att trycka på med tummen.
Textknappar och textlänkar får höjden direkt. Länkar inne i en
listrad, som filnamnet och konsultens e-postadress, får ytan
genom utfyllnad som tas tillbaka med negativ marginal, så att
raden inte blir högre.
------------------------------------------------------------ */
@media (max-width: 880px) {
.linkish, .shell-brand, .logo, .gate-aside a, #gate-cancel a, #uppstart-dolj, #pahittat, .gate-genvag {
display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
}
.linkish { justify-content: center; }
.doc-lank, .ov-konsult-epost {
display: inline-block; padding-block: 0.875rem; margin-block: -0.875rem;
}
.arkiv-ar { min-height: 44px; }
/* Länkarna under inloggningen är 44 px höga, så understrykningen
följer texten och inte rutans underkant. */
.gate-aside a {
border-bottom: 0; text-decoration: underline; text-underline-offset: 0.25em;
text-decoration-color: var(--linje-stark);
}
/* Den mindre knappen är mindre på datorn, men inte i mobilen. */
.btn-liten { min-height: 44px; }
}
/* Länken Hoppa till innehållet får inte bli bredare än skärmen med
stor text. Regeln bor här och inte i shared/, som sajten delar. */
.skip { max-width: calc(100vw - 2rem); }
/* I mobilen står sidhuvudets uppgifter på var sin rad, och punkten
mellan dem behövs inte. Annars blev den ensam i slutet av raden. */
@media (max-width: 620px) {
.sidtopp-meta > [aria-hidden="true"] { display: none; }
.sidtopp-meta > [aria-hidden="true"] + * { flex-basis: 100%; }
}
/* ------------------------------------------------------------
MEDARBETAREN (U7.5)
En inbjuden medarbetare lämnar underlag, registrerar utlägg,
svarar på frågor och skriver meddelanden. Fakturorna, bokslutet,
rapporterna, uppstarten och bolagets material som zip sköts av ägaren och visas
inte. Rollen sätts på body av initApp i app.js, och servern prövar
varje anrop, se MEDARBETAREN_SER_INTE i server/kund.js.
------------------------------------------------------------ */
[data-roll="medarbetare"] .shell-nav-list li:has(> a[href="fakturor.html"]),
[data-roll="medarbetare"] .shell-nav-list li:has(> a[href="bokslut.html"]),
[data-roll="medarbetare"] .account-lank[href="bokslut.html"],
[data-roll="medarbetare"] .shell-nav-list li:has(> a[href="rapporter.html"]),
[data-roll="medarbetare"] .account-lank[href="rapporter.html"],
[data-roll="medarbetare"] .kort:has(#material-knapp) { display: none !important; }
/* ===== app/assets/sidor/onboarding.css ===== */
/* Sidans egna stilar. Läses efter app.css, se scripts/config.mjs.
Filen gäller inloggningen (index.html), inbjudan (inbjudan.html)
och kopplingen av bolaget (konto.html). Alla sidors stilar hamnar
i samma byggda fil, så varje regel börjar med sidans klass på
body: .sida-inloggning eller .sida-onboarding. Då kan en regel här
aldrig ändra en annan sida.
Komponenter från app.css som skrivs över här, och bara på de här
sidorna: .gate-card, .gate-aside, .resa, .steg, .pick, .chip,
.lookup, .sammanfattning, .noteringar, .consent och .steg-knappar. */
/* ============================================================
INLOGGNINGEN OCH INBJUDAN
------------------------------------------------------------
Ett kort, en rubrik, en knapp. Det som gör sidan trygg är det
som står under knappen: vad som händer när man trycker, och vart
uppgifterna tar vägen. Inget annat konkurrerar om blicken.
============================================================ */
.sida-inloggning .gate-body { padding-bottom: 2rem; }
.sida-inloggning .gate-card.gate-inloggning {
max-width: 26rem;
padding: 2.5rem 2.25rem 2rem;
border: 1px solid var(--linje);
border-radius: var(--r-ark);
box-shadow: var(--skugga-kort);
}
/* Sidrubriken i Plex Serif, som rubrikerna i resten av tjänsten. */
.sida-inloggning .gate-card h1 {
margin: 0 0 0.625rem;
font-family: var(--font-serif); font-weight: 400;
font-size: var(--t-sidrubrik); line-height: 1.15; letter-spacing: -0.01em;
}
.sida-inloggning .gate-ingress {
margin: 0 0 1.75rem; max-width: none;
font-size: var(--t-brod); line-height: 1.55; color: var(--text-dampad);
}
.sida-inloggning .btn-stor { min-height: 3.25rem; font-size: var(--t-brod); }
/* Öppna BankID på den här enheten: en handling, men inte den
primära. Därför handlingens ton i stället för helblått. */
.sida-inloggning .btn-ton {
--btn-bg: var(--handling-ton);
--btn-fg: var(--handling-djup);
border-color: transparent;
box-shadow: none;
}
.sida-inloggning .btn-ton:hover {
--btn-bg: color-mix(in srgb, var(--handling) 12%, var(--yta-kort));
border-color: transparent;
box-shadow: none;
}
/* Inbjudans märke: ett kuvert på smörgult, samma material som
bolagsbrickan. */
.sida-inloggning .gate-ikon {
display: grid; place-items: center;
width: 3rem; height: 3rem; margin-bottom: 1.5rem;
border-radius: var(--r-falt);
background: var(--marke); color: var(--text);
}
.sida-inloggning .gate-ikon svg { width: 1.375rem; height: 1.375rem; }
/* Det man undrar över precis innan man identifierar sig. Grått och
litet, för det är svar och inte uppmaningar. */
.sida-inloggning .gate-trygg {
list-style: none;
display: grid; gap: 0.875rem;
margin: 1.75rem 0 0; padding: 1.5rem 0 0;
border-top: 1px solid var(--linje);
}
.sida-inloggning .gate-trygg[hidden] { display: none; }
.sida-inloggning .gate-trygg li {
display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 0.75rem;
align-items: start;
font-size: var(--t-liten); line-height: 1.5; color: var(--text-dampad);
}
.sida-inloggning .gate-trygg svg { width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; color: var(--text-dampad); }
/* Hjälplänkarna står under kortet och inte i det, så att kortet
bara har en sak att göra. */
.sida-inloggning .gate-aside-under {
justify-content: center;
max-width: 26rem; margin: 1.5rem auto 0; padding: 0;
border: 0;
font-size: var(--t-14);
}
@media (max-width: 520px) {
.sida-inloggning .gate-card.gate-inloggning { padding: 2rem 1.375rem 1.5rem; }
.sida-inloggning .gate-card h1 { font-size: 1.75rem; }
}
/* ============================================================
KOPPLA BOLAG
------------------------------------------------------------
Ett lugnt samtal i sex steg. En fråga per steg i Plex Serif,
stora val som går att träffa med tummen, och en rad överst som
visar hur långt kunden har kommit och vad hen svarat.
============================================================ */
/* ---- Vägen ut, uppe till höger ----------------------------- */
.sida-onboarding .gate-utgangar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
gap: 0.5rem 1.25rem;
}
.sida-onboarding .gate-utgang[hidden] { display: none; }
.sida-onboarding .gate-utgang a,
.sida-onboarding .gate-utgang .linkish {
margin: 0; padding: 0.25rem 0;
font-size: var(--t-14); font-weight: 500;
color: var(--text-dampad); text-decoration: none;
}
.sida-onboarding .gate-utgang a:hover,
.sida-onboarding .gate-utgang .linkish:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* ---- Kortet ------------------------------------------------ */
.sida-onboarding .gate-card.is-journey {
max-width: 40rem;
padding: 2.25rem 3rem 2.25rem;
border: 1px solid var(--linje);
border-radius: var(--r-ark);
box-shadow: var(--skugga-kort);
}
/* ---- Stegraden ----------------------------------------------
Numrerade punkter med en linje mellan. Ett klart steg får en
bock, det aktuella är blått. Numren kommer ur en räknare, så att
steget Kontakt som göms när ett bolag läggs till inte lämnar ett
hål i numreringen. */
.sida-onboarding .resa {
counter-reset: resa;
margin: 0 0 2.25rem; padding: 0 0 1.75rem;
gap: 0.25rem;
}
.sida-onboarding .resa-station { counter-increment: resa; gap: 0.5rem; }
.sida-onboarding .resa-station[hidden] { display: none; }
.sida-onboarding .resa-station + .resa-station::before {
top: 0.8125rem;
right: calc(50% + 1.125rem); width: calc(100% - 2.25rem + 0.25rem);
height: 1px; background: var(--linje-stark);
transition: background-color var(--t-fast) var(--ease);
}
.sida-onboarding .resa-station.is-klar + .resa-station::before { background: var(--handling); }
.sida-onboarding .resa-punkt {
position: relative;
display: grid; place-items: center;
width: 1.625rem; height: 1.625rem;
border: 1px solid var(--linje-stark); border-radius: 50%;
background: var(--yta-kort);
font-size: var(--t-12); font-weight: 600; line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--text-dampad);
}
.sida-onboarding .resa-punkt::before { content: counter(resa); }
.sida-onboarding .resa-station[aria-current="step"] .resa-punkt {
border-color: var(--handling);
background: var(--handling); color: var(--text-pa-handling);
box-shadow: 0 0 0 4px var(--handling-ton);
}
/* Bocken är två kanter på en roterad ruta, så att den följer
textfärgen och inte behöver en bild. */
.sida-onboarding .resa-station.is-klar .resa-punkt {
border-color: var(--handling-ton);
background: var(--handling-ton); color: var(--handling-djup);
}
.sida-onboarding .resa-station.is-klar .resa-punkt::before {
content: "";
width: 0.3125rem; height: 0.5625rem; margin-top: -0.125rem;
border: solid currentColor; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.sida-onboarding .resa-namn { font-size: var(--t-12); font-weight: 500; }
.sida-onboarding .resa-station[aria-current="step"] .resa-namn { font-weight: 600; }
.sida-onboarding .resa-station.is-klar .resa-namn { color: var(--text); }
/* I ord, bara i mobilen där stegraden är en mätare utan etiketter. */
.sida-onboarding .steg-rakning {
display: none;
margin: 0 0 0.375rem;
font-size: var(--t-liten); font-weight: 500; color: var(--text-dampad);
font-variant-numeric: tabular-nums;
}
/* ---- Stegen ------------------------------------------------- */
.sida-onboarding .steg { gap: 1.25rem; }
.sida-onboarding .steg:not([hidden]) { animation: ob-in 360ms var(--ease-out); }
/* Frågan. Plex Serif som sidrubrikerna, för det är den enda
rubriken i vyn. */
.sida-onboarding .steg h2 {
font-family: var(--font-serif); font-weight: 400;
font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em;
}
.sida-onboarding .steg h2 + .steg-ingress { margin-top: -0.5rem; }
.sida-onboarding .steg-ingress { font-size: var(--t-brod); line-height: 1.55; max-width: 54ch; }
/* Felet står vid valet det gäller, i samma storlek som fältfelen. */
.sida-onboarding .steg .error { font-size: var(--t-liten); font-weight: 500; }
@keyframes ob-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* ---- Det som hämtades ur registren ------------------------- */
.sida-onboarding .forifyllt {
display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem;
align-items: start;
margin: 0 0 1.75rem; padding: 0.875rem 1rem;
border-radius: var(--r-falt);
background: var(--klar-ton);
animation: ob-in 360ms var(--ease-out);
}
.sida-onboarding .forifyllt[hidden] { display: none; }
.sida-onboarding .forifyllt svg {
width: 1.5rem; height: 1.5rem; padding: 0.3125rem;
border-radius: 50%;
background: var(--yta-kort); color: var(--klar);
}
.sida-onboarding .forifyllt p { margin: 0.125rem 0 0; font-size: var(--t-14); line-height: 1.5; color: var(--text); }
/* ---- Valen --------------------------------------------------
Stora rader med en riktig radioknapp. Hela raden är klickytan,
och piltangenterna flyttar mellan valen som vanligt. Den valda
får en dubbel kant med skugga i stället för en tjockare ram,
så att ingenting i raden flyttar sig. */
.sida-onboarding .picker-list { gap: 0.625rem; }
.sida-onboarding .picker-list > li[hidden] { display: none; }
.sida-onboarding .pick {
min-height: 4rem;
gap: 1rem;
padding: 0.875rem 1.125rem;
border-color: var(--linje-stark);
border-radius: var(--r-falt);
box-shadow: var(--skugga-kort);
}
.sida-onboarding .pick:hover { border-color: var(--linje-hov); background: var(--yta-svag); }
.sida-onboarding .pick:has(input:checked) {
border-color: var(--handling);
background: var(--handling-ton);
box-shadow: inset 0 0 0 1px var(--handling);
}
.sida-onboarding .pick-name { font-size: var(--t-brod); font-weight: 600; line-height: 1.35; }
.sida-onboarding .pick-meta { margin-top: 0.1875rem; font-size: var(--t-liten); line-height: 1.45; }
.sida-onboarding .pick:has(input:checked) .pick-meta { color: var(--handling-djup); }
/* Månaderna och slutdatumen: rutor och inte piller, i samma form
som fälten. */
.sida-onboarding .chips-manad,
.sida-onboarding .chips-forsta { gap: 0.375rem; }
.sida-onboarding .chips-manad .chip,
.sida-onboarding .chips-forsta .chip {
min-height: var(--h-kontroll);
border-radius: var(--r-falt);
font-variant-numeric: tabular-nums;
}
.sida-onboarding .chips-manad .chip:has(input:checked),
.sida-onboarding .chips-forsta .chip:has(input:checked) {
box-shadow: inset 0 0 0 1px var(--handling);
font-weight: 600;
}
.sida-onboarding .val > legend.field-title { font-size: var(--t-14); font-weight: 600; }
/* Det som lämnas över, direkt under valet av var bokföringen finns.
Samma lista som på Historik. Den står i en tyst yta, eftersom den
förklarar valet och inte ber kunden om något. */
.sida-onboarding .kalla-lista {
margin-top: 0.25rem; padding: 1rem 1.125rem;
border-radius: var(--r-kort);
background: var(--yta-svag);
box-shadow: inset 0 0 0 1px var(--linje);
}
.kalla-lista[hidden] { display: none; }
.sida-onboarding .kalla-lista-rubrik { margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--text); }
.sida-onboarding .kalla-lista-rader { list-style: disc; margin: 0.625rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; }
.sida-onboarding .kalla-lista-rad { font-size: var(--t-13); line-height: 1.45; color: var(--text); }
/* Vad kunden behöver ha till hands, överst i första steget. Samma
tysta yta som listan ovan: den förklarar, den ber inte om något. */
.sida-onboarding .forberedelse {
padding: 1rem 1.125rem;
border-radius: var(--r-kort);
background: var(--yta-svag);
box-shadow: inset 0 0 0 1px var(--linje);
}
.sida-onboarding .forberedelse-rubrik { margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--text); }
.sida-onboarding .forberedelse-lista { list-style: disc; margin: 0.625rem 0 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; }
.sida-onboarding .forberedelse-rad { font-size: var(--t-13); line-height: 1.45; color: var(--text); }
.sida-onboarding .forberedelse-tid { margin: 0.75rem 0 0; font-size: var(--t-13); line-height: 1.45; color: var(--text-dampad); }
.sida-onboarding .arsband { margin-top: 0.25rem; }
.sida-onboarding .arsband-rad { border-radius: var(--r-liten); }
.sida-onboarding .arsband-text { font-weight: 500; color: var(--text); }
/* Beskedet om att momsperioden går att lämna åt byrån. */
.sida-onboarding .form-hamtat {
margin: 0; padding: 0.75rem 1rem;
border-radius: var(--r-falt);
background: var(--yta-neutral);
font-size: var(--t-14); color: var(--text);
}
.sida-onboarding .form-hamtat[hidden] { display: none; }
/* ---- Bolaget: laddning, sökning och träffen ----------------- */
/* En liten snurra i textens färg. Samma regel som i BankID-arket:
med mindre rörelse pulserar den i stället för att frysa. */
.sida-onboarding .snurra,
.sida-onboarding .bolag-laddar:not([data-lage="besked"])::before {
content: "";
flex: none;
width: 0.9375rem; height: 0.9375rem;
border: 2px solid var(--linje-stark); border-top-color: var(--handling);
border-radius: 50%;
animation: spin 800ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.sida-onboarding .snurra,
.sida-onboarding .bolag-laddar:not([data-lage="besked"])::before {
border-color: var(--handling);
animation: sheet-puls 1.6s ease-in-out infinite !important;
}
}
.sida-onboarding .bolag-laddar {
display: flex; align-items: center; gap: 0.625rem;
margin: 0; font-size: var(--t-14);
}
.sida-onboarding .bolag-laddar[hidden] { display: none; }
.sida-onboarding .bolag-laddar[data-lage="besked"] {
padding: 0.75rem 1rem;
border-radius: var(--r-falt);
background: var(--yta-neutral); color: var(--text);
}
.sida-onboarding .falt-orgnr > p { margin: 0; }
.sida-onboarding .falt-orgnr input {
min-height: 3.25rem;
font-family: var(--font-mono); font-size: 1.0625rem; letter-spacing: 0.02em;
}
.sida-onboarding .lookup-soker {
display: flex; align-items: center; gap: 0.625rem;
margin: 0.5rem 0 0;
font-size: var(--t-14); color: var(--text-dampad);
}
.sida-onboarding .lookup-soker[hidden] { display: none; }
/* Träffen. Ett vitt kort med bolagets namn, källan och de fyra
uppgifterna, så att kunden ser att det är rätt bolag innan hen
går vidare. */
.sida-onboarding .lookup {
margin-top: 0.75rem; padding: 1.125rem 1.25rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-kort);
background: var(--yta-kort);
box-shadow: var(--skugga-kort);
animation: ob-in 360ms var(--ease-out);
}
.sida-onboarding .lookup[data-hinder] { border-color: var(--fel); background: var(--fel-ton); }
.sida-onboarding .lookup-huvud { display: flex; align-items: center; gap: 0.875rem; }
.sida-onboarding .lookup-bricka {
display: grid; place-items: center; flex: none;
width: 2.75rem; height: 2.75rem;
border-radius: var(--r-falt);
background: var(--marke); color: var(--text);
}
.sida-onboarding .lookup-bricka svg { width: 1.375rem; height: 1.375rem; }
.sida-onboarding .lookup-titel { min-width: 0; }
.sida-onboarding .lookup-name { margin: 0; font-size: var(--t-16); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sida-onboarding .lookup-kalla {
display: flex; align-items: center; gap: 0.375rem;
margin: 0.125rem 0 0;
font-size: var(--t-liten); font-weight: 500; color: var(--klar);
}
.sida-onboarding .lookup-kalla svg { width: 0.875rem; height: 0.875rem; flex: none; }
.sida-onboarding .lookup-meta {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1.5rem;
margin: 1rem 0 0; padding: 1rem 0 0;
border-top: 1px solid var(--linje);
}
.sida-onboarding .lookup-meta dt { font-size: var(--t-12); color: var(--text-dampad); }
.sida-onboarding .lookup-meta dd { margin: 0.125rem 0 0; font-size: var(--t-14); font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.sida-onboarding #lookup-orgnr { font-family: var(--font-mono); font-size: var(--t-13); }
.sida-onboarding .lookup[data-hinder] .lookup-kalla { color: var(--text-dampad); }
/* ---- Kontaktuppgifterna ------------------------------------ */
.sida-onboarding .field-locked { min-height: 3rem; font-weight: 500; }
/* ---- Sammanfattningen ---------------------------------------
Ett avslut och inte ett formulär: bolaget överst med brickan,
svaren under, närmaste datum, vad som händer sedan och till sist
godkännandet. */
.sida-onboarding .sam {
border: 1px solid var(--linje-stark); border-radius: var(--r-kort);
background: var(--yta-kort);
box-shadow: var(--skugga-kort);
overflow: hidden;
}
.sida-onboarding .sam-bolag {
display: flex; align-items: center; gap: 1rem;
padding: 1.125rem 1.25rem;
border-bottom: 1px solid var(--linje);
}
.sida-onboarding .sam-bricka {
display: grid; place-items: center; flex: none;
width: 3rem; height: 3rem;
border-radius: var(--r-falt);
background: var(--marke); color: var(--text);
font-family: var(--font-serif); font-size: 1.375rem; line-height: 1;
}
.sida-onboarding .sam-bolag-text { flex: 1; min-width: 0; }
.sida-onboarding .sam-namn { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sida-onboarding .sam-meta { margin: 0.125rem 0 0; font-size: var(--t-liten); color: var(--text-dampad); font-variant-numeric: tabular-nums; }
.sida-onboarding .sam-bolag .linkish { flex: none; font-size: var(--t-13); }
.sida-onboarding .sam .sammanfattning { border: 0; border-radius: 0; background: none; }
.sida-onboarding .sam .sammanfattning-rad {
grid-template-columns: 9rem minmax(0, 1fr);
padding: 0.8125rem 1.25rem;
}
.sida-onboarding .sam .sammanfattning dd { font-size: var(--t-14); }
.sida-onboarding .sam .kalla-etikett {
display: inline-flex; align-items: center; gap: 0.3125rem;
font-size: var(--t-12); color: var(--klar);
}
.sida-onboarding .sam .kalla-etikett::before {
content: "";
flex: none;
width: 0.25rem; height: 0.5rem; margin: -0.125rem 0.125rem 0 0.125rem;
border: solid currentColor; border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
/* Närmaste datum som ett kalenderblad, som på översikten. */
.sida-onboarding .sam-datum {
display: flex; align-items: center; gap: 1rem;
padding: 1rem 1.25rem;
border: 1px solid var(--linje); border-radius: var(--r-kort);
background: var(--yta-svag);
}
.sida-onboarding .sam-datum[hidden] { display: none; }
.sida-onboarding .sam-datum-dag {
display: grid; place-items: center; align-content: center; flex: none;
width: 3.5rem; height: 3.5rem; margin: 0;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
font-family: var(--font-serif); font-size: 1.5rem; line-height: 1;
font-variant-numeric: tabular-nums;
}
.sida-onboarding .sam-datum-man {
margin-top: 0.1875rem;
font-family: var(--font); font-size: var(--t-11); font-weight: 600; color: var(--text-dampad);
}
.sida-onboarding .sam-datum-etikett { margin: 0; font-size: var(--t-12); color: var(--text-dampad); }
.sida-onboarding .sam-datum-text { margin: 0.125rem 0 0; font-size: var(--t-14); font-weight: 500; line-height: 1.45; }
.sida-onboarding .noteringar li { color: var(--text); }
/* Vad som händer när bolaget är kopplat. Numrerade punkter på en
linje, samma form som stegraden, så att det läses som en
fortsättning. */
.sida-onboarding .sedan { padding-top: 0.5rem; }
.sida-onboarding .sedan-rubrik { margin: 0 0 1rem; font-size: var(--t-kortrubrik); font-weight: 600; }
.sida-onboarding .sedan-lista { list-style: none; margin: 0; padding: 0; counter-reset: sedan; }
.sida-onboarding .sedan-lista li {
counter-increment: sedan;
position: relative;
display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); gap: 0.125rem 0.875rem;
padding-bottom: 1.125rem;
}
.sida-onboarding .sedan-lista li:last-child { padding-bottom: 0; }
.sida-onboarding .sedan-lista li::before {
content: counter(sedan);
grid-row: span 2;
display: grid; place-items: center;
width: 1.625rem; height: 1.625rem;
border: 1px solid var(--linje-stark); border-radius: 50%;
background: var(--yta-kort);
font-size: var(--t-12); font-weight: 600; color: var(--text-dampad);
}
.sida-onboarding .sedan-lista li:not(:last-child)::after {
content: "";
position: absolute; left: 0.8125rem; top: 1.875rem; bottom: 0.25rem;
width: 1px; background: var(--linje-stark);
}
.sida-onboarding .sedan-titel { font-size: var(--t-14); font-weight: 600; line-height: 1.625rem; }
.sida-onboarding .sedan-text { grid-column: 2; font-size: var(--t-13); line-height: 1.5; color: var(--text-dampad); }
/* Godkännandet i en egen ruta, så att det syns som det sista
beslutet och inte som finstilt. */
.sida-onboarding .consent {
padding: 1rem 1.125rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
font-size: var(--t-14); line-height: 1.55;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.sida-onboarding .consent:hover { border-color: var(--linje-hov); }
.sida-onboarding .consent:has(input:checked) { border-color: var(--handling); background: var(--handling-ton); }
.sida-onboarding .consent:has(input[aria-invalid="true"]) { border-color: var(--fel); }
.sida-onboarding .consent input { margin-top: 0.125rem; flex: none; }
.sida-onboarding .consent + .error { margin: -0.625rem 0 0; }
/* ---- Knapparna ----------------------------------------------- */
.sida-onboarding .steg-knappar { margin-top: 2rem; padding-top: 1.5rem; }
.sida-onboarding .steg-knappar .btn-blue { min-width: 10rem; }
.sida-onboarding .steg-knappar .btn-ghost { justify-content: center; }
/* Medan något hämtas eller sparas är knappen upptagen, inte
avstängd. Den behåller färgen och får en snurra. */
.sida-onboarding #konto-submit[aria-busy="true"],
.sida-onboarding #konto-submit[data-klar] { opacity: 1; cursor: progress; }
.sida-onboarding #konto-submit[aria-busy="true"]::before {
content: "";
width: 0.9375rem; height: 0.9375rem; flex: none;
border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%;
animation: spin 800ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.sida-onboarding #konto-submit[aria-busy="true"]::before {
border-right-color: currentColor;
animation: sheet-puls 1.6s ease-in-out infinite !important;
}
}
.sida-onboarding #konto-submit[data-klar] { --btn-bg: var(--klar); }
.sida-onboarding #konto-submit[data-klar]::before {
content: "";
width: 0.375rem; height: 0.6875rem; margin: -0.1875rem 0.125rem 0 0;
border: solid currentColor; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ---- Mobilen -------------------------------------------------
Under 620 px försvinner kortets ram och frågan står direkt på
arbetsytan, som i en app. Stegraden blir en mätare i sex delar
med raden i ord ovanför frågan, och knapparna står i en vit rad
som följer med längst ned, så att Fortsätt alltid går att nå
med tummen. */
@media (max-width: 620px) {
.sida-onboarding .gate-top { padding: 1rem 0; }
/* Logga ut står bredvid loggan. Genvägen, som bara finns under
utveckling, får bryta till en egen rad. */
.sida-onboarding .gate-utgang { order: 1; }
.sida-onboarding .gate-genvag { order: 2; }
.sida-onboarding .forifyllt { padding: 0.75rem 0.875rem; }
.sida-onboarding .forifyllt p { font-size: var(--t-13); }
.sida-onboarding .gate-body:has(.gate-card.is-journey) { padding-top: 0; padding-bottom: 0; }
.sida-onboarding .gate-card.is-journey {
padding: 0.25rem 0 0;
border: 0; border-radius: 0;
background: transparent; box-shadow: none;
}
.sida-onboarding .resa {
margin: 0 0 1.5rem; padding: 0;
border: 0;
gap: 0.25rem;
align-items: start;
}
.sida-onboarding .resa-station { gap: 0; }
.sida-onboarding .resa-station + .resa-station::before { display: none; }
.sida-onboarding .resa-punkt,
.sida-onboarding .resa-station[aria-current="step"] .resa-punkt {
width: 100%; height: 0.25rem;
border: 0; border-radius: var(--r-pill);
background: var(--linje-stark);
box-shadow: none;
}
.sida-onboarding .resa-punkt::before,
.sida-onboarding .resa-station.is-klar .resa-punkt::before { content: none; }
.sida-onboarding .resa-station.is-klar .resa-punkt,
.sida-onboarding .resa-station[aria-current="step"] .resa-punkt { background: var(--handling); }
.sida-onboarding .resa-station .resa-namn,
.sida-onboarding .resa-station[aria-current="step"] .resa-namn {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.sida-onboarding .steg-rakning { display: block; }
.sida-onboarding .steg h2 { font-size: 1.625rem; }
.sida-onboarding .forifyllt { margin-bottom: 1.25rem; }
.sida-onboarding .pick { min-height: 3.75rem; padding: 0.875rem 1rem; }
.sida-onboarding .sam .sammanfattning-rad { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; padding: 0.75rem 1rem; }
.sida-onboarding .sam-bolag { padding: 1rem; }
.sida-onboarding .sam-datum { padding: 0.875rem 1rem; }
/* Knappraden bryter ut ur kolumnen till skärmens kanter. */
.sida-onboarding .steg-knappar {
position: sticky; bottom: 0; z-index: 2;
flex-direction: row; flex-wrap: nowrap; align-items: stretch;
margin: 1.75rem calc(50% - 50vw) 0;
padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--linje);
background: var(--chrome-bg);
-webkit-backdrop-filter: var(--chrome-blur);
backdrop-filter: var(--chrome-blur);
}
.sida-onboarding .gate-card .steg-knappar .btn { width: auto; margin: 0; }
.sida-onboarding .gate-card .steg-knappar .btn-blue { flex: 1; min-width: 0; }
.sida-onboarding .gate-card .steg-knappar .btn-ghost { flex: none; padding-inline: 1.125rem; }
.sida-onboarding .gate-foot { padding-top: 1.5rem; }
}
/* ===== app/assets/sidor/oversikt.css ===== */
/* Sidans egna stilar. Läses efter app.css, se scripts/config.mjs.
Filen gäller Översikten, Uppdraget och Bokslutet. Alla sidors
stilar hamnar i samma byggda fil, så varje regel här börjar med
sidans data-app-page på body. Då kan en regel här aldrig ändra en
annan sida, och ordningen mellan sidfilerna spelar ingen roll. */
/* ============================================================
ÖVERSIKTEN
------------------------------------------------------------
Två saker: vad kunden ska göra och vilka datum som gäller
kunden. Byråns läge står i en grå rad längst ner.
============================================================ */
/* ---------- Byrån, en rad under korten ---------- */
[data-app-page="oversikt"] .ov-byran-rad {
margin: 0.25rem 0 0; max-width: none;
font-size: var(--t-14); line-height: 1.5; color: var(--text-dampad);
}
[data-app-page="oversikt"] .ov-byran-rad:has(#lage-byra:empty):has(#lage-konsult[hidden]):has(#lage-nasta-gang[hidden]) { display: none; }
[data-app-page="oversikt"] #lage-konsult[hidden],
[data-app-page="oversikt"] #lage-nasta-gang[hidden] { display: none; }
/* Nästa gång står på en egen rad, efter vad byrån gör. */
[data-app-page="oversikt"] #lage-nasta-gang { display: block; margin-top: 0.25rem; }
/* ---------- Raden under rubriken (Z1) ----------
Raden har sin höjd medan det som väntar hämtas, så att sidan inte
hoppar när texten kommer (Ö10.1). */
[data-app-page="oversikt"] .ov-huvud { min-height: 1.55em; }
/* ---------- Läget (Z2): avböjt, uppsagt eller upphört uppdrag ---------- */
[data-app-page="oversikt"] .ov-lage[hidden] { display: none; }
[data-app-page="oversikt"] .ov-lage { padding: var(--kort-kant); }
[data-app-page="oversikt"] .ov-lage-rubrik {
margin: 0;
font-size: var(--t-kortrubrik); font-weight: 600; line-height: 1.35;
}
[data-app-page="oversikt"] .ov-lage-text {
max-width: 40rem; margin: 0.375rem 0 0;
font-size: var(--t-15); line-height: 1.55; color: var(--text-dampad);
text-wrap: pretty;
}
[data-app-page="oversikt"] .ov-lage-handling { margin: 0.25rem 0 0; }
[data-app-page="oversikt"] .ov-lage-lank {
display: inline-flex; align-items: center; min-height: 44px;
font-size: var(--t-14); font-weight: 500; color: var(--handling);
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Nästa steg medan ärendena hämtas: grå rader i kortets form (Ö10.1). */
[data-app-page="oversikt"] .ov-nasta-platshallare { display: none; }
[data-app-page="oversikt"] .ov-nasta.is-laddar > .ov-nasta-platshallare {
display: block; justify-self: stretch;
}
[data-app-page="oversikt"] .ov-nasta.is-laddar > .ov-nasta-platshallare .ov-linje { height: 1rem; width: 48%; }
[data-app-page="oversikt"] .ov-nasta.is-laddar > .ov-nasta-platshallare .ov-linje + .ov-linje { height: 0.75rem; width: 72%; margin-top: 0.75rem; }
/* Etiketten Väntar på dig står inte heller, eftersom det inte är känt än (P8). */
[data-app-page="oversikt"] .ov-nasta.is-laddar > :not(.ov-nasta-platshallare) { display: none; }
/* Ett avböjt eller upphört uppdrag visar inga datum. */
[data-app-page="oversikt"] .ov-kommande[hidden] { display: none; }
/* ---------- Nästa steg: en sak i taget, med en knapp ---------- */
[data-app-page="oversikt"] .ov-nasta {
display: grid; justify-items: start;
padding: 1.375rem var(--kort-kant) var(--kort-kant);
}
[data-app-page="oversikt"] .ov-nasta-topp {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem;
justify-self: stretch;
}
/* Sista datum står i etikettens rad (P5). Brådskande eller passerat
står det i väntans färg, och orden bär betydelsen. */
[data-app-page="oversikt"] .ov-nasta-senast {
margin: 0;
font-size: var(--t-13); color: var(--text-dampad);
font-variant-numeric: tabular-nums;
}
[data-app-page="oversikt"] .ov-nasta-senast.is-bradskande { color: var(--vantar); font-weight: 600; }
[data-app-page="oversikt"] .ov-nasta-senast[hidden],
[data-app-page="oversikt"] .ov-nasta-instruktion[hidden] { display: none; }
/* Textknappen under nästa stegs knapp, till exempel Det är gjort. */
[data-app-page="oversikt"] .ov-nasta-textknapp { margin: 0.5rem 0 0; }
[data-app-page="oversikt"] .ov-nasta-textknapp[hidden] { display: none; }
[data-app-page="oversikt"] .ov-textknapp { min-height: 44px; font-size: var(--t-14); }
[data-app-page="oversikt"] .ov-nasta-fel:empty { display: none; }
/* Stegen i arket för en rad med en textknapp. */
[data-app-page="oversikt"] .arende-steg { margin: 0.75rem 0 0; padding-left: 1.25rem; line-height: 1.55; }
[data-app-page="oversikt"] .arende-steg li + li { margin-top: 0.25rem; }
[data-app-page="oversikt"] .arende-textknapp { margin: 0.75rem 0 0; }
/* Stegen hos en myndighet, högst tre (P4). */
[data-app-page="oversikt"] .ov-nasta-instruktion {
max-width: 40rem; margin: 0.75rem 0 0; padding-left: 1.25rem;
font-size: var(--t-15); line-height: 1.55;
}
[data-app-page="oversikt"] .ov-nasta-instruktion li + li { margin-top: 0.25rem; }
[data-app-page="oversikt"] .ov-nasta-etikett {
display: inline-flex; align-items: center; gap: 0.5rem;
margin: 0;
font-size: var(--t-13); font-weight: 600; color: var(--handling);
}
[data-app-page="oversikt"] .ov-nasta-etikett::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--handling);
}
[data-app-page="oversikt"] .ov-nasta-steg {
margin: 0 0 0 auto;
font-size: var(--t-13); color: var(--text-dampad);
font-variant-numeric: tabular-nums;
}
[data-app-page="oversikt"] .ov-nasta-steg[hidden],
[data-app-page="oversikt"] .ov-nasta-text[hidden],
[data-app-page="oversikt"] .ov-nasta-matare[hidden] { display: none; }
[data-app-page="oversikt"] .ov-nasta-matare { justify-self: stretch; margin-top: 0.75rem; }
[data-app-page="oversikt"] .ov-nasta-rubrik {
margin: 1.125rem 0 0;
font-size: var(--t-20); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
text-wrap: balance;
}
[data-app-page="oversikt"] .ov-nasta-text {
max-width: 40rem; margin: 0.375rem 0 0;
font-size: var(--t-15); line-height: 1.55; color: var(--text-dampad);
text-wrap: pretty;
}
[data-app-page="oversikt"] .ov-nasta-handling { margin-top: 1.25rem; }
@media (max-width: 620px) {
[data-app-page="oversikt"] .ov-nasta-handling { justify-self: stretch; }
[data-app-page="oversikt"] .ov-nasta-handling .btn { width: 100%; }
}
/* Står allt i nästa steg är listan borta, och datumen får hela bredden. */
[data-app-page="oversikt"] .ov-grid:has(> .ov-att-gora[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* ---------- Steg som väntar på konsulten ---------- */
[data-app-page="oversikt"] .doc-vantar { cursor: default; }
[data-app-page="oversikt"] .doc-vantar .doc-name,
[data-app-page="oversikt"] .doc-vantar .doc-icon { color: var(--text-svag); }
/* Sista datum i en rad i Att göra. Ett passerat datum står i väntans
färg, och orden säger att dagen har varit. */
[data-app-page="oversikt"] .doc-senast.is-passerat { color: var(--vantar); font-weight: 500; }
/* Det som väntar på dig kunde inte hämtas (Ö10.2). */
[data-app-page="oversikt"] .ov-hamtfel { padding: 1rem 1.25rem; border-radius: var(--r-falt); }
[data-app-page="oversikt"] .ov-hamtfel p { margin: 0 0 0.75rem; font-size: var(--t-14); font-weight: 500; }
/* ---------- Läget: tre fält i ett kort ---------- */
[data-app-page="oversikt"] .ov-laget {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "bolag frist" "byra byra";
padding: 0;
/* app.css flyttar läget sist under 1100 px, från tiden då det stod i
en spalt. Här står det först i hela bredden. */
order: 0;
}
[data-app-page="oversikt"] .ov-falt {
display: grid; align-content: start; gap: 0;
min-width: 0;
padding: var(--kort-kant);
}
[data-app-page="oversikt"] .ov-falt[hidden] { display: none; }
[data-app-page="oversikt"] .ov-bolaget { grid-area: bolag; }
[data-app-page="oversikt"] .ov-frist { grid-area: frist; border-left: 1px solid var(--linje); }
/* Byrån fick en egen linje från app.css när den stod under datumet.
Här är den ett eget fält och linjen sitter på fältets kant. */
[data-app-page="oversikt"] .ov-laget .ov-byran {
grid-area: byra;
margin: 0; border-top: 1px solid var(--linje);
}
@media (min-width: 760px) {
[data-app-page="oversikt"] .ov-laget {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
grid-template-areas: "bolag byra frist";
}
[data-app-page="oversikt"] .ov-falt { padding: 1.375rem 1.5rem 1.5rem; }
[data-app-page="oversikt"] .ov-laget .ov-byran { border-top: 0; border-left: 1px solid var(--linje); }
}
[data-app-page="oversikt"] .ov-etikett {
margin: 0;
font-size: var(--t-13); font-weight: 500; color: var(--text-dampad);
}
[data-app-page="oversikt"] .ov-bolaget-status { margin: 0.625rem 0 0; }
[data-app-page="oversikt"] .ov-bolaget-status .status {
min-height: 1.75rem; padding-inline: 0.75rem;
font-size: var(--t-13);
}
[data-app-page="oversikt"] .ov-falt-text {
margin: 0.625rem 0 0;
font-size: var(--t-14); line-height: 1.5; color: var(--text-dampad);
text-wrap: pretty;
}
[data-app-page="oversikt"] .ov-falt-text:empty { display: none; }
/* Byrån: vad som pågår, och vem som gör det. */
[data-app-page="oversikt"] .ov-byran-text {
margin: 0.625rem 0 0;
font-size: var(--t-15); line-height: 1.5; color: var(--text);
text-wrap: pretty;
}
[data-app-page="oversikt"] .ov-konsult {
display: flex; align-items: center; gap: 0.75rem;
margin-top: 1rem; padding-top: 1rem;
border-top: 1px solid var(--linje);
}
[data-app-page="oversikt"] .ov-konsult[hidden] { display: none; }
[data-app-page="oversikt"] .ov-konsult-bricka {
display: grid; place-items: center; flex: none;
width: 2.5rem; height: 2.5rem; border-radius: 50%;
background: var(--marke); color: var(--text);
font-size: var(--t-14); font-weight: 600; letter-spacing: 0.02em;
}
[data-app-page="oversikt"] .ov-konsult-text { display: grid; min-width: 0; line-height: 1.35; }
[data-app-page="oversikt"] .ov-konsult-namn { font-size: var(--t-14); font-weight: 600; color: var(--text); }
[data-app-page="oversikt"] .ov-konsult-roll { font-size: var(--t-13); color: var(--text-dampad); }
[data-app-page="oversikt"] .ov-konsult-epost {
justify-self: start;
font-size: var(--t-13); font-weight: 500; color: var(--handling);
overflow-wrap: anywhere;
}
/* Närmaste datum stort, så att det går att läsa på håll. */
[data-app-page="oversikt"] .ov-frist-dag {
margin: 0.375rem 0 0;
font-size: 2.5rem; line-height: 1.05; color: var(--text);
}
[data-app-page="oversikt"] .ov-frist-titel {
margin: 0.5rem 0 0;
font-size: var(--t-14); font-weight: 600; line-height: 1.4;
text-wrap: pretty;
}
[data-app-page="oversikt"] .ov-frist-meta { margin: 0.125rem 0 0; font-size: var(--t-13); color: var(--text-dampad); }
@media (max-width: 759px) {
[data-app-page="oversikt"] .ov-frist-dag { font-size: 2rem; }
}
/* ---------- Uppstarten: en guidad väg med synlig framdrift ---------- */
[data-app-page="oversikt"] .ov-uppstart .kort-huvud { align-items: flex-start; padding-top: 1.125rem; }
[data-app-page="oversikt"] .ov-uppstart .kort-huvud .linkish { min-height: 1.5rem; font-size: var(--t-13); }
[data-app-page="oversikt"] .ov-framsteg {
display: flex; align-items: center; gap: 0.875rem;
padding: 0.25rem var(--kort-kant) 1rem;
}
[data-app-page="oversikt"] .ov-framsteg-rad {
flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
margin: 0; padding: 0; list-style: none;
}
[data-app-page="oversikt"] .ov-framsteg-rad li {
height: 6px; border-radius: 3px;
background: var(--yta-neutral);
transition: background-color var(--t-fast) var(--ease);
}
[data-app-page="oversikt"] .ov-framsteg-rad li.is-klar { background: var(--klar); }
[data-app-page="oversikt"] .ov-framsteg-rad li.is-aktiv { background: var(--handling); }
/* ÖF.2: ett steg som väntar på någon annan. */
[data-app-page="oversikt"] .ov-framsteg-rad li.is-pagar { background: var(--vantar-ton); box-shadow: inset 0 0 0 1px var(--vantar); }
[data-app-page="oversikt"] .ov-framsteg .antal { flex: none; color: var(--text); font-weight: 500; }
/* Stegen hänger ihop med en lodrät linje, som blir grön bakom de
steg som är klara. Linjerna mellan raderna försvinner, så att
vägen är det enda som binder ihop dem. */
[data-app-page="oversikt"] .ov-uppstart .uppstart-lista {
padding: 0.5rem var(--kort-kant) 0.75rem;
border-top: 1px solid var(--linje);
}
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg {
position: relative;
gap: 0 1rem;
padding: 0.75rem 0;
}
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg + .uppstart-steg { border-top: 0; }
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg:not(:last-child)::before {
content: "";
position: absolute; left: calc(0.875rem - 1px);
top: calc(0.75rem + 1.75rem + 0.3125rem); bottom: calc(-0.75rem + 0.3125rem);
width: 2px; border-radius: 1px;
background: var(--linje-stark);
}
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg.is-klar:not(:last-child)::before { background: var(--klar); opacity: 0.45; }
[data-app-page="oversikt"] .ov-uppstart .uppstart-nr {
position: relative; z-index: 1;
background: var(--yta-kort);
font-family: var(--font); font-size: var(--t-13); font-weight: 600;
}
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg.is-aktiv .uppstart-nr {
background: var(--handling); border-color: var(--handling); color: var(--text-pa-handling);
box-shadow: 0 0 0 4px var(--handling-ton);
}
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg.is-klar .uppstart-nr {
background: var(--klar-ton); border-color: transparent; color: var(--klar);
}
[data-app-page="oversikt"] .ov-uppstart .uppstart-titel { padding-block: 0.1875rem; font-size: var(--t-15); font-weight: 500; line-height: 1.4; }
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg.is-aktiv .uppstart-titel { font-weight: 600; }
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg.is-klar .uppstart-titel { font-weight: 400; }
[data-app-page="oversikt"] .ov-uppstart .uppstart-text {
margin: 0.125rem 0 1rem;
font-size: var(--t-14); line-height: 1.55;
}
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg.is-aktiv .btn { margin-bottom: 0.25rem; }
[data-app-page="oversikt"] .ov-uppstart .uppstart-vantar {
display: inline-flex; align-items: center; gap: 0.375rem;
}
[data-app-page="oversikt"] .ov-uppstart .uppstart-vantar::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--text-svag);
}
@media (max-width: 620px) {
[data-app-page="oversikt"] .ov-uppstart .uppstart-steg.is-aktiv .btn { width: 100%; }
[data-app-page="oversikt"] .ov-uppstart .uppstart-huvud .cta { min-height: 2.75rem; }
[data-app-page="oversikt"] .ov-uppstart .uppstart-huvud { row-gap: 0; }
}
/* ---------- Uppstarten är klar: en rad i stället för mätaren ---------- */
[data-app-page="oversikt"] .ov-uppstart-klar[hidden] { display: none; }
[data-app-page="oversikt"] .ov-uppstart-klar {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.875rem var(--kort-kant);
}
[data-app-page="oversikt"] .ov-uppstart-klar-bock {
flex: none; display: grid; place-items: center;
width: 1.75rem; height: 1.75rem; border-radius: 50%;
background: var(--klar-ton); color: var(--klar);
}
[data-app-page="oversikt"] .ov-uppstart-klar-bock svg { width: 0.875rem; height: 0.875rem; }
[data-app-page="oversikt"] .ov-uppstart-klar-text { margin: 0; font-size: var(--t-14); line-height: 1.45; text-wrap: pretty; }
/* ---------- Tomma lägen och platshållare ---------- */
[data-app-page="oversikt"] .ov-tom[hidden],
[data-app-page="oversikt"] .ov-fel[hidden] { display: none; }
[data-app-page="oversikt"] .ov-tom { padding: 1.75rem 1.25rem; }
[data-app-page="oversikt"] .ov-tom p { max-width: 34rem; text-wrap: pretty; }
[data-app-page="oversikt"] .ov-tom-klar { background: var(--klar-ton); color: var(--klar); box-shadow: none; }
[data-app-page="oversikt"] .ov-tom[data-lage="uppstart"] .ov-tom-klar { display: none; }
[data-app-page="oversikt"] .ov-fel { color: var(--fel); background: var(--fel-ton); box-shadow: none; }
[data-app-page="oversikt"] .kort > .ov-fel { margin: 0 var(--kort-kant) var(--kort-kant); }
/* Grå rader medan bolagets underlag hämtas. De har samma mått som
de riktiga raderna, så att kortet inte hoppar när svaret kommer. */
[data-app-page="oversikt"] .ov-platshallare:hover { background: none; }
[data-app-page="oversikt"] .ov-platshallare .doc-icon,
[data-app-page="oversikt"] .ov-linje {
background: var(--yta-neutral);
animation: ov-puls 1.4s var(--ease) infinite alternate;
}
[data-app-page="oversikt"] .ov-linje {
display: block; width: 62%; height: 0.625rem; border-radius: 4px;
}
[data-app-page="oversikt"] .ov-linje + .ov-linje { margin-top: 0.5rem; }
[data-app-page="oversikt"] .ov-linje-kort { width: 34%; }
@keyframes ov-puls { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
[data-app-page="oversikt"] .ov-platshallare .doc-icon,
[data-app-page="oversikt"] .ov-linje { animation: none; }
}
/* ---------- Kommande datum ---------- */
[data-app-page="oversikt"] .ov-kommande .kort-huvud,
[data-app-page="oversikt"] .ov-att-gora .kort-huvud { align-items: flex-start; }
[data-app-page="oversikt"] .ov-datum .doc.datum { min-height: 4rem; }
[data-app-page="oversikt"] .ov-datum .doc.datum.is-nara .datum-mark {
background: var(--vantar-ton); color: var(--vantar);
}
[data-app-page="oversikt"] .ov-datum .doc-name { text-wrap: pretty; }
[data-app-page="oversikt"] .ov-kommande .kort-fotnot { line-height: 1.5; }
/* ============================================================
STEGEN: uppdraget och bokslutet
------------------------------------------------------------
En rad med steg, där varje steg säger vem som har det. Klara
steg får en bock, det aktuella en blå markör med en ring. På
datorn står stegen bredvid varandra med en linje emellan, i
mobilen under varandra som uppstarten på översikten.
============================================================ */
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
margin: 0; padding: 0; list-style: none;
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg[hidden] { display: none; }
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg li {
position: relative;
display: grid; align-content: start; gap: 0.625rem;
min-width: 0; padding-right: 1rem;
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg li:not(:last-child)::after {
content: "";
position: absolute; top: calc(0.875rem - 1px); left: calc(1.75rem + 0.5rem); right: 0.5rem;
height: 2px; border-radius: 1px;
background: var(--linje-stark);
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg li.is-klar:not(:last-child)::after { background: var(--klar); opacity: 0.45; }
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-markor {
display: grid; place-items: center;
width: 1.75rem; height: 1.75rem; border-radius: 50%;
border: 1.5px solid var(--linje-stark); background: var(--yta-kort); color: var(--text-dampad);
font-size: var(--t-13); font-weight: 600; line-height: 1;
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-markor svg { width: 0.875rem; height: 0.875rem; stroke-width: 2.6; }
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg .is-aktiv .ss-markor {
background: var(--handling); border-color: var(--handling); color: var(--text-pa-handling);
box-shadow: 0 0 0 4px var(--handling-ton);
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg .is-klar .ss-markor {
background: var(--klar-ton); border-color: transparent; color: var(--klar);
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-text { display: grid; gap: 0.125rem; min-width: 0; }
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-titel {
font-size: var(--t-14); font-weight: 500; line-height: 1.35; color: var(--text-dampad);
text-wrap: pretty;
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg .is-aktiv .ss-titel { font-weight: 600; color: var(--text); }
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg .is-klar .ss-titel { color: var(--text); }
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-vem { font-size: var(--t-13); line-height: 1.35; color: var(--text-dampad); }
@media (max-width: 620px) {
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg { grid-auto-flow: row; gap: 0; }
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg li {
grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 0.875rem;
padding: 0 0 1rem;
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg li:last-child { padding-bottom: 0; }
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-steg li:not(:last-child)::after {
top: calc(1.75rem + 0.25rem); bottom: 0.25rem; left: calc(0.875rem - 1px); right: auto;
width: 2px; height: auto;
}
:is([data-app-page="uppdrag"], [data-app-page="bokslut"]) .ss-text { padding-top: 0.25rem; }
}
/* ============================================================
UPPDRAGET
------------------------------------------------------------
Juridik som ska kännas trygg: läget och vem som har nästa
steg överst, frågorna i fyra numrerade grupper och avtalet som
ett dokument med vad underskriften innebär bredvid knappen.
============================================================ */
/* ---------- Läget ---------- */
[data-app-page="uppdrag"] .up-lage { padding: var(--kort-kant); }
[data-app-page="uppdrag"] .up-lage-huvud {
display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem;
}
[data-app-page="uppdrag"] .up-lage-text { min-width: 0; }
[data-app-page="uppdrag"] .up-lage h2 { margin: 0; font-size: var(--t-kortrubrik); font-weight: 600; line-height: 1.3; }
[data-app-page="uppdrag"] .up-lage-besk {
margin: 0.25rem 0 0; max-width: 38rem;
font-size: var(--t-15); line-height: 1.5; color: var(--text-dampad);
text-wrap: pretty;
}
[data-app-page="uppdrag"] .up-lage-huvud .status { flex: none; }
[data-app-page="uppdrag"] .up-lage .ss-steg {
margin-top: 1.25rem; padding-top: 1.25rem;
border-top: 1px solid var(--linje);
}
/* Medan läget hämtas står stegen nedtonade, och vid ett fel står
bara felet och knappen kvar. */
[data-app-page="uppdrag"] .up-lage[aria-busy="true"] .ss-steg { opacity: 0.5; }
[data-app-page="uppdrag"] .up-lage[data-fel] .ss-steg { display: none; }
[data-app-page="uppdrag"] .up-lage-fel { margin-top: 1rem; }
[data-app-page="uppdrag"] .up-lage-fel[hidden] { display: none; }
@media (max-width: 620px) {
[data-app-page="uppdrag"] .up-lage-huvud { flex-direction: column-reverse; }
}
/* ---------- Frågorna ---------- */
[data-app-page="uppdrag"] .up-kk .kort-besk { max-width: 40rem; line-height: 1.5; }
[data-app-page="uppdrag"] .up-kk .kort-besk a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
[data-app-page="uppdrag"] .up-form { gap: 0; padding: 0 var(--kort-kant) var(--kort-kant); }
/* En grupp: rubrik och förklaring, sedan fälten. Från 900 px står
rubriken till vänster och fälten till höger. */
[data-app-page="uppdrag"] .up-grupp {
grid-template-columns: minmax(0, 1fr); gap: 0.875rem 2.5rem;
padding: 1.5rem 0;
}
[data-app-page="uppdrag"] .up-grupp > legend.up-grupp-titel {
display: flex; align-items: center; gap: 0.625rem;
margin: 0; font-size: var(--t-15); font-weight: 600; line-height: 1.4;
}
[data-app-page="uppdrag"] .up-nr {
display: grid; place-items: center; flex: none;
width: 1.5rem; height: 1.5rem; border-radius: 50%;
background: var(--yta-neutral); color: var(--text-dampad);
font-size: var(--t-12, 0.75rem); font-weight: 600;
}
[data-app-page="uppdrag"] .up-grupp-besk {
margin: -0.375rem 0 0; padding-left: 2.125rem; max-width: 32rem;
font-size: var(--t-14); line-height: 1.5; color: var(--text-dampad);
text-wrap: pretty;
}
[data-app-page="uppdrag"] .up-falt { display: grid; gap: 1.125rem; min-width: 0; }
[data-app-page="uppdrag"] .up-falt .field { margin: 0; }
[data-app-page="uppdrag"] .up-falt .form-note { margin: 0; line-height: 1.5; }
/* De valfria frågorna är kortare och får lägre rutor. */
[data-app-page="uppdrag"] .up-falt textarea[rows="2"] { min-height: 4.75rem; }
[data-app-page="uppdrag"] .up-falt > .error { margin: -0.5rem 0 0; font-size: var(--t-14); font-weight: 600; color: var(--fel); }
[data-app-page="uppdrag"] .up-falt > .error:empty { display: none; }
@media (min-width: 900px) {
[data-app-page="uppdrag"] .up-grupp {
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
grid-template-rows: auto 1fr;
padding: 1.75rem 0;
}
[data-app-page="uppdrag"] .up-grupp > legend.up-grupp-titel { grid-column: 1; grid-row: 1; align-self: start; }
[data-app-page="uppdrag"] .up-grupp-besk { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; }
[data-app-page="uppdrag"] .up-falt { grid-column: 2; grid-row: 1 / span 2; }
}
/* Ja och nej som två tydliga knappar, inte små runda rutor. */
[data-app-page="uppdrag"] .up-fraga { display: grid; gap: 0.5rem; }
[data-app-page="uppdrag"] .up-fraga-text { margin: 0; font-size: var(--t-15); font-weight: 500; line-height: 1.45; text-wrap: pretty; }
[data-app-page="uppdrag"] .up-fraga .form-note { margin: 0; }
[data-app-page="uppdrag"] .up-fraga .error { margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--fel); }
[data-app-page="uppdrag"] .up-fraga .error:empty { display: none; }
[data-app-page="uppdrag"] .up-jaenej { margin-top: 0.25rem; }
[data-app-page="uppdrag"] .up-jaenej .chip { min-width: 5.5rem; min-height: var(--h-kontroll); font-size: var(--t-15); }
/* Kryssrutorna som hela rader att trycka på, med valt läge synligt
på raden och inte bara i rutan. */
[data-app-page="uppdrag"] .up-val-rad {
margin: 0; padding: 0.75rem 1rem; min-height: var(--h-kontroll);
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
[data-app-page="uppdrag"] .up-val-rad:hover { border-color: var(--linje-hov); }
[data-app-page="uppdrag"] .up-val-rad:has(input:checked) { border-color: var(--handling); background: var(--handling-ton); }
[data-app-page="uppdrag"] .up-val-rad:has(input:focus-visible) { outline: 2px solid var(--handling); outline-offset: 2px; }
/* Personerna som små kort med en rubrik och Ta bort i hörnet. */
[data-app-page="uppdrag"] .kk-huvudman { counter-reset: person; gap: 0.75rem; }
[data-app-page="uppdrag"] .kk-huvudman:empty { display: none; }
[data-app-page="uppdrag"] .kk-person {
position: relative; counter-increment: person;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 2.75rem 1rem 1rem;
border: 1px solid var(--linje); background: var(--yta-svag);
}
[data-app-page="uppdrag"] .kk-person::before {
content: "Person " counter(person);
position: absolute; top: 0.875rem; left: 1rem;
font-size: var(--t-13); font-weight: 600; color: var(--text-dampad);
}
[data-app-page="uppdrag"] .kk-person .kk-ta-bort {
position: absolute; top: 0.375rem; right: 0.5rem;
min-height: 2.75rem; margin: 0; padding: 0 0.5rem;
}
@media (max-width: 52rem) {
[data-app-page="uppdrag"] .kk-person > .field:nth-child(-n+2) { grid-column: auto; }
}
@media (max-width: 620px) {
[data-app-page="uppdrag"] .kk-person > .field:nth-child(-n+2) { grid-column: 1 / -1; }
}
[data-app-page="uppdrag"] .up-lagg-till { display: inline-flex; align-items: center; gap: 0.375rem; justify-self: start; }
[data-app-page="uppdrag"] .up-lagg-till svg { flex: none; }
/* Intyget och knappen, med vad som händer sedan. */
[data-app-page="uppdrag"] .up-lamna {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem;
padding: 1.25rem; border-radius: var(--r-kort);
background: var(--yta-svag); border: 1px solid var(--linje);
}
[data-app-page="uppdrag"] .up-lamna .kk-intyg { padding-top: 0; border-top: 0; }
[data-app-page="uppdrag"] .up-lamna .error { margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--fel); }
[data-app-page="uppdrag"] .up-lamna .error:empty { display: none; }
[data-app-page="uppdrag"] .up-lamna-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.25rem; }
[data-app-page="uppdrag"] .up-sedan { flex: 1 1 16rem; margin: 0; font-size: var(--t-14); line-height: 1.5; color: var(--text-dampad); }
@media (max-width: 620px) {
[data-app-page="uppdrag"] .up-lamna { padding: 1rem; }
/* Knappen tar hela bredden och får bryta raden när texten är stor. */
[data-app-page="uppdrag"] .up-lamna-rad .btn { width: 100%; white-space: normal; text-align: center; }
}
/* ---------- Avtalet ---------- */
[data-app-page="uppdrag"] .up-avtal .kort-huvud { align-items: flex-start; }
[data-app-page="uppdrag"] .up-dokument {
max-height: 24rem; margin: 0;
padding: 1.25rem 1.5rem;
border: 1px solid var(--linje); background: var(--yta-svag);
font-size: var(--t-14); line-height: 1.65; color: var(--text);
}
[data-app-page="uppdrag"] .up-signera {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
margin-top: 1.25rem;
}
[data-app-page="uppdrag"] .up-signera[hidden] { display: none; }
[data-app-page="uppdrag"] .up-sa {
flex: 1 1 22rem; display: grid; gap: 0.375rem;
margin: 0; padding: 0; list-style: none; counter-reset: sa;
font-size: var(--t-14); line-height: 1.45; color: var(--text-dampad);
}
[data-app-page="uppdrag"] .up-sa li { display: flex; gap: 0.625rem; counter-increment: sa; }
[data-app-page="uppdrag"] .up-sa li::before {
content: counter(sa); flex: none;
display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; border-radius: 50%;
background: var(--yta-neutral); color: var(--text-dampad);
font-size: var(--t-12, 0.75rem); font-weight: 600;
}
[data-app-page="uppdrag"] .up-kvitto {
display: flex; align-items: center; gap: 0.75rem;
margin-bottom: 1rem; padding: 0.875rem 1rem;
border-radius: var(--r-falt); background: var(--klar-ton); color: var(--klar);
}
[data-app-page="uppdrag"] .up-kvitto[hidden] { display: none; }
[data-app-page="uppdrag"] .up-kvitto p { margin: 0; font-size: var(--t-14); font-weight: 500; }
[data-app-page="uppdrag"] .up-kvitto-ikon {
display: grid; place-items: center; flex: none;
width: 1.75rem; height: 1.75rem; border-radius: 50%;
background: var(--yta-kort);
}
[data-app-page="uppdrag"] .up-kvitto-ikon svg { width: 0.875rem; height: 0.875rem; }
@media (max-width: 620px) {
[data-app-page="uppdrag"] .up-dokument { padding: 1rem; max-height: 20rem; }
[data-app-page="uppdrag"] .up-signera .btn { width: 100%; }
}
/* ============================================================
BOKSLUTET
------------------------------------------------------------
Ett kort per räkenskapsår med årets tre steg överst. Frågorna
besvaras med två knappar per fråga, och en rad i nederkanten
räknar hur många som är klara. Handlingarna att skriva under
står först, med vilka som har skrivit under.
============================================================ */
/* ---------- Laddning, fel och tomt läge ---------- */
[data-app-page="bokslut"] .bs-laddar[hidden],
[data-app-page="bokslut"] .bs-fel[hidden] { display: none; }
[data-app-page="bokslut"] .bs-laddar .kort-inre { display: grid; gap: 0.75rem; padding-top: 0.5rem; }
[data-app-page="bokslut"] .bs-linje {
display: block; width: 72%; height: 0.75rem; border-radius: 4px;
background: var(--yta-neutral);
animation: bs-puls 1.4s var(--ease) infinite alternate;
}
[data-app-page="bokslut"] .bs-linje-rubrik { width: 34%; height: 1rem; }
[data-app-page="bokslut"] .bs-linje-kort { width: 46%; }
@keyframes bs-puls { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
[data-app-page="bokslut"] .bs-linje { animation: none; }
}
[data-app-page="bokslut"] .bs-fel { border-color: transparent; background: var(--fel-ton); box-shadow: none; }
[data-app-page="bokslut"] .bs-fel-inre {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
padding: var(--kort-kant);
}
[data-app-page="bokslut"] .bs-fel-inre p { margin: 0; font-size: var(--t-15); font-weight: 500; color: var(--fel); }
[data-app-page="bokslut"] .bs-tom-topp {
margin: var(--kort-kant) var(--kort-kant) 0; padding-block: 2.5rem 2.25rem;
}
[data-app-page="bokslut"] .bs-tom-topp h2 { margin: 0; color: var(--text); font-size: var(--t-16); font-weight: 600; }
[data-app-page="bokslut"] .bs-sa { padding: 1.5rem var(--kort-kant) var(--kort-kant); }
[data-app-page="bokslut"] .bs-sa-rubrik { margin: 0 0 1.125rem; font-size: var(--t-14); font-weight: 600; color: var(--text); }
/* ---------- Året ---------- */
/* Kortet klipper inte innehållet, så att raden i nederkanten kan
stå kvar i fönstret medan kunden svarar. */
[data-app-page="bokslut"] .bs-ar { overflow: visible; }
[data-app-page="bokslut"] .bs-ar > .kort-huvud,
[data-app-page="bokslut"] .bs-handlingar > .kort-huvud { align-items: flex-start; padding-top: 1.125rem; }
[data-app-page="bokslut"] .bs-ar-steg {
margin: 0.25rem var(--kort-kant) 0; padding: 1.25rem 0 1.5rem;
border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje);
}
[data-app-page="bokslut"] .bs-ar-inre { display: grid; gap: 1.5rem; padding-top: 1.5rem; }
/* ---------- Frågorna ---------- */
[data-app-page="bokslut"] .bs-form { gap: 0; }
[data-app-page="bokslut"] .bs-form-besk {
margin: 0; padding: 1.25rem var(--kort-kant) 0.25rem; max-width: 44rem;
font-size: var(--t-14); line-height: 1.5; color: var(--text-dampad);
}
[data-app-page="bokslut"] .bs-avsnitt {
gap: 0; margin: 0 var(--kort-kant); padding: 1.5rem 0 0.25rem;
border-top: 0;
}
[data-app-page="bokslut"] .bs-avsnitt > legend.bs-avsnitt-titel {
margin: 0 0 0.25rem; font-size: var(--t-13); font-weight: 600; color: var(--text-dampad);
}
/* En fråga: nummer, text och de två knapparna på en rad på datorn,
beskrivningen under när svaret är ja. */
[data-app-page="bokslut"] .bs-fraga {
grid-template-columns: 1.75rem minmax(0, 1fr) auto;
align-items: start; gap: 0.5rem 1rem;
padding: 0.875rem 0;
border-top: 1px solid var(--linje);
}
[data-app-page="bokslut"] .bs-avsnitt > .bs-fraga:first-of-type { border-top: 1px solid var(--linje); }
[data-app-page="bokslut"] .bs-fraga-nr {
display: grid; place-items: center;
width: 1.5rem; height: 1.5rem; margin-top: 0.125rem; border-radius: 50%;
background: var(--yta-neutral); color: var(--text-dampad);
font-size: var(--t-12); font-weight: 600; font-variant-numeric: tabular-nums;
}
[data-app-page="bokslut"] .bs-fraga:has(input:checked) .bs-fraga-nr { background: var(--klar-ton); color: var(--klar); }
[data-app-page="bokslut"] .bs-fraga .bokslut-fraga {
margin: 0; padding-top: 0.1875rem;
font-size: var(--t-15); line-height: 1.5; color: var(--text);
text-wrap: pretty;
}
[data-app-page="bokslut"] .bs-jaenej { flex-wrap: nowrap; gap: 0.375rem; }
[data-app-page="bokslut"] .bs-jaenej .chip { min-width: 4.25rem; }
[data-app-page="bokslut"] .bs-fraga > .field { grid-column: 2 / -1; margin: 0.25rem 0 0; }
[data-app-page="bokslut"] .bs-fraga > .field[hidden] { display: none; }
[data-app-page="bokslut"] .bs-fraga textarea { min-height: 4.75rem; }
[data-app-page="bokslut"] .bs-fraga .error { margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--fel); }
/* En fråga utan svar efter ett försök att lämna: rött nummer och en
röd kant på knapparna, med beskedet vid knappen längst ned. */
[data-app-page="bokslut"] .bs-fraga[data-saknas] .bs-fraga-nr { background: var(--fel-ton); color: var(--fel); }
[data-app-page="bokslut"] .bs-fraga[data-saknas] .chip { border-color: var(--fel); }
@media (max-width: 620px) {
[data-app-page="bokslut"] .bs-fraga { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.625rem 0.75rem; }
[data-app-page="bokslut"] .bs-jaenej { grid-column: 2; }
[data-app-page="bokslut"] .bs-jaenej .chip { flex: 1; }
[data-app-page="bokslut"] .bs-fraga > .field { grid-column: 2; }
}
/* Raden i nederkanten. Den står kvar i fönstret medan frågorna
rullar förbi, och i mobilen ovanför bottenmenyn. */
[data-app-page="bokslut"] .bs-fot {
position: sticky; bottom: 0; z-index: 2;
display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
margin-top: 1rem; padding: 1rem var(--kort-kant);
border-top: 1px solid var(--linje);
border-radius: 0 0 var(--r-kort) var(--r-kort);
background: var(--yta-kort);
}
[data-app-page="bokslut"] .bs-matare { flex: 1 1 12rem; display: grid; gap: 0.5rem; min-width: 0; }
[data-app-page="bokslut"] .bs-raknare { margin: 0; font-size: var(--t-14); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
[data-app-page="bokslut"] .bs-stapel {
display: block; height: 6px; max-width: 20rem; border-radius: 3px; overflow: hidden;
background: var(--yta-neutral);
}
[data-app-page="bokslut"] .bs-stapel > span {
display: block; height: 100%; border-radius: inherit;
background: var(--klar);
transition: width var(--t-fast) var(--ease);
}
[data-app-page="bokslut"] .bs-fel-total { flex-basis: 100%; margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--fel); }
@media (max-width: 880px) {
[data-app-page="bokslut"] .bs-fot { bottom: calc(3.875rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 620px) {
/* Räknaren och knappen på en rad, så att raden tar lite av skärmen. */
[data-app-page="bokslut"] .bs-fot { flex-wrap: wrap; gap: 0.625rem 1rem; padding-block: 0.75rem; }
[data-app-page="bokslut"] .bs-matare { flex: 1 1 0; }
[data-app-page="bokslut"] .bs-fot .btn { flex: none; padding-inline: 1.125rem; }
}
/* ---------- Lämnade svar ---------- */
[data-app-page="bokslut"] .bs-del-huvud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
[data-app-page="bokslut"] .bs-del-rubrik { margin: 0; font-size: var(--t-15); font-weight: 600; }
[data-app-page="bokslut"] .bs-del-meta { font-size: var(--t-13); color: var(--text-dampad); }
[data-app-page="bokslut"] .bs-del-besk { margin: 0.375rem 0 0; max-width: 42rem; font-size: var(--t-14); line-height: 1.5; color: var(--text-dampad); }
[data-app-page="bokslut"] .bs-svar {
display: grid; gap: 0; margin: 0.75rem 0 0; padding: 0; list-style: none;
border: 1px solid var(--linje); border-radius: var(--r-falt);
}
[data-app-page="bokslut"] .bs-svar li { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 1rem; }
[data-app-page="bokslut"] .bs-svar li + li { border-top: 1px solid var(--linje); }
[data-app-page="bokslut"] .bs-svar-ja,
[data-app-page="bokslut"] .bs-svar-nej {
flex: none; display: grid; place-items: center;
min-width: 2.5rem; height: 1.5rem; padding: 0 0.5rem; border-radius: var(--r-pill);
font-size: var(--t-12); font-weight: 600;
}
[data-app-page="bokslut"] .bs-svar-ja { background: var(--handling-ton); color: var(--handling-djup); }
[data-app-page="bokslut"] .bs-svar-nej { background: var(--yta-neutral); color: var(--text-dampad); }
[data-app-page="bokslut"] .bs-svar-text { display: grid; gap: 0.25rem; min-width: 0; padding-top: 0.0625rem; font-size: var(--t-14); line-height: 1.5; }
[data-app-page="bokslut"] .bs-svar-nejrad .bs-svar-text { color: var(--text-dampad); }
[data-app-page="bokslut"] .bs-svar-fraga { color: var(--text); font-weight: 500; }
[data-app-page="bokslut"] .bs-svar-beskrivning { color: var(--text-dampad); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Vad som händer härnäst, och kvittot när bekräftelsen är klar. */
[data-app-page="bokslut"] .bs-nasta,
[data-app-page="bokslut"] .bs-kvitto {
display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.875rem 1rem; border-radius: var(--r-falt);
}
[data-app-page="bokslut"] .bs-nasta { background: var(--yta-svag); box-shadow: inset 0 0 0 1px var(--linje); color: var(--text-dampad); }
[data-app-page="bokslut"] .bs-nasta svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; }
[data-app-page="bokslut"] .bs-nasta p,
[data-app-page="bokslut"] .bs-kvitto p { margin: 0; font-size: var(--t-14); line-height: 1.5; }
[data-app-page="bokslut"] .bs-kvitto { align-items: center; background: var(--klar-ton); color: var(--klar); }
[data-app-page="bokslut"] .bs-kvitto p { font-weight: 500; }
[data-app-page="bokslut"] .bs-kvitto-ikon {
display: grid; place-items: center; flex: none;
width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--yta-kort);
}
[data-app-page="bokslut"] .bs-kvitto-ikon svg { width: 0.875rem; height: 0.875rem; stroke-width: 2.6; }
/* ---------- Bekräftelsen ---------- */
[data-app-page="bokslut"] .bs-bekraftelse { padding-top: 1.5rem; border-top: 1px solid var(--linje); }
[data-app-page="bokslut"] .bs-dokument {
max-height: 18rem; margin: 1rem 0 0; padding: 1.25rem 1.5rem;
border: 1px solid var(--linje); background: var(--yta-svag);
font-size: var(--t-14); line-height: 1.65; color: var(--text);
}
[data-app-page="bokslut"] .bs-signera {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
margin-top: 1.25rem;
}
[data-app-page="bokslut"] .bs-sa-lista {
flex: 1 1 22rem; display: grid; gap: 0.375rem;
margin: 0; padding: 0; list-style: none; counter-reset: sa;
font-size: var(--t-14); line-height: 1.45; color: var(--text-dampad);
}
[data-app-page="bokslut"] .bs-sa-lista li { display: flex; gap: 0.625rem; counter-increment: sa; }
[data-app-page="bokslut"] .bs-sa-lista li::before {
content: counter(sa); flex: none;
display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; border-radius: 50%;
background: var(--yta-neutral); color: var(--text-dampad);
font-size: var(--t-12); font-weight: 600;
}
/* ---------- Handlingarna ---------- */
[data-app-page="bokslut"] .bs-handling-lista { margin: 0; padding: 0; list-style: none; }
[data-app-page="bokslut"] .bs-handling {
display: grid; gap: 0.875rem;
padding: 1.125rem var(--kort-kant) 1.25rem;
border-top: 1px solid var(--linje);
}
[data-app-page="bokslut"] .bs-handling-topp { display: flex; align-items: center; gap: 0.875rem; min-width: 0; }
[data-app-page="bokslut"] .bs-handling-topp .doc-icon { flex: none; }
[data-app-page="bokslut"] .bs-handling-namn { flex: 1; min-width: 0; }
[data-app-page="bokslut"] .bs-handling-namn h3 { margin: 0; font-size: var(--t-15); font-weight: 600; }
[data-app-page="bokslut"] .bs-handling-namn p { margin: 0.125rem 0 0; font-size: var(--t-13); color: var(--text-dampad); }
[data-app-page="bokslut"] .bs-handling-topp .status { flex: none; }
[data-app-page="bokslut"] .bs-signerare {
display: flex; flex-wrap: wrap; gap: 0.5rem;
margin: 0; padding: 0 0 0 calc(2.25rem + 0.875rem); list-style: none;
}
[data-app-page="bokslut"] .bs-signerare li {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.375rem 0.75rem; border-radius: var(--r-falt);
background: var(--yta-svag); box-shadow: inset 0 0 0 1px var(--linje);
font-size: var(--t-13);
}
[data-app-page="bokslut"] .bs-signerare-namn { font-weight: 500; color: var(--text); }
[data-app-page="bokslut"] .bs-signerare-lage { color: var(--vantar); }
[data-app-page="bokslut"] .bs-signerare .is-klar .bs-signerare-lage { color: var(--klar); }
[data-app-page="bokslut"] .bs-handling-knappar {
display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.625rem;
}
@media (max-width: 620px) {
[data-app-page="bokslut"] .bs-signerare { padding-left: 0; }
/* Brickan på varje handling säger redan vad som väntar. */
[data-app-page="bokslut"] .bs-handlingar > .kort-huvud .antal { display: none; }
[data-app-page="bokslut"] .bs-handling-knappar .btn { flex: 1 1 100%; }
[data-app-page="bokslut"] .bs-handling-topp { align-items: flex-start; flex-wrap: wrap; }
[data-app-page="bokslut"] .bs-dokument { padding: 1rem; }
[data-app-page="bokslut"] .bs-signera .btn { width: 100%; }
}
/* Meddelanden till konsulten, se app.js och server/meddelanden.js. */
[data-app-page="oversikt"] .ov-meddelanden[hidden],
[data-app-page="oversikt"] #meddelanden-fel[hidden] { display: none; }
[data-app-page="oversikt"] .ov-konsult-skriv { justify-self: start; min-height: 44px; text-align: left; }
[data-app-page="oversikt"] #meddelanden-lista .doc-meta {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meddelande-logg { display: grid; gap: 0; margin: 1rem 0; }
.meddelande-post { padding: 0.875rem 0; border-top: 1px solid var(--linje); }
.meddelande-post:first-child { border-top: 0; padding-top: 0; }
.meddelande-text { margin: 0.25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.meddelande-forlopp[hidden] { display: none; }
.meddelande-forlopp { width: 100%; margin-top: 0.5rem; }
/* ============================================================
KONSULTENS BESKED, KOMMANDE DATUM OCH KLARA ÅR (U6)
============================================================ */
/* U6.1: det senaste beskedet överst på översikten. */
[data-app-page="oversikt"] .ov-besked { padding: var(--kort-kant); }
[data-app-page="oversikt"] .ov-besked[hidden] { display: none; }
[data-app-page="oversikt"] .ov-besked-text {
max-width: 46rem; margin: 0.625rem 0 0;
font-size: var(--t-16); line-height: 1.55; color: var(--text);
white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty;
}
[data-app-page="oversikt"] .ov-besked-meta { margin: 0.75rem 0 0; font-size: var(--t-13); color: var(--text-dampad); }
/* U6.2: vem som har datumet. Det som väntar på kunden är blått, ordet
bär ändå betydelsen. */
[data-app-page="oversikt"] .ov-datum .datum-vem { margin-top: 0.125rem; }
[data-app-page="oversikt"] .ov-datum .datum-vem.is-kund { color: var(--handling); font-weight: 500; }
/* U6.3: raden om ett klart räkenskapsår. */
[data-app-page="oversikt"] .ov-arklart { flex-wrap: wrap; }
[data-app-page="oversikt"] .ov-arklart .ov-uppstart-klar-text { flex: 1 1 14rem; }
[data-app-page="oversikt"] .ov-arklart-lank {
display: inline-flex; align-items: center; flex: none; min-height: 44px;
font-size: var(--t-14); font-weight: 500; color: var(--handling);
}
/* U6.3: sammanfattningen av ett klart år under Bokslutet. */
[data-app-page="bokslut"] .bs-klart > .kort-huvud { align-items: flex-start; padding-top: 1.125rem; }
[data-app-page="bokslut"] .bs-klart-fel { margin: 0; font-size: var(--t-14); font-weight: 500; color: var(--fel); }
[data-app-page="bokslut"] .bs-inlamnat { margin: 0; padding: 0; list-style: none; }
[data-app-page="bokslut"] .bs-inlamnat-rad {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
padding: 1.125rem var(--kort-kant) 1.25rem;
border-top: 1px solid var(--linje);
}
[data-app-page="bokslut"] .bs-inlamnat-text { flex: 1 1 18rem; min-width: 0; }
[data-app-page="bokslut"] .bs-inlamnat-meta { margin: 0.25rem 0 0; font-size: var(--t-13); line-height: 1.45; color: var(--text-dampad); overflow-wrap: anywhere; }
@media (max-width: 620px) {
[data-app-page="bokslut"] .bs-inlamnat-rad .bs-handling-knappar { width: 100%; }
}
[data-app-page="bokslut"] .bokslut-lista[hidden] { display: none; }
/* ===== app/assets/sidor/inlamning.css ===== */
/* Sidans egna stilar. Läses efter app.css, se scripts/config.mjs.
Skicka in, Underlag och Historik. Allt är skrivet under .inl, som
bara finns på de tre sidorna, så att ytorna och listorna här kan
ändras utan att något annat i tjänsten följer med. Regler som
skriver över en delad komponent (.dz, .dz-queue, .doc-manad,
.filters) står under samma väljare av samma skäl. */
/* ============================================================
GEMENSAMT
============================================================ */
/* Mobilens topprad ligger över innehållet. Ett hopp till en yta
ska landa under den, inte bakom den. */
.inl [id] { scroll-margin-top: 5.5rem; }
/* Textknappen i ett tomt läge står i mitten som resten av rutan. */
.inl .empty > .linkish { justify-self: center; }
.inl .empty[hidden],
.inl .dz-summa[hidden],
.inl .inl-sok[hidden] { display: none; }
/* Laddningen. Kortet står kvar med sitt huvud och grå rader i
samma mått som de riktiga, så att sidan inte hoppar när svaret
kommer. Exempelraderna i markeringen syns aldrig medan bolagets
egna hämtas. */
.inl [data-laddar] > :not(.kort-huvud):not(.inl-skelett) { display: none !important; }
.inl-skelett { display: none; }
.inl [data-laddar] > .inl-skelett { display: block; border-top: 1px solid var(--linje); }
.inl-skelett span {
position: relative; display: block;
height: 4.25rem;
}
.inl-skelett span + span { border-top: 1px solid var(--linje); }
.inl-skelett span::before,
.inl-skelett span::after {
content: ""; position: absolute;
background: var(--yta-neutral);
animation: inl-puls 1.4s var(--ease) infinite alternate;
}
.inl-skelett span::before {
left: var(--kort-kant); top: 50%; translate: 0 -50%;
width: 2.25rem; height: 2.25rem; border-radius: var(--r-liten);
}
.inl-skelett span::after {
left: calc(var(--kort-kant) + 3.125rem); top: 50%; translate: 0 -50%;
width: min(18rem, 46%); height: 0.625rem; border-radius: 4px;
}
.inl-skelett span:nth-child(2n)::after { width: min(12rem, 32%); }
@keyframes inl-puls { to { opacity: 0.45; } }
/* Stegen i en förklaring: Efter inlämningen och byråbytet. En
tunn linje binder ihop siffrorna, så att det läser som en
ordning och inte som tre lösa påståenden. */
.inl-steg {
list-style: none; margin: 0;
padding: 0.25rem var(--kort-kant) var(--kort-kant);
}
.inl-steg > li {
position: relative;
display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.875rem;
padding-bottom: 1.125rem;
}
.inl-steg > li:last-child { padding-bottom: 0; }
.inl-steg > li:not(:last-child)::before {
content: ""; position: absolute;
left: calc(0.875rem - 0.5px); top: 2.125rem; bottom: 0.25rem;
width: 1px; background: var(--linje-stark);
}
.inl-steg-nr {
display: grid; place-items: center;
width: 1.75rem; height: 1.75rem;
border-radius: 50%;
background: var(--yta-kort); color: var(--text-dampad);
box-shadow: inset 0 0 0 1px var(--linje-stark);
font-size: var(--t-13); font-weight: 600; font-variant-numeric: tabular-nums;
}
.inl-steg-rubrik { margin: 0.1875rem 0 0; font-size: var(--t-14); font-weight: 600; color: var(--text); }
.inl-steg-text { margin: 0.125rem 0 0; max-width: 52ch; font-size: var(--t-13); line-height: 1.5; color: var(--text-dampad); }
.inl-steg-text a,
.inl .kort-fotnot a { color: var(--handling); font-weight: 600; text-decoration: none; }
.inl-steg-text a:hover,
.inl .kort-fotnot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.inl-checklista {
list-style: none; margin: 0.625rem 0 0; padding: 0.75rem 0.875rem;
display: grid; gap: 0.4375rem;
border-radius: var(--r-falt);
background: var(--yta-svag);
box-shadow: inset 0 0 0 1px var(--linje);
}
.inl-checklista li {
position: relative; padding-left: 1.125rem;
font-size: var(--t-13); line-height: 1.45; color: var(--text);
}
.inl-checklista li::before {
content: ""; position: absolute; left: 0.125rem; top: 0.5rem;
width: 0.3125rem; height: 0.3125rem; border-radius: 50%;
background: var(--text-svag);
}
/* Två kort bredvid varandra när arbetsytan rymmer dem. Korten
sträcks till samma höjd, så att släppytorna slutar i samma linje. */
.inl-par,
.inl-lamna { display: grid; gap: 1rem; }
@media (min-width: 1040px) {
.inl-par,
.inl-lamna { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
/* ============================================================
SKICKA IN
============================================================ */
/* Genvägarna i mobilen. På datorn syns alla ytor på en gång. */
.inl-hopp { display: none; }
@media (max-width: 879px) {
.inl-hopp {
display: flex; gap: 0.5rem;
margin: -0.25rem 0 0; padding: 0.125rem 0;
overflow-x: auto; scrollbar-width: none;
}
.inl-hopp::-webkit-scrollbar { display: none; }
.inl-hopp a {
flex: none;
display: inline-flex; align-items: center;
min-height: var(--h-kontroll); padding: 0 1rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-pill);
background: var(--yta-kort); color: var(--text);
font-size: var(--t-14); font-weight: 500; text-decoration: none; white-space: nowrap;
transition: border-color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.inl-hopp a:active { scale: 0.97; transition-duration: var(--t-press); }
}
/* Utlägg och e-post finns bara med servern. Utan korten leder
genvägarna ingenstans. */
.inl:has(#utlagg[hidden]) .inl-hopp a[href="#utlagg"],
.inl:has(#inkorg[hidden]) .inl-hopp a[href="#inkorg"] { display: none; }
/* --- Inlämningsytorna -----------------------------------------
Varje yta är ett vanligt kort. Den streckade rutan inuti är
knappen och släppytan, så att det är tydligt var filen ska. */
.inl .dz {
display: flex; flex-direction: column; gap: 1rem;
min-height: 0;
padding: var(--kort-kant);
border: 1px solid var(--linje);
border-radius: var(--r-kort);
background: var(--yta-kort);
box-shadow: var(--skugga-kort);
}
.inl .dz:hover { border-color: var(--linje); background: var(--yta-kort); }
.inl .dz.over {
border-color: var(--handling);
background: var(--yta-kort);
box-shadow: var(--fokus-ring);
}
.dz-huvud { display: flex; align-items: flex-start; gap: 0.875rem; }
.dz-huvud .rund-ikon { width: 2.5rem; height: 2.5rem; }
.dz-huvud .rund-ikon svg { width: 1.25rem; height: 1.25rem; }
.dz-text { min-width: 0; padding-top: 0.0625rem; }
.inl .dz h2 { margin: 0; font-size: var(--t-kortrubrik); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.dz-besk { margin: 0.1875rem 0 0; max-width: 52ch; font-size: var(--t-13); line-height: 1.5; color: var(--text-dampad); }
.inl .dz-typ { margin: 0; max-width: none; }
.inl .dz-typ[hidden] { display: none; }
/* Släppytan. Växer så att två ytor bredvid varandra slutar i
samma linje. */
.dz-yta {
position: relative;
flex: 1 0 auto;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
width: 100%; min-height: 10rem;
padding: 1.5rem 1rem;
border: 1.5px dashed var(--linje-hov);
border-radius: var(--r-falt);
background: var(--yta-svag);
color: var(--text-dampad);
font: inherit; text-align: center;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease),
background-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
scale var(--t-fast) var(--ease);
}
.dz-stor .dz-yta { min-height: 13.5rem; }
.dz-yta:hover { border-color: var(--handling); background: var(--handling-ton); }
.dz-yta:active { scale: 0.995; transition-duration: var(--t-press); }
.dz-yta-ikon {
display: grid; place-items: center;
width: 2.75rem; height: 2.75rem; margin-bottom: 0.5rem;
border-radius: 50%;
background: var(--yta-kort); color: var(--handling);
box-shadow: inset 0 0 0 1px var(--linje), 0 1px 2px rgba(15, 23, 41, 0.06);
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
translate var(--t-fast) var(--ease-out);
}
.dz-yta-ikon svg { width: 1.25rem; height: 1.25rem; }
.dz-yta:hover .dz-yta-ikon { translate: 0 -2px; }
.dz-yta-rubrik { font-size: var(--t-15); font-weight: 600; color: var(--text); }
.dz-valj { color: var(--handling); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.inl .dz-formats { margin: 0; font-size: var(--t-13); color: var(--text-dampad); }
.dz-yta-slapp { display: none; font-size: var(--t-15); font-weight: 600; color: var(--handling-djup); }
.dz-telefon { display: none; }
/* Så fort en fil dras in över fönstret visar alla ytor att de
tar emot, och den som filen hålls över säger vad som händer
när den släpps. Kanten ändrar bara färg, en kant som byter
från streckad till hel går inte att tona. */
body.drar-filer .inl .dz-yta { border-color: var(--handling); background: var(--handling-ton); }
.inl .dz.over .dz-yta {
border-color: var(--handling);
background: var(--handling-ton);
box-shadow: inset 0 0 0 1px var(--handling);
}
.inl .dz.over .dz-yta-ikon { background: var(--handling); color: var(--text-pa-handling); translate: 0 -3px; }
.inl .dz.over .dz-yta-rubrik,
.inl .dz.over .dz-formats { display: none; }
.inl .dz.over .dz-yta-slapp { display: block; }
/* Medan filen dras ska inget inuti ytan fånga den, annars blinkar
ytan när pekaren passerar ikonen. */
body.drar-filer .dz-yta * { pointer-events: none; }
/* Kameran går direkt till telefonens kamera. På en dator finns
ingen, så knappen syns bara där den gör nytta. */
.inl .dz-kamera { display: none; }
.inl .dz-kamera svg { width: 1.25rem; height: 1.25rem; flex: none; }
/* Telefonen och plattan. Ingen drar filer där, så ytan blir en
lägre knapp med ikonen till vänster, och kameran står först. */
@media (hover: none), (max-width: 620px) {
.dz-dator { display: none; }
.dz-telefon { display: block; }
.inl .dz-kamera { display: inline-flex; width: 100%; }
.dz-yta,
.dz-stor .dz-yta {
flex: 0 0 auto;
display: grid; grid-template-columns: auto minmax(0, 1fr);
justify-items: start; align-items: center; column-gap: 0.875rem; row-gap: 0;
min-height: 4.5rem; padding: 0.75rem 1rem;
text-align: left;
}
.dz-yta-ikon { grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; margin: 0; }
.dz-yta:hover .dz-yta-ikon { translate: none; }
.dz-yta-rubrik { grid-column: 2; font-size: var(--t-14); }
.inl .dz-formats { grid-column: 2; font-size: var(--t-12); }
.dz-valj { text-decoration: none; }
.dz-yta:hover { border-color: var(--linje-hov); background: var(--yta-svag); }
}
/* --- Kön ------------------------------------------------------
En rad per fil: ikon, namn, storlek och läge, och en tunn
förloppslinje längst ned i raden medan filen skickas. */
.inl .dz-queue { margin: 0; gap: 0.5rem; }
.inl .dz-queue li {
position: relative; overflow: hidden;
display: grid;
grid-template-columns: 2rem minmax(0, 1fr) auto auto;
grid-template-areas: "mark nm igen rm" "mark sz igen rm";
align-items: center; column-gap: 0.75rem; row-gap: 0.0625rem;
padding: 0.625rem 0.625rem 0.625rem 0.75rem;
border-radius: var(--r-falt);
background: var(--yta-kort);
box-shadow: inset 0 0 0 1px var(--linje);
font-size: var(--t-14);
animation: inl-in var(--t-fast) var(--ease-out);
}
.inl .dz-queue .mark {
grid-area: mark;
box-sizing: border-box; width: 2rem; height: 2rem; padding: 0.5rem;
border-radius: 50%;
background: var(--klar-ton); color: var(--klar);
}
.inl .dz-queue li:not(.is-skickas):not(.err):not(.is-dubblett) .mark { animation: inl-bock 0.32s var(--ease-out); }
.inl .dz-queue li.is-skickas .mark { background: var(--handling-ton); color: var(--handling); }
.inl .dz-queue li.is-dubblett .mark { background: var(--yta-neutral); color: var(--text-dampad); }
/* Namnet får gå på två rader. Ett kapat namn tappar oftast det
som skiljer två kvitton åt, datumet i slutet. */
.inl .dz-queue .nm {
grid-area: nm; font-weight: 500; color: var(--text);
white-space: normal; overflow-wrap: anywhere;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.inl .dz-queue .sz {
grid-area: sz; margin: 0;
font-family: var(--font); font-size: var(--t-13); font-variant-numeric: tabular-nums;
color: var(--text-dampad);
}
.inl .dz-queue .rad-igen { grid-area: igen; margin: 0; padding-inline: 0.5rem; font-size: var(--t-13); }
.inl .dz-queue .rm { grid-area: rm; width: 2.25rem; height: 2.25rem; margin: 0; }
@media (hover: none), (max-width: 620px) {
.inl .dz-queue .rm { width: var(--h-kontroll); height: var(--h-kontroll); margin: -0.375rem -0.375rem -0.375rem 0; }
}
.inl .dz-queue progress {
grid-area: auto;
position: absolute; left: 0; right: 0; bottom: 0;
width: 100%; height: 3px;
border: 0; border-radius: 0;
appearance: none; -webkit-appearance: none;
background: transparent; color: var(--handling);
}
.inl .dz-queue progress::-webkit-progress-bar { background: transparent; }
.inl .dz-queue progress::-webkit-progress-value { background: var(--handling); transition: width var(--t-fast) linear; }
.inl .dz-queue progress::-moz-progress-bar { background: var(--handling); }
/* Felet står under namnet, i rött och i ord. */
.inl .dz-queue li.err { background: var(--fel-ton); box-shadow: none; flex-wrap: nowrap; }
.inl .dz-queue li.err .mark { background: var(--yta-kort); color: var(--fel); }
.inl .dz-queue li.err .sz {
flex: none; margin: 0;
white-space: normal; font-weight: 600; color: var(--fel);
}
@keyframes inl-in { from { opacity: 0; translate: 0 4px; } }
@keyframes inl-bock { from { scale: 0.6; } }
/* Kvittensen under kön: hur det gick för alla filer, och vad som
händer sedan. */
.dz-summa {
display: flex; align-items: flex-start; gap: 0.75rem;
padding: 0.875rem 1rem;
border-radius: var(--r-falt);
background: var(--klar-ton);
animation: inl-in var(--t-fast) var(--ease-out);
}
.dz-summa[data-lage="pagar"],
.dz-summa[data-lage="info"] { background: var(--yta-svag); box-shadow: inset 0 0 0 1px var(--linje); }
.dz-summa-ikon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; color: var(--klar); }
.dz-summa[data-lage="info"] .dz-summa-ikon { color: var(--text-dampad); }
.dz-summa-text { min-width: 0; margin: 0; font-size: var(--t-13); color: var(--text-dampad); }
.dz-summa-rubrik { margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--text); }
.dz-summa-besk { margin: 0.125rem 0 0; font-size: var(--t-13); line-height: 1.5; color: var(--text-dampad); }
.dz-summa .cta { margin-top: 0.375rem; }
/* --- Kolumnmappningen ----------------------------------------- */
.inl .mapper { margin: 0; animation: inl-in var(--t-fast) var(--ease-out); }
.inl .kort-huvud.mapper-head {
align-items: flex-start; justify-content: space-between; flex-wrap: nowrap;
margin: 0;
}
.inl .mapper-head .kort-besk { margin-top: 0.125rem; }
.inl .mapper .preview { margin: 0; border-radius: var(--r-falt); }
.inl .preview thead th { background: var(--yta-svag); border-bottom: 1px solid var(--linje); }
.inl .preview-scroll:focus-visible { outline: 2px solid var(--handling); outline-offset: -2px; }
.inl .mapper-not { margin: 0.75rem 0 0; max-width: 70ch; }
/* --- E-post --------------------------------------------------- */
.inl .inkorg-rad {
flex-wrap: nowrap; gap: 0.5rem;
min-height: 3.25rem;
padding: 0.375rem 0.375rem 0.375rem 0.875rem;
border-radius: var(--r-falt);
background: var(--yta-svag);
box-shadow: inset 0 0 0 1px var(--linje-stark);
}
.inl .inkorg-adress { flex: 1 1 auto; font-size: var(--t-14); color: var(--text); }
.inl #inkorg-kopiera { flex: none; min-width: 5.75rem; }
.inl #inkorg-kopiera[data-kopierad] { border-color: transparent; background: var(--klar-ton); color: var(--klar); }
.inl .inl-inkorg .form-note { margin: 0.75rem 0 0; }
/* I telefonen står adressen på egen rad och knappen under, så att
adressen inte bryts mitt i domänen. */
@media (max-width: 620px) {
.inl .inkorg-rad { flex-direction: column; align-items: stretch; padding: 0.75rem; }
.inl .inkorg-adress { font-size: var(--t-13); }
.inl #inkorg-kopiera { width: 100%; }
}
/* --- Utlägg --------------------------------------------------- */
.inl .utlagg-form { display: grid; gap: 0.875rem; max-width: none; }
.inl .utlagg-falt { align-items: start; }
.inl .utlagg-falt .field { align-content: start; }
.inl .utlagg-form .btn { margin-top: 0.125rem; }
/* På datorn i två rader: köpet överst, vem som betalade och
kvittot under. */
@media (min-width: 1040px) {
.inl .utlagg-falt { grid-template-columns: 11rem 11rem minmax(0, 1fr); }
.inl .utlagg-vad { grid-column: 3; }
.inl .utlagg-falt > .field:nth-child(4) { grid-column: 1 / 3; }
.inl .utlagg-kvitto { grid-column: 3; }
}
.inl #utlagg-lista { margin-top: 0; }
/* Datum och belopp bredvid varandra även i telefonen, de är korta. */
@media (max-width: 719px) {
.inl .utlagg-falt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inl .utlagg-falt > .field:nth-child(n + 3) { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.inl .utlagg-form .btn { width: 100%; justify-self: stretch; }
}
/* ============================================================
UNDERLAG
============================================================ */
.inl-lista .kort-huvud { flex-wrap: wrap; }
.inl-lista .kort-huvud h2 { display: flex; align-items: baseline; gap: 0.5rem; }
.inl-lista .kort-huvud .antal { font-weight: 400; }
.inl-sok { position: relative; flex: 0 1 17rem; }
.inl-sok svg {
position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%;
width: 1rem; height: 1rem; color: var(--text-svag); pointer-events: none;
}
.inl-sok input {
width: 100%; min-height: 2.5rem;
padding: 0.375rem 0.75rem 0.375rem 2.25rem;
border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
background: var(--yta-kort); color: var(--text);
font: inherit; font-size: var(--t-14);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.inl-sok input::placeholder { color: var(--text-svag); }
.inl-sok input:hover { border-color: var(--linje-hov); }
.inl-sok input:focus { outline: none; border-color: var(--handling); box-shadow: var(--fokus-ring); }
@media (max-width: 620px) {
.inl-sok { flex: 1 1 100%; }
.inl-sok input { min-height: var(--h-kontroll); font-size: 1rem; }
}
/* Filtren rullar i sidled på telefon i stället för att bli tre
rader knappar. */
.filter-antal { margin-left: 0.375rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-svag); }
.filter-antal:empty { display: none; }
.filters button[aria-pressed="true"] .filter-antal { color: var(--handling-djup); }
@media (max-width: 620px) {
.inl .kort > .filters {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.inl .kort > .filters::-webkit-scrollbar { display: none; }
.inl .kort > .filters li { flex: none; }
}
/* Månaderna. Ett år med underlag är lättare att skumma i block än
som en enda lång lista. */
.inl .docs > .doc-manad {
padding: 0.5rem var(--kort-kant);
border-bottom: 1px solid var(--linje);
background: var(--yta-svag);
font-size: var(--t-13); font-weight: 600; color: var(--text-dampad);
}
.inl .docs > .doc + .doc-manad { border-top: 1px solid var(--linje); }
.inl .docs > .doc-manad[hidden] { display: none; }
.inl .kort > .docs .doc { min-height: 4.25rem; }
.inl .doc-atgarder .status { white-space: nowrap; }
/* ============================================================
HISTORIK
============================================================ */
.inl #historik-exempel { margin: 0; padding-bottom: 0.875rem; }
.inl .kort > .years { margin: 0; }
.inl .kort-lista { border-top: 1px solid var(--linje); padding-top: 0.75rem; }
.inl .kort-lista + .years { border-top: 1px solid var(--linje); }
.inl .year-body > p { margin: 0.875rem 0 0.75rem; }
.inl .inl-byte .kort-huvud { align-items: flex-start; }
.inl .inl-byte .kort-besk { max-width: 48ch; }
/* Det som ska lämnas över, med läget för varje post. Raden har namnet
till vänster och läget till höger, så att statusen läser som ett ord
och inte som en färg. */
.inl-overlamning {
list-style: none; margin: 0.625rem 0 0; padding: 0.75rem 0.875rem;
display: grid; gap: 0.5rem;
border-radius: var(--r-falt);
background: var(--yta-svag);
box-shadow: inset 0 0 0 1px var(--linje);
}
/* Namnet tar det utrymme som finns och brickan står alltid till höger,
också när namnet bryts på två rader i mobilen. */
.inl-overlamning-rad {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.25rem 0.75rem;
font-size: var(--t-13); line-height: 1.45; color: var(--text);
}
.inl-overlamning-rad .status { white-space: nowrap; }
.inl-overlamning-rad .status svg { width: 0.875rem; height: 0.875rem; margin-right: 0.25rem; vertical-align: -0.125rem; }
/* Texten till den tidigare byrån står i steg 1: två knappar, och
själva texten hopfälld under dem. Den står i en ruta med mellanrum
mellan raderna, så att den går att markera och läsa som ett brev. */
.inl .byte-brev { margin-top: 0.875rem; display: grid; justify-items: start; gap: 0.5rem; }
.inl .byte-brev[hidden],
.inl .kort-fotnot[hidden],
.inl .inl-steg-text[hidden] { display: none; }
.inl .byte-brev .form-status:empty { display: none; }
@media (max-width: 620px) {
.inl .byte-brev .byte-knappar { justify-self: stretch; display: grid; }
.inl .byte-brev .byte-knappar .btn { width: 100%; }
}
.inl .byte-visa { justify-self: stretch; }
.inl .byte-visa > summary {
display: inline-flex; align-items: center; gap: 0.375rem;
min-height: 2.75rem;
font-size: var(--t-13); font-weight: 600; color: var(--handling);
cursor: pointer; list-style: none;
}
.inl .byte-visa > summary::-webkit-details-marker { display: none; }
.inl .byte-visa > summary::after {
content: ""; width: 0.4375rem; height: 0.4375rem;
border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
rotate: 45deg; translate: 0 -0.125rem;
transition: rotate var(--t-fast) var(--ease);
}
.inl .byte-visa[open] > summary::after { rotate: -135deg; translate: 0 0.125rem; }
@media (prefers-reduced-motion: reduce) {
.inl .byte-visa > summary::after { transition: none; }
}
/* Listan över det som ska lämnas över, under stegen. */
.inl .byte-poster { padding: 0 var(--kort-kant) var(--kort-kant); }
.inl .byte-poster[hidden] { display: none; }
.inl .byte-poster-rubrik { margin: 0; font-size: var(--t-13); font-weight: 600; color: var(--text); }
/* Vid ett byråbyte står vägledningen först, se initOverlamning i app.js. */
.inl-lamna[data-forst="vagledning"] > .inl-byte { order: -1; }
.inl .byte-text {
margin: 0; padding: 0.875rem 1rem;
white-space: pre-line; overflow-wrap: anywhere;
font-size: var(--t-13); line-height: 1.55; color: var(--text);
border-radius: var(--r-falt);
background: var(--yta-svag);
box-shadow: inset 0 0 0 1px var(--linje);
}
.inl .byte-knappar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.inl .byte-knappar .btn { width: auto; }
.inl .kort.arkiv-panel { display: grid; gap: 0.75rem; }
.inl .arkiv-panel .mapper-head { margin: 0; }
.inl .arkiv-panel .mt-3,
.inl .arkiv-panel .mt-4 { margin-top: 0.25rem; }
/* ============================================================
RÖRELSE
============================================================ */
@media (prefers-reduced-motion: reduce) {
.inl-skelett span::before,
.inl-skelett span::after,
.inl .dz-queue li,
.inl .dz-queue li .mark,
.dz-summa,
.inl .mapper { animation: none !important; }
.dz-yta,
.dz-yta-ikon { transition: none; }
.dz-yta:hover .dz-yta-ikon,
.inl .dz.over .dz-yta-ikon { translate: none; }
.dz-yta:active,
.inl-hopp a:active { scale: none; }
}
/* ============================================================
UPPDRAGET HAR UPPHÖRT (U1.6)
------------------------------------------------------------
Då står bara kortet om det kvar på sidan, se app.js.
============================================================ */
.inl-upphort[hidden] { display: none; }
.inl-upphort h2 { margin: 0 0 0.375rem; }
.inl-upphort p { margin: 0 0 0.875rem; color: var(--text-dampad); }
.inl[data-upphort] > :not(.inl-upphort) { display: none; }
/* På Historik är kortet om byråbyte mycket längre än släppytan, sedan
det fick listan och texten till den tidigare byrån. Där behåller
korten sin egen höjd, annars blev släppytan en tom ruta. */
#lamna { align-items: start; }
/* ===== app/assets/sidor/fakturor.css ===== */
/* Sidans egna stilar. Läses efter app.css, se scripts/config.mjs.
Fakturasidan: listan, läget, stegen första gången, avsändar-
uppgifterna, arket där en faktura skrivs och granskas, och
frågorna innan något som inte går att ta tillbaka. Alla sidors
stilar hamnar i samma byggda fil, så varje regel börjar med
sidans data-app-page. Då kan en regel här aldrig ändra en annan
sida, och ordningen mellan sidfilerna spelar ingen roll. */
/* ============================================================
LADDNING OCH FEL
------------------------------------------------------------
Medan fakturorna hämtas står en stilla skiss av listan i samma
storlek, så att sidan inte hoppar när innehållet kommer.
Skissen andas långsamt, och står still för den som bett om
mindre rörelse.
============================================================ */
[data-app-page="fakturor"] .fakt-skiss {
display: grid; gap: 0.875rem;
padding: var(--kort-kant);
}
[data-app-page="fakturor"] .skiss-rad {
display: block; height: 0.875rem; border-radius: var(--r-liten);
background: var(--yta-neutral);
animation: fakt-andas 1.6s var(--ease) infinite alternate;
}
[data-app-page="fakturor"] .skiss-kort { width: 40%; height: 1.25rem; margin-bottom: 0.5rem; }
[data-app-page="fakturor"] .skiss-rad:nth-child(3) { width: 86%; }
[data-app-page="fakturor"] .skiss-rad:nth-child(4) { width: 72%; }
@keyframes fakt-andas { from { opacity: 1; } to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
[data-app-page="fakturor"] .skiss-rad { animation: none; }
}
[data-app-page="fakturor"] .fakt-fel { display: grid; justify-items: start; gap: 0.75rem; }
[data-app-page="fakturor"] .fakt-fel[hidden] { display: none; }
[data-app-page="fakturor"] .fakt-fel h2 { margin: 0; font-size: var(--t-kortrubrik); font-weight: 600; }
/* ============================================================
KOM IGÅNG
------------------------------------------------------------
Två steg i ordning, med en siffra som blir en bock när steget
är klart. Bara det aktiva steget har en blå knapp, så att det
alltid finns en enda sak att göra.
============================================================ */
[data-app-page="fakturor"] .kom-steg {
margin: 0; padding: 0; list-style: none;
border-top: 1px solid var(--linje);
}
[data-app-page="fakturor"] .kom-steg-post {
display: grid; align-items: center; gap: 0.25rem 1rem;
grid-template-columns: 2rem minmax(0, 1fr) auto;
padding: 1.125rem var(--kort-kant);
}
[data-app-page="fakturor"] .kom-steg-post + .kom-steg-post { border-top: 1px solid var(--linje); }
[data-app-page="fakturor"] .kom-steg-nr {
display: grid; place-items: center;
width: 2rem; height: 2rem; border-radius: 50%;
border: 1px solid var(--linje-stark);
background: var(--yta-kort); color: var(--text-dampad);
font-family: var(--font-mono); font-size: var(--t-13); font-weight: 600;
align-self: start;
}
[data-app-page="fakturor"] .kom-steg-nr > * { grid-area: 1 / 1; }
[data-app-page="fakturor"] .kom-steg-bock { width: 1rem; height: 1rem; display: none; }
[data-app-page="fakturor"] .kom-steg-post[data-lage="aktiv"] .kom-steg-nr {
border-color: var(--handling); background: var(--handling); color: var(--text-pa-handling);
}
[data-app-page="fakturor"] .kom-steg-post[data-lage="klar"] .kom-steg-nr {
border-color: transparent; background: var(--klar-ton); color: var(--klar);
}
[data-app-page="fakturor"] .kom-steg-post[data-lage="klar"] .kom-steg-siffra { display: none; }
[data-app-page="fakturor"] .kom-steg-post[data-lage="klar"] .kom-steg-bock { display: block; }
[data-app-page="fakturor"] .kom-steg-text h3 {
margin: 0.25rem 0 0.125rem; font-size: var(--t-15); font-weight: 600; letter-spacing: 0;
}
[data-app-page="fakturor"] .kom-steg-text p {
margin: 0; max-width: 58ch;
font-size: var(--t-14); color: var(--text-dampad); line-height: 1.5;
}
[data-app-page="fakturor"] .kom-steg-post[data-lage="vantar"] .kom-steg-text h3 { color: var(--text-dampad); }
[data-app-page="fakturor"] .kom-steg-knapp { display: flex; align-items: center; }
[data-app-page="fakturor"] .kom-steg-knapp [hidden] { display: none; }
@media (max-width: 640px) {
[data-app-page="fakturor"] .kom-steg-post { grid-template-columns: 2rem minmax(0, 1fr); }
[data-app-page="fakturor"] .kom-steg-knapp { grid-column: 2; margin-top: 0.75rem; }
[data-app-page="fakturor"] .kom-steg-knapp .btn { width: 100%; justify-content: center; }
[data-app-page="fakturor"] .kom-steg-knapp:not(:has(> :not([hidden]))) { display: none; }
}
/* ============================================================
LÄGET
------------------------------------------------------------
En mening överst och tre tal under: obetalt, förfallet och
nästa förfallodag. Talen i mono, så att de går att jämföra.
Förfallet blir rött bara när det finns något förfallet.
============================================================ */
[data-app-page="fakturor"] .fakt-lage .lage-huvud { font-size: var(--t-18); }
[data-app-page="fakturor"] .fakt-tal { gap: 1rem 0; }
@media (min-width: 720px) {
[data-app-page="fakturor"] .fakt-tal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-app-page="fakturor"] .fakt-tal .lage-post + .lage-post { padding-left: 1.5rem; margin-left: 0; }
[data-app-page="fakturor"] .fakt-tal .lage-post:not(:last-child) { padding-right: 1.5rem; }
}
/* I mobilen står obetalt och förfallet bredvid varandra och nästa
förfallodag under, så att läget ryms utan att rulla. */
@media (max-width: 719px) {
[data-app-page="fakturor"] .fakt-tal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.875rem 1rem; }
[data-app-page="fakturor"] .fakt-tal .lage-post:last-child { grid-column: 1 / -1; padding-top: 0.875rem; border-top: 1px solid var(--linje); }
[data-app-page="fakturor"] .fakt-tal-varde { font-size: var(--t-20); }
}
[data-app-page="fakturor"] .fakt-tal dd { display: grid; gap: 0.125rem; margin-top: 0.25rem; }
/* Samma typsnitt som närmaste datum på översikten. Mono hör hemma
i kolumner där siffrorna ska stå under varandra, inte i ett tal
som läses ensamt. */
[data-app-page="fakturor"] .fakt-tal-varde {
font-variant-numeric: tabular-nums;
font-size: var(--t-24); font-weight: 600; letter-spacing: -0.02em;
color: var(--text);
}
[data-app-page="fakturor"] .fakt-tal-om { font-size: var(--t-13); color: var(--text-dampad); }
[data-app-page="fakturor"] .lage-post[data-lage="fel"] .fakt-tal-varde,
[data-app-page="fakturor"] .lage-post[data-lage="fel"] .fakt-tal-om { color: var(--fel); }
[data-app-page="fakturor"] .lage-post[data-lage="lugnt"] .fakt-tal-varde { color: var(--text-dampad); }
/* ============================================================
LISTAN
============================================================ */
/* Mer-menyn på en rad fälls ut över kortets kant. Kortet klipper
annars allt som sticker ut, och menyn på den sista raden blev
halv. Inget i kortet har en egen bakgrund som behöver hållas
inom hörnen, så klippningen behövs inte här. */
[data-app-page="fakturor"] .fakt-lista { overflow: visible; min-width: 0; }
[data-app-page="fakturor"] .fakt-lista > .filters { padding-top: 0; }
/* I mobilen rullar filtren i sidled i stället för att bryta i två
rader, som flikar i en bankapp. */
@media (max-width: 640px) {
[data-app-page="fakturor"] .fakt-lista > .filters {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
margin-inline: 0; scroll-padding-inline: var(--kort-kant);
}
[data-app-page="fakturor"] .fakt-lista > .filters::-webkit-scrollbar { display: none; }
[data-app-page="fakturor"] .fakt-lista > .filters button { flex: none; }
}
/* Antalet i filtret, i en ton svagare än ordet. */
[data-app-page="fakturor"] .filters .filter-antal {
margin-left: 0.4375rem;
font-family: var(--font-mono); font-size: var(--t-12); font-weight: 600;
color: var(--text-svag);
}
[data-app-page="fakturor"] .filters button[aria-pressed="true"] .filter-antal { color: var(--handling-djup); }
[data-app-page="fakturor"] .filters .filter-fel .filter-antal { color: var(--fel); }
/* Raderna. Hovringen är en hinna, så att raden kunden pekar på
syns utan att något flyttar sig. */
[data-app-page="fakturor"] .fakt-lista .tabell { font-size: var(--t-14); }
[data-app-page="fakturor"] .fakt-lista .tabell td { vertical-align: middle; padding-block: 0.875rem; }
[data-app-page="fakturor"] .fakt-lista .tabell tbody tr { transition: background-color var(--t-fast) var(--ease); }
@media (hover: hover) {
[data-app-page="fakturor"] .fakt-lista .tabell tbody tr:hover { background: var(--yta-hov); }
}
[data-app-page="fakturor"] .fakt-nr { font-weight: 600; color: var(--text); }
[data-app-page="fakturor"] tr[data-lage="utkast"] .fakt-nr { color: var(--text-svag); font-weight: 400; }
[data-app-page="fakturor"] .fakt-lista .tabell-namn { font-weight: 500; color: var(--text); }
[data-app-page="fakturor"] .fakt-lista .tabell-under { margin-top: 0.125rem; font-size: var(--t-12); color: var(--text-dampad); }
[data-app-page="fakturor"] .fakt-forfall .tabell-under { font-family: var(--font); white-space: nowrap; }
[data-app-page="fakturor"] .fakt-lista .tabell .tal-mono { font-size: var(--t-13); }
[data-app-page="fakturor"] .fakt-forfall.ar-forsenad .tal-mono,
[data-app-page="fakturor"] .fakt-forfall.ar-forsenad .tabell-under { color: var(--fel); }
[data-app-page="fakturor"] .fakt-belopp { font-weight: 500; color: var(--text); }
[data-app-page="fakturor"] tr[data-lage="kredit"] .fakt-belopp,
[data-app-page="fakturor"] tr[data-lage="utkast"] .fakt-belopp { color: var(--text-dampad); }
[data-app-page="fakturor"] .fakt-lista .tabell td .status { justify-self: start; }
/* Knapparna står i en rad: den som raden behöver härnäst och Mer.
Bredden är fast, så att knapparna står i linje rad för rad. */
[data-app-page="fakturor"] .fakt-atgard { width: 1%; white-space: nowrap; }
[data-app-page="fakturor"] .fakt-lista .tabell-atgarder { flex-wrap: nowrap; justify-content: flex-end; }
[data-app-page="fakturor"] .fakt-lista .tabell-atgarder > .doc-knapp { min-width: 5.5rem; }
/* Mer: en knapp med en liten pil, och listan till höger under
den, eller ovanför när den annars hade hamnat under skärmens
kant. */
[data-app-page="fakturor"] .mer-lista { min-width: 13.5rem; }
[data-app-page="fakturor"] .mer.ar-uppat .mer-lista { top: auto; bottom: calc(100% + 0.25rem); }
[data-app-page="fakturor"] .mer-val {
display: flex; align-items: center;
min-height: 2.375rem;
color: var(--text); font: inherit; font-size: var(--t-14); font-weight: 500;
text-decoration: none; cursor: pointer;
}
[data-app-page="fakturor"] .mer-val:focus-visible { outline: 2px solid var(--handling); outline-offset: -2px; }
[data-app-page="fakturor"] .mer-val.mer-fara { color: var(--fel); }
[data-app-page="fakturor"] .mer-val.mer-fara:hover { background: var(--fel-ton); }
[data-app-page="fakturor"] .mer > summary:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }
[data-app-page="fakturor"] .fakt-filtertom { display: grid; justify-items: start; gap: 0.5rem; padding-top: 1rem; }
[data-app-page="fakturor"] .fakt-filtertom[hidden] { display: none; }
@media (max-width: 900px) {
/* Kortlayouten från app.css: numret och beloppet överst,
mottagaren under, förfallodagen och statusen sist och
knapparna längst ner. Förfallodagens två rader står på en. */
[data-app-page="fakturor"] .fakt-lista .tabell td { padding-block: 0; }
[data-app-page="fakturor"] .fakt-lista .tabell tbody tr:hover { background: none; }
[data-app-page="fakturor"] .fakt-lista .tabell td.fakt-forfall {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.375rem;
}
[data-app-page="fakturor"] .fakt-lista .tabell td.fakt-forfall::before {
content: "Förfaller"; color: var(--text-dampad); font-size: var(--t-13);
}
[data-app-page="fakturor"] .fakt-forfall .tabell-under { font-size: var(--t-13); }
[data-app-page="fakturor"] .fakt-forfall .tabell-under::before { content: "· "; }
[data-app-page="fakturor"] .fakt-atgard { width: auto; }
[data-app-page="fakturor"] .fakt-lista .tabell-atgarder {
flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;
gap: 0.5rem;
}
[data-app-page="fakturor"] .fakt-lista .tabell-atgarder > .doc-knapp { flex: 1 1 0; }
[data-app-page="fakturor"] .fakt-lista .tabell-atgarder > .mer { flex: 1 1 0; width: auto; }
[data-app-page="fakturor"] .fakt-lista .mer > summary { width: 100%; justify-content: center; }
/* I mobilen fälls menyn ut på plats och knuffar ner raden under.
Den får full bredd, så att varje val är lätt att träffa. */
[data-app-page="fakturor"] .fakt-lista .mer[open] { flex-basis: 100%; order: 2; }
[data-app-page="fakturor"] .fakt-lista .mer-lista {
position: static; margin-top: 0.5rem; box-shadow: none;
background: var(--yta-svag);
}
[data-app-page="fakturor"] .mer-val { min-height: var(--h-kontroll); }
}
/* ============================================================
ÅTERKOMMANDE
============================================================ */
[data-app-page="fakturor"] #upprepning-sektion > .form-note { margin: 0; padding-top: 0; max-width: 64ch; }
[data-app-page="fakturor"] .upprepning-namn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
[data-app-page="fakturor"] .upprepning.ar-pausad { background: var(--yta-svag); }
[data-app-page="fakturor"] .upprepning.ar-pausad .upprepning-namn { color: var(--text-dampad); }
/* ============================================================
AVSÄNDARE OCH BETALNING
------------------------------------------------------------
Sju uppgifter i en kolumn blev en lång lista med mycket luft
till höger. På datorn står de i två spalter, som på fakturans
fot, där de till slut hamnar.
============================================================ */
@media (min-width: 900px) {
[data-app-page="fakturor"] #avsandare-lista {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-app-page="fakturor"] #avsandare-lista .kv-row + .kv-row { border-top: 0; }
[data-app-page="fakturor"] #avsandare-lista .kv-row { border-top: 1px solid var(--linje); }
[data-app-page="fakturor"] #avsandare-lista { column-gap: 0; }
[data-app-page="fakturor"] #avsandare-lista .kv-row:nth-child(odd) { padding-right: 2rem; }
}
[data-app-page="fakturor"] #avsandare-lista .kv-row { align-items: baseline; }
[data-app-page="fakturor"] #avsandare-lista dd { text-align: right; }
[data-app-page="fakturor"] .kort-form .form-hamtat { margin-top: 0.75rem; }
/* ============================================================
KNAPPAR SOM BARA FINNS HÄR
============================================================ */
/* Krysset uppe till höger i arken. */
[data-app-page="fakturor"] .ark-stang {
display: grid; place-items: center; flex: none;
width: 2.5rem; height: 2.5rem; margin: -0.375rem -0.5rem 0 0;
border: 0; border-radius: var(--r-falt);
background: none; color: var(--text-dampad);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
[data-app-page="fakturor"] .ark-stang:hover { background: var(--yta-hov); color: var(--text); }
[data-app-page="fakturor"] .ark-stang:focus-visible { outline: 2px solid var(--handling); outline-offset: 0; }
[data-app-page="fakturor"] .ark-stang svg { width: 1.25rem; height: 1.25rem; }
/* ============================================================
ARKEN: GEMENSAMT
============================================================ */
[data-app-page="fakturor"] .ark-huvud {
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
[data-app-page="fakturor"] .ark-huvud h2 { margin: 0; text-align: left; }
[data-app-page="fakturor"] .ark-huvud-text { display: grid; gap: 0.375rem; min-width: 0; }
[data-app-page="fakturor"] .upprepa-ark .sheet-inner { text-align: left; }
[data-app-page="fakturor"] .upprepa-ark .ark-ledtext { margin: 0.75rem 0 1rem; font-size: var(--t-14); }
[data-app-page="fakturor"] .upprepa-ark .ark-grupp { margin: 0; }
[data-app-page="fakturor"] .upprepa-ark .form-status:not([hidden]) { margin-top: 1rem; }
[data-app-page="fakturor"] .bekrafta-falt { margin-top: 1.125rem; }
/* ============================================================
ARKET DÄR FAKTURAN SKRIVS
------------------------------------------------------------
På en bred skärm står fälten till vänster och fakturan till
höger, och huvudet och foten står kvar medan mitten rullar. På
en smalare skärm försvinner fakturan bredvid, och i mobilen är
arket ett bottenark i nästan hela höjden, med summan och nästa
steg i foten under tummen.
============================================================ */
[data-app-page="fakturor"] .faktura-ark {
width: min(48rem, calc(100vw - 2rem));
max-height: calc(100svh - 2rem);
}
@media (min-width: 1100px) {
[data-app-page="fakturor"] .faktura-ark[data-steg="skriv"] { width: min(76rem, calc(100vw - 3rem)); }
[data-app-page="fakturor"] .faktura-ark[data-steg="granska"] { width: min(54rem, calc(100vw - 3rem)); }
}
[data-app-page="fakturor"] .faktura-ark .sheet-inner { padding: 0; text-align: left; }
/* Huvudet står kvar överst. */
[data-app-page="fakturor"] .faktura-ark .ark-huvud {
position: sticky; top: 0; z-index: 3;
padding: 1.25rem 1.5rem 1rem;
background: var(--yta-kort);
border-bottom: 1px solid var(--linje);
}
[data-app-page="fakturor"] .faktura-ark .ark-huvud h2 { font-size: var(--t-20); }
/* Stegen: två ord med en siffra, och det steg kunden är i står
i blått. Ett avklarat steg får en bock i stället för siffran. */
[data-app-page="fakturor"] .ark-steg {
display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
margin: 0; padding: 0; list-style: none;
font-size: var(--t-13); color: var(--text-dampad);
}
[data-app-page="fakturor"] .ark-steg li { display: inline-flex; align-items: center; gap: 0.4375rem; }
[data-app-page="fakturor"] .ark-steg-nr {
display: grid; place-items: center;
width: 1.25rem; height: 1.25rem; border-radius: 50%;
border: 1px solid var(--linje-stark);
font-family: var(--font-mono); font-size: var(--t-11); font-weight: 600;
}
[data-app-page="fakturor"] .ark-steg li.ar-aktiv { color: var(--text); font-weight: 600; }
[data-app-page="fakturor"] .ark-steg li.ar-aktiv .ark-steg-nr {
border-color: var(--handling); background: var(--handling); color: var(--text-pa-handling);
}
[data-app-page="fakturor"] .ark-steg li.ar-klar .ark-steg-nr {
border-color: transparent; background: var(--klar-ton); color: transparent; position: relative;
}
[data-app-page="fakturor"] .ark-steg li.ar-klar .ark-steg-nr::after {
content: ""; position: absolute; left: 50%; top: 45%;
width: 0.3125rem; height: 0.5625rem;
border-right: 2px solid var(--klar); border-bottom: 2px solid var(--klar);
transform: translate(-50%, -50%) rotate(45deg);
}
/* Mitten. */
[data-app-page="fakturor"] .ark-yta { padding: 1.25rem 1.5rem 0.5rem; }
@media (min-width: 1100px) {
[data-app-page="fakturor"] .ark-yta {
display: grid; align-items: start; gap: 2rem;
grid-template-columns: minmax(0, 1fr) 24.5rem;
}
}
[data-app-page="fakturor"] .ark-falten { min-width: 0; }
[data-app-page="fakturor"] .ark-notis {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
margin: 0 0 1.25rem; padding: 0.75rem 0.875rem;
border-radius: var(--r-falt);
background: var(--handling-ton); color: var(--handling-djup);
font-size: var(--t-14);
}
[data-app-page="fakturor"] .ark-notis p { margin: 0; }
[data-app-page="fakturor"] .ark-notis .linkish { font-size: var(--t-13); }
[data-app-page="fakturor"] .faktura-ark .ark-brister {
margin: 0 0 1.25rem; padding: 0.875rem 1rem;
border-radius: var(--r-falt);
background: var(--fel-ton); color: var(--fel);
font-size: var(--t-14); font-weight: 400;
}
[data-app-page="fakturor"] .faktura-ark .ark-brister[hidden] { display: none; }
[data-app-page="fakturor"] .ark-brister-rubrik { margin: 0 0 0.375rem; font-weight: 600; }
[data-app-page="fakturor"] .faktura-ark .ark-brister ul { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; }
/* Grupperna: en rubrik och fälten under, skilda med en linje i
stället för en ram runt varje grupp. Tre ramar i ett ark som
redan har en ram blev lådor i lådor. */
[data-app-page="fakturor"] .faktura-ark .ark-grupp {
display: grid; gap: 0.75rem 0.875rem;
grid-template-columns: repeat(6, minmax(0, 1fr));
margin: 0; padding: 0 0 1.375rem;
border: 0; border-radius: 0; background: none;
}
[data-app-page="fakturor"] .faktura-ark .ark-grupp + .ark-grupp { padding-top: 1.25rem; border-top: 1px solid var(--linje); }
[data-app-page="fakturor"] .faktura-ark .ark-grupp > legend {
float: left; grid-column: 1 / -1; width: 100%;
margin: 0 0 0.125rem; padding: 0;
font-size: var(--t-15); font-weight: 600; color: var(--text);
}
[data-app-page="fakturor"] .faktura-ark .ark-grupp > * { grid-column: 1 / -1; }
[data-app-page="fakturor"] .faktura-ark .falt-hjalp { margin-top: 0.3125rem; line-height: 1.45; }
[data-app-page="fakturor"] .faktura-ark .falt-hjalp.ar-hamtad { color: var(--klar); }
/* Mottagaren. Valet ur registret står ensamt överst, och under
det antingen den valda mottagaren eller fälten för en ny. */
[data-app-page="fakturor"] .ark-mottagare > .field:first-of-type { grid-column: 1 / span 4; }
[data-app-page="fakturor"] .ark-mottagare > .field[hidden] { display: none; }
[data-app-page="fakturor"] .faktura-ark .ark-vald {
display: grid; gap: 0.125rem;
padding: 0.875rem 1rem;
border: 1px solid var(--linje); border-radius: var(--r-falt);
background: var(--yta-svag); color: var(--text);
font-size: var(--t-14);
}
[data-app-page="fakturor"] .ark-vald p { margin: 0; }
[data-app-page="fakturor"] .ark-vald-namn { font-weight: 600; }
[data-app-page="fakturor"] .ark-vald-rad { color: var(--text-dampad); }
[data-app-page="fakturor"] .ark-vald-rad.ar-varnad { color: var(--vantar); }
[data-app-page="fakturor"] .faktura-ark .ark-egen,
[data-app-page="fakturor"] .kund-ark .ark-egen {
display: grid; gap: 0.75rem 0.875rem;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-2 { grid-column: span 2; }
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-3 { grid-column: span 3; }
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-4 { grid-column: span 4; }
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-6 { grid-column: 1 / -1; }
/* Kunderna. Samma rader som de återkommande fakturorna, och en
kund ändras i ett ark med samma fält som fakturans mottagare. */
[data-app-page="fakturor"] #kund-sektion > .form-note { margin: 0; padding-top: 0; max-width: 64ch; }
[data-app-page="fakturor"] .kund-epost { overflow-wrap: anywhere; }
[data-app-page="fakturor"] .kund .ar-varnad { color: var(--vantar); }
[data-app-page="fakturor"] .kund-ark { width: min(40rem, calc(100vw - 2rem)); }
[data-app-page="fakturor"] .kund-ark .sheet-inner { text-align: left; }
[data-app-page="fakturor"] .kund-ark .ark-egen { margin-top: 1rem; }
[data-app-page="fakturor"] .kund-ark .form-status:not([hidden]) { margin-top: 1rem; }
[data-app-page="fakturor"] .kund-ark .falt-fel { margin: 0.375rem 0 0; font-size: var(--t-13); color: var(--fel); }
[data-app-page="fakturor"] .faktura-ark .ark-egen > .falt-kryss { grid-column: 1 / -1; }
/* Fakturan själv: fyra fält i bredd på datorn, två i mobilen. */
[data-app-page="fakturor"] .ark-fakturan > .field { grid-column: span 3; }
@media (min-width: 760px) {
[data-app-page="fakturor"] .faktura-ark .ark-fakturan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-app-page="fakturor"] .ark-fakturan > .field { grid-column: span 1; }
}
/* Raderna. Beskrivningen överst, talen under och radens belopp
till höger. Krysset tar bort raden och står bara när det finns
fler än en. */
[data-app-page="fakturor"] .faktura-ark .ark-rader { display: grid; gap: 0.625rem; }
[data-app-page="fakturor"] .faktura-ark .ark-rad {
position: relative;
display: grid; gap: 0.625rem;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1.15fr);
padding: 0.875rem 3rem 0.875rem 0.875rem;
border: 1px solid var(--linje); border-radius: var(--r-falt);
background: var(--yta-svag);
}
[data-app-page="fakturor"] .faktura-ark .ark-rad .rad-beskrivning { grid-column: 1 / -1; }
[data-app-page="fakturor"] .rad-belopp {
display: grid; align-content: center; justify-items: end;
min-height: 3.25rem;
}
[data-app-page="fakturor"] .rad-belopp-etikett { font-size: var(--t-11); font-weight: 600; color: var(--text-dampad); }
[data-app-page="fakturor"] .rad-belopp-varde { font-size: var(--t-15); font-weight: 500; color: var(--text); }
[data-app-page="fakturor"] .ark-rad-bort {
position: absolute; top: 0.75rem; right: 0.5rem;
display: grid; place-items: center;
width: 2rem; height: 2rem;
border: 0; border-radius: var(--r-liten);
background: none; color: var(--text-svag); cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
[data-app-page="fakturor"] .ark-rad-bort:hover { background: var(--fel-ton); color: var(--fel); }
[data-app-page="fakturor"] .ark-rad-bort:focus-visible { outline: 2px solid var(--handling); outline-offset: 0; }
[data-app-page="fakturor"] .ark-rad-bort[hidden] { display: none; }
[data-app-page="fakturor"] .ark-rad-bort svg { width: 1.0625rem; height: 1.0625rem; }
@media (max-width: 640px) {
[data-app-page="fakturor"] .faktura-ark .ark-rad {
grid-template-columns: repeat(6, minmax(0, 1fr));
padding: 0.75rem;
}
[data-app-page="fakturor"] .faktura-ark .ark-rad .rad-beskrivning { grid-column: 1 / -1; padding-right: 2.5rem; }
[data-app-page="fakturor"] .faktura-ark .ark-rad .rad-antal,
[data-app-page="fakturor"] .faktura-ark .ark-rad .rad-enhet { grid-column: span 3; }
[data-app-page="fakturor"] .faktura-ark .ark-rad .rad-pris { grid-column: span 4; }
[data-app-page="fakturor"] .faktura-ark .ark-rad .rad-moms { grid-column: span 2; }
[data-app-page="fakturor"] .rad-belopp {
grid-column: 1 / -1; min-height: 0;
display: flex; align-items: baseline; justify-content: space-between;
padding-top: 0.5rem; border-top: 1px solid var(--linje);
}
[data-app-page="fakturor"] .rad-belopp-etikett { font-size: var(--t-13); font-weight: 500; }
[data-app-page="fakturor"] .ark-rad-bort { top: 0.75rem; right: 0.375rem; width: 2.75rem; height: 3.25rem; }
}
[data-app-page="fakturor"] .ark-radfot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
}
[data-app-page="fakturor"] .ark-lagg {
display: inline-flex; align-items: center; gap: 0.4375rem;
min-height: 2.5rem; padding: 0 0.875rem 0 0.625rem;
border: 1px dashed var(--linje-hov); border-radius: var(--r-falt);
background: none; color: var(--handling);
font: inherit; font-size: var(--t-14); font-weight: 600;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
[data-app-page="fakturor"] .ark-lagg:hover { background: var(--handling-ton); border-color: var(--handling); }
[data-app-page="fakturor"] .ark-lagg:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; }
[data-app-page="fakturor"] .ark-lagg:active { scale: 0.98; transition-duration: var(--t-press); }
[data-app-page="fakturor"] .ark-lagg svg { width: 1.0625rem; height: 1.0625rem; }
[data-app-page="fakturor"] .ark-tips { margin: 0; font-size: var(--t-12); color: var(--text-svag); }
@media (hover: none), (max-width: 640px) {
[data-app-page="fakturor"] .ark-tips { display: none; }
[data-app-page="fakturor"] .ark-lagg { width: 100%; justify-content: center; min-height: var(--h-kontroll); }
}
/* Summan under raderna, ställd som på en faktura. */
[data-app-page="fakturor"] .ark-totalt {
display: grid; gap: 0.3125rem;
margin: 0.5rem 0 0 auto; width: min(100%, 20rem);
font-size: var(--t-14);
}
[data-app-page="fakturor"] .ark-totalt > div,
[data-app-page="fakturor"] .papper-summa > div { display: flex; justify-content: space-between; gap: 1rem; }
[data-app-page="fakturor"] .ark-totalt dt { color: var(--text-dampad); }
[data-app-page="fakturor"] .ark-totalt dd { margin: 0; color: var(--text); }
[data-app-page="fakturor"] .ark-totalt .ar-summa {
margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid var(--linje-stark);
font-weight: 600; font-size: var(--t-16);
}
[data-app-page="fakturor"] .ark-totalt .ar-summa dt { color: var(--text); }
/* Foten står kvar nederst, med summan till vänster och nästa
steg till höger. */
[data-app-page="fakturor"] .faktura-ark .ark-fot {
position: sticky; bottom: 0; z-index: 3;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin-top: 0.75rem;
padding: 0.875rem 1.5rem;
border-top: 1px solid var(--linje);
background: var(--yta-kort);
}
[data-app-page="fakturor"] .ark-fot-summa { display: grid; gap: 0; min-width: 0; }
[data-app-page="fakturor"] .ark-fot-etikett { font-size: var(--t-12); font-weight: 600; color: var(--text-dampad); }
[data-app-page="fakturor"] .ark-fot-belopp { font-size: var(--t-20); font-weight: 600; color: var(--text); line-height: 1.25; }
[data-app-page="fakturor"] .ark-fot-moms {
font-size: var(--t-12); color: var(--text-dampad);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-app-page="fakturor"] .faktura-ark .ark-knappar { margin: 0; flex: none; flex-wrap: nowrap; }
@media (max-width: 640px) {
[data-app-page="fakturor"] .faktura-ark {
width: 100vw;
height: calc(100svh - 0.75rem); max-height: calc(100svh - 0.75rem);
}
[data-app-page="fakturor"] .faktura-ark .sheet-inner { padding-bottom: 0; min-height: 100%; display: flex; flex-direction: column; }
[data-app-page="fakturor"] #ark-innehall { flex: 1; display: flex; flex-direction: column; }
[data-app-page="fakturor"] #ark-innehall > .ark-fot { margin-top: auto; }
[data-app-page="fakturor"] .faktura-ark .ark-huvud { padding: 0.75rem 1rem 0.875rem; }
[data-app-page="fakturor"] .ark-yta { padding: 1rem 1rem 0.5rem; }
[data-app-page="fakturor"] .faktura-ark .ark-fot {
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
[data-app-page="fakturor"] .faktura-ark .ark-knappar { flex-direction: row; }
[data-app-page="fakturor"] .faktura-ark .ark-knappar > * { width: auto; }
/* Krysset och dragningen stänger arket. Foten behöver platsen
till summan och nästa steg. */
[data-app-page="fakturor"] .faktura-ark .ark-avbryt { display: none; }
[data-app-page="fakturor"] .faktura-ark[data-steg="granska"] .ark-fot-summa { display: none; }
[data-app-page="fakturor"] .faktura-ark[data-steg="granska"] .ark-knappar { width: 100%; }
[data-app-page="fakturor"] .faktura-ark[data-steg="granska"] .ark-knappar > * { flex: 1 1 0; justify-content: center; }
[data-app-page="fakturor"] .ark-mottagare > .field:first-of-type { grid-column: 1 / -1; }
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-2,
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-3,
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-4 { grid-column: 1 / -1; }
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-2:has(#m-postnr, #k-postnr) { grid-column: span 2; }
[data-app-page="fakturor"] :is(.faktura-ark, .kund-ark) .ark-egen > .field.f-4:has(#m-ort, #k-ort) { grid-column: span 4; }
[data-app-page="fakturor"] .kund-ark { width: 100vw; }
}
/* ============================================================
FAKTURAN BREDVID
------------------------------------------------------------
En liten faktura på papper, med samma ordning som den riktiga.
Den följer med när fälten rullas och står bara där det finns
plats för den.
============================================================ */
[data-app-page="fakturor"] .ark-papper-spalt { display: none; }
@media (min-width: 1100px) {
[data-app-page="fakturor"] .ark-papper-spalt {
display: block;
position: sticky; top: 6.25rem;
padding: 1rem;
border-radius: var(--r-kort);
background: var(--yta-arbete);
}
}
[data-app-page="fakturor"] .ark-papper-etikett {
margin: 0 0 0.625rem; font-size: var(--t-12); font-weight: 600; color: var(--text-dampad);
}
[data-app-page="fakturor"] .papper {
display: grid; gap: 1rem;
min-height: 27rem;
padding: 1.375rem 1.25rem 1rem;
border-radius: 4px;
background: var(--yta-kort);
box-shadow: 0 1px 2px rgba(15, 23, 41, 0.06), 0 8px 24px -12px rgba(15, 23, 41, 0.22);
color: var(--text);
font-size: 0.6875rem; line-height: 1.45;
align-content: start;
}
[data-app-page="fakturor"] .papper p { margin: 0; }
[data-app-page="fakturor"] .papper .ar-tom { color: var(--text-svag); }
[data-app-page="fakturor"] .papper-topp { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
[data-app-page="fakturor"] .papper-avsandare { font-size: 0.8125rem; font-weight: 600; max-width: 55%; }
[data-app-page="fakturor"] .papper-titel { text-align: right; }
[data-app-page="fakturor"] .papper-typ { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
[data-app-page="fakturor"] .papper-nr { font-family: var(--font-mono); color: var(--text-dampad); }
[data-app-page="fakturor"] .papper[data-stil="kontrakt"] .papper-typ,
[data-app-page="fakturor"] .papper[data-stil="kontrakt"] .papper-avsandare { font-family: var(--font-serif); font-weight: 400; font-size: 0.9375rem; }
[data-app-page="fakturor"] .papper[data-stil="linje"] .papper-nr { font-size: 0.9375rem; color: var(--text); }
[data-app-page="fakturor"] .papper-mitt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
[data-app-page="fakturor"] .papper-fakta { display: grid; gap: 0.125rem; margin: 0; align-content: start; }
[data-app-page="fakturor"] .papper-fakta > div { display: flex; gap: 0.5rem; }
[data-app-page="fakturor"] .papper-fakta dt { color: var(--text-dampad); min-width: 4.75rem; }
[data-app-page="fakturor"] .papper-fakta dd { margin: 0; font-weight: 500; white-space: nowrap; }
[data-app-page="fakturor"] .papper-adress { align-self: start; }
[data-app-page="fakturor"] .papper-namn { font-weight: 600; }
[data-app-page="fakturor"] .papper-rader { width: 100%; border-collapse: collapse; table-layout: fixed; }
[data-app-page="fakturor"] .papper-rader th {
padding: 0.3125rem 0.25rem; text-align: left;
font-size: 0.625rem; font-weight: 600; color: var(--text-dampad);
border-bottom: 1px solid var(--linje-stark);
}
[data-app-page="fakturor"] .papper[data-stil="kontor"] .papper-rader th { background: var(--yta-arbete); border-bottom: 0; }
[data-app-page="fakturor"] .papper-rader th:first-child { width: 36%; }
[data-app-page="fakturor"] .papper-rader td {
padding: 0.3125rem 0.25rem; vertical-align: top;
border-bottom: 1px solid var(--linje);
overflow-wrap: anywhere;
}
[data-app-page="fakturor"] .papper-rader .tal {
text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
font-size: 0.625rem;
}
[data-app-page="fakturor"] .papper-summa { display: grid; gap: 0.125rem; margin: 0 0 0 auto; width: 70%; }
[data-app-page="fakturor"] .papper-summa dt { color: var(--text-dampad); }
[data-app-page="fakturor"] .papper-summa dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
[data-app-page="fakturor"] .papper-summa .ar-summa {
margin-top: 0.25rem; padding-top: 0.3125rem; border-top: 1px solid var(--linje-stark);
font-size: 0.75rem; font-weight: 600;
}
[data-app-page="fakturor"] .papper-summa .ar-summa dt { color: var(--text); }
[data-app-page="fakturor"] .papper-fot {
display: grid; gap: 0.125rem;
margin-top: 0.5rem; padding-top: 0.625rem; border-top: 1px solid var(--linje);
font-size: 0.5625rem; color: var(--text-dampad);
}
[data-app-page="fakturor"] .papper-betala { color: var(--text); font-weight: 500; }
/* ============================================================
STEG TVÅ: GRANSKA OCH SKICKA
============================================================ */
[data-app-page="fakturor"] .ark-granska { padding: 1.25rem 1.5rem 0.5rem; }
@media (max-width: 640px) {
[data-app-page="fakturor"] .ark-granska { padding: 1rem 1rem 0.5rem; }
}
[data-app-page="fakturor"] .ark-sammanfattning {
display: grid; gap: 0; margin: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--linje); border-radius: var(--r-falt);
}
[data-app-page="fakturor"] .ark-sam-post { padding: 0.75rem 1rem; min-width: 0; }
[data-app-page="fakturor"] .ark-sam-post + .ark-sam-post { border-left: 1px solid var(--linje); }
[data-app-page="fakturor"] .ark-sam-post dt { font-size: var(--t-12); font-weight: 600; color: var(--text-dampad); }
[data-app-page="fakturor"] .ark-sam-post dd { display: grid; gap: 0.0625rem; margin: 0.125rem 0 0; }
[data-app-page="fakturor"] .ark-sam-varde { font-size: var(--t-15); font-weight: 600; overflow-wrap: anywhere; }
[data-app-page="fakturor"] .ark-sam-post.ar-belopp .ark-sam-varde,
[data-app-page="fakturor"] .ark-sam-post:last-child .ark-sam-varde { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
[data-app-page="fakturor"] .ark-sam-under { font-size: var(--t-13); color: var(--text-dampad); overflow-wrap: anywhere; }
@media (max-width: 640px) {
[data-app-page="fakturor"] .ark-sammanfattning { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
[data-app-page="fakturor"] .ark-sam-post:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--linje); }
[data-app-page="fakturor"] .ark-sam-post:nth-child(2) { border-left: 0; }
}
[data-app-page="fakturor"] .ark-regel {
display: flex; align-items: flex-start; gap: 0.625rem;
margin: 0.875rem 0 0; padding: 0.75rem 0.875rem;
border-radius: var(--r-falt);
background: var(--yta-svag); color: var(--text-dampad);
font-size: var(--t-13); line-height: 1.5;
}
[data-app-page="fakturor"] .ark-regel p { margin: 0; }
[data-app-page="fakturor"] .ark-regel svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.0625rem; color: var(--text-dampad); }
[data-app-page="fakturor"] .faktura-ark .ark-granskning {
margin: 0.875rem 0 0.625rem;
border-color: var(--linje);
background: var(--yta-arbete);
}
[data-app-page="fakturor"] .faktura-ark .ark-pdf { height: min(64vh, 44rem); }
@media (max-width: 640px) {
[data-app-page="fakturor"] .faktura-ark .ark-pdf { height: 56svh; }
}
[data-app-page="fakturor"] .faktura-ark .ark-granskknappar { gap: 0.5rem 1.25rem; font-size: var(--t-14); }
@media (max-width: 640px) {
[data-app-page="fakturor"] .faktura-ark .ark-granskknappar > * { flex: 0 0 auto; }
}
/* ============================================================
BESKEDET
------------------------------------------------------------
En ruta nertill som säger vad som hände, i några sekunder.
I mobilen ovanför bottenmenyn.
============================================================ */
[data-app-page="fakturor"] .fakt-besked {
position: fixed; z-index: 60; left: 50%; bottom: 1.5rem;
display: flex; align-items: center; gap: 0.625rem;
width: max-content; max-width: min(34rem, calc(100vw - 2rem));
padding: 0.75rem 1rem 0.75rem 0.875rem;
border-radius: var(--r-falt);
background: var(--text); color: var(--text-pa-handling);
box-shadow: var(--skugga-sval);
font-size: var(--t-14); line-height: 1.4;
translate: -50% 0;
transition: opacity var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out);
}
[data-app-page="fakturor"] .fakt-besked[hidden] { display: none; }
@starting-style {
[data-app-page="fakturor"] .fakt-besked { opacity: 0; translate: -50% 8px; }
}
[data-app-page="fakturor"] .fakt-besked.ar-borta { opacity: 0; translate: -50% 8px; transition-timing-function: var(--ease-in); }
[data-app-page="fakturor"] .fakt-besked svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--klar-ton); }
[data-app-page="fakturor"] .fakt-besked[data-lage="fel"] { background: var(--fel); }
[data-app-page="fakturor"] .fakt-besked[data-lage="fel"] svg { display: none; }
@media (max-width: 880px) {
[data-app-page="fakturor"] .fakt-besked { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
[data-app-page="fakturor"] .fakt-besked,
[data-app-page="fakturor"] .fakt-besked.ar-borta { translate: -50% 0; }
}
/* ===== app/assets/sidor/konto.css ===== */
/* Sidans egna stilar. Läses efter app.css, se scripts/config.mjs.
Inställningarna: kopplade bolag, kontaktuppgifterna och
utloggningen. Alla sidors stilar hamnar i samma byggda fil, så
varje regel börjar med sidans data-app-page. Då kan en regel här
aldrig ändra en annan sida. */
/* ============================================================
KOPPLADE BOLAG
------------------------------------------------------------
En rad per bolag med brickan, namnet och organisationsnumret,
och till höger antingen att det är det aktiva bolaget eller en
knapp för att byta. Det aktiva bolaget står överst.
============================================================ */
[data-app-page="installningar"] .kort .company {
grid-template-columns: 2.5rem minmax(0, 1fr) auto;
gap: 0.25rem 1rem;
padding: 1rem var(--kort-kant);
}
[data-app-page="installningar"] .company-mark {
width: 2.5rem; height: 2.5rem;
border-radius: var(--r-falt);
background: var(--yta-neutral); color: var(--text-dampad);
font-size: var(--t-15);
}
[data-app-page="installningar"] .company-mark.is-active { background: var(--marke); color: var(--text); }
[data-app-page="installningar"] .kort .company .company-mark { align-self: start; }
[data-app-page="installningar"] .company-name { font-size: var(--t-15); font-weight: 600; }
[data-app-page="installningar"] .company-meta { margin-top: 0.125rem; }
[data-app-page="installningar"] .company-orgnr { font-family: var(--font-mono); font-size: var(--t-13); }
[data-app-page="installningar"] .company-inkorg {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem;
margin-top: 0.375rem;
}
[data-app-page="installningar"] .company-inkorg-adress { color: var(--text); overflow-wrap: anywhere; }
[data-app-page="installningar"] .company-kopiera { font-size: var(--t-13); }
[data-app-page="installningar"] .company .status { align-self: start; margin-top: 0.5rem; }
[data-app-page="installningar"] .company-switch { align-self: start; margin-top: 0.125rem; }
@media (hover: hover) {
[data-app-page="installningar"] .kort .company:hover { background: var(--yta-hov); }
[data-app-page="installningar"] .kort .company.is-active:hover { background: none; }
}
@media (max-width: 620px) {
[data-app-page="installningar"] .kort .company { grid-template-columns: 2.5rem minmax(0, 1fr); }
[data-app-page="installningar"] .company .status,
[data-app-page="installningar"] .company-switch { grid-column: 2; justify-self: start; margin-top: 0.5rem; }
[data-app-page="installningar"] .company-switch { min-height: var(--h-kontroll); }
}
/* Länken i foten med ett plus framför. */
[data-app-page="installningar"] .inst-lagg-till {
display: flex; align-items: center; justify-content: center; gap: 0.4375rem;
}
[data-app-page="installningar"] .inst-lagg-till svg { width: 1rem; height: 1rem; }
/* ============================================================
KONTAKTUPPGIFTER
------------------------------------------------------------
Personen överst med sina initialer, som en kontakt i en bankapp,
och under det det som går att ändra. Ett fält öppnas på raden
när kunden väljer Ändra, så att ingenting hoppar till en annan
vy.
============================================================ */
[data-app-page="installningar"] .inst-person {
display: flex; align-items: center; gap: 0.875rem;
padding: 1rem var(--kort-kant);
border-top: 1px solid var(--linje);
}
[data-app-page="installningar"] .inst-initialer {
display: grid; place-items: center; flex: none;
width: 2.5rem; height: 2.5rem; border-radius: 50%;
background: var(--handling-ton); color: var(--handling-djup);
font-size: var(--t-14); font-weight: 600; letter-spacing: 0.02em;
}
[data-app-page="installningar"] .inst-person-text { min-width: 0; }
[data-app-page="installningar"] .inst-namn { margin: 0; font-size: var(--t-15); font-weight: 600; }
[data-app-page="installningar"] .inst-om { margin: 0.125rem 0 0; font-size: var(--t-13); color: var(--text-dampad); }
[data-app-page="installningar"] .inst-kontakt .kv-row { align-items: center; min-height: 3.5rem; }
[data-app-page="installningar"] .inst-kontakt dt { flex: none; }
[data-app-page="installningar"] .inst-kontakt dd { justify-content: flex-end; gap: 0.5rem 1rem; text-align: right; }
[data-app-page="installningar"] .inst-varde { font-weight: 500; }
[data-app-page="installningar"] .inst-varde.ar-saknas { color: var(--text-svag); font-weight: 400; }
/* Medan ett värde ändras tar fältet raden, och knapparna står
bredvid. I mobilen hamnar fältet på egen rad under etiketten. */
[data-app-page="installningar"] .inst-kontakt dd.ar-redigeras {
flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; text-align: left;
}
[data-app-page="installningar"] .inst-kontakt dd.ar-redigeras input { flex: 1 1 14rem; max-width: 22rem; }
[data-app-page="installningar"] .inst-kontakt dd.ar-redigeras .error { flex-basis: 100%; text-align: right; margin: 0; }
@media (max-width: 620px) {
[data-app-page="installningar"] .inst-kontakt .kv-row:has(dd.ar-redigeras) { flex-direction: column; align-items: stretch; gap: 0.5rem; }
[data-app-page="installningar"] .inst-kontakt dd.ar-redigeras { justify-content: flex-start; }
[data-app-page="installningar"] .inst-kontakt dd.ar-redigeras input { max-width: none; flex-basis: 100%; }
[data-app-page="installningar"] .inst-kontakt dd.ar-redigeras .doc-knapp { flex: 1 1 auto; }
[data-app-page="installningar"] .inst-kontakt dd.ar-redigeras .error { text-align: left; }
}
/* ============================================================
BOLAGETS MATERIAL
------------------------------------------------------------
Ett kort med en mening om vad zip-filen innehåller och en
sekundär knapp. Texten tar det utrymme som finns, och knappen
hamnar under den på smal skärm.
============================================================ */
[data-app-page="installningar"] .inst-material {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.875rem 1.5rem;
padding: 1rem var(--kort-kant) 1.25rem;
border-top: 1px solid var(--linje);
}
[data-app-page="installningar"] .inst-material .inst-om { flex: 1 1 22rem; max-width: 38rem; margin: 0; }
[data-app-page="installningar"] #material-status:not([hidden]) { margin: 0 var(--kort-kant) 1rem; }
@media (max-width: 620px) {
[data-app-page="installningar"] .inst-material .btn { width: 100%; justify-content: center; }
}
/* ============================================================
UTLOGGNINGEN
------------------------------------------------------------
Sist, i ett eget kort med en mening om vad som händer. Ingen
röd knapp: att logga ut är inte farligt.
============================================================ */
[data-app-page="installningar"] .inst-ut {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.875rem 1.5rem;
}
[data-app-page="installningar"] .inst-ut h2 { margin: 0; font-size: var(--t-kortrubrik); font-weight: 600; }
[data-app-page="installningar"] .inst-ut p { margin: 0.25rem 0 0; font-size: var(--t-14); color: var(--text-dampad); }
@media (max-width: 620px) {
[data-app-page="installningar"] .inst-ut .btn { width: 100%; justify-content: center; }
}
/* ============================================================
AVSLUTA UPPDRAGET (U1.3 till U1.6)
------------------------------------------------------------
Läget först, sedan hur det går till och en knapp. Knappen är
sekundär. Det röda kommer först i frågan, se fragaForst() i
app.js.
============================================================ */
[data-app-page="installningar"] .inst-avsluta[hidden] { display: none; }
[data-app-page="installningar"] .inst-avsluta-lage { margin: 0 0 0.75rem; font-size: var(--t-15); color: var(--text); max-width: 60ch; }
[data-app-page="installningar"] .inst-avsluta-lista {
margin: 0 0 1.125rem; padding-left: 1.125rem; display: grid; gap: 0.375rem;
font-size: var(--t-14); color: var(--text-dampad); max-width: 60ch;
}
[data-app-page="installningar"] .inst-avsluta-lista[hidden] { display: none; }
[data-app-page="installningar"] .inst-avsluta-knappar { display: flex; flex-wrap: wrap; gap: 0.75rem; }
[data-app-page="installningar"] .inst-avsluta-knappar:not(:has(> :not([hidden]))) { display: none; }
[data-app-page="installningar"] .inst-avsluta .form-status:not([hidden]) { margin-top: 1rem; }
@media (max-width: 620px) {
[data-app-page="installningar"] .inst-avsluta-knappar .btn { width: 100%; justify-content: center; }
}
/* ============================================================
TILLGÅNG OCH INLOGGNINGAR (U7)
------------------------------------------------------------
Samma radform för personer, inbjudningar och inloggningar: namn
eller tid överst, en dämpad rad under, och en liten knapp eller
bricka till höger.
============================================================ */
[data-app-page="installningar"] :is(.inst-tillgang, .inst-inloggningar)[hidden],
[data-app-page="installningar"] :is(#bjud-del, #bjud-form, #logga-ut-andra-del, #bjud-knapp)[hidden] { display: none; }
[data-app-page="installningar"] :is(.inst-personer, .inst-inloggningslista) { list-style: none; margin: 0; padding: 0; }
[data-app-page="installningar"] :is(.inst-rad, .inst-inloggning) {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1rem;
padding: 0.875rem var(--kort-kant);
border-bottom: 1px solid var(--linje);
}
[data-app-page="installningar"] .inst-rad-text { display: grid; gap: 0.125rem; min-width: 0; }
[data-app-page="installningar"] .inst-rad-namn { font-size: var(--t-15); font-weight: 600; color: var(--text); }
[data-app-page="installningar"] .inst-rad-om { font-size: var(--t-13); color: var(--text-dampad); overflow-wrap: anywhere; }
[data-app-page="installningar"] .inst-inloggning .status { white-space: nowrap; }
[data-app-page="installningar"] .inst-bjud-form { display: grid; gap: 0.875rem; max-width: 30rem; }
[data-app-page="installningar"] .inst-bjud-form .form-note { margin: 0; }
[data-app-page="installningar"] .inst-bjud-knappar { display: flex; flex-wrap: wrap; gap: 0.75rem; }
[data-app-page="installningar"] .inst-inloggningar-fot .form-note { margin: 0 0 0.875rem; max-width: 60ch; }
[data-app-page="installningar"] :is(.inst-tillgang, .inst-inloggningar) .form-status:not([hidden]) { margin: 0 var(--kort-kant) 1rem; }
@media (max-width: 620px) {
[data-app-page="installningar"] :is(.inst-bjud, .inst-inloggningar-fot) .btn { width: 100%; justify-content: center; }
}
[data-app-page="installningar"] .inst-bjud { padding-top: 1rem; }
/* U8.1: hur ofta påminnelserna kommer. Valen är chips med riktiga
radioknappar, och beskedet om att valet sparades står under dem. */
[data-app-page="installningar"] .inst-paminnelser { padding-top: 1rem; border-top: 1px solid var(--linje); }
[data-app-page="installningar"] .inst-paminnelser .field-title { font-size: var(--t-14); font-weight: 600; color: var(--text); }
[data-app-page="installningar"] .inst-paminnelser .form-note { margin: 0.25rem 0 0; max-width: 60ch; }
[data-app-page="installningar"] .inst-paminnelser .form-status:not([hidden]) { margin-top: 0.75rem; }
[data-app-page="installningar"] .inst-paminnelser .chip:has(input:disabled) { opacity: 0.6; cursor: default; }
[data-app-page="installningar"] .inst-bjud-roll { margin: 0; padding: 0; border: 0; display: grid; gap: 0.5rem; }
[data-app-page="installningar"] .inst-bjud-roll .field-title { margin-bottom: 0.25rem; }
[data-app-page="installningar"] .inst-roll-val {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start;
padding: 0.75rem 0.875rem; border: 1px solid var(--linje-stark); border-radius: var(--r-falt);
font-size: var(--t-14); color: var(--text-dampad); cursor: pointer;
}
[data-app-page="installningar"] .inst-roll-val strong { display: block; color: var(--text); font-weight: 600; }
[data-app-page="installningar"] .inst-roll-val:has(input:checked) { border-color: var(--handling); background: var(--handling-ton); }
[data-app-page="installningar"] .inst-roll-val input { margin-top: 0.1875rem; }
/* ===== app/assets/sidor/hjalp.css ===== */
/* ============================================================
HJÄLP
------------------------------------------------------------
Förklaringsknappen intill ett fackord (U4.1), rutan Vad ska jag
skicka in? på Skicka in (U4.2), hjälpsidan (U4.3), länken Fråga
din konsult (U4.4) och beskedet när ett meddelande har skickats
från en annan sida än Översikten. Texterna står i ordlista.js
och i hjalp.html.
============================================================ */
/* --- Frågetecknet intill ett ord ------------------------------
Knappen är 44 px hög för tummen, men ritas som en liten ring.
De negativa marginalerna gör att raden runt ordet inte växer. */
.ord-rad { display: flex; align-items: center; gap: 0.125rem; min-width: 0; }
.ord-rad > h1,
.ord-rad > h2 { min-width: 0; }
.sidtopp-meta > [data-ord] { display: inline-flex; align-items: center; }
.ordhjalp {
flex: none; display: inline-grid; place-items: center;
width: var(--h-kontroll); height: var(--h-kontroll);
margin: -0.625rem -0.5rem; padding: 0;
border: 0; border-radius: var(--r-pill);
background: none; color: var(--text-dampad);
font: inherit; cursor: pointer;
transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.ordhjalp > span {
display: grid; place-items: center;
width: 1.25rem; height: 1.25rem;
border: 1.5px solid currentColor; border-radius: 50%;
font-size: var(--t-12); font-weight: 600; line-height: 1;
}
.ordhjalp:hover,
.ordhjalp[aria-expanded="true"] { color: var(--handling); }
.ordhjalp:active { opacity: 0.6; transition-duration: var(--t-press); }
/* --- Fråga din konsult ---------------------------------------- */
.hjalp-fraga { margin: 0.75rem 0 0; }
.fraga-konsult { min-height: var(--h-kontroll); margin-block: 0; padding-block: 0; }
.arende-ark .hjalp-fraga { margin: 0 0 0.5rem; }
/* --- Rader som fälls ut: Vad ska jag skicka in? och Vanliga frågor ---
Samma summary, samma pil. Fokusringen ritas inåt, eftersom kortet
klipper det som sticker ut. */
.hjalp-post > summary,
.inl-vad > summary {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
min-height: 3.5rem; padding: 0.75rem var(--kort-kant);
list-style: none; cursor: pointer;
color: var(--text); font-weight: 600;
transition: background-color var(--t-fast) var(--ease);
}
.hjalp-post > summary { font-size: var(--t-brod); }
.inl-vad > summary { font-size: var(--t-kortrubrik); }
.hjalp-post > summary::-webkit-details-marker,
.inl-vad > summary::-webkit-details-marker { display: none; }
.hjalp-post > summary::after,
.inl-vad > summary::after {
content: ""; flex: none; width: 0.4375rem; height: 0.4375rem;
border-right: 1.5px solid var(--text-dampad); border-bottom: 1.5px solid var(--text-dampad);
transform: translateY(-2px) rotate(45deg);
}
.hjalp-post[open] > summary::after,
.inl-vad[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.hjalp-post > summary:hover,
.inl-vad > summary:hover { background: var(--yta-hov); }
.hjalp-post > summary:focus-visible,
.inl-vad > summary:focus-visible { outline-offset: -2px; }
/* --- Vad ska jag skicka in? ----------------------------------- */
.inl-vad-lista { display: grid; gap: 0.875rem; margin: 0; }
.inl-vad-lista dt { font-size: var(--t-14); font-weight: 600; color: var(--text); }
.inl-vad-lista dd { margin: 0.125rem 0 0; font-size: var(--t-14); color: var(--text-dampad); max-width: 62ch; }
/* --- Hjälpsidan ------------------------------------------------ */
.hjalp-lista { border-top: 1px solid var(--linje); }
.hjalp-post + .hjalp-post { border-top: 1px solid var(--linje); }
.hjalp-svar { padding: 0 var(--kort-kant) var(--kort-kant); }
.hjalp-svar p { margin: 0 0 0.625rem; max-width: 62ch; color: var(--text-dampad); }
.hjalp-svar p.hjalp-fraga { margin: 0.25rem 0 0; }
.hjalp-svar a { color: var(--handling); font-weight: 600; text-underline-offset: 3px; }
.hjalp-ordlista { display: grid; margin: 0; border-top: 1px solid var(--linje); }
.hjalp-ord { padding: 0.875rem var(--kort-kant); }
.hjalp-ord + .hjalp-ord { border-top: 1px solid var(--linje); }
.hjalp-ord dt { font-weight: 600; color: var(--text); }
.hjalp-ord dd { margin: 0.25rem 0 0; }
.hjalp-ord dd p { margin: 0 0 0.25rem; max-width: 62ch; color: var(--text-dampad); }
/* --- Beskedet efter ett skickat meddelande --------------------- */
.besked-rad {
position: fixed; z-index: 60; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
box-sizing: border-box; width: max-content; max-width: min(28rem, calc(100vw - 2rem));
margin: 0; padding: 0.75rem 1rem;
border-radius: var(--r-falt);
background: var(--klar-ton); color: var(--klar);
box-shadow: var(--skugga-sval);
font-size: var(--t-14); font-weight: 500; text-align: center;
}
.besked-rad[hidden] { display: none; }
@media (max-width: 880px) {
/* Över bottenraden. */
.besked-rad { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
/* ===== app/assets/sidor/rapporter.css ===== */
/* ============================================================
RAPPORTERNA (rapporter.html)
------------------------------------------------------------
Resultaträkning, balansräkning och verifikat för ett räkenskapsår,
bara läsning. Uppställningen följer en årsredovisning enligt K2:
delar med rubrik, poster med belopp till höger och en delsumma
under strecket. Beloppen står i Plex Mono med tabellsiffror, så att
kolumnen går att läsa uppifrån och ned. Se initRapporter i app.js.
============================================================ */
[data-app-page="rapporter"] .rp-val[hidden],
[data-app-page="rapporter"] .rp-ar[hidden],
[data-app-page="rapporter"] .rp-lage[hidden],
[data-app-page="rapporter"] .rp-laddar[hidden],
[data-app-page="rapporter"] .rp-fel[hidden] { display: none; }
/* ---------- Väljarna ---------- */
[data-app-page="rapporter"] .rp-val {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem;
}
[data-app-page="rapporter"] .rp-ar { display: grid; min-width: 11rem; margin: 0; }
[data-app-page="rapporter"] .rp-flikar { margin: 0; }
/* I telefonen fyller de tre flikarna raden, så att de står på en rad
ned till 360 px. Smalare än så bryts de som vanligt. */
@media (max-width: 560px) {
[data-app-page="rapporter"] .rp-val { display: grid; }
[data-app-page="rapporter"] .rp-flikar { gap: 0.375rem; }
[data-app-page="rapporter"] .rp-flikar li { flex: 1 1 auto; }
[data-app-page="rapporter"] .rp-flikar button { width: 100%; padding-inline: 0.5rem; }
}
[data-app-page="rapporter"] .rp-lage {
margin: -0.25rem 0 0;
font-size: var(--t-liten); color: var(--text-dampad);
}
/* ---------- Laddning och fel, samma form som på Bokslutet ---------- */
[data-app-page="rapporter"] .rp-laddar .kort-inre { display: grid; gap: 0.75rem; padding-top: 0.5rem; }
[data-app-page="rapporter"] .rp-linje {
display: block; width: 72%; height: 0.75rem; border-radius: 4px;
background: var(--yta-neutral);
animation: rp-puls 1.4s var(--ease) infinite alternate;
}
[data-app-page="rapporter"] .rp-linje-rubrik { width: 34%; height: 1rem; }
[data-app-page="rapporter"] .rp-linje-kort { width: 46%; }
@keyframes rp-puls { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
[data-app-page="rapporter"] .rp-linje { animation: none; }
}
[data-app-page="rapporter"] .rp-fel { border-color: transparent; background: var(--fel-ton); box-shadow: none; }
[data-app-page="rapporter"] .rp-fel-inre {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
padding: var(--kort-kant);
}
[data-app-page="rapporter"] .rp-fel-inre p { margin: 0; font-size: var(--t-15); font-weight: 500; color: var(--fel); }
/* ---------- Uppställningen ---------- */
[data-app-page="rapporter"] .rp-innehall { padding: 0 var(--kort-kant) var(--kort-kant); }
[data-app-page="rapporter"] .rp-tom-rad { padding-inline: 0; }
[data-app-page="rapporter"] .rp-grupp + .rp-grupp { margin-top: 1.75rem; }
[data-app-page="rapporter"] .rp-grupp-rubrik {
margin: 0 0 0.25rem;
font-size: var(--t-15); font-weight: 600; color: var(--text);
}
[data-app-page="rapporter"] .rp-del { margin-top: 1rem; }
[data-app-page="rapporter"] .rp-del:first-child { margin-top: 0.25rem; }
[data-app-page="rapporter"] .rp-del-rubrik {
margin: 0 0 0.25rem;
font-size: var(--t-liten); font-weight: 600; color: var(--text-dampad);
}
[data-app-page="rapporter"] .rp-tabell {
width: 100%;
border-collapse: collapse;
font-size: var(--t-14);
}
[data-app-page="rapporter"] .rp-tabell th,
[data-app-page="rapporter"] .rp-tabell td {
padding: 0.5rem 0;
text-align: left; vertical-align: baseline;
font-weight: 400;
border-top: 1px solid var(--linje);
}
/* Långa ord som Rörelseresultat får brytas när texten är förstorad i
telefonen, annars skjuter beloppet ut kortet. */
[data-app-page="rapporter"] .rp-tabell th { overflow-wrap: anywhere; }
[data-app-page="rapporter"] .rp-tabell .tal { text-align: right; padding-left: 1rem; }
[data-app-page="rapporter"] .rp-tabell tfoot th,
[data-app-page="rapporter"] .rp-tabell tfoot td {
font-weight: 600;
border-top: 1px solid var(--linje-stark);
}
/* Posten är en knapp som fäller ut kontona. Hela raden är klickytan. */
[data-app-page="rapporter"] .rp-post th { padding: 0; }
[data-app-page="rapporter"] .rp-oppna {
display: flex; align-items: center; gap: 0.375rem;
width: 100%; min-height: 2.5rem; padding: 0.375rem 0;
border: 0; background: none;
font: inherit; color: var(--text); text-align: left;
cursor: pointer;
}
[data-app-page="rapporter"] .rp-oppna:hover { color: var(--handling-djup); }
[data-app-page="rapporter"] .rp-oppna:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; border-radius: 4px; }
[data-app-page="rapporter"] .rp-pil {
flex: none; width: 0.875rem; height: 0.875rem;
color: var(--text-svag);
transition: rotate var(--t-fast) var(--ease);
}
[data-app-page="rapporter"] .rp-oppna[aria-expanded="true"] .rp-pil { rotate: 90deg; }
@media (prefers-reduced-motion: reduce) {
[data-app-page="rapporter"] .rp-pil { transition: none; }
}
@media (max-width: 880px) {
[data-app-page="rapporter"] .rp-oppna { min-height: var(--h-kontroll); }
}
[data-app-page="rapporter"] .rp-konto th,
[data-app-page="rapporter"] .rp-konto td {
padding-block: 0.375rem;
font-size: var(--t-liten); color: var(--text-dampad);
border-top-color: transparent;
}
[data-app-page="rapporter"] .rp-konto th { padding-left: 1.25rem; }
[data-app-page="rapporter"] .rp-kontonr { margin-right: 0.5rem; color: var(--text-svag); }
/* Årets resultat och summorna på varje sida av balansräkningen. */
[data-app-page="rapporter"] .rp-slutsumma {
display: flex; justify-content: space-between; gap: 1rem;
margin: 0.75rem 0 0; padding: 0.75rem 0 0;
border-top: 2px solid var(--text);
font-size: var(--t-15); font-weight: 600;
}
/* ---------- Verifikaten ---------- */
[data-app-page="rapporter"] .rp-ver { margin: 0; padding: 0; list-style: none; }
[data-app-page="rapporter"] .rp-ver > li + li { border-top: 1px solid var(--linje); }
[data-app-page="rapporter"] .rp-ver-post summary {
display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: baseline; gap: 0 0.75rem;
min-height: var(--h-kontroll); padding: 0.625rem 0;
list-style: none; cursor: pointer;
}
[data-app-page="rapporter"] .rp-ver-post summary::-webkit-details-marker { display: none; }
[data-app-page="rapporter"] .rp-ver-post summary:hover .rp-ver-titel { color: var(--handling-djup); }
[data-app-page="rapporter"] .rp-ver-post summary:focus-visible { outline: 2px solid var(--handling); outline-offset: 2px; border-radius: 4px; }
[data-app-page="rapporter"] .rp-ver-nr { font-size: var(--t-liten); color: var(--text-dampad); }
[data-app-page="rapporter"] .rp-ver-text { display: grid; min-width: 0; }
[data-app-page="rapporter"] .rp-ver-titel { font-size: var(--t-14); font-weight: 500; overflow-wrap: anywhere; }
[data-app-page="rapporter"] .rp-ver-meta { font-size: var(--t-liten); color: var(--text-dampad); }
[data-app-page="rapporter"] .rp-ver-belopp { font-size: var(--t-14); }
[data-app-page="rapporter"] .rp-ver-kropp {
display: grid; gap: 0.75rem;
margin: 0 0 0.875rem 4rem; padding: 0.75rem 0.875rem;
border-radius: var(--r-liten);
background: var(--yta-svag);
}
[data-app-page="rapporter"] .rp-ver-rader thead th {
padding-top: 0;
font-size: var(--t-12); font-weight: 600; color: var(--text-dampad);
border-top: 0;
}
[data-app-page="rapporter"] .rp-ver-rader th,
[data-app-page="rapporter"] .rp-ver-rader td { font-size: var(--t-liten); }
[data-app-page="rapporter"] .rp-radtext { display: block; color: var(--text-dampad); }
[data-app-page="rapporter"] .rp-struken th,
[data-app-page="rapporter"] .rp-struken td { color: var(--text-svag); text-decoration: line-through; }
[data-app-page="rapporter"] .rp-ver-rattelse,
[data-app-page="rapporter"] .rp-ver-handling { margin: 0; font-size: var(--t-liten); color: var(--text-dampad); }
[data-app-page="rapporter"] .rp-ver-handling { display: grid; gap: 0.125rem; }
[data-app-page="rapporter"] .rp-ver-etikett { font-weight: 600; color: var(--text); }
[data-app-page="rapporter"] .rp-ver-underlag {
display: flex; flex-wrap: wrap; gap: 0.375rem;
margin: 0; padding: 0; list-style: none;
}
[data-app-page="rapporter"] .rp-ver-underlag a {
display: inline-flex; align-items: center;
max-width: 100%; overflow-wrap: anywhere; text-decoration: none;
}
@media (max-width: 620px) {
[data-app-page="rapporter"] .rp-ver-post summary { grid-template-columns: minmax(0, 1fr) auto; }
[data-app-page="rapporter"] .rp-ver-nr { grid-column: 1 / -1; }
[data-app-page="rapporter"] .rp-ver-kropp { margin-left: 0; }
/* Tre kolumner ryms inte med förstorad text. Varje rad har bara ett
belopp, så det står under kontot med Debet eller Kredit framför. */
[data-app-page="rapporter"] .rp-ver-rader thead {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
[data-app-page="rapporter"] .rp-ver-rader tr { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-app-page="rapporter"] .rp-ver-rader td { padding-top: 0; border-top: 0; }
[data-app-page="rapporter"] .rp-ver-rader td:empty { display: none; }
[data-app-page="rapporter"] .rp-ver-rader td::before {
content: attr(data-etikett) " ";
font-family: var(--font); color: var(--text-dampad);
}
}