:root {
    --merkevarefarge: #c2410c;
    --merkevarefarge-tekst: #ffffff;

    /* Fast avstandsskala — brukes for konsistent luft i hele systemet */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    --innhold-bredde: 1040px;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* UI-112: firmafargen er aldri rå tekst eller strek på lys flate — den kan være #fde68a.
   Tekst (også lenker, ::marker-tall) → --mod-primar-mork (≥ 4,5 : 1), streker/ikoner/kanter
   og smale indikatorstriper → --mod-primar-markor (≥ 3 : 1). Rå --mod-primar/--merkevarefarge
   bare som flate under --merkevarefarge-tekst. Vaktpost: Ui112Tester. */
a {
    color: var(--mod-primar-mork, #9a3412);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--mod-fokus, rgba(194, 65, 12, 0.35));
}

.content {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-6);
    max-width: var(--innhold-bredde);
}

.content-bred {
    max-width: none;
}

h1 {
    margin-bottom: var(--sp-5);
}

h1:focus {
    outline: none;
}

/* UI-48: en overskrift med tabindex="-1" er et lenkemål som fokuseres av
   koden (Markedsplass → #regnskap), ikke en kontroll man tabber til. Samme
   dom som h1-en over: fokusringen ville sett ut som en feil. */
h2[tabindex="-1"]:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.tom-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mod-bg-offentlig);
    padding: var(--sp-4);
}

.login-kort {
    width: 100%;
    max-width: 420px;
    padding: var(--sp-6);
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
}

.login-kort h1 {
    font-size: 1.4rem;
    margin-bottom: var(--sp-1);
}

.login-ingress {
    color: #666;
    margin-bottom: var(--sp-5);
}

/* UI-61: NordicM-logoen over overskriften på innloggingssidene. Samme farge
   som overskriften (haken har sin egen, se NordicmLogo.razor). display: block
   så logoen står på egen linje og margin-bottom virker. */
.login-logo {
    display: block;
    color: #18181b;
    margin-bottom: var(--sp-5);
}

.login-kort .btn-ny {
    max-width: none;
}

.ingen-tilgang {
    padding: var(--sp-6) 0;
}

.kontakt-side {
    max-width: 560px;
}

.kontakt-ingress {
    color: #555;
    margin-bottom: var(--sp-5);
}

.kontakt-takk {
    padding: var(--sp-5);
    background-color: #eaf6ec;
    border: 1px solid #bfe3c6;
    border-radius: 0.5rem;
}

.kontakt-takk h2 {
    margin-top: 0;
}

.innboks-info {
    max-width: 640px;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: 0.9rem;
    background-color: #f8f9fb;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
}

.innboks-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding: var(--sp-1);
    margin-bottom: var(--sp-4);
    background-color: #f4f4f5;
    border-radius: 0.5rem;
}

.innboks-liste {
    list-style: none;
    padding: 0;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* UI-201: ulest = fet avsender + «Ny»; ingen farget kant eller flate (Remi A 22.10.2026). */
.innboks-melding {
    background-color: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant);
    border-radius: 0.5rem;
    overflow: hidden;
}

.innboks-melding.ulest {
    border-color: var(--mod-kant-sterk);
}

.innboks-melding .innboks-topp strong {
    font-weight: 400;
}

.innboks-melding.ulest .innboks-topp strong {
    font-weight: 600;
}

.innboks-melding.behandlet {
    opacity: 0.75;
}

.innboks-topp {
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
}

.innboks-topp:hover {
    background-color: #f4f4f5;
}

.innboks-meta {
    font-size: 0.85rem;
    color: var(--mod-tekst-dus);
}

.innboks-merke {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: var(--sp-1) var(--sp-2);
    border-radius: 999px;
    margin-left: var(--sp-1);
}

.innboks-merke.ny { background-color: var(--mod-primar, #c2410c); color: var(--merkevarefarge-tekst, white); }
.innboks-merke.ok { background-color: #dcfce7; color: #166534; }
.innboks-merke.feilet { background-color: #fee2e2; color: #991b1b; }
/* KND-34: sjåførens avbud/melding skal skilles fra en kundehenvendelse med et blikk. */
.innboks-merke.sjafor { background-color: #fef3c7; color: #92400e; margin-left: 0; margin-right: var(--sp-1); }
.innboks-merke .merke-ikon { vertical-align: -2px; margin-right: 2px; }

.innboks-detalj {
    padding: 0 var(--sp-4) var(--sp-4);
    border-top: 1px solid #eee;
}

.innboks-rute {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-5);
    margin: var(--sp-3) 0;
    font-size: 0.9rem;
}

.innboks-beskrivelse {
    white-space: pre-wrap;
    background-color: #f8f9fb;
    padding: var(--sp-3);
    border-radius: 0.4rem;
}

.innboks-handlinger {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.innboks-handlinger .btn-ny,
.innboks-handlinger .btn-avbryt,
.innboks-handlinger .btn-tilbud {
    margin: 0;
    min-height: 2.75rem;
    text-decoration: none;
}

.knapp-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

.knapp-rad .btn-ny,
.knapp-rad .btn-avbryt {
    margin: 0;
}

/* UI-177: en rad inne i en rad er en del av den ytre og bærer ingen egen marg
   (ellers løftes «+ Fast rute» 8 px over «+ Dag»/«+ Retur» av .form-felt-bunnmargen). */
.knapp-rad > .form-felt {
    margin-bottom: 0;
}

.knapp-rad .knapp-rad {
    margin: 0;
}

.import-panel {
    max-width: 560px;
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    background-color: #f8f9fb;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
}

.import-panel h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 var(--sp-1);
}

.import-hjelp {
    color: #555;
    font-size: 0.92rem;
    margin: 0 0 var(--sp-3);
}

.import-resultat {
    margin: var(--sp-3) 0 0;
    font-weight: 600;
}

/* Rader importen forkastet eller flagget — én linje per rad, slik at
   brukeren kan rette fila uten å gjette hvilken linje det gjelder. */
.import-avvik {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    font-size: 0.9rem;
}

.import-avvik li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--mod-kantlinje, #e4e4e7);
}

.import-avvik-linje {
    min-width: 5rem;
    color: var(--mod-tekst-svak, #52525b);
    font-variant-numeric: tabular-nums;
}

.import-avvik-navn {
    font-weight: 600;
    flex: 1 1 10rem;
}

.import-avvik-grunn {
    flex: 1 1 100%;
    color: var(--mod-fare, #b91c1c);
}

.import-mangler .import-avvik-grunn {
    color: var(--mod-tekst-svak, #52525b);
}

/* Samme hvite seksjonskort som fanene ellers (.innstilling-kort) — Tilbud og
   Bekreftelse var de siste flatene som lå grå. Bredden holdes på 640px:
   brevteksten skal ha en lesbar linjelengde. */
.epost-forhaands {
    margin: var(--sp-4) 0 0;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.625rem;
    background: var(--mod-flate, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    padding: var(--sp-5);
    max-width: 640px;
}

.epost-forhaands-topp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}

.epost-forhaands-merke {
    font-weight: 700;
    text-transform: capitalize;
}

.epost-forhaands-info {
    font-size: 0.85rem;
    color: var(--mod-tekst-dus);
}

.epost-forhaands-felt {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    font-size: 0.95rem;
    border-bottom: 1px solid #eaeef2;
}

.epost-forhaands-felt span {
    min-width: 3.5rem;
    color: var(--mod-tekst-dus);
}

/* UI-163: en lang e-postadresse i «Til» skal brytes, ikke skyve verdien ut av
   kortets marg på 375 px (flex-element har min-width: auto). */
.epost-forhaands-felt strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Selve brevet er en innerboks i kortet — grå, som .innstilling-feltboks.
   Hvit på hvitt kort ville løst opp rammen rundt brevteksten. */
.epost-forhaands-brev {
    margin: var(--sp-3) 0 var(--sp-4);
    padding: var(--sp-4) var(--sp-4);
    background: #f8fafc;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 8px;
    white-space: pre-wrap;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    max-height: 22rem;
    overflow-y: auto;
}

.epost-forhaands-knapper {
    display: flex;
    gap: var(--sp-3);
}

/* Markedsplass */
.pris-kort {
    border: 1px solid #d0d7de;
    border-radius: 10px;
    background: #f8fafc;
    padding: var(--sp-4) var(--sp-5);
    max-width: 460px;
}

.pris-rad {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid #eaeef2;
    font-size: 0.95rem;
}

/* PAM-296B: beløpet brytes aldri — på 375 px delte en lang etikett
   («Grunnpris NordicM Påmelding») «490 kr» over to linjer. Etiketten
   tar bruddet, beløpet står samlet. Bare beløp (Markedsplass): navn og
   selskap på /konto bruker også .pris-rad strong og skal kunne brytes. */
.pris-rad .pris-belop {
    white-space: nowrap;
}

/* UI-52: etiketten i raden er dus — merket er det ikke. «.pris-rad span» er
   (0,1,1) og slo «.merke-aktiv»/«.merke-tillegg» (0,1,0), så rollemerkene på
   /konto ble grå i stedet for grønne/oransje (målt 4,26 og 3,96 mot sin egen
   tonede bakgrunn). :not() gjør velgeren presis uten å flytte regelen. */
.pris-rad span:not(.produkt-merke) {
    color: var(--mod-tekst-dus);
}

.pris-rad.pris-sum {
    border-bottom: none;
    border-top: 2px solid #d0d7de;
    margin-top: var(--sp-1);
    padding-top: var(--sp-2);
    font-size: 1.05rem;
}

.pris-rad.pris-sum span,
.pris-rad.pris-sum strong {
    color: #1f2937;
}

.markedsplass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-4);
}

.produkt-flis {
    border: 1px solid #d0d7de;
    border-radius: 12px;
    background: #fff;
    padding: var(--sp-4);
    display: flex;
    gap: var(--sp-3);
}

.produkt-ikon {
    line-height: 1;
    color: var(--mod-primar-markor);
    flex-shrink: 0;
}

/* Lucide-ikon inne i knapper og merker */
.btn-ikon {
    vertical-align: middle;
    margin-right: var(--sp-1);
}

.merke-ikon {
    vertical-align: middle;
    margin-right: var(--sp-1);
}

.fane-status .ikon {
    vertical-align: middle;
}

.produkt-innhold h3 {
    margin: 0 0 var(--sp-1);
    font-size: 1.05rem;
}

.produkt-innhold p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mod-tekst-dus);
}

.produkt-merke {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.produkt-innhold .produkt-merke {
    margin-top: var(--sp-2);
}

.merke-aktiv { background: #d1fae5; color: #065f46; }
.merke-kommer { background: #e5e7eb; color: #4b5563; }
.merke-tillegg { background: var(--mod-primar-tint, #fff7ed); color: var(--mod-primar-mork, #9a3412); }
/* APP-2a: «Ingen app» i kundelista — et varsel, ikke en status. */
.merke-fare { background: var(--mod-rod-bg, #fee2e2); color: var(--mod-rod-tekst, #991b1b); }

.produkt-detalj-bakteppe {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: var(--sp-4);
}

.produkt-detalj-boks {
    background: #fff;
    border-radius: 12px;
    padding: var(--sp-5);
    max-width: 480px;
    width: 100%;
    position: relative;
}

.produkt-detalj-lukk {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
}

/* Hjelp-komponenten («Les mer»-panelet) — samme mekanikk som produktdetaljene
   over, men innholdet kan være langt: panelet ruller selv, og på mobil blir
   det et fullskjerm-ark med lukkeknapp (HJELPEGJENNOMGANG.md § 15 — smale
   sidepaneler er mobilfiendtlige, og sjåføren er ren mobilbruker). */
.hjelp-lesmer {
    padding: 0 var(--sp-1);
    font-size: inherit;
    color: var(--mod-primar-mork);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hjelp-bakteppe {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: var(--sp-4);
}

.hjelp-panel {
    background: var(--mod-flate);
    border-radius: 12px;
    padding: var(--sp-5);
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}

.hjelp-panel h2 {
    margin-top: 0;
    padding-right: var(--sp-6);
}

/* UI-156 / DESIGNSYSTEM 6.12 Lang tekst: brødtekst 1 rem / 1,6, mellomtittel
   1 rem / 600 med --sp-5 over og --sp-2 under, avsnitt --sp-3 mellom.
   Samme regler i .hjelp-emne-innhold (/hjelp) lenger ned. */
.hjelp-panel p,
.hjelp-panel li {
    color: var(--mod-tekst);
    font-size: 1rem;
    line-height: 1.6;
}

.hjelp-panel p {
    margin: 0 0 var(--sp-3);
}

.hjelp-panel h3 {
    color: var(--mod-tekst);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    margin: var(--sp-5) 0 var(--sp-2);
}

.hjelp-panel h2 + h3 {
    margin-top: 0;
}

.hjelp-panel ul {
    padding-left: var(--sp-5);
    margin: var(--sp-2) 0 var(--sp-3);
}

.hjelp-panel li + li {
    margin-top: var(--sp-2);
}

.hjelp-lukk {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
}

/* Mobil: fullskjerm-ark, ikke en smal boks bak et bakteppe. */
@media (max-width: 640.98px) {
    .hjelp-bakteppe {
        padding: 0;
        align-items: stretch;
    }

    .hjelp-panel {
        max-width: none;
        max-height: none;
        border-radius: 0;
        /* UI-158: bunnmenyen (z-index 1500) ligger over panelet (50) og dekker bunnen;
           luft nederst så siste linje kan rulles fram over menyen. */
        padding-bottom: calc(60px + var(--sp-4) + env(safe-area-inset-bottom, 0px));
    }
}

/* ----------------------------------------------------------------
   Ark — sentrert boks på desktop, fullskjerm på mobil. Samme mekanikk
   som .hjelp-panel over, men eget lag med vilje: .hjelp-bakteppe ligger
   på z-index 50, altså UNDER bunnmenyen (1500), som derfor dekker
   bunnen av arket på mobil. Det går an for en hjelpetekst man ruller i.
   Det går ikke an for en dialog der handlingsknappene ligger nederst —
   da blir «Marker som sendt» stående under bunnmenyen på 375 px.
   Arket legger seg derfor over bunnmenyen og over rad-menyens bakteppe
   (1600), men under nav-skuffen (2000).

   De to bør slås sammen den dagen noen uansett har grunn til å røre
   hjelpepanelets stabling; å gjøre det herfra ville endret hvert
   hjelpepanel i appen for en sak som ikke handler om hjelp.
   ---------------------------------------------------------------- */
.ark-bakteppe {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1700;
    padding: var(--sp-4);
}

.ark-panel {
    background: #fff;
    border-radius: 12px;
    padding: var(--sp-5);
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}

.ark-panel h2 {
    margin-top: 0;
    padding-right: var(--sp-6);
}

.ark-lukk {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
}

/* Følgene av en handling, listet i et ark før brukeren bekrefter
   (først brukt i tildelingsarket for partnerforespørsler). */
.ark-punktliste {
    margin: 0 0 var(--sp-4);
    padding-left: 1.3em;
    display: grid;
    gap: var(--sp-2);
}

@media (max-width: 640.98px) {
    .ark-bakteppe {
        padding: 0;
        align-items: stretch;
    }

    .ark-panel {
        max-width: none;
        max-height: none;
        border-radius: 0;
        /* Plass til hjemknapp-stripa på iPhone — uten den ligger den
           nederste knappen delvis under systemets egen linje. */
        padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
    }
}

/* Salgsgrunnlaget («Til regnskap» → ••• → Marker som sendt). Dialogen viser
   hele grunnlaget fordi det er nettopp dette admin ellers må lete fram inne
   i ordren for å taste det inn i regnskapssystemet manuelt. */
.grunnlag-panel {
    max-width: 640px;
}

.grunnlag-ingress {
    margin: 0 0 var(--sp-4);
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Lange adresser og e-poster skal brytes, ikke sprenge arket på 375 px.
   .brytbar finnes fra før kun som .data-tabell .brytbar, og dette er
   ingen datatabell. */
.grunnlag-panel .brytbar {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Kunde og tur: etikett over verdi i smalt vindu, to kolonner fra 480 px. */
.grunnlag-fakta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--sp-4);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.grunnlag-fakta dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mod-tekst-dus);
}

.grunnlag-fakta dd {
    margin: 0 0 var(--sp-3);
    font-size: 0.95rem;
    color: var(--mod-tekst, #18181b);
}

.grunnlag-fakta dd:last-child {
    margin-bottom: 0;
}

@media (min-width: 480px) {
    .grunnlag-fakta {
        grid-template-columns: 10rem 1fr;
        align-items: baseline;
        gap: var(--sp-2) var(--sp-4);
    }

    .grunnlag-fakta dd {
        margin-bottom: 0;
    }
}

/* Partnerarket (/partnere → Ny partner / Åpne). Gjenbruker .ark-* — se
   z-index-kommentaren over; en dialog med knapper nederst tåler IKKE
   .hjelp-panel, som ligger under bunnmenyen. */
.partner-panel {
    max-width: 620px;
}

/* Selskapsopplysningene er skrivebeskyttet etter opprettelsen, så de vises som
   fakta og ikke som felt. Samme form som .grunnlag-fakta, med egen klasse fordi
   de to arkene ellers ville låst hverandre. */
.partner-fakta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--sp-4);
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.partner-fakta dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mod-tekst-dus);
}

.partner-fakta dd {
    margin: 0 0 var(--sp-3);
    font-size: 0.95rem;
    color: var(--mod-tekst, #18181b);
    overflow-wrap: anywhere;
}

.partner-fakta dd:last-child {
    margin-bottom: 0;
}

@media (min-width: 480px) {
    .partner-fakta {
        grid-template-columns: 10rem 1fr;
        align-items: baseline;
        gap: var(--sp-2) var(--sp-4);
    }

    .partner-fakta dd {
        margin-bottom: 0;
    }
}

.partner-underhode {
    margin: var(--sp-5) 0 var(--sp-2);
    font-size: 1rem;
}

/* KND-84: turene hos en inaktiv partner, øverst i partnerarket. Én kompakt
   linje per tur (dato · #ordre · rute og kunde); ruta kuttes med … heller enn
   å bryte, så 20 turer er 20 linjer på 375 px. Arket ruller selv. */
.partner-turer .partner-underhode {
    margin-top: 0;
}

.partner-turliste {
    list-style: none;
    margin: 0 0 var(--sp-3);
    padding: 0;
    border-top: 1px solid #e5e7eb;
}

.partner-turliste li {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.9rem;
}

.partner-tur-linje {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    min-width: 0;
}

.partner-tur-dato {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.partner-tur-linje a {
    flex: none;
}

.partner-tur-rute {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mod-tekst-dus, #6b7280);
}

.partner-tur-grunn {
    display: block;
    margin: var(--sp-1) 0 0;
    font-size: 0.85rem;
}

/* Postkasseadresser som booking@ganske-langt-selskapsnavn.no skal brytes,
   ikke sprenge arket på 375 px. */
.partner-kontaktliste .brytbar {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Lagre-knappen ligger nederst i et fullskjerm-ark på mobil. Uten luft under
   havner den i kanten av safe-area-paddingen og blir vond å treffe. */
.partner-knapper {
    margin-top: var(--sp-5);
}

/* E-postutboksen (/epost). Radene gjenbruker .innboks-* — samme kort-per-rad
   mønster som Innboks, ingen bred tabell å rulle sidelengs på 375 px. */
.epostutboks-emne {
    color: var(--mod-tekst, #18181b);
}

.epostutboks-feiltekst {
    color: var(--mod-fare, #b91c1c);
}

.epostutboks-panel {
    max-width: 700px;
}

.epostutboks-panel .brytbar {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Selve e-posten slik den ble sendt, i egen iframe med sandbox — verken
   avsenderens inline-stiler eller (i teorien) et skript skal kunne røre
   resten av siden. Egen scroll: panelet rundt kan bli langt på en lang
   forsøkshistorikk, og to nestede scrollbarer er verre enn én lang. */
.epostutboks-iframe {
    display: block;
    width: 100%;
    height: 45vh;
    min-height: 260px;
    margin-top: var(--sp-4);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

.grunnlag-linjer {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--sp-3);
}

.grunnlag-linjer th,
.grunnlag-linjer td {
    padding: var(--sp-2);
    border-bottom: 1px solid #eef0f3;
    font-size: 0.9rem;
    text-align: left;
    vertical-align: top;
}

.grunnlag-linjer thead th {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mod-tekst-dus);
    white-space: nowrap;
}

.grunnlag-linjer .tall {
    text-align: right;
    white-space: nowrap;
}

.grunnlag-linjer .linje-sum {
    font-weight: 600;
}

/* Mobil: hver prislinje blir en blokk. Fem kolonner får ikke plass på
   375 px, og en vannrett rullebar inni et ark er ikke til å finne. */
@media (max-width: 640.98px) {
    .grunnlag-linjer,
    .grunnlag-linjer tbody,
    .grunnlag-linjer tr,
    .grunnlag-linjer td {
        display: block;
    }

    .grunnlag-linjer thead {
        display: none;
    }

    .grunnlag-linjer tbody tr {
        padding: var(--sp-3) 0;
        border-bottom: 1px solid #eef0f3;
    }

    .grunnlag-linjer tbody td {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: 0;
        border: none;
        color: var(--mod-tekst-dus, #6b7280);
    }

    .grunnlag-linjer tbody td.linje-tekst {
        display: block;
        margin-bottom: var(--sp-1);
        font-weight: 600;
        color: var(--mod-tekst, #18181b);
    }

    /* Kolonnenavnet flyttes inn i raden: «2» og «12 %» under hverandre
       uten etikett kunne betydd hva som helst. */
    .grunnlag-linjer tbody td[data-etikett]::before {
        content: attr(data-etikett);
        font-weight: 400;
    }
}

.grunnlag-summer {
    margin: 0 0 var(--sp-4);
}

.grunnlag-sumrad {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-2);
    font-size: 0.9rem;
    color: #374151;
}

.grunnlag-sumrad .tall {
    white-space: nowrap;
}

.grunnlag-sumrad-total {
    margin-top: var(--sp-1);
    padding-top: var(--sp-2);
    border-top: 1px solid #d0d7de;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mod-tekst, #18181b);
}

.grunnlag-mangel {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #92400e;
}

.grunnlag-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.grunnlag-knapper .btn-ny,
.grunnlag-knapper .btn-avbryt {
    width: auto;
    max-width: none;
    margin: 0;
}

@media (max-width: 640.98px) {
    .grunnlag-knapper {
        flex-direction: column;
    }

    .grunnlag-knapper .btn-ny,
    .grunnlag-knapper .btn-avbryt {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* /hjelp-siden: hvert emne er en <details> — titlene skummes sammenslått,
   innholdet åpnes ved klikk (og automatisk ved søk). */
.hjelp-emne {
    max-width: 760px;
    margin-bottom: var(--sp-3);
    padding: var(--sp-4);
}

.hjelp-emne summary {
    cursor: pointer;
    list-style-position: outside;
}

.hjelp-emne summary::marker {
    color: var(--mod-primar-markor);
}

.hjelp-emne-tittel {
    font-weight: 600;
}

.hjelp-emne summary .innstilling-hjelp {
    display: block;
    margin: var(--sp-1) 0 0;
}

.hjelp-emne-innhold {
    margin-top: var(--sp-3);
    border-top: 1px solid var(--mod-kant);
    padding-top: var(--sp-2);
}

/* UI-156 / DESIGNSYSTEM 6.12 — samme lesetypografi som .hjelp-panel. */
.hjelp-emne-innhold p,
.hjelp-emne-innhold li {
    color: var(--mod-tekst);
    font-size: 1rem;
    line-height: 1.6;
}

.hjelp-emne-innhold p {
    margin: 0 0 var(--sp-3);
}

.hjelp-emne-innhold h3 {
    color: var(--mod-tekst);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    margin: var(--sp-5) 0 var(--sp-2);
}

.hjelp-emne-innhold > h3:first-child {
    margin-top: 0;
}

.hjelp-emne-innhold ul {
    padding-left: var(--sp-5);
    margin: var(--sp-2) 0 var(--sp-3);
}

.hjelp-emne-innhold li + li {
    margin-top: var(--sp-2);
}

.hjelp-kontakt {
    max-width: 760px;
}

/* «Slik gjør du …» kontra «Slik virker det» på /hjelp — to grupper, ikke én
   sammenblandet liste: den som slår opp hjelp midt i arbeidet vil som regel
   gjøre noe, ikke forstå noe. */
.hjelp-gruppe {
    max-width: 760px;
    margin: var(--sp-5) 0 var(--sp-3);
    font-size: 1.05rem;
}

/* Oppskriftenes steg (nivå 5). Nummereringen ER informasjonen, så den skal
   være tydelig og stå til venstre for teksten — også i det smale panelet. */
.oppskrift-steg {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-5);
}

.oppskrift-steg li {
    margin-bottom: var(--sp-3);
    padding-left: var(--sp-1);
}

.oppskrift-steg li::marker {
    color: var(--mod-primar-mork);
    font-weight: 600;
}

.oppskrift-steg strong {
    display: block;
}

.oppskrift-steg span {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.55;
}

.oppskrift-naar {
    margin-top: 0;
}

.oppskrift-seogsaa {
    margin-bottom: 0;
}

/* Panelet arver .hjelp-panel-typografien; stegene trenger bare litt luft. */
.hjelp-panel .oppskrift-steg li + li {
    margin-top: var(--sp-3);
}

.lim-inn-felt {
    max-width: none;
    min-height: 10rem;
    font-family: inherit;
}

.innstilling-hjelp {
    color: var(--mod-tekst-dus);
    font-size: 0.9rem;
    margin: var(--sp-1) 0 var(--sp-2);
}

.innstilling-seksjon {
    max-width: 760px;
    margin-bottom: var(--sp-6);
}

.innstilling-seksjon h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: var(--sp-1);
}

/* Bolk nummer to og utover i samme kort (f.eks. helligdagsfanen på Priser,
   som har tre) trenger luft over seg — den første gjør ikke det. */
.innstilling-seksjon h2 ~ h2 {
    margin-top: var(--sp-6);
}

/* Seksjonskort — gir hver innstilling sin egen tydelige flate
   (samme rolige uttrykk som belegg-kortet på Oversikt). */
.innstilling-kort {
    background: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.innstilling-kort > :last-child {
    margin-bottom: 0;
}

/* Varselvariant for destruktive/følsomme kort (demo-data o.l.) */
.innstilling-kort-varsel {
    border-color: #f0dfae;
    border-left: 3px solid #f59e0b;
}

.innstilling-kort-varsel h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.innstilling-kort-varsel h2 .merke-ikon {
    color: #b45309;
    flex-shrink: 0;
}

/* Stylet filopplasting — skjuler den rå file-inputen, labelen er knappen */
.fil-knapp {
    cursor: pointer;
}

.fil-knapp input[type="file"] {
    display: none;
}

.innstilling-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--sp-4);
}

@media (min-width: 641px) {
    .innstilling-grid {
        grid-template-columns: 1fr 1fr;
    }

    .innstilling-seksjon .skjema-handlinger {
        max-width: none;
    }
}

.innstilling-grid .form-felt {
    max-width: none;
}

/* Feltboks — TEST: skiller selve utfyllingssonen fra tittel/hjelpetekst/
   knapp over med en lett gråtone (samme tone som e-post-forhåndsvisningen). */
.innstilling-feltboks {
    background: #f8fafc;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
    padding: var(--sp-4);
    margin-top: var(--sp-3);
}

.lagret-merke {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #2a8a3b;
}

.epost-test {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid #e0e0e0;
}

.epost-test h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--sp-1);
}

.rolle-merke {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: var(--sp-1) var(--sp-2);
    border-radius: 999px;
    margin-left: var(--sp-1);
}

.rolle-administrator { background-color: #ede9fe; color: #5b21b6; }
.rolle-ansatt { background-color: #dbeafe; color: #1e40af; }
.rolle-sjafor { background-color: #dcfce7; color: #166534; }
.rolle-inaktiv { background-color: #f1f1f1; color: #666; }
.rolle-hovedkontakt { background-color: #fef3c7; color: #92400e; }

.tema-knapp {
    cursor: pointer;
    text-align: left;
    padding-left: var(--sp-4);
    background: none;
    border: none;
}

.firma-velger,
.app-velger {
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-2);
}

/* «Mine apper» står øverst i menyen og skiller appfamilien fra appens egne
   punkter — derfor en strek under (PAM-3). */
.app-velger {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-1);
}

.firma-velger label,
.app-velger label,
.aktivt-selskap label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #c9c9d4;
    margin-bottom: var(--sp-1);
}

.aktivt-selskap {
    padding-top: var(--sp-1);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: var(--sp-1);
}

.aktivt-selskap-navn {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mod-primar-mork);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.firma-velger .search-input,
.app-velger .search-input {
    margin-bottom: 0;
    min-height: 2.5rem;
    font-size: 0.9rem;
}

.nav-bruker {
    margin-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--sp-3);
}

.nav-bruker-navn {
    display: block;
    font-size: 0.8rem;
    color: #c9c9d4;
    padding-left: var(--sp-4);
    overflow: hidden;
    text-overflow: ellipsis;
}

html.tema-moderne .firma-velger label,
html.tema-moderne .app-velger label,
html.tema-moderne .aktivt-selskap label,
html.tema-moderne .nav-bruker-navn {
    color: var(--mod-tekst-dus);
}

html.tema-moderne .nav-bruker,
html.tema-moderne .app-velger,
html.tema-moderne .aktivt-selskap {
    border-color: #e5e7eb;
}

.btn-ny {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    /* UI-73 (vedtak 2): fast høyde, ikke min-height — de fire nivåene står
       side om side og skal være like høye. Kanten spiser innover. Under 480 px
       blir den auto igjen (se media-blokka), så en lang tekst kan brytes. */
    box-sizing: border-box;
    height: 48px;
    padding: var(--sp-3) var(--sp-5);
    margin: var(--sp-4) 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: white;
    background-color: var(--mod-primar, #c2410c);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

.skjema-handlinger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    max-width: 480px;
    margin: var(--sp-5) 0 var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--mod-kant, #e0e0e0); /* UI-92 */
}

@media (min-width: 641px) {
    .skjema-handlinger {
        max-width: none;
    }

    /* Modeste knapper på desktop — bredde etter innhold, ikke store blokker. */
    .btn-ny {
        width: auto;
    }
}

.skjema-handlinger .btn-ny,
.skjema-handlinger .btn-avbryt {
    margin: 0;
}

/* UI-118: :not(:disabled) — en sperret knapp skifter ikke farge ved hover. */
.btn-ny:hover:not(:disabled), .btn-ny:focus:not(:disabled) {
    background-color: #17579c;
    color: white;
}

.search-input {
    display: block;
    width: 100%;
    max-width: 480px;
    min-height: 3rem;
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--mod-primar-markor, #c2410c);
    box-shadow: 0 0 0 0.2rem rgba(27, 110, 194, 0.25);
}

.form-felt {
    max-width: 480px;
    margin-bottom: var(--sp-4);
}

.form-felt label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--sp-1);
}

.intern-kommentar-topprad {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.intern-kommentar-topprad label {
    margin-bottom: 0;
}

.checkbox-rad {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: normal;
    min-height: 2.75rem;
}

.checkbox-rad input {
    width: 1.25rem;
    height: 1.25rem;
    /* .checkbox-rad er display:flex, så boksen er et flex-element. Uten dette
       krymper en lang etikett selve avkryssingen — målt 13 px i stedet for 20
       på 375 px («Registrert i Foretaksregisteret (AS/ASA)»). Boksen er ikke
       trykkflaten, hele etiketten er, men en halv boks ser ut som en feil. */
    flex-shrink: 0;
}

.radio-rad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    min-height: 2.5rem;
    align-items: center;
}

.radio-knapp {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: normal;
    cursor: pointer;
}

.radio-knapp input {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-avbryt {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 48px;
    padding: var(--sp-3) var(--sp-5);
    margin: var(--sp-4) 0 var(--sp-4) var(--sp-2);
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    background-color: #e9ecef;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
}

.btn-avbryt:hover:not(:disabled), .btn-avbryt:focus:not(:disabled) {
    background-color: #dde1e5;
}

/* UI-73: «Fjern» i rader med gap (stopp, prislinje, pristrapper, tillegg,
   produkter, avbestillingstrapp, kategorihodet) var den slettede
   fjern-linje-klassen, som ikke hadde marg. .btn-avbryt bærer marg for å stå i
   en knapperad — her er det radens gap som gir luften. */
.stopp-tider .btn-avbryt,
.prislinje-sum .btn-avbryt,
.pristrinn-rad .btn-avbryt,
.tillegg-rad .btn-avbryt,
.produkt-rad .btn-avbryt,
.avbestilling-rad .btn-avbryt,
.prismodell-hode .btn-avbryt {
    margin: 0;
}

.feilmelding {
    max-width: 480px;
    margin: -1rem 0 var(--sp-5);
    color: #e50000;
}

.btn-tilbud {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 48px;
    padding: var(--sp-3) var(--sp-5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mod-primar-mork, #9a3412);
    background-color: transparent;
    border: 1px solid var(--mod-primar-markor, #c2410c);
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
}

.btn-tilbud:hover, .btn-tilbud:focus {
    background-color: #e7f1fb;
    color: var(--mod-primar-mork, #9a3412);
}

.btn-tilbud:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kunde-liste {
    list-style: none;
    padding: 0;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.kunde-liste li {
    padding: var(--sp-3);
    margin-bottom: 0;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    /* E-postadresser og lange organisasjonsnavn har ingen mellomrom å
       brekke naturlig ved — uten dette flyter de utenfor kortet i stedet
       for å pakkes ned, spesielt i det smale rutenettet ved ≥900px. */
    overflow-wrap: break-word;
}

/* UI-73: kortets handling var den slettede redigerknappen (bare margin-top). .btn-avbryt
   bærer marg på alle kanter for å stå i en knapperad; i kortet skal den stå
   rett under teksten som før, med teksten midtstilt som på en vanlig knapp
   (i kortets flex-kolonne ≥ 900 px strekkes den, og inline-flex venstrestiller
   ellers). To handlinger over hverandre («Rediger» + «Fjern») får luft
   mellom seg — margin-top: auto i 900 px-blokka ville ellers latt dem
   ligge kant i kant; denne velgeren er tyngre og vinner. */
.kunde-liste li .btn-avbryt {
    margin: var(--sp-2) 0 0;
    justify-content: center;
}

.kunde-liste li .btn-avbryt + .btn-avbryt {
    margin-top: var(--sp-2);
}

/* DBT-2: hvilket dokument som er utløpt eller på vei ut, i sjåførlista.
   Ravgul er husets varselfarge (samme #b45309 som ellers) — ikke rød, for
   dette er noe som skal ordnes, ikke en feil i systemet. */
/* DBT-42: salgsbetingelsene rett over bekreft-knappen. */
.bekreft-vilkar {
    color: #4b5563;
    font-size: 0.95rem;
    margin: var(--sp-3) 0 0;
}

/* PRI-15: avbestillingsreglene i klartekst rett over knappen. Litt mørkere og
   litt tyngre enn vilkårssetningen under — dette er det ene leddet som kan
   koste kunden penger, og det skal leses, ikke overses. Ingen farge og ingen
   ramme: det er en betingelse, ikke et varsel, og et rødt felt her ville
   sett ut som om noe var galt med bestillingen (UI-17: fargen er aldri
   eneste bærer, og her er det teksten som bærer alt). */
.bekreft-avbestilling {
    color: #374151;
    font-weight: 600;
}

.frist-merknad {
    color: #b45309;
    font-weight: 600;
}


.btn-beregn-rute {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    min-height: 3rem;
    padding: var(--sp-3) var(--sp-5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mod-primar-mork, #9a3412);
    background-color: #e7f1fb;
    border: 1px dashed var(--mod-primar-markor, #c2410c);
    border-radius: 0.5rem;
    cursor: pointer;
}

.btn-beregn-rute:hover:not(:disabled), .btn-beregn-rute:focus:not(:disabled) {
    background-color: #d3e6f8;
}

.btn-beregn-rute:disabled {
    opacity: 0.6;
    cursor: wait;
}

.rute-feil {
    margin: var(--sp-2) 0 0;
}

.fane-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: var(--sp-1);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    vertical-align: middle;
}

.fane-status.utfylt {
    background-color: #2a8a3b;
}

.fane-status.mangler {
    background-color: #f0ad4e;
}

.dag-navigasjon {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: 480px;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-3);
}

.dag-info {
    flex: 1;
    min-width: 0;
}

.dag-dato {
    margin-bottom: var(--sp-1);
}

.dag-tekst {
    display: block;
    font-weight: 600;
    text-transform: capitalize;
}

.buss-agenda {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.buss-dag-kort {
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: var(--sp-3);
}

.buss-dag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.buss-dag-status {
    font-size: 0.85rem;
    color: #555;
    background-color: #f1f1f1;
    padding: var(--sp-1) var(--sp-2);
    border-radius: 1rem;
}

.ledig-tekst {
    color: #2a8a3b;
    margin: 0;
}

.oppdrag-blokk {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-top: 1px solid #f0f0f0;
}

.oppdrag-blokk:first-of-type {
    border-top: none;
}

.oppdrag-tid {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--mod-primar-mork, #9a3412);
    white-space: nowrap;
}

/* Liten stablet merking over et felt i en tett rad (ORD-37, ORD-38).
   Brukes der en full .form-felt-label ville sprengt radoppsettet, men feltet
   likevel MÅ ha et navn: prislinjas tallfelt og stopp-radens fire felt.
   Poenget er at merkingen OVERLEVER utfyllingen — en placeholder gjør ikke
   det, og forsvant nettopp når den trengtes mest. */
.minifelt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Skriften settes bevisst IKKE her. «html.tema-moderne .form-felt label»
   (0,2,2) i tema-moderne.css eier den — 0.875rem/600/#3f3f46 — og lastes
   etter app.css. Radene ligger inne i en .form-felt, så mini-merkelappen ER
   en skjemalabel og skal se ut som de 31 andre. Prøvde å overstyre til noe
   mindre og dusere: det krevde å klatre forbi temaet med enda en selektor,
   og gevinsten var noen piksler høyde. Ikke verdt en spesifisitetskrig i
   fila hele appen deler.

   Det som står igjen her, er layout — og det vinner, målt:
   margin-bottom nulles fordi .minifelt eier avstanden med flex-gap, og
   nowrap + ellipsis er sikkerhetsnettet for den lengste merkelappen
   («Pris eks. mva»): den skal heller klippes pent enn å bryte raden i to.
   Målt på 375 px: ingen av de fire klippes. */
.minifelt > label {
    line-height: 1.2;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .prislinje-rad input setter margin under hvert felt; inne i en .minifelt
   eier flex-gap avstanden i stedet, ellers blir merkingen hengende løs. */
.minifelt .search-input,
.minifelt .adresse-felt input {
    margin-bottom: 0;
}

.minifelt .adresse-felt {
    min-width: 0;
}

.prislinje-tabell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.prislinje-rad {
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: var(--sp-2);
}

.prislinje-rad input {
    margin-bottom: var(--sp-2);
}

.prislinje-tall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}

.prislinje-sum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.prislinje-totaler {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2);
    background-color: #f8f9fa;
    border-radius: 0.5rem;
}

/* ---------- Utlegg og bompenger (PRI-3) ----------
   Et utlegg er ikke firmaets salg — det er penger de legger ut og får igjen.
   Skillet må være synlig, ikke bare lagret: derfor egen kantfarge på raden,
   ikke bare en avkryssingsboks man må lete etter. */

.prislinje-utlegg {
    border-left: 4px solid #8a6d3b;
    background-color: #fdf9f0;
}

.utleggsvalg {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 0.85rem;
    font-weight: 400;
    color: #6b5227;
    cursor: pointer;
    /* Fingerstørrelse på mobil — raden er tett, og feilklikk her endrer prisen. */
    min-height: 2.2rem;
}

.utleggsvalg input {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
}

/* PRI-85: Standard og I bruk i priskategoriens hoderad — 44 px trykkflate
   (DESIGNSYSTEM 6.6), og den sperrede Standard-radioen ser sperret ut. Grunnen
   står skrevet under raden; dette er bare at den ikke ser åpen ut. */
.prismodell-hode .utleggsvalg {
    min-height: 44px;
}

.prismodell-hode .utleggsvalg:has(input:disabled) {
    color: var(--mod-tekst-dus);
    cursor: not-allowed;
}

/* PRI-85: varselet har ingen egen margin (6.3), så i fanen la det seg tett
   inntil avsnittet under (målt 0 og 4 px). Anbefalingen øverst i kortet og
   meldingen i hoderads-flaten får luft på begge sider. */
.innstilling-kort > .statusvarsel {
    margin-bottom: var(--sp-3);
}

.kort-del > .statusvarsel {
    margin-block: var(--sp-2);
}

.prislinje-belop {
    white-space: nowrap;
}

.prislinje-sum {
    flex-wrap: wrap;
    gap: var(--sp-2);
    /* UI-86: tallfeltene over har margin-bottom 0 (.minifelt ≈1735), så sumraden med «Fjern» sto 0 px under dem. */
    margin-top: var(--sp-3);
}

.totaler-utlegg {
    padding-top: var(--sp-1);
    border-top: 1px solid #e0e0e0;
    color: #6b5227;
    font-size: 0.9rem;
}

.bomfelt {
    margin-top: var(--sp-3);
}

.bompanel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid #e0e0e0;
    border-left: 4px solid #8a6d3b;
    border-radius: 0.5rem;
    background-color: #fdf9f0;
}

/* Mobil først: stables. Fra 640 px legger sum, antall og knapp seg på én linje. */
.bompanel-topp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
}

.bompanel-sum {
    font-size: 1.05rem;
}

.bompanel-antall {
    font-size: 0.9rem;
    color: #555;
}

.bompanel-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: 0.9rem;
}

.bompanel-liste li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.bom-navn {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bom-antall {
    flex: 0 0 auto;
    color: #6b5227;
    font-weight: 600;
}

.bom-belop {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bom-turretur {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    min-height: 2.4rem;
}

.bom-turretur input {
    margin: 0;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
}

.bom-advarsel {
    color: #6b5227;
    border-left: 3px solid #d9a441;
    padding-left: var(--sp-2);
}

/* Utleggsmerket i salgsgrunnlagsdialogen — samme farge, samme betydning. */
.utleggsmerke {
    display: inline-block;
    margin-left: var(--sp-1);
    padding: 0 0.4rem;
    border-radius: 0.3rem;
    background-color: #f0e6d2;
    color: #6b5227;
    font-size: 0.75rem;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .bompanel-topp {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--sp-3);
    }
}

.filter-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.filter-rad .form-felt {
    max-width: 220px;
    margin-bottom: 0;
}

.filter-rad .search-input {
    margin-bottom: 0;
}

.filter-rad .btn-avbryt {
    margin: 0;
    height: 3rem;
}

/* UI-126 — VALG (DESIGNSYSTEM 6.5a): et filter på lista du ser på, ikke en
   fane. Formen er periodevelgeren fra ordrelista (før: .periode-brytere /
   .periode-bryter, slettet uten alias). Gruppa er grå grunn (--mod-bg) med en
   nøytral kant — uten kanten forsvinner sporet mot sidebakgrunnen, som er den
   samme tonen. Det valgte står på hvit flate med kortskygge i halvfet, uten
   strek: streken under betyr «her står du» og hører til fanene (6.5).
   Markup: <div class="valg" role="group" aria-label="…"> med
   <button class="valg-knapp" aria-pressed="true|false">, aldri role="tab". */
.valg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding: var(--sp-1);
    background-color: var(--mod-bg);
    border: 1px solid var(--mod-kant);
    border-radius: var(--mod-radius-liten);
}

.filter-rad .valg {
    align-self: flex-end;
}

.valg-knapp {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--sp-1) var(--sp-4);
    font-size: 0.9rem;
    font-weight: 400;
    white-space: nowrap;
    color: var(--mod-tekst-dus);
    background: none;
    border: none;
    border-radius: calc(var(--mod-radius-liten) - 0.1rem);
    cursor: pointer;
}

.valg-knapp:hover:not(.aktiv) {
    color: var(--mod-tekst);
}

.valg-knapp.aktiv {
    background-color: var(--mod-flate);
    color: var(--mod-tekst);
    font-weight: 600;
    box-shadow: var(--mod-skygge);
}

.valg-knapp .valg-antall {
    margin-left: var(--sp-1);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--mod-tekst-dus);
}

/* UI-128: på smal skjerm brøt /nytt sine seks valg til fire linjer med
   --sp-4 på hver side. --sp-3 gir flere per linje; høyden står på 44 px
   fordi den bæres av min-height, ikke av luften. */
@media (max-width: 640px) {
    .valg-knapp {
        padding: var(--sp-1) var(--sp-3);
    }
}

/* UI-128 — VALG-RAD: valget til venstre, sidens hovedknapp til høyre, på én
   linje når det er plass (DESIGNSYSTEM 6.5a). Er det ikke plass, brekker linja
   og knappen står under valget. Var .sjafor-listehode i Sjaforer.razor.css
   (UI-126); slettet uten alias. Én form: knappen står i en .knapp-rad som er
   direkte barn av .valg-rad — også når det bare er én knapp, så en lenke
   (Oppskrift) eller en knapp til kan stå ved siden av uten ny regel. */
.valg-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

.valg-rad > .knapp-rad {
    margin: 0;
    margin-left: auto;
}

/* Tomt register (UI-22): valget er skjult, og knappen står alene i rada. Da
   står den til venstre, der «Ny …» alltid har stått — ikke alene ute til høyre. */
.valg-rad > .knapp-rad:first-child {
    margin-left: 0;
}

/* Mobil: hver på sin linje, i full bredde — samme brekkpunkt som .knapp-rad. */
@media (max-width: 480px) {
    .valg-rad {
        flex-direction: column;
        align-items: stretch;
    }

    .valg-rad > .knapp-rad {
        margin-left: 0;
    }
}

.status-filter {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: 480px;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.status-pille {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3rem;
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    background-color: #ececec;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
}

.status-knapp {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: #f0ad4e;
    flex-shrink: 0;
}

.status-alle .status-knapp { background-color: #7cb87c; }
.status-foresporsel .status-knapp { background-color: #f0ad4e; }
.status-tilbudledigbuss .status-knapp { background-color: #4a90d9; }
.status-bekreftetavkunde .status-knapp { background-color: #7cb87c; }
.status-bekreftetavsjafor .status-knapp { background-color: #8b5a2b; }
.status-fullfort .status-knapp { background-color: #20a5a5; }
.status-busskansellert .status-knapp { background-color: #c0504d; }

.status-pille.aktiv {
    color: white;
}

.status-alle.aktiv { background-color: #7cb87c; }
.status-foresporsel.aktiv { background-color: #f0ad4e; }
.status-tilbudledigbuss.aktiv { background-color: #4a90d9; }
.status-bekreftetavkunde.aktiv { background-color: #7cb87c; }
.status-bekreftetavsjafor.aktiv { background-color: #8b5a2b; }
.status-fullfort.aktiv { background-color: #20a5a5; }
.status-busskansellert.aktiv { background-color: #c0504d; }

.status-pille.aktiv .status-knapp {
    background-color: white;
}

.kunde-kontaktinfo {
    font-size: 0.9rem;
    color: #555;
}

.kunde-kontaktinfo a {
    color: var(--mod-primar-mork, #9a3412);
}

p.kunde-kontaktinfo {
    margin: var(--sp-1) 0 0;
}

.ordre-tidsrom {
    font-weight: 600;
    color: var(--mod-primar-mork, #9a3412);
    white-space: nowrap;
}

/* UI-123: 0,875 rem (DESIGNSYSTEM 6.2) — samme størrelse som hjelpeteksten ved siden av. */
.status-merke {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    margin-bottom: var(--sp-1);
}

.status-merke.status-foresporsel { background-color: #f0ad4e; }
.status-merke.status-tilbudledigbuss { background-color: #4a90d9; }
.status-merke.status-bekreftetavkunde { background-color: #7cb87c; }
.status-merke.status-bekreftetavsjafor { background-color: #8b5a2b; }
.status-merke.status-fullfort { background-color: #20a5a5; }
.status-merke.status-busskansellert { background-color: #c0504d; }
.status-merke.status-avvist { background-color: #9ca3af; }

@media (max-width: 480px) {
    /* UI-73 (A2): stablet i full bredde finnes ikke problemet fast høyde
       løser (to knapper side om side med ulik høyde), mens en lang norsk
       knappetekst på 375 px må kunne brytes. En klippet tekst er verre. */
    .btn-ny, .btn-avbryt {
        display: block;
        /* UI-160: en <a> midtstiller ikke av seg selv når den blir blokk (en <button> gjør). */
        text-align: center;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 48px;
        margin-left: 0;
        margin-right: 0;
    }

    .skjema-handlinger,
    .knapp-rad {
        flex-direction: column;
        align-items: stretch;
    }

    .oppdrag-blokk {
        flex-direction: column;
        gap: var(--sp-1);
    }

    .filter-rad {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
    }

    .filter-rad .form-felt {
        max-width: none;
    }

    .filter-rad .btn-avbryt {
        width: 100%;
        max-width: none;
    }

    /* Knapper i søkeraden (f.eks. «I dag») skal ikke strekkes — søkefeltet trenger plassen */
    .sok-med-filter .btn-avbryt {
        display: inline-block;
        width: auto;
        flex: 0 0 auto;
    }
}

@media (min-width: 900px) {
    /* 320px er bredden kortene hadde da sida var låst til --innhold-bredde
       (1040px - 2x24px luft = 992px ÷ tre kolonner med 16px mellomrom), og
       er bredden vi vil beholde nå som sida går i full bredde.
       To grep, og begge trengs:
       • 300px minstebredde styrer hvor mange kolonner det blir. 250px ga
         seks smale kolonner på en 1920px-skjerm.
       • max-width på kortet under holder bredden nede når 1fr strekker
         sporet. Taket kan ikke ligge på selve sporet: auto-fill teller
         kolonner etter maksverdien når den er kjent, så minmax(300px, 320px)
         ga færre kolonner enn det er plass til. */
    .buss-agenda,
    .kunde-liste {
        max-width: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        align-items: stretch;
        gap: var(--sp-4);
    }

    /* Kortene i en rad skal ha lik høyde (grid stretcher <li>-en), og
       innholdet dyttes til en kolonne slik at «Åpne»/«Rediger»-knappen
       alltid lander i bunnen — uansett om kortet over/ved siden av har
       to eller tre tekstlinjer. Uten dette blir raden ujevn hver gang
       ett kort har mindre innhold enn naboene. */
    .kunde-liste li {
        margin-bottom: 0;
        max-width: 320px;
        display: flex;
        flex-direction: column;
    }

    .kunde-liste li .btn-avbryt {
        margin-top: auto;
    }

    /* Partnerlistene i ordreskjemaet låner .kunde-liste, men står i trange
       beholdere (arket er 560px, fanen 760px) der det uansett bare blir én
       eller to kolonner. Der skal kortet fylle plassen — et 320px-kort i et
       560px-ark ser ut som en feil. Taket gjelder registerlistene, som har
       hele sidebredden å fordele. */
    .partner-foresporselliste li,
    .partner-kontaktliste li {
        max-width: none;
    }
}
/* ===== Belegg / kjøreplan-rutenett (delt av Oversikt og enkeltenheter) ===== */

/* ---------- Belegg (heatmap) ---------- */

.belegg-kort {
    max-width: 900px;
    padding: var(--sp-4);
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.belegg-topp {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.belegg-brytere {
    display: inline-flex;
    gap: var(--sp-1);
    padding: var(--sp-1);
    background-color: #f4f4f5;
    border-radius: 0.5rem;
}

.belegg-bryter {
    min-height: 2.25rem;
    padding: var(--sp-1) var(--sp-4);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mod-tekst-dus);
    background: none;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.belegg-bryter:hover:not(.aktiv) {
    color: #18181b;
}

.belegg-bryter.aktiv {
    background-color: #ffffff;
    color: #18181b;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

.belegg-dagvelger {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.belegg-velg-dag {
    font-weight: 600;
    font-size: 0.9rem;
}

.belegg-dato {
    width: auto;
    min-width: 9rem;
    margin-bottom: 0;
    min-height: 2.5rem;
}

.belegg-dagvelger .belegg-bryter {
    white-space: nowrap;
}

.belegg-navpil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #c2410c;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.belegg-navpil:hover {
    background-color: #fff7ed;
}

.belegg-dagtekst {
    font-size: 0.92rem;
    font-weight: 600;
    color: #18181b;
    text-transform: capitalize;
    min-width: 11rem;
    white-space: nowrap;
}

.belegg-scroll {
    overflow-x: auto;
    padding-bottom: var(--sp-1);
}

.belegg-rad {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-1);
    width: max-content;
}

.belegg-navn {
    flex-shrink: 0;
    width: 7rem;
    font-size: 0.82rem;
    color: #3f3f46;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: var(--sp-2);
}

.belegg-dag {
    flex-shrink: 0;
    width: 1.15rem;
    font-size: 0.68rem;
    color: var(--mod-tekst-dus);
    text-align: center;
}

.belegg-dag.i-dag {
    color: #c2410c;
    font-weight: 700;
}

.belegg-celle {
    flex-shrink: 0;
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.25rem;
    transition: transform 150ms ease;
}

.belegg-celle:hover {
    transform: scale(1.2);
}

.belegg-celle.klikkbar {
    cursor: pointer;
}

.belegg-celle.valgt {
    outline: 2px solid #c2410c;
    outline-offset: 1px;
}

/* Statusfarger — samme palett som statusmerkene ellers i systemet. */
.belegg-celle.belegg-ledig { background-color: #ececf0; }
.belegg-celle.status-foresporsel { background-color: #f0ad4e; }
.belegg-celle.status-tilbudledigbuss { background-color: #4a90d9; }
.belegg-celle.status-bekreftetavkunde { background-color: #7cb87c; }
.belegg-celle.status-bekreftetavsjafor { background-color: #8b5a2b; }
.belegg-celle.status-fullfort { background-color: #20a5a5; }
.belegg-celle.status-busskansellert { background-color: #c0504d; }

.belegg-forklaring {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    margin-top: var(--sp-3);
    font-size: 0.78rem;
    color: var(--mod-tekst-dus);
}

.belegg-forklaring .belegg-celle {
    width: 0.9rem;
    height: 0.9rem;
}

.belegg-forklaring .belegg-celle:hover {
    transform: none;
}

/* ---------- Detaljpanel ved klikk på celle ---------- */

.belegg-detalj {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background-color: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
}

.belegg-detalj-topp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    text-transform: capitalize;
}

.belegg-detalj-lukk {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
    color: var(--mod-tekst-dus);
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 0.4rem;
    cursor: pointer;
}

.belegg-detalj-lukk:hover {
    background-color: #ececf0;
}

.belegg-detalj-ordre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.belegg-detalj-ordre:last-child {
    margin-bottom: 0;
}

.belegg-detalj-info {
    flex: 1;
    min-width: 12rem;
}

.belegg-detalj-info .status-merke {
    margin-bottom: var(--sp-1);
}

/* UI-73: var den slettede redigerknappen (bare margin-top). .btn-avbryt bærer marg på alle
   kanter for å stå i en knapperad — her står den alene ved siden av teksten. */
.belegg-detalj-ordre .btn-avbryt {
    flex-shrink: 0;
    margin: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 640.98px) {
    .belegg-detalj-ordre .btn-avbryt {
        width: 100%;
        justify-content: center;
    }
}

/* ============ Trinn 1: rent design ============ */

/* Lucide-ikoner i sidemenyen */
.nav-ikon {
    margin-right: var(--sp-3);
    flex-shrink: 0;
    vertical-align: middle;
}

/* Fargevelger (merkevarefarge) */
.farge-velger {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.farge-velger input[type="color"] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.farge-velger .search-input {
    margin-bottom: 0;
}

/* Statusfaner (ren fane-stripe i stedet for regnbueprikker) */
/* Bryter til flere rader i stedet for skjult scroll — alt er synlig med én
   gang, ingen gest å oppdage. Gjaldt opprinnelig kun mobil (≤640px), fordi
   stripa den gang hadde 3-4 faner og fylte desktop-bredden fint med scroll.
   ORD-15 la til fire mangel-faner (24.08.2026): stripa har nå opptil 7-8
   faner og klipper synlig selv på brede desktop-skjermer, uten synlig
   scrollbar til å antyde at resten finnes (Remi, samme dag — se ORD-15 i
   KJENTE-MANGLER.md). Wrap gjelder derfor nå alle bredder, ikke bare mobil. */
.status-faner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--mod-kant, #e5e7eb);
    margin: var(--sp-2) 0 var(--sp-5);
}

.status-fane {
    position: relative;
    white-space: nowrap;
    /* C-14: sto på 37 px. Fanene er det mest trykkede i hele skjemaet, så
       høyden løftes med padding OVER teksten — understreken, som markerer
       valgt fane, skal bli stående der den er. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-1) var(--sp-3);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.95rem;
    color: var(--mod-tekst-dus, #6b7280);
    cursor: pointer;
}

.status-fane:hover {
    color: var(--mod-tekst, #18181b);
}

.status-fane .fane-antall {
    color: var(--mod-tekst-dus, #9ca3af);
    font-size: 0.85rem;
    margin-left: var(--sp-1);
}

.status-fane.aktiv {
    color: var(--mod-tekst, #18181b);
    font-weight: 600;
}

/* Aktiv-markør som egen tykk strek (ikke kantlinje — de skaleres tynne).
   UI-63: markørtokenet, ikke --merkevarefarge — firmafargen, mørknet til den
   holder 3 : 1 mot hvitt (en lys selskapsfarge ga en usynlig strek). */
.status-fane.aktiv::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-1);
    height: var(--sp-1);
    border-radius: 999px;
    background: var(--mod-primar-markor, #c2410c);
}

/* Ordre-liste (stramme, trykkbare rader) */
.ordre-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mod-flate, #fff);
}

.ordre-rad {
    padding: var(--sp-4) var(--sp-4);
    border-bottom: 1px solid var(--mod-kant, #eef0f3);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.ordre-rad:last-child {
    border-bottom: none;
}

.ordre-rad:hover,
.ordre-rad:focus {
    background-color: var(--mod-primar-tint, #f7f7fb);
    outline: none;
}

.ordre-rad-hode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-1);
}

/* UI-123: med merkene i 0,875 rem fikk ikke «Meldt kjørt 02.10. 11:10» plass ved
   siden av klokkeslettet på 375 px og brakk inne i pillen (målt). Får ikke raden
   plass, går klokkeslettet ned på egen linje i stedet. Rader som får plass står
   som før. Samme regel som PlattformNytt.razor.css har lokalt. */
@media (max-width: 640.98px) {
    .ordre-rad-hode {
        flex-wrap: wrap;
    }
}

.ordre-rad-tid {
    font-size: 0.82rem;
    color: var(--mod-tekst-dus, #6b7280);
    white-space: nowrap;
}

.ordre-rad-navn {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mod-tekst, #18181b);
}

.ordre-rad-rute {
    font-size: 0.9rem;
    color: var(--mod-tekst, #374151);
    margin-top: var(--sp-1);
}

.ordre-rad-meta {
    font-size: 0.82rem;
    color: var(--mod-tekst-dus, #9ca3af);
    margin-top: var(--sp-1);
}

/* Bunnmeny (mobil) */
.bunnmeny {
    display: none;
}

.bunnmeny .bunn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sp-2) 0;
    font-size: 0.7rem;
    color: var(--mod-tekst-dus, #6b7280);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

.bunnmeny .bunn-item svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bunnmeny .bunn-item.active {
    color: var(--mod-primar-mork);
}

/* NYT-2: prikk på «Mer» — ulest nyhet som krever handling (Merinnhold.razor).
   Merkevarefarge via markørtokenet (≥ 3 : 1 mot hvitt, UI-63), hvit ring så den
   skiller seg fra ikonet. */
.bunnmeny .bunn-item.bunn-mer {
    position: relative;
}

.bunnmeny .bunn-mer-prikk {
    position: absolute;
    top: 6px;
    left: calc(50% + 7px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mod-primar-markor, #c2410c);
    box-shadow: 0 0 0 2px var(--mod-flate, #fff);
}

@media (max-width: 640.98px) {
    .bunnmeny {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1500;
        background: var(--mod-flate, #fff);
        border-top: 1px solid var(--mod-kant, #e5e7eb);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    main {
        padding-bottom: var(--sp-6);
    }

    /* Skjul hamburger-knappen; «Mer» i bunnmenyen åpner skuffen i stedet. */
    .navbar-toggler {
        display: none;
    }

    /* Åpnet skuff dekker skjermen som en meny. Klikk lukker den (eksisterende onclick). */
    .navbar-toggler:checked ~ .nav-scrollable {
        position: fixed;
        inset: 0;
        z-index: 2000;
        overflow-y: auto;
        background: var(--mod-flate, #fff);
        padding: var(--sp-4) 0 var(--sp-6);
    }
}

/* Datatabell (plattform-konsoll o.l.). UI-123: et kort som de andre (DESIGNSYSTEM
   6.4) — --mod-radius og kortskyggen, samme to linjer som .nokkel-kort. */
.tabell-kort {
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: var(--mod-radius, 0.625rem);
    box-shadow: var(--mod-skygge);
    overflow-x: auto;
    background: var(--mod-flate, #fff);
}

.data-tabell {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 620px;
}

.data-tabell th,
.data-tabell td {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--mod-kant, #eef0f3);
    white-space: nowrap;
}

/* UI-200: vanlige bokstaver, ikke versaler (Remi 22.10). */
.data-tabell thead th {
    font-size: 0.875rem;
    color: var(--mod-tekst-dus);
    font-weight: 600;
}

.data-tabell tbody tr:last-child td {
    border-bottom: none;
}

.data-tabell tbody tr:hover {
    background: var(--mod-primar-tint, #f7f7fb);
}

/* Kompakt variant for brede konsolltabeller: tettere celler, brytbare
   handlinger — målet er at raden får plass uten vannrett rulling. */
.tabell-kompakt th,
.tabell-kompakt td {
    padding: var(--sp-2) var(--sp-2);
}

.tabell-kompakt .handling-celle {
    white-space: normal;
}

.tabell-kompakt .handling-celle .knappe-gruppe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    max-width: 15rem;
}

/* UI-87: gruppa får bryte MELLOM knapper, men aldri inni én. Cella arver
   white-space: normal fra regelen over, og uten dette brøt «Åpne panel»
   til to linjer på 1280 px. */
.tabell-kompakt .handling-celle .knappe-gruppe > * {
    white-space: nowrap;
}

.tabell-kompakt .brytbar {
    white-space: normal;
}

.data-tabell .tall {
    text-align: right;
}

.data-tabell .btn-avbryt {
    margin: 0;
}

/* UI-73-kontrollen: margen over er nullet for rader med gap, men en knapp
   som står rett etter en annen knapp i en tabellcelle (PlattformSalg:
   «Send påminnelse» + «Avbryt») skal ikke ligge kant i kant. */
.data-tabell button + .btn-avbryt {
    margin-left: var(--sp-2);
}

/* UI-51: .data-tabell sin min-width: 620px er riktig for brede konsolltabeller
   (kundelista, tilgangsforespørslene), men tvinger fram vannrett rulling for
   tabeller med få eller smale kolonner (Brukere, Aktivitet, Team,
   Revisjonslogg) — også OVER 922.98 px, der .tabell-stablet ikke gjelder.
   Samme spesifisitetstriks som .liste-tabell under: (0,1,0) mot
   .data-tabell { min-width: 620px } sin (0,1,0) — vinner kun på
   kilderekkefølge, derfor MÅ regelen ligge etter .data-tabell over. Egen,
   liten modifikator i stedet for å gjenbruke .liste-tabell: den drar med seg
   regler for handling-cellen (width: 1%, nowrap) laget for en annen tabell,
   som ville motarbeidet .tabell-stablet sin handling-celle her. */
.tabell-uten-minbredde {
    min-width: 0;
}

/* ============================================================
   Stablet tabell: kolonner på bred skjerm, merkede linjer i et kort til og med
   922.98 px. Én markup — hver <td> bærer data-etikett, og den blir ledeteksten
   i kortvisningen.

   UI-148: tallet er 640.98 + 250 (sidemenyen, MainLayout.razor.css, vises fra
   641 px) + 32 (.content har 2 rem + 1,5 rem i stedet for 2 × --sp-3 under
   641 px) = 922.98. Tabellen stables altså når innholdet er smalere enn på en
   bred mobil — også med sidemeny. Under 640.98 var innholdet på et nettbrett
   med sidemeny SMALERE enn på en mobil (kortet 333 px ved 641, mot 614 ved
   640), og tabellen rullet sidelengs i kortet. Målt 14.10.2026: kortet er
   614 px ved 640 og 615 px ved 923. Følgeblokkene i komponentstilarkene
   (regler som bare gir mening når tabellen er stablet) bruker samme tall,
   skrevet likt, så de kan grep-es: «922.98px».

   Hvorfor ikke .liste-tabell under: den har et fast rutenett med navngitte
   grid-areas for ordrelista. Tabellene her har ulike kolonnesett
   (tilgangsforespørslene på /plattform/kunder, prøvekjøringens tellere på
   /plattform/import), men feilet på nøyaktig samme måte — den SISTE kolonnen
   lå utenfor skjermen, og det var den som bar handlingen (ONB-14: «Behandle»
   startet på x = 571 i en 375 px-viewport) eller det som IKKE kom med (UI-20:
   «Ikke importert»). Rullingen fantes, men ingenting antydet at det lå noe der.

   MÅ ligge etter .data-tabell over: .tabell-stablet { min-width: 0 } har samme
   spesifisitet som .data-tabell { min-width: 620px } og vinner kun på
   kilderekkefølge.
   ============================================================ */

@media (max-width: 922.98px) {
    .tabell-stablet {
        min-width: 0;
    }

    /* Bare den visuelle tabellsemantikken forsvinner — markupen og
       skjermlesertabellen er den samme. */
    .tabell-stablet,
    .tabell-stablet tbody {
        display: block;
    }

    .tabell-stablet thead {
        display: none;
    }

    .tabell-stablet tbody tr {
        display: block;
        padding: var(--sp-3) var(--sp-4);
        border-bottom: 1px solid var(--mod-kant, #eef0f3);
    }

    .tabell-stablet tbody tr:last-child {
        border-bottom: none;
    }

    /* UI-64: variabelt innhold bryter i stedet for å rulle ut av kortet. */
    .tabell-stablet tbody td {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--sp-3);
        row-gap: var(--sp-1);
        align-items: baseline;
        justify-content: space-between;
        padding: var(--sp-1) 0;
        border: none;
        white-space: normal;
    }

    /* Ledeteksten er kolonneoverskriften. Uten den er et tall i et kort bare et
       tall — og det er nettopp lesbarheten av den siste kolonnen dette handler om. */
    .tabell-stablet tbody td[data-etikett]::before {
        content: attr(data-etikett);
        flex: 0 0 auto;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--mod-tekst-dus);
    }

    /* Første cella er kortets overskrift og står alene, uten ledetekst. */
    .tabell-stablet tbody td.stablet-tittel {
        display: block;
        padding-top: 0;
        font-size: 1rem;
        font-weight: 600;
    }

    /* Handlingen er hele poenget i ONB-14: i kortet står den nederst, i full
       bredde, der ingen trenger å rulle vannrett for å finne den. */
    .tabell-stablet tbody td.handling-celle {
        display: block;
        padding-top: var(--sp-3);
    }

    /* SALG-5: margin-left: 0 — «.data-tabell button + .btn-avbryt» gir en knapp
       etter en knapp 8 px venstremarg for side-om-side-visningen. I kortet står
       knappene under hverandre i full bredde, og margen skjøv den andre 8 px
       ut av kortet («Send invitasjon på nytt» etter «Send påminnelse»). */
    .tabell-stablet tbody td.handling-celle .btn-avbryt {
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

/* ============================================================
   UI-148b: brede tabeller stables lenger. .tabell-stablet-bred står VED SIDEN
   AV .tabell-stablet (aldri i stedet for) på de tabellene som er målt for
   brede til kolonnevisning i et kort på 615 px: timelista, kundelista og
   forespørslene på /plattform/kunder. Under 923 px er alt som før.

   Tallet 1211.98 er målt, ikke regnet (23.10.2026, Playwright, egen database):
   timelista med sjåføren «Ole Kristian Bergersen», ansattnummer «AN-100234» og
   lange kommentarer er 904 px bred i kolonner, og kortet er vinduet − 308 px
   (sidemeny 250 + marg). Kortet er 903 px ved 1211 og 904 ved 1212 — det
   laveste vinduet der timelista ikke ruller. De andre merkede tabellene får
   plass før det (kundelista 684 px, forespørslene ≈ 660, Til regnskap med fire
   statusmerker 872). Ett tall for alle (Remi A 22.10), ikke ett per tabell.
   Lengre navn enn dette ruller fortsatt i kortet over 1212 — som i dag.

   Hvorfor en kopi og ikke en selektorliste: brytepunktene er forskjellige, og
   en @media-blokk kan ikke ha «.tabell-stablet til 922.98, .tabell-stablet-bred
   til 1211.98» i samme regel. Blokka under er 922.98-blokka over, ordrett, med
   .tabell-stablet byttet til .tabell-stablet-bred, uten kommentarene — samme
   spesifisitet, samme rekkefølge. Under 923 px gjelder begge med like verdier.
   Ui148bVaktpost holder dem like: endres 922.98-blokka uten at kopien følger,
   blir testen rød. Følgeblokkene i komponentstilarkene for de merkede tabellene
   (SjaforTimeliste, PlattformKunder) og Til regnskaps liste (TilRegnskap.razor.css,
   egen kopi av .liste-tabell-kortet) bruker samme tall, skrevet likt, så de kan
   grep-es: «1211.98px».
   ============================================================ */

@media (max-width: 1211.98px) {
    .tabell-stablet-bred {
        min-width: 0;
    }

    .tabell-stablet-bred,
    .tabell-stablet-bred tbody {
        display: block;
    }

    .tabell-stablet-bred thead {
        display: none;
    }

    .tabell-stablet-bred tbody tr {
        display: block;
        padding: var(--sp-3) var(--sp-4);
        border-bottom: 1px solid var(--mod-kant, #eef0f3);
    }

    .tabell-stablet-bred tbody tr:last-child {
        border-bottom: none;
    }

    .tabell-stablet-bred tbody td {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--sp-3);
        row-gap: var(--sp-1);
        align-items: baseline;
        justify-content: space-between;
        padding: var(--sp-1) 0;
        border: none;
        white-space: normal;
    }

    .tabell-stablet-bred tbody td[data-etikett]::before {
        content: attr(data-etikett);
        flex: 0 0 auto;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--mod-tekst-dus);
    }

    .tabell-stablet-bred tbody td.stablet-tittel {
        display: block;
        padding-top: 0;
        font-size: 1rem;
        font-weight: 600;
    }

    .tabell-stablet-bred tbody td.handling-celle {
        display: block;
        padding-top: var(--sp-3);
    }

    .tabell-stablet-bred tbody td.handling-celle .btn-avbryt {
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

/* ============================================================
   Listetabell: kolonner på bred skjerm, kort under 640.98 px.
   Én markup — celle-*-klassene styrer begge visningene.

   MÅ ligge etter .data-tabell over: .liste-tabell { min-width: 0 } har samme
   spesifisitet som .data-tabell { min-width: 620px } og vinner kun på
   kilderekkefølge.
   ============================================================ */

/* Skjult for øyet, lest av skjermleser. Fantes ikke i appen fra før. */
.skjult-visuelt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Listetabellen er laget for å få plass uten vannrett rulling — de lange
   kolonnene brytes i stedet (.brytbar). Da kan rammen slippe overflow, og
   «•••»-menyen kan ligge absolutt plassert i raden uten å bli klippet. */
.tabell-kort-flyt {
    overflow: visible;
}

.liste-tabell {
    min-width: 0;
}

/* Må være .data-tabell .brytbar: .data-tabell td (0,1,1) setter nowrap og
   slår en frittstående .brytbar (0,1,0). */
.data-tabell .brytbar {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* UI-25: hendelsesteksten i revisjonsloggene målte 271 tegn → 1 755 px med
   husets .data-tabell-nowrap. .brytbar over løser bryting, men uten en
   minstebredde kan kolonnen klemmes helt sammen når naboene (Tidspunkt,
   Type, Bruker) tar det de trenger — én kolonnespesifikk klasse med en
   minstebredde i tillegg, samme spesifisitetstriks (.data-tabell td…). */
.data-tabell td.brytbar-tekst {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 16rem;
}

/* UI-51: 16rem-gulvet over er riktig når TABELLEN har lov til å rulle
   vannrett (Aktivitet-fanens opprinnelige bruk) — uten det klemmes Hendelse
   sammen mens naboene tar plassen de vil ha. Men på en tabell som ALDRI skal
   rulle (.tabell-uten-minbredde), er 16 rem selve ÅRSAKEN til rullingen:
   målt på Revisjonslogg i 768 px, 4 kolonner krevde 643 px mot 461 px
   tilgjengelig, og Hendelse alene sto for 256 av dem. Null gulv her betyr at
   kolonnen får det som er igjen etter Tidspunkt/Type/Bruker — smalt i verste
   fall, men brutt (brytbar-tekst over), aldri rullende. Samme
   spesifisitetstriks: (0,2,1) mot (0,2,1) over, vinner på kilderekkefølge. */
.tabell-uten-minbredde td.brytbar-tekst {
    min-width: 0;
}

/* Statusmerket har margin-bottom fra kortvisningen — skjevt i en celle. */
.liste-tabell .status-merke {
    margin-bottom: 0;
}

/* Handlingskolonnen: så smal som mulig, høyrestilt. Tannhjulet
   (kolonnevelger) skal senere inn i denne <th>-en uten flere endringer. */
.liste-tabell th.handling-celle,
.liste-tabell td.handling-celle {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Uten overflow klipper ikke rammen lenger radbakgrunnen mot hjørneradiusen.
   Samme radius som .tabell-kort (UI-123). */
.tabell-kort-flyt .liste-tabell tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--mod-radius, 0.625rem);
}

.tabell-kort-flyt .liste-tabell tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--mod-radius, 0.625rem);
}

/* ---------- «•••»-meny ---------- */

.rad-meny-hylse {
    position: relative;
    display: inline-block;
    /* Over bakteppet: da bytter et klikk på en ANNEN rads ••• meny direkte,
       i stedet for bare å lukke og kreve et klikk til. */
    z-index: 1610;
}

/* UI-121: hylsa med den åpne menyen står over de andre hylsene. Alle har 1610,
   og en senere rads hylse malte da sin «•••» OPPÅ menyen — synlig midt i
   bunnarket på 375 px da arket fikk full bredde (målt), og over popoveren på
   bred skjerm der den dekker neste rads knapp. Fortsatt under .ark-* (1700). */
.rad-meny-hylse:has(> .rad-meny) {
    z-index: 1620;
}

/* Arver bevisst IKKE .btn-avbryt — den blir display:block; width:100% under
   480 px og ville sprengt handlingskolonnen på små telefoner. */
.rad-meny-knapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--mod-tekst-dus, #6b7280);
    cursor: pointer;
}

.rad-meny-knapp:hover,
.rad-meny-knapp:focus-visible {
    background: var(--mod-primar-tint, #f3f4f6);
    border-color: var(--mod-kant, #e5e7eb);
    color: var(--mod-tekst, #18181b);
}

.rad-meny-knapp:focus-visible {
    outline: 2px solid var(--mod-primar-markor, #c2410c);
    outline-offset: 1px;
}

.rad-meny-knapp[aria-expanded="true"] {
    background: var(--mod-primar-tint, #fff7ed);
    border-color: var(--mod-kant, #e5e7eb);
    color: var(--mod-tekst, #18181b);
}

/* Lukker menyen ved klikk utenfor. Bevisst et element og ikke @onfocusout
   (mønsteret i AdresseFelt): på iOS Safari får <button> ofte ikke fokus ved
   trykk, så focusout fyrer aldri og menyen ville hengt igjen på telefon. */
.rad-meny-bakteppe {
    position: fixed;
    inset: 0;
    z-index: 1600;          /* over bunnmenyen, under nav-skuffen */
    background: transparent;
    border: 0;
    padding: 0;
}

/* Visuell forelder: .sok-forslag lenger ned — samme skygge og radius. */
.rad-meny {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1610;
    min-width: 13rem;
    padding: var(--sp-2);
    background: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    text-align: left;
    /* Handlingscella har nowrap for å holde «•••» smal. Uten dette arver
       menyvalgene den og blir så brede som den lengste teksten. */
    white-space: normal;
    max-width: min(20rem, calc(100vw - 2rem));
}

/* De to nederste radene åpner oppover, ellers havner menyen under
   skjermkanten. nth-child(n+3) hindrer at en side med bare 1-2 rader åpner
   oppover uten grunn. Heuristikk, ikke måling — å gjøre det riktig krever JS. */
.liste-tabell tbody tr:nth-child(n+3):nth-last-child(-n+2) .rad-meny {
    top: auto;
    bottom: calc(100% + 4px);
}

/* 0,1,0 slår a { color: ... } (0,0,1), så lenken får samme farge som knappen. */
.rad-meny-valg {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 2.5rem;
    padding: var(--sp-2);
    background: none;
    border: none;
    border-radius: 0.375rem;
    color: var(--mod-tekst, #18181b);
    font-size: 0.95rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.rad-meny-valg:hover,
.rad-meny-valg:focus-visible {
    background: var(--mod-primar-tint, #fff7ed);
}

.rad-meny-valg.rad-meny-fare {
    color: #b91c1c;
}

.rad-meny-tittel {
    display: none;          /* vises kun i bunnarket på mobil */
}

/* UI-178: skillestrek mellom grupper av valg, og en dus andrelinje som sier
   hva et valg gjør. */
.rad-meny-skille {
    margin: var(--sp-1) 0;
    border: 0;
    border-top: 1px solid var(--mod-kant);
}

.rad-meny-valg-hjelp {
    display: block;
    margin-top: var(--sp-1);
    font-size: 0.85rem;
    color: var(--mod-tekst-dus);
}

/* Forklaring nederst i en meny (ikke et valg): samme dus tekst som
   andrelinja over, med valgenes innrykk så teksten flukter med dem. */
.rad-meny-forklaring {
    margin: 0;
    padding: var(--sp-1) var(--sp-2) var(--sp-2);
}

/* Sperret valg (6.1 «sperret handling»): grunnen står i teksten, og valget
   skal ikke se ut som et åpent. */
.rad-meny-valg:disabled {
    background: none;
    color: var(--mod-tekst-dus);
    cursor: not-allowed;
}

/* ---------- UI-178: menyen bak en knapp med tekst (RadMeny Knappetekst) ----------
   Lukket står hylsa uten z-index: «•••»-hylsene ligger alltid over bakteppet
   (1610), men en vanlig knapp i et skjema skal ikke male seg over faste
   striper når siden rulles. Åpen løftes den over bakteppet som de andre. */
.rad-meny-hylse.med-tekst {
    z-index: auto;
}

.rad-meny-hylse.med-tekst:has(> .rad-meny) {
    z-index: 1620;
}

/* Knappens kanter er menyens ankerkanter — .btn-avbryt bærer ellers marg
   (16 over og under, 8 til venstre) for å stå i en knapperad. Margen flyttes
   til hylsa, ellers åpner popoveren 16 px under knappen i stedet for 4. */
.rad-meny-hylse.med-tekst {
    margin: var(--sp-4) 0;
}

.rad-meny-hylse.med-tekst > .btn-avbryt {
    gap: var(--sp-2);
    margin: 0;
}

.rad-meny-hylse.med-tekst > .btn-avbryt .btn-ikon {
    margin-right: 0;
}

/* Popoveren står venstrejustert under knappen (bred skjerm). Under 960 px er
   den et bunnark, og der må inset fra bunnark-regelen få stå i fred. */
@media (min-width: 960px) {
    .rad-meny-hylse.med-tekst .rad-meny {
        left: 0;
        right: auto;
    }
}

/* ≤ 480 px gjør appens konvensjon .btn-avbryt 100 % bred som blokk — her
   beholdes flex, så ikon, tekst og chevron står sentrert på én linje. */
@media (max-width: 480px) {
    .rad-meny-hylse.med-tekst {
        display: block;
    }

    .rad-meny-hylse.med-tekst > .btn-avbryt {
        display: flex;
        justify-content: center;
    }
}

/* ---------- Smal skjerm: raden blir et kort, menyen et bunnark ----------

   Grensen er 959.98 px, ikke appens vanlige 640.98. Målt empirisk: de sju
   kolonnene krever 684 px, og når sidemenyen legger seg ved siden av har
   <main> bare 391 px på en 641 px skjerm. Tabellen sprengte da siden vannrett
   (scrollWidth 967 mot clientWidth 641) — nettopp fordi .tabell-kort-flyt
   fjerner overflow for å slippe «•••»-menyen fri.

   Valget er bevisst: hele spennet 641-959 px er nettbrett og små vinduer, der
   kortvisningen uansett er den riktige, jf. mobile-first-regelen. Alternativet
   — å sette overflow-x tilbake — ville gitt vannrett rulling på nettbrett OG
   klippet menyen.
   ---------------------------------------------------------------- */

@media (max-width: 959.98px) {
    /* Bare den visuelle tabellsemantikken forsvinner — markupen og
       skjermlesertabellen er den samme. */
    .liste-tabell,
    .liste-tabell tbody {
        display: block;
    }

    .liste-tabell thead {
        display: none;
    }

    .liste-tabell tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "ordrenr   kunde     handling"
            "status    dato      handling"
            "strekning strekning handling"
            "belop     belop     handling";
        gap: var(--sp-1) var(--sp-2);
        align-items: center;
        padding: var(--sp-4);
        border-bottom: 1px solid var(--mod-kant, #eef0f3);
    }

    .liste-tabell tbody tr:last-child {
        border-bottom: none;
    }

    .liste-tabell tbody td {
        display: block;
        min-width: 0;
        padding: 0;
        border: none;
        white-space: normal;
        font-size: 0.82rem;
        color: var(--mod-tekst-dus, #6b7280);
    }

    .liste-tabell .celle-ordrenr { grid-area: ordrenr; }
    .liste-tabell .celle-kunde { grid-area: kunde; }
    .liste-tabell .celle-status { grid-area: status; }
    .liste-tabell .celle-dato { grid-area: dato; justify-self: end; white-space: nowrap; }
    .liste-tabell .celle-strekning { grid-area: strekning; }
    .liste-tabell .celle-belop { grid-area: belop; }
    .liste-tabell .handling-celle { grid-area: handling; align-self: start; width: auto; }

    /* #nr + kundenavn er kortets overskrift, som i dagens .ordre-rad-navn */
    .liste-tabell .celle-ordrenr,
    .liste-tabell .celle-kunde {
        font-size: 1rem;
        font-weight: 600;
    }

    .liste-tabell .celle-kunde a {
        color: var(--mod-tekst, #18181b);
        text-decoration: none;
    }

    /* Beløpet står på egen linje i kortet — ikke høyrestilt der.
       0,3,0 slår .data-tabell .tall (0,2,0). */
    .liste-tabell tbody .celle-belop.tall {
        text-align: left;
    }

    /* Kolonner uten egen plassering (kommer med kolonnevelgeren) auto-plasseres
       på egne linjer under, med kolonneoverskriften foran verdien. */
    .liste-tabell tbody td[data-etikett]:not([class*="celle-"])::before {
        content: attr(data-etikett) ": ";
        color: var(--mod-tekst-dus, #9ca3af);
    }

    /* Menyen blir et bunnark. Samme markup — kun plassering endres.
       Flip-regelen må gjentas her, ellers slår bottom: calc(100% + 4px) fra
       desktop gjennom på de to nederste kortene og kaster arket opp i lufta. */
    .rad-meny,
    .liste-tabell tbody tr:nth-child(n+3):nth-last-child(-n+2) .rad-meny {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1610;
        min-width: 0;
        /* UI-121: nuller min(20rem, …) fra popoveren — ellers ble arket 320 px
           bredt på 375 og nådde ikke høyre kant. */
        max-width: none;
        /* Mange produkter i «Legg til linje» + forklaringen nederst gjorde arket
           høyere enn skjermen, og toppen ble uten rekkevidde. Arket ruller selv. */
        max-height: calc(100vh - var(--sp-6));
        max-height: calc(100dvh - var(--sp-6));
        overflow-y: auto;
        padding: var(--sp-3) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 0.75rem 0.75rem 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
    }

    /* Arket dekker bunnmenyen bevisst — det er modalt, i motsetning til
       filterpanelet som man bruker mens man ser på lista. */
    .rad-meny-bakteppe {
        background: rgba(0, 0, 0, 0.35);
    }

    .rad-meny-tittel {
        display: block;
        padding: 0 var(--sp-2) var(--sp-2);
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--mod-tekst-dus);
    }

    .rad-meny-valg {
        min-height: 3rem;
        font-size: 1rem;
    }
}

/* Nøkkeltall-kort (globalt — brukes på Hjem og Plattform) */
.nokkel-rutenett {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--sp-3);
    max-width: 900px;
    margin-bottom: var(--sp-5);
}

.nokkel-kort {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: var(--mod-radius, 0.625rem);
    box-shadow: var(--mod-skygge);
}

.nokkel-tittel {
    font-size: 0.82rem;
    color: var(--mod-tekst-dus);
}

.nokkel-verdi {
    font-size: 1.35rem;
    font-weight: 700;
    color: #18181b;
}

/* Priser pr. app (plattform) */
.app-pris-merke {
    position: static;
    margin-left: var(--sp-2);
    vertical-align: middle;
}

.app-kommer {
    opacity: 0.7;
}

/* Statustekst ved siden av demo-data-knappen */
.innstilling-status {
    margin-left: var(--sp-2);
    font-size: 0.9rem;
    color: #555;
    white-space: nowrap;
}

/* Rollemerker i Min konto */
.rolle-merker {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    justify-content: flex-end;
}

/* ===== Ordre: ryddet knapperad ===== */
/* Diskré tekstknapp (f.eks. «Bruk mal») */
/* C-14: 16 av disse lå på 38 px høyde — blant dem «Slett ordre» og «Del opp
   ordre». Høyden løftes, ikke skriftstørrelsen: knappen skal se like lett ut
   som før, men være mulig å treffe. */
.btn-tekst {
    display: inline-flex;
    align-items: center;
    /* UI-73 (vedtak 2): fast høyde som de tre andre nivåene. Var min-height
       44px (C-14). */
    box-sizing: border-box;
    height: 48px;
    gap: var(--sp-1);
    background: none;
    border: none;
    padding: var(--sp-2) var(--sp-1);
    font-size: 0.92rem;
    color: var(--mod-tekst-dus, #6b7280);
    cursor: pointer;
}

/* «Juster manuelt»-utvider for beregnede avstand/reisetid-felt */
.rute-juster {
    margin-top: var(--sp-2);
}

.rute-juster summary {
    display: inline-flex;
    list-style: none;
}

.rute-juster summary::-webkit-details-marker {
    display: none;
}

.rute-juster[open] summary {
    margin-bottom: var(--sp-2);
}

.btn-tekst:hover,
.btn-tekst:focus {
    color: var(--mod-tekst, #18181b);
    text-decoration: underline;
}

/* Veien videre i tomtilstanden (ONB-16/UI-19). Én regel her fra 01.09.2026
   (UI-27) — den lå ordrett likt i fem scoped stilark (Busser, Sjaforer,
   Kunder, Ordre, Partnere), fordi app.css var opptatt av en annen tråd hver
   gang noen trengte den.

   Den skal lese som en LENKE, ikke som hjelpetekst. `.btn-tekst` gir grå
   (#6b7280) — samme dus tone som «Slik gjør du»-lenka, og en handling som er
   hele poenget med skjermen skal ikke være det svakeste på den.
   `--merkevarefarge` er firmaets egen farge, så knappen følger merkevaren som
   resten av appen.

   MÅ stå etter `.btn-tekst:hover`, og hover/focus MÅ være med: knappen er
   `class="btn-tekst tom-handling"`, og `.btn-tekst:hover` er 0,2,0. Scoped CSS
   vant tidligere på to måter — attributt-selektoren ga 0,2,0, og
   `OrdresystemBuss.Web.styles.css` lastes etter app.css (App.razor:16–17).
   Med bare `.tom-handling` (0,1,0) hadde knappen blitt grå ved hover. */
.tom-handling,
.tom-handling:hover,
.tom-handling:focus {
    color: var(--mod-primar-mork, #9a3412);
    /* Understreken er ikke pynt: knappen står MIDT I en setning, og farge
       alene skiller den ikke fra teksten rundt for den som ikke ser farge
       godt. `.btn-tekst` understreker bare ved hover/fokus — det hjelper ikke
       den som leter etter handlingen. */
    text-decoration: underline;
}

/* Ordrehistorikk-sammendrag på kundekortet */
.kunde-ordre-sammendrag {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-2) 0 var(--sp-4);
    color: var(--mod-tekst-dus, #555);
}

/* Handlingsknapper høyrestilt i fanestripe-raden (kundekort) */
.status-faner .fane-handlinger {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: var(--sp-2);
}

/* Fane med ikon (f.eks. «Lim inn e-post») — samlet med de andre fanene */
.status-faner .status-fane.fane-med-ikon {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

/* Skille mellom fane-grupper (f.eks. seksjoner | handlinger på Ordre) */
.status-faner .fane-skille {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 1.1rem;
    /* Ingen sidemargin — flex-gapet (var(--sp-5)) gir symmetrisk avstand.
       Bunn-offset sentrerer streken på teksten (over understrek-paddingen). */
    margin: 0 0 var(--sp-3);
    background: var(--mod-kant, #e5e7eb);
}

/* Deaktivert handlings-fane (f.eks. send-fanene før kunde er valgt) */
.status-fane:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Jevn avstand i kombinert fanestripe: status-sirkelen skal ikke ha egen
   margin i tillegg til flex-gapen (ga dobbel avstand tekst→ikon). */
.status-fane.fane-med-ikon .fane-status {
    margin-left: 0;
}

/* Redigerbart Til-felt i e-postforhåndsvisningen (flere mottakere) */
.epost-til-felt {
    align-items: flex-start;
}

.epost-til-innhold {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.epost-til-innhold .search-input {
    max-width: 420px;
}

.epost-til-forslag {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-3);
}

/* Melding til sjåføren — fremhevet notis på kjøringen (Mine kjøringer) */
.sjafor-melding {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: var(--sp-2) 0;
    padding: var(--sp-2) var(--sp-3);
    background-color: #fff8e6;
    border: 1px solid #f0dfae;
    border-radius: 8px;
    font-size: 0.92rem;
    white-space: pre-wrap;
}

/* ===== Login/registrering: todelt kort (skjema | promo) ===== */
.login-kort.login-todelt {
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    padding: var(--sp-6);
}

.login-venstre h1 {
    font-size: 1.8rem;
}

.login-aksent {
    color: var(--mod-primar-mork, #9a3412);
}

.login-hoyre {
    border-left: 1px solid var(--mod-kant, #e5e7eb);
    padding-left: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.login-nyhet {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}

.login-nyhet .login-aksent {
    letter-spacing: 0.04em;
    margin-right: var(--sp-2);
}

.login-promo-kort {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
    background: color-mix(in srgb, var(--merkevarefarge, #c2410c) 7%, #fff);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 12px;
}

.login-promo-ikon {
    color: var(--mod-primar-markor, #c2410c);
}

.login-punkter {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    color: var(--mod-tekst, #333);
    font-size: 0.95rem;
}

.login-punkter li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.login-punkter .btn-ikon {
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 3px;
}

.login-lesmer {
    font-weight: 600;
}

.login-notis {
    color: var(--mod-tekst-dus, #6b7280);
    font-size: 0.88rem;
    margin: 0;
}

.login-registrer {
    margin: var(--sp-4) 0 0;
    color: var(--mod-tekst-dus, #6b7280);
    font-size: 0.92rem;
}

/* Mobil: én kolonne. Skjemaet er hovedsaken og kommer først — begge sidene
   (Login.razor og Registrer.razor) har .login-venstre før .login-hoyre i
   markupen, så grid-template-columns: 1fr alene legger panelet UNDER
   skjemaet, i den rekkefølgen. */
@media (max-width: 800px) {
    .login-kort.login-todelt {
        grid-template-columns: 1fr;
        max-width: 420px;
        padding: var(--sp-6);
    }

    /* ONB-17: sto som display: none — panelet («PRØV GRATIS» / «DETTE FÅR
       DU») forsvant helt på mobil. Nå vises det kompakt under skjemaet:
       overskriften og de tre punktene, med en delelinje over i stedet for
       kolonnedeleren til venstre (som ikke gir mening når det ikke lenger
       står ved siden av noe). Promo-ikonet (kun Login.razor) er for stort
       for den kompakte plassen og skjules under. */
    .login-hoyre {
        border-left: none;
        padding-left: 0;
        padding-top: var(--sp-5);
        margin-top: var(--sp-2);
        border-top: 1px solid var(--mod-kant, #e5e7eb);
        gap: var(--sp-3);
    }

    .login-promo-kort {
        display: none;
    }
}

/* Google-innlogging på login-siden */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-3);
    background: #fff;
    border: 1px solid var(--mod-kant, #d0d7de);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mod-tekst, #333);
    text-decoration: none;
    cursor: pointer;
}

.btn-google:hover,
.btn-google:focus {
    background: #f8f9fb;
    text-decoration: none;
}

/* Hjelpeteksten under Google-knappen: tett på knappen den forklarer, og
   klart atskilt fra «eller»-skillet under. */
.login-google-hjelp {
    margin: var(--sp-2) 0 0;
    line-height: 1.4;
}

.login-eller {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    color: var(--mod-tekst-dus, #9ca3af);
    font-size: 0.85rem;
}

.login-eller::before,
.login-eller::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mod-kant, #e5e7eb);
}

/* Varsel-nøkkelkort (f.eks. forfalte betalinger) */
.nokkel-kort.nokkel-varsel {
    border-color: var(--mod-gul-kant, #fde68a);
    background-color: var(--mod-gul-bg, #fef3c7);
}

/* UI-72 — tittelen MÅ følge med til statusparets tekstfarge. Den dus-grå
   #6b7280 er 4,34 : 1 på #fef3c7 (under kravet); --mod-gul-tekst er 6,37 : 1.
   Samme par som .status-merke.status-foresporsel i tema-moderne.css:419. */
.nokkel-kort.nokkel-varsel .nokkel-tittel {
    color: var(--mod-gul-tekst, #92400e);
}

/* ===== Ordre-fanestripe: status som prikk (UI-94, 25.09.2026) =====
   Grønn = på plass / utført, rød = gjenstår. Tegnes som en liten rund prikk
   FORAN fanenavnet (::before) — aldri som strek. Streken under en fane betyr
   utelukkende «dette er fanen du står i» (se .status-fane.aktiv::after over);
   status og aktiv-markør var tidligere samme strek og kolliderte visuelt, og
   statusfargen overstyrte aktiv-markøren helt når en statusfane var aktiv.
   Aktiv fane vises i tillegg med fet, mørk tekst. */
.status-faner .status-fane.fane-ok,
.status-faner .status-fane.fane-mangler,
.status-faner .status-fane.fane-delvis,
.status-faner .status-fane.fane-konflikt,
.status-faner .status-fane.fane-rolig,
.status-faner .status-fane.fane-tom {
    position: relative;
    border-bottom-color: transparent;
}

.status-faner .status-fane.fane-ok::before,
.status-faner .status-fane.fane-mangler::before,
.status-faner .status-fane.fane-delvis::before,
.status-faner .status-fane.fane-konflikt::before,
.status-faner .status-fane.fane-rolig::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--sp-2);
    vertical-align: middle;
}

.status-faner .status-fane.fane-ok::before {
    background: #16a34a;
}

.status-faner .status-fane.fane-mangler::before {
    background: #dc2626;
}

/* Delvis på plass (f.eks. sjåfør tildelt, men ikke bekreftet): halvt grønn/rød */
.status-faner .status-fane.fane-delvis::before {
    background: linear-gradient(to right, #16a34a 50%, #dc2626 50%);
}

/* Tildelt, men noe kolliderer. Oransje og ikke rød: ressursen ER på plass,
   det er selve tildelingen som må vurderes. */
.status-faner .status-fane.fane-konflikt::before {
    background: #ea580c;
}

/* ===== ORD-18: ordrelistas mangel-faner — restanse vs. hastegrad =====
   De fire mangel-fanene var permanent fane-mangler-røde, også ved 0. En rød
   farge som aldri slås av bærer ingen informasjon; øyet slutter å se etter
   den på en uke. Nå bærer TALLET restansen og STREKEN hastegraden (Remi,
   24.08.2026). Rød (fane-mangler over) brukes uendret når noe haster.

   Egne klasser og IKKE fane-ok: der oppe, i ordreskjemaets fanestripe, betyr
   grønn «dette er på plass». Samme klasse med to betydninger på samme skjerm
   er en felle for den neste som leser koden. */

/* Rolig: det ligger noe i køen, men ingenting haster ennå.
   TYDELIG DEMPET og avmettet med vilje — #16a34a («på plass») under
   «Mangler tilbud 137» kan leses som «137 er i orden». Denne skal leses som
   «rolig», ikke som «ferdig».
   ⚠️ Dette er den ENE verdien som styrer den grønne. Skal den byttes til
   grå, er det #d4d4d8 her og ingenting annet. */
.status-faner .status-fane.fane-rolig::before {
    background: #5f9e6e;
}

/* Tom: fanens tall er 0. Ingen prikk — grått (#d4d4d8) er 1,5 : 1 mot hvitt
   og bærer ingenting når tallet i fanen alt sier 0. Klassen står fortsatt
   (koden setter den), denne regelen tegner bare ingen prikk (UI-94). */

/* ── Statuskortet øverst i ordren (UI-76) ───────────────────────────
   Ett kort som svarer på tre ting: hvor står ordren, hva er galt, hva
   er neste steg. Erstatter .ordre-statuslinje, som lå NEDERST i
   skjemaet — se ORD-12-kommentaren i Ordre.razor og DESIGNSYSTEM.md 6.8.
   Nye klassenavn: temaet har ingen regel for dem, så app.css vinner
   uten hjelp. (Motsatt av btn-slett/UI-70, der en temaregel slo.) */
.statuskort {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    background: var(--mod-flate);
    border: 1px solid var(--mod-kant);
    border-radius: var(--mod-radius);
    box-shadow: var(--mod-skygge);
}

/* Stigen. Trinnene ER OrdreStatus — se Ordrestatusflyt.Statussteg (Data). */
.statusstige {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.statusstige li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--tekst-hjelp);
    color: var(--mod-tekst-dus);
}

.statusstige li + li::before {
    content: "";
    width: var(--sp-4);
    height: 1px;
    background: var(--mod-kant-sterk);
}

.statusstige .status-merke {
    margin: 0;
    font-size: var(--tekst-hjelp);
}

.statusstige .steg-passert .ikon { color: var(--mod-gronn-tekst); }
.statusstige .steg-neste .ikon,
.statusstige .steg-senere .ikon { color: var(--mod-kant-sterk); }

/* Telleren finnes bare på mobil (media-blokka nederst). Den står
   UTENFOR <ol> med vilje: inni ville li + li::before gitt en
   løsthengende strek foran første trinn på desktop. */
.statussteg-teller {
    display: none;
    margin: 0;
    font-size: var(--tekst-hjelp);
    color: var(--mod-tekst-dus);
}

/* Varselet. Fire nivåer, som DESIGNSYSTEM.md 6.3. */
.statusvarsel {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid;
    border-radius: var(--mod-radius-liten);
    font-size: var(--tekst-kontroll);
    line-height: 1.5;
}

.statusvarsel p { margin: 0; }
.statusvarsel .ikon { flex-shrink: 0; margin-top: 2px; }

.statusvarsel.rod { background: var(--mod-rod-bg); border-color: var(--mod-rod-kant); }
.statusvarsel.rod strong { color: var(--mod-rod-tekst); }
.statusvarsel.gul { background: var(--mod-gul-bg); border-color: var(--mod-gul-kant); }
.statusvarsel.gul strong { color: var(--mod-gul-tekst); }
.statusvarsel.gronn { background: var(--mod-gronn-bg); border-color: var(--mod-gronn-kant); }
.statusvarsel.gronn strong { color: var(--mod-gronn-tekst); }
.statusvarsel.noytral { background: var(--mod-bg); border-color: var(--mod-kant); }

/* Handlingsraden er appens egen .knapp-rad; her bare marg og
   utskillingen av den ødeleggende handlingen. */
.statuskort .knapp-rad { margin: 0; }
.statuskort .knapp-rad .btn-slett { margin-left: auto; }

/* Sperret handling: en linje som sier HVORFOR, ikke en død knapp.
   Teksten er Ordrestatusflyt.GodkjenningHinder — samme setning som
   sto i title-attributtet (UI-75). */
.laast {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--tekst-hjelp);
    color: var(--mod-tekst-dus);
}

.laast .ikon { flex-shrink: 0; }

.statuskort .innstilling-hjelp { margin: 0; }

@media (max-width: 640.98px) {
    /* Stigen blir «Steg 2 av 5» + merket + hva som kommer
       (DESIGNSYSTEM.md 6.8 punkt 1). ::before slås av på det
       nåværende trinnet, ellers henger streken fra de skjulte. */
    .statussteg-teller { display: block; }

    .statusstige li.steg-passert,
    .statusstige li.steg-senere { display: none; }

    .statusstige li.steg-naa::before { display: none; }

    .statuskort .knapp-rad .btn-slett { margin-left: 0; }
}

/* Avbestillingsdialogen (UI-74). Arvet tidligere .dag-fjern-bekreft —
   en dagslettings-bekreftelse — mens den i virkeligheten kansellerer
   turen OG legger inn et gebyr kunden skal betale (PRI-15). */
.avbestilling-bekreft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-4);
    background: var(--mod-rod-bg);
    border: 1px solid var(--mod-rod-kant);
    border-radius: var(--mod-radius-liten);
    font-size: var(--tekst-kontroll);
    color: var(--mod-tekst);
}

.avbestilling-bekreft > span:first-child { flex-basis: 100%; }

/* 10ch er INNHOLDET: med border-box spiste feltets egen padding
   «6250,00» til «6250,0» på 375 px (målt i UI-76). */
.avbestilling-belop { box-sizing: content-box; width: 10ch; }

/* Diskré fare-tekstknapp (kanseller) */
.btn-tekst-fare {
    color: #b91c1c;
}

.btn-tekst-fare:hover,
.btn-tekst-fare:focus {
    color: #991b1b;
}

/* UI-75 — en sperret lenkeknapp så nøyaktig ut som en åpen: ingen regel tegnet
   den. Hover MÅ stå med i selektoren: `.btn-tekst:hover` og `.btn-tekst:disabled`
   er begge (0,2,0), og da avgjør rekkefølgen alene — flytter noen en av dem,
   understreker en sperret knapp seg når musa er over. `:disabled:hover` er
   (0,3,0) og vinner uansett plass. */
.btn-tekst:disabled,
.btn-tekst:disabled:hover,
.btn-tekst:disabled:focus {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: none;
}

/* «Sendt til regnskap»-merke: teal = ferdig og sendt videre (DESIGNSYSTEM 3.3, UI-207).
   «Betalt» er grønn (merke-ok), så «sendt/fakturert» og «betalt» skilles på farge. */
.status-merke.regnskap-merke {
    background-color: var(--mod-teal-bg, #ccfbf1);
    color: var(--mod-teal-tekst, #115e59);
}

/* Ordrenummer på listeradene */
.ordre-rad-nr {
    color: var(--mod-tekst-dus, #6b7280);
    font-weight: 600;
}

/* Varselmerke på ordrerad: kjøring nærmer seg og noe mangler */
.status-merke.varsel-merke {
    background-color: #fff8e6;
    color: #92400e;
    border: 1px solid #f0dfae;
}

.status-merke.varsel-merke.varsel-rod {
    background-color: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* Klikkbart nøkkelkort (navigerer) */
.nokkel-kort.nokkel-klikkbar {
    cursor: pointer;
}

.nokkel-kort.nokkel-klikkbar:hover {
    border-color: var(--mod-primar-markor);
}

/* UI-196: aktiv = ramme i hovedfargen, ingen stripe (Remi 22.10). */
.nokkel-kort.nokkel-klikkbar.aktiv {
    border-color: var(--mod-primar-markor);
    box-shadow: var(--mod-skygge);
}

/* Krav-felt: loddrett strek til venstre — grønn = på plass, rød = mangler.
   Samme teknikk som fanestripens streker (egen strek, ikke kantlinje). */
.krav-felt {
    position: relative;
    padding-left: var(--sp-4);
    margin-bottom: var(--sp-3);
}

.krav-felt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sp-1);
    border-radius: 999px;
}

.krav-felt.krav-ok::before {
    background: #16a34a;
}

.krav-felt.krav-mangler::before {
    background: #dc2626;
}

/* Sjåførpanel: dagsgrupper, knapperader og meldingspanel */

.kjoring-gruppe {
    margin-bottom: var(--sp-5);
}

.kjoring-gruppe-topp {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    margin-bottom: var(--sp-2);
}

.kjoring-gruppe-topp-klikkbar {
    cursor: pointer;
}

.kjoring-gruppe-tittel {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.kjoring-gruppe-chevron {
    margin-left: auto;
    transition: transform 150ms ease;
}

.kjoring-gruppe-chevron.apen {
    transform: rotate(180deg);
}

.ordre-rad-hode-hoyre {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}

.kjoring-rad-chevron {
    transition: transform 150ms ease;
}

.kjoring-rad-chevron.apen {
    transform: rotate(180deg);
}

.kjoring-hurtighandlinger {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.kjoring-hurtig-knapp {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-1);
    border: none;
    background: none;
    border-radius: 999px;
    cursor: pointer;
    line-height: 0;
}

.kjoring-hurtig-knapp:hover,
.kjoring-hurtig-knapp:focus-visible {
    background-color: var(--mod-primar-tint, #f7f7fb);
    outline: none;
}

.kjoring-hurtig-bekreft {
    color: #2f9e44;
}

/* Passordfelt med vis/skjul-øye og «Generer nytt»-knapp på linje */
.passord-felt-rad {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.passord-felt-rad .search-input {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.passord-felt-rad .kjoring-hurtig-knapp {
    flex-shrink: 0;
    color: var(--mod-tekst-dus, #6b7280);
}

.passord-felt-rad .btn-tekst {
    flex-shrink: 0;
    white-space: nowrap;
}

/* KND-88: «Ikke lagret ennå» / «Passordet er lagret.» på egen linje rett under feltraden. */
.passord-lagringsvarsel {
    margin-top: var(--sp-2);
}

.kjoring-hurtig-avvis {
    color: #c0504d;
}

/* Utvidet detalj under en kompakt kjøring-rad */
.kjoring-detalj {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--mod-kant, #eef0f3);
    font-size: 0.9rem;
}

.kjoring-knapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-3);
}

.kjoring-panel {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background-color: #fafafa;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
}

.kjoring-panel label {
    display: block;
    font-size: 0.85rem;
    color: #52525b;
    margin-bottom: var(--sp-2);
}

.kjoring-panel-knapper {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

/* Stopp-rader i ordreskjemaet */
.stopp-rad {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.stopp-tider {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.stopp-tider .search-input {
    max-width: 14rem;
}

/* Prissats-felter på busskortet + verktøyrad under prislinjene */
.prissats-rad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.prissats-rad .search-input {
    max-width: 10rem;
}

.prislinje-verktoy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Priser-siden: knapperad.

   `.prisbuss-*` sto her til 01.09.2026 (ARK-17) — stilarket for
   per-buss-satstabellen, som PRI-22 fjernet fra markupen 27.08 (3ab331d) uten
   å rydde CSS-en. */
.prisside-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-2);
}

/* Produktkatalog på Priser-siden */
.produkt-rad {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: var(--sp-2);
    align-items: center;
    max-width: 56rem;
    margin-bottom: var(--sp-2);
}

@media (max-width: 640px) {
    .produkt-rad {
        grid-template-columns: 1fr 1fr;
    }
}

/* Avbestillingstrappa på Priser-siden (PRI-15). IKKE et grid som .produkt-rad
   og .tillegg-rad: raden er en SETNING — «Senere enn [24] timer før avreise:
   [50] % av avtalt pris» — og ordene mellom feltene skal ligge tett på tallet
   sitt, ikke i en spalte. Flex med wrap gir setningen på én linje på desktop og
   lar den brytes naturlig på 375 px, der et grid ville tvunget etikettene ned i
   egne kolonner og skilt «timer før avreise» fra tallet det hører til. */
.avbestilling-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    max-width: 56rem;
    margin-bottom: var(--sp-2);
}

/* Tallfeltene er små tall (timer, prosent) og trenger ikke halve raden. */
.avbestilling-rad .search-input {
    width: 5.5rem;
    flex: 0 0 auto;
}

/* Prisvinduer på Priser-siden: kveld/natt-bånd, ukedager, egne merkedager og
   sesonger (PRI-A). Samme listerad-form som .produkt-rad, men med ett felt mer
   — de fire slagene har alle navn, to avgrensninger og en prosent. */
.tillegg-rad {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: var(--sp-2);
    align-items: center;
    max-width: 56rem;
    margin-bottom: var(--sp-2);
}

/* UI-173: raden eier luften (gap + egen margin-bottom), ikke feltet — ellers står knappen 8 px lavere.
   Avbestillingstrappa avgrenses til Priser (.innstilling-feltboks): påmeldingens .avbestilling-rad
   har ingen knapp og trenger feltets marg under seg. */
.produkt-rad .search-input,
.tillegg-rad .search-input,
.innstilling-feltboks > .avbestilling-rad .search-input {
    margin-bottom: 0;
}

.tillegg-hode {
    font-size: 0.82rem;
    color: var(--mod-tekst-dus);
}

/* Ukedagene legges ikke til og fjernes — de er sju faste rader med én sats. */
.tillegg-rad-ukedag {
    grid-template-columns: 2fr 1fr auto;
}

.tillegg-navn {
    font-weight: 600;
}

/* Den beregnede helligdagslista: to spalter på desktop, én på mobil. */
.helligdag-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--sp-1) var(--sp-5);
}

.helligdag-rad {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: 0.9rem;
}

/* Mobil: navnet tar hele bredden, resten deler seg på to. Kolonneoverskriftene
   forsvinner, og navnet blir i stedet overskrift for de feltene som følger.

   Grepet var opprinnelig `.prisbuss-rad`s, men den familien er borte (PRI-22
   fjernet markupen 27.08.2026, ARK-17 ryddet stilarket 01.09) — mønsteret
   beskrives derfor her i sin helhet i stedet for ved henvisning. Det er
   trygt å kopiere videre KUN når overskriftene er pynt; bærer de betydning,
   se `.prismodell-*` under, der hodet med vilje blir stående. */
@media (max-width: 640px) {
    .tillegg-rad {
        grid-template-columns: 1fr 1fr;
    }

    .tillegg-hode {
        display: none;
    }

    .tillegg-rad > :first-child {
        grid-column: 1 / -1;
    }

    .tillegg-rad-ukedag {
        grid-template-columns: auto 1fr auto;
    }

    .tillegg-rad-ukedag > :first-child {
        grid-column: auto;
    }
}

/* Prismodeller på Priser-siden (PRI-19): ett kort per Prisprodukt, med trappa
   som en liten tabell inni.

   Egen klassefamilie og ikke .tillegg-rad, av to grunner. Antallet kolonner er
   et annet (to felter, ikke fire), og — viktigere — kolonneoverskriftene her
   BÆRER betydningen: satsen er marginal, og raden må aldri kunne leses som en
   snittpris eller en total. Derfor blir hodet stående også på mobil, i stedet
   for å skjules slik .tillegg-hode gjør. Radene har egen mediespørring; en rad
   uten er nøyaktig fella i UI-16. */
.prismodell-kort {
    background: #f8fafc;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
    padding: var(--sp-4);
    margin-top: var(--sp-3);
    max-width: 56rem;
}

.prismodell-hode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.prismodell-hode > input {
    flex: 1 1 14rem;
    min-width: 0;
    font-weight: 600;
}

/* PRI-28: kategorikortene er kollapset. Tre kategorier med grunnpris,
   kilometertrapp, timepris, døgnpris, minstepris og eksempelfelt er for mye på
   én skjerm — sammendragene gir hele prisbildet på tre linjer, og bare kortet
   som skal endres åpnes.

   Elementet er en <details> og ikke .prismodell-kort med en @if: innholdet blir
   liggende i DOM-en når kortet er lukket, så bindingene lever og lagring tar med
   kort som aldri ble åpnet. */
.kategori-kort > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    gap: var(--sp-2) var(--sp-3);
    cursor: pointer;
    /* Hele raden er trykkflaten, ikke bare pila, og min-høyden gjør den
       tommelvennlig når sammendraget bare er én kort linje. */
    min-height: 2.75rem;
    padding: var(--sp-1) 0;
    list-style: none;
}

/* Egen pil: summary med display:flex mister den native trekanten i Chrome, og
   ::marker lar seg uansett ikke plassere i en flex-rad. */
.kategori-kort > summary::-webkit-details-marker {
    display: none;
}

.kategori-kort > summary::before {
    content: "▸";
    color: var(--mod-primar-markor);
    font-size: 0.95rem;
    line-height: 1;
}

.kategori-kort[open] > summary::before {
    content: "▾";
}

/* UI-164: streken under <summary> er borte — de hvite flatene (.kort-del)
   skiller nå hodet fra resten. */
.kategori-kort[open] > summary {
    margin-bottom: var(--sp-3);
}

/* UI-164: seksjonstittel i trappa (DESIGNSYSTEM kap. 4) — tydelig større enn
   deltitlene (1 rem) og feltetikettene (0,875 rem) inne i kortet. */
.kategori-navn {
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* UI-164 (Remi 13.10.2026, valg A): en seksjonsflate inne i et kort. Hvit
   flate med kant på det grå kortet, uten skygge — skyggen er det som gjør et
   kort til et kort (DESIGNSYSTEM kap. 5), og dette er deler av ett kort, ikke
   kort i kort. Brukes i kategorikortet på Priser. */
.kort-del {
    background: var(--mod-flate);
    border: 1px solid var(--mod-kant);
    border-radius: var(--mod-radius-liten);
    padding: var(--sp-4);
}

/* UI-174 (Remi 14.10): hodet (navn, Standard, I bruk) står uten hvit flate — rett på det grå kortet. Kant og luft beholdes. */
.kort-del.kort-del-hode {
    background: transparent;
}

.kort-del + .kort-del {
    margin-top: var(--sp-3);
}

/* Flatens padding er luften mot kanten; et siste felt eller avsnitt med egen
   margin-bottom ville gitt dobbelt luft nederst. */
.kort-del > :last-child {
    margin-bottom: 0;
}

/* .btn-avbryt har egen margin (16 over og under, 8 til venstre) for knapper
   som står alene i et skjema. I flaten ga den knappen innrykk mot feltene over
   og dobbel luft nederst; her er det radens gap som gir luften. */
.kort-del .prismodell-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.kort-del .prismodell-knapper .btn-avbryt {
    margin: 0;
}

@media (max-width: 640px) {
    .kort-del {
        padding: var(--sp-3);
    }
}

/* Feltetikettene i kategorikortet er hjelpetekst-trinnet (0,875 rem), under
   deltittelen (1 rem). Temaet setter det samme for .form-felt label; regelen
   her holder trappa også uten temaklassen. */
.kategori-kort .form-felt label {
    font-size: 0.875rem;
}

.kategori-standardmerke {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

.kategori-satser {
    margin-left: auto;
    color: #4b5563;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    /* Navn og standardmerke på første linje, prisleddene under — aldri en
       vannrett rulling. Innrykket er pilas bredde pluss gapet, så tallene
       står i flukt med navnet over. */
    .kategori-satser {
        flex-basis: 100%;
        margin-left: 0;
        padding-left: 1.6rem;
    }
}

/* ÉN grid for hele trappa, og radene er display:contents.

   Grunnen: gir hver rad sin egen grid, får hoderaden andre kolonnebredder enn
   datarаdene — hoderadens tredje celle er tom, mens datarаdene har en
   Fjern-knapp der. Målt på 375 px sto «Kr per km i dette trinnet» over 133 px
   mens feltet under var 106 px. Overskriften ER forklaringen på at satsen er
   marginal; står den ikke i flukt med feltet, er den ikke lenger en
   overskrift. Med contents deler alle radene de samme sporene. */
.pristrinn-tabell {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: var(--sp-2);
    align-items: center;
    margin-top: var(--sp-4);
    max-width: 34rem;
}

.pristrinn-rad {
    display: contents;
}

/* «Ingen trinn ennå …» er en beskjed, ikke en celle. */
.pristrinn-tabell > p {
    grid-column: 1 / -1;
    margin: 0;
}

.pristrinn-hode {
    font-size: 0.82rem;
    color: var(--mod-tekst-dus);
}

.prismodell-knapper {
    margin-top: var(--sp-3);
}

/* .search-input har egen margin-bottom for skjemafelt som står under hverandre.
   Her er avstanden gap-en, og marginen ville gitt dobbelt luft i hver rad. */
.prismodell-kort .search-input {
    margin-bottom: 0;
    min-width: 0;
}

@media (max-width: 640px) {
    .pristrinn-tabell {
        max-width: none;
        grid-template-columns: 1fr 1.2fr auto;
    }

    /* .search-input har 16 px sidepadding — laget for skjemafelt i full bredde.
       I en trerads-grid på 375 px spiser det innholdet: «200,00» ble klippet
       til «200,0(». Tallene her er korte, så luften kan halveres. */
    .prismodell-kort .search-input {
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
    }

    /* Hodet blir IKKE borte her, slik det gjør for .tillegg-rad: «Kr per km i
       dette trinnet» er hele forklaringen på at satsen er marginal, og på
       telefon finnes ingen annen vei til den. Det får mindre skrift og lov til
       å brekke over to linjer i stedet. */
    .pristrinn-hode {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    /* PRI-56: uten trinn består tabellen av hoderaden og ÉN rad, der kolonne 1
       bare bærer etiketten «Alle km» og kolonne 3 er tom. `1fr` ga likevel
       kolonne 1 hele 125 px av de 275 som er å fordele på 375 px, og feltet i
       kolonne 2 satt igjen med 132 px innvendig — mens plassholderen
       «Standard: trappepris» (PRI-49) krever 142,9 px. Teksten ble klippet.

       max-content, ikke auto: kolonnen skal aldri kunne presses under
       etikettens egen bredde og brekke «Alle km» over to linjer. Målt etterpå:
       kolonne 1 = 45 px, feltet = 212 px innvendig, ingen vannrett overflyt.

       ⚠️ Regelen treffer BARE tabellen uten trinn. Trinnradene deler de samme
       sporene (.pristrinn-rad er display: contents), og der står det et
       tallfelt i kolonne 1 som trenger `1fr` — men i akkurat dette tilfellet
       finnes ingen trinnrader, så de kan ikke bli smalere av dette. Klassen
       settes av Priser.razor på Kilometertrinn.Count == 0. */
    .pristrinn-tabell-flat {
        grid-template-columns: max-content 1fr auto;
    }
}

/* PRI-33/34/37: kategorikortet har like deler — Grunnpris, Kilometer, Tid,
   Dag — med feltet sitt øverst og knappen sin under. UI-164 (Remi 13.10.2026):
   deltitlene var 0,78 rem grå versaler, mindre enn feltetikettene under seg,
   og skillet var en tynn strek. Nå står hver del i sin .kort-del, og tittelen
   er brødtekst-trinnet i vekt 600 — mellom kategorinavnet (1,25) og
   etikettene (0,875). Luften over kommer fra flaten, ikke fra marginen. */
.kategori-aksetittel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mod-tekst);
    margin: 0 0 var(--sp-3);
}

/* Grunnprisen ute av kilometerrutenettet (PRI-34), timeprisen ute av
   feltboksen (PRI-33) og dagsprisen ut av den igjen (PRI-31). De tre aksene
   skal se like ut som Minstepris pr. buss: samme feltbredde (kronebeløpet er
   kort, og et halvmeterbredt felt for «1 800» leser som om det ventet en
   setning — den bredden setter .form-felt selv) og hjelpetekstene under i
   flatens fulle bredde. Regelen setter derfor bare luften under blokka; den
   hadde tidligere en max-width på 22 rem som også smalnet hjelpeteksten
   (UI-166). */
.prismodell-kort .kategori-grunnpris,
.prismodell-kort .kategori-timepris,
.prismodell-kort .kategori-dagspris {
    margin-bottom: var(--sp-2);
}

/* Hjelpetekstene er egne avsnitt, ikke haler på feltet. Dagsprisen har TO av
   dem — «leses ikke»-merknaden og forklaringen av flat sats vs. trapp — og
   uten block rant de sammen til én linje midt i en setning (PRI-31).
   .kategori-minstepris kom inn med PRI-32s arv/overstyr-linje. */
.kategori-grunnpris .innboks-meta,
.kategori-timepris .innboks-meta,
.kategori-dagspris .innboks-meta,
.kategori-minstepris .innboks-meta {
    display: block;
}

/* Enhetsvalget (PRI-37) — fire ekte radioknapper, ikke klikkbare div-er:
   tastatur og skjermleser følger med gratis, og gruppa leses opp som en
   gruppe. Fieldset trenger min-width:0; standardverdien er min-content, som
   nekter innholdet å brekke. */
.tidsenhetsvalg {
    border: 0;
    margin: var(--sp-3) 0 var(--sp-2);
    padding: 0;
    min-width: 0;
}

.tidsenhetsvalg legend {
    padding: 0;
    font-size: 0.82rem;
    color: var(--mod-tekst-dus);
}

/* Egen rad inni fieldset-en: en <legend> i et flex-fieldset løsriver seg fra
   flyten og legger seg oppå første valg. */
.tidsenhet-rad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
}

.tidsenhet-valg {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    /* Samme trykkflate som resten av kortet. Fire valg på 375 px blir trangt —
       de brekker over to linjer i stedet for å krympe fingermålet, og kortet
       får aldri vannrett rulling. */
    min-height: 2.75rem;
    padding: 0 var(--sp-3);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    font-size: 0.9rem;
    cursor: pointer;
}

.tidsenhet-valg input {
    margin: 0;
    width: 1.05rem;
    height: 1.05rem;
    /* UI-115 — markørfargen (≥ 3:1 mot hvitt), ikke den rå firmafargen */
    accent-color: var(--mod-primar-markor);
}

.tidsenhet-valg.valgt {
    border-color: var(--mod-primar-markor);
    font-weight: 600;
}

/* Den arvede enheten (1–1440 var lovlig før PRI-37) skal kunne leses av den
   som overtok kategorien, og aldri velges på nytt. Stiplet kant sier at den
   er noe annet enn de fire. */
.tidsenhet-valg.tidsenhet-egen {
    cursor: default;
    color: var(--mod-tekst-dus);
    border-style: dashed;
}

/* Et stoppet enhetsbytte er ikke en feil brukeren gjorde — det er systemet som
   nekter å endre prisen i stillhet. Rolig gult i kortet, ingen dialog, og
   bred nok til at tallene får stå på én linje. */
.tidsenhet-stopp {
    max-width: 34rem;
    margin: var(--sp-2) 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid #fcd34d;
    border-radius: 0.5rem;
    background: #fffbeb;
    color: #713f12;
    font-size: 0.9rem;
}

.tidsenhet-kvittering {
    max-width: 34rem;
    color: #2a8a3b;
}

/* Demo-banner over innholdet + pille i menyen */
.demo-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    background-color: #fff8e6;
    border-bottom: 1px solid #f0dfae;
    color: #92400e;
    font-size: 0.9rem;
}

.demo-banner a {
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

/* WEB-3b: sandkassebanneret tok en sjettedel av 375 px-skjermen, mest på grunn
   av lenkas ordlyd. Kortformen finnes alltid i markeringen og skjules på
   desktop — så desktop er tegn for tegn uendret, og bytte skjer kun her. */
.utforsk-kort {
    display: none;
}

/* WEB-3b2: «← Tilbake til nettsiden» står først i banneret og skal LESES som en
   knapp, ikke som løpende tekst — derfor pille i bannerets egen ravfarge, ikke
   .btn-avbryt (den er en skjemaknapp med egen høyde og marg). Teksten mellom de
   to lenkene får flex: 1 så den hugger knappen og skyver «Behold» helt ut til
   høyre; uten den ville space-between latt setningen flyte midt i banneret. */
.utforsk-tilbake {
    padding: 0.15rem var(--sp-2);
    background-color: #fffdf7;
    border: 1px solid #e0cd9a;
    border-radius: 0.35rem;
    text-decoration: none;
}

.utforsk-banner > span {
    flex: 1;
}

@media (max-width: 600px) {
    .utforsk-lang {
        display: none;
    }

    .utforsk-kort {
        display: inline;
    }

    /* WEB-3b2: på 375 px får setningen hele førstelinja (order før begge
       lenkene), og de to knappene deler linja under. Målt i browser: banneret
       går fra 89 til 96 px — de 7 pikslene er pillens luft, ingen ny linje.
       Uten denne regelen ville knappen delt førstelinja med setningen og
       klemt den ned i en smal spalte. */
    .utforsk-banner > span {
        order: -1;
        flex-basis: 100%;
    }
}

.demo-banner.venter-banner {
    background-color: #fff7ed;
    border-bottom-color: #fed7aa;
    color: #7c2d12;
}

/* KON-2 funn 1: partnerbanneret. Rolig grått og ikke ravgult som demobanneret
   — det opplyser om en tilstand, det ber ikke om noe. Banneret har ingen lenke,
   så det er én setning som brytes av seg selv på 375 px (flex-wrap arves fra
   .demo-banner). */
.demo-banner.partner-banner {
    background-color: #f1f5f9;
    border-bottom-color: #cbd5e1;
    color: #334155;
}

.demo-pille {
    margin-left: var(--sp-2);
}

/* Brreg-oppslagskort (Bli kunde / godkjenning) + org.nr-rad */
.brreg-kort {
    max-width: 32rem;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    line-height: 1.6;
}

.orgnr-rad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.orgnr-rad .search-input {
    max-width: 14rem;
    margin-bottom: 0; /* raden styrer avstanden — ellers henger knappen over feltlinja */
}

.orgnr-rad {
    margin-bottom: var(--sp-2);
}

.orgnr-rad .btn-avbryt {
    margin-top: 0;
    margin-bottom: 0; /* flex sentrerer margin-boksen — marger skyver knappen ut av linje */
}

.orgnr-rad .krav-felt {
    margin-bottom: 0; /* samme grunn: krav-strekens bunnmarg gjør raden høyere enn feltet */
}

/* UI-1: .feilmelding har margin-top: -1rem, en negativ marg som forutsetter at
   elementet over har en bunnmarg å trekke fra. .orgnr-rad nuller derimot
   bunnmargen på både felt og knapp med vilje (se de tre reglene over) — da drar
   -1rem feilteksten opp I knapperaden i stedet for å lande under den. Sett hos
   Remi i «Sett passord»-boksen: «Skriv inn et nytt passord ... først.» lå oppi
   knappen. Raden har allerede sp-2 under seg, så 0 er nok avstand. */
.orgnr-rad + .feilmelding {
    margin-top: 0;
}

/* MIG-9: samme felle en gang til. Står feilmeldingen rett under overskriften i
   et kort (import-skjermens «2. Prøvekjøring» og «Importen ble ikke
   gjennomført»), har h2 bare sp-1 under seg — da drar -1rem feilteksten opp I
   overskriften. Sett av kontrolløren på /plattform-import. */
.innstilling-seksjon h2 + .feilmelding {
    margin-top: 0;
}

/* PAM-228e-b: tredje gang. I arket «Send billettene til deltakerne» står meldingen
   for hele sendingen («Skriv inn minst én e-postadresse.») rett under hjelpeteksten,
   som bare har sp-2 under seg — -1rem dro den 8 px opp i hjelpeteksten (målt på
   375 px). Avgrenset til ark, der hjelp + melding er mønsteret. */
.ark-panel .innstilling-hjelp + .feilmelding {
    margin-top: 0;
}

/* Rute-skjemaet: stoppestedbyggeren */
.rute-etikett {
    display: block;
    margin-top: var(--sp-2);
    font-size: 0.85rem;
    color: var(--mod-tekst-dus, #6b7280);
}

.rute-stopp-rad {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.rute-stopp-rad .search-input {
    margin-bottom: var(--sp-2);
}

.rute-leggtil {
    margin: var(--sp-1) 0 var(--sp-2);
}

/* Adressefelt med forslag (gjenbruker .sok-forslag-stilene) */
.adresse-felt {
    position: relative;
}

/* Kundens bekreftelsesside (/bekreft/{token}) */
.bekreft-kort {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background: #f9fafb;
}

.bekreft-rute {
    font-weight: 600;
}

.bekreft-detaljer {
    color: var(--mod-tekst-dus);
    font-size: 0.9rem;
    margin-top: var(--sp-1);
}

.bekreft-pris {
    margin-top: var(--sp-1);
    font-size: 0.95rem;
}

/* Flerdagstur: én blokk per døgn. Ingen faste bredder — kortet er ofte
   åpnet på telefon, og stedsnavnene bryter av seg selv. */
.bekreft-dager {
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.bekreft-dag {
    border-left: 3px solid #d1d5db;
    padding-left: var(--sp-2);
}

.bekreft-dag-tittel {
    font-weight: 600;
    font-size: 0.9rem;
}

.bekreft-dag-rute {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.bekreft-dag-tider,
.bekreft-dag-overnatting {
    color: var(--mod-tekst-dus);
    font-size: 0.85rem;
}

.bekreft-total {
    font-weight: 600;
    margin: var(--sp-2) 0;
}

.bekreft-knapp {
    width: 100%;
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    font-size: 1.05rem;
}

/* Kjørerute på kart (Google Maps Embed). Egen wrapper UTENFOR .form-felt
   (som er låst til maks 480px) slik at kartet kan bruke opptil hele
   kortets bredde — smalt på mobil, bredere på nettbrett/desktop. */
.kart-full-bredde {
    max-width: 100%;
    margin-top: var(--sp-3);
    /* Luft under kartet: knappen «Vurder kjøre- og hviletid nå» lå klistret
       til kartrammen (Remi 10.09.2026). */
    margin-bottom: var(--sp-4);
}

.kart-ramme {
    margin-top: var(--sp-2);
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    overflow: hidden;
}

.kart-ramme iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

/* Fast rute: ukedag-velger og serie-merke */
.ukedag-velger {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin: var(--sp-1) 0 var(--sp-2);
}

.ukedag-knapp {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #374151;
    font-size: 0.9rem;
    cursor: pointer;
}

.ukedag-knapp.aktiv {
    background: var(--merkevarefarge);
    border-color: var(--merkevarefarge);
    color: var(--merkevarefarge-tekst);
}

.btn-avbryt.aktiv {
    background: var(--merkevarefarge);
    border-color: var(--merkevarefarge);
    color: var(--merkevarefarge-tekst);
}

/* .serie-merke har ingen egne farger her (UI-59): kategorimerket er nøytralt og
   står i tema-moderne.css, der vekten slår html.tema-moderne .status-merke. */

/* Flerdagstur: dag-kort og kjøre-/hviletidsvurdering */
.dag-kort {
    margin-bottom: var(--sp-4);
}

.dag-kort-topp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}

.dag-kort-topp h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

/* Bekreftelse før en dag (og stoppene dens) fjernes. */
.dag-fjern-bekreft {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-end;
    font-size: 0.85rem;
    color: var(--mod-tekst-dus);
}

@media (max-width: 640.98px) {
    .dag-kort-topp {
        align-items: flex-start;
        gap: var(--sp-2);
    }

    .dag-fjern-bekreft {
        justify-content: flex-start;
    }
}

/* ===================== Turdetaljenes rutenett (UI-65, UI-149, SKJ-37) =====================

   Ordreskjemaets Turdetaljer (Ordre.razor) og bestillingsskjemaets
   (Turdetaljer.razor: /rute, /rute-pris, «Prøv prisen») har samme oppsett.
   Flyttet hit fra Ordre.razor.css (SKJ-37); det som bare ordren har —
   seksjonsbredden, bussene denne dagen, avstand og reisetid, stopp-radenes
   oppsett — står igjen der. Selektorene står under .tur-rutenett > så vekten
   er den samme som den scopede regelen hadde (0,2,0): ellers ville
   .rute-juster og .innstilling-hjelp lenger opp tatt margen og visningen.

   Under 900 px står feltene i markupens rekkefølge, som før. Fra 900 px:
   tolv spor, så radene kan deles i halve (oppmøte/avreise, hentested/
   destinasjon, ankomst/slutt) og tredjedeler (rad 5). Rekkefølgen følger
   turen i tid. Radnumrene er faste: en rad uten innhold denne dagen blir
   0 px høy, fordi radavstanden eies av feltenes egen marg (.form-felt), ikke
   av gap. TAB-REKKEFØLGEN: reading-flow: grid-rows lar tastaturet følge
   rutenettet rad for rad uten å bytte om på markupen. */

/* Innpakningen er siste barn i dagkortet, ikke det siste feltet — uten denne
   ville .innstilling-kort > :last-child nullet feil marg. */
.tur-rutenett:last-child > :last-child {
    margin-bottom: 0;
}

/* PC-kopien av flyhjelpen finnes ikke på mobil — der står originalen inne i
   flyfeltet. */
.tur-rutenett > .tur-flyhjelp {
    display: none;
}

@media (min-width: 900px) {
    .tur-rutenett {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--sp-5);
        row-gap: 0;
        /* Ingen celle strekkes etter en høy nabo (Remi 18.09: «store tomme hull»). */
        align-items: start;
        reading-flow: grid-rows;
    }

    .tur-rutenett > * {
        min-width: 0;
        max-width: none;
    }

    .tur-rutenett > .tur-oppm     { grid-row: 1; grid-column: 1 / 7; }
    .tur-rutenett > .tur-avr      { grid-row: 1; grid-column: 7 / 13; }
    .tur-rutenett > .tur-hent     { grid-row: 2; grid-column: 1 / 7; }
    .tur-rutenett > .tur-dest     { grid-row: 2; grid-column: 7 / 13; position: relative; }
    .tur-rutenett > .tur-stopp    { grid-row: 3; grid-column: 1 / -1; }
    .tur-rutenett > .tur-ank      { grid-row: 4; grid-column: 1 / 7; }
    .tur-rutenett > .tur-slutt    { grid-row: 4; grid-column: 7 / 13; }
    /* Rad 5: tre like kolonner. Overnattingssted finnes bare på flerdagsturer
       (ikke siste dag); flynummeret bare der det hører til dagen. */
    .tur-rutenett > .tur-pass     { grid-row: 5; grid-column: 1 / 5; }
    .tur-rutenett > .tur-fly      { grid-row: 5; grid-column: 5 / 9; }
    .tur-rutenett > .tur-natt     { grid-row: 5; grid-column: 9 / 13; }
    .tur-rutenett > .tur-flyhjelp { grid-row: 6; grid-column: 1 / -1; }

    /* Pila mellom hentested og destinasjon står i mellomrommet mellom
       kolonnene, på høyde med feltene (merkelapp + halve feltet). Ren pynt:
       tom alternativtekst, så skjermlesere ikke leser «pil høyre». */
    .tur-rutenett > .tur-dest::before {
        content: "→" / "";
        position: absolute;
        left: calc(var(--sp-5) / -2);
        top: calc(1.3rem + var(--sp-1) + 1.5rem);
        transform: translate(-50%, -50%);
        color: var(--mod-tekst-dus);
        font-size: 1.25rem;
        line-height: 1;
    }

    /* Flynummer: lukket står lenka i feltets plass (ned på høyde med feltene
       ved siden av). Åpnet står bare merkelapp + felt i kolonnen — lenka
       skjules, og hjelpeteksten står i PC-kopien under hele raden. */
    .tur-rutenett > .tur-fly {
        margin-top: calc(1.5rem + var(--sp-1));
    }

    .tur-rutenett > .tur-fly[open] {
        margin-top: 0;
    }

    .tur-rutenett > .tur-fly[open] > summary,
    .tur-rutenett > .tur-fly .innstilling-hjelp {
        display: none;
    }

    .tur-rutenett > .tur-fly .form-felt {
        max-width: none;
    }

    .tur-rutenett > .tur-fly[open] ~ .tur-flyhjelp {
        display: block;
        margin-top: 0;
    }

    /* Feltene fyller ruta si. Bare feltene med krav-strek — stopp-radenes egne
       felt har sine bredder fra .stopp-tider. */
    .tur-rutenett .krav-felt .search-input {
        max-width: none;
    }

    /* Datoen i DatoKlokkeslettfelt har max-width 13rem i sin scopede CSS
       (0,4,0, lastes etter app.css). Den scopede regelen i Ordre.razor.css
       hadde samme vekt og sto senere, så datoen fylte ruta — 0,5,0 her gir
       ordren de samme breddene som før flyttingen (målt 1280 px). */
    .tur-rutenett .krav-felt .dato-tid .search-input.dato-tid-dato {
        max-width: none;
    }
}

.vurdering-pille {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--sp-2);
}

.vurdering-ok {
    background: #eafaf1;
    color: #16a34a;
}

.vurdering-advarsel {
    background: #fff8e6;
    color: #b45309;
}

.vurdering-brudd {
    background: #fef2f2;
    color: #b91c1c;
}

/* Vurdering som gjelder en tidligere versjon av planen — verken grønn
   eller rød, for gamle svar skal ikke berolige eller skremme. */
.vurdering-utdatert {
    background: #f4f4f5;
    color: #52525b;
}

/* Synlig begrunnelse under fane-stripen når e-postfanene er stengt, og
   varsler i e-postforhåndsvisningen — tekst, ikke tooltip: skal leses på
   mobil også. */
.faner-hint {
    margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
    font-size: 0.85rem;
    color: #b45309;
}

/* Broen i sjåførappens tomtilstand — trenger litt luft fra setningen foran. */
.tom-liste-bro {
    margin-left: var(--sp-2);
}

/* Sjåførkortet: pausemerke på stopp av typen Pause, og varsel når
   passasjertallet overstiger setene. */
.sjafor-pause-merke {
    margin-left: 0.3rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #eafaf1;
    color: #166534;
    font-size: 0.78rem;
    font-weight: 600;
}

.sjafor-plass-varsel {
    display: block;
    color: #b45309;
    font-weight: 600;
    font-size: 0.88rem;
}

/* «Fra henvendelsen: … + Opprett som kunde og velg» i ordreskjemaets
   Kunde-fane — samme rolige informasjonsspråk som kladd-varselet. */
.henvendelse-kunde-forslag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Kvitteringen etter lagring av ny ordre, med veien videre til tilbudet. */
.lagret-kvittering {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    background: #eafaf1;
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-weight: 600;
}

.vurdering-meldinger {
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-4);
    font-size: 0.88rem;
    color: #52525b;
}

.vurdering-meldinger li {
    margin-bottom: var(--sp-1);
}

/* «Velg flere»: handlingslinje og valgte rader i ordrelisten */
.bulk-linje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.bulk-teller {
    font-size: 0.9rem;
    color: #374151;
    margin-right: var(--sp-1);
}

.bulk-resultat {
    margin-bottom: var(--sp-3);
}

.ordre-rad.valgt {
    border-color: var(--mod-primar-markor);
    box-shadow: inset 3px 0 0 var(--mod-primar-markor);
}

.velg-ikon {
    color: var(--mod-primar-markor);
    flex-shrink: 0;
}

/* Prisestimat i det offentlige rute-med-pris-skjemaet */
.rute-estimat {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #f9fafb;
}

.rute-estimat-sum {
    font-size: 1.25rem;
    font-weight: 600;
}

.rute-estimat-grunnlag {
    margin-top: var(--sp-1);
    color: var(--mod-tekst-dus);
    font-size: 0.9rem;
}

.rute-estimat-forbehold {
    margin-top: var(--sp-1);
    color: var(--mod-tekst-dus);
    font-size: 0.85rem;
}

/* PRI-87: «Prøv prisen»-popupen (Priser → Priskategorier). Ark-reglene over
   gjelder; her bare det popupen trenger i tillegg. Bredere enn 560 px fordi
   turdetaljene (dager, stopp, klokkeslett) står i den — på mobil fyller arket
   skjermen som alle ark. */
.ark-panel.prisprove-panel {
    max-width: 720px;
}

/* Kort-listen: ett rad per priskort, navn og verdi på samme linje (også på 375 px). */
.prisprove-kortliste {
    margin: 0 0 var(--sp-4);
}

.prisprove-kortrad {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-3);
}

.prisprove-kortrad dt {
    flex: 0 0 7rem;
    margin: 0;
    font-weight: 600;
}

.prisprove-kortrad dd {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
}

.prisprove-kortrad.ikke-satt dd {
    color: var(--mod-tekst-dus);
}

.prisprove-tips {
    margin-top: var(--sp-4);
}

.prisprove-tipsliste {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.prisprove-tipsliste .btn-tekst {
    margin-top: var(--sp-1);
}

.prisprove-husket {
    margin: var(--sp-3) 0 0;
}

/* Selskapets logo øverst i det offentlige tilbudsskjemaet */
.kontakt-logo {
    display: block;
    max-width: 240px;
    max-height: 72px;
    margin-bottom: var(--sp-4);
    object-fit: contain;
    object-position: left;
}

/* KND-2: selskapets navn som tekst under logoen / over overskriften, også når
   firmaet ikke har logo. Lange navn brytes (overflow-wrap) — aldri sidescroll
   på 375 px. */
.kontakt-avsender {
    margin: 0 0 var(--sp-1);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #374151;
    overflow-wrap: anywhere;
}

.kontakt-logo + .kontakt-avsender {
    margin-top: calc(-1 * var(--sp-2));
}

.logo-felt {
    margin-top: var(--sp-5);
}

.logo-forhaands {
    display: inline-block;
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
    background: var(--mod-flate, #fff);
}

.logo-forhaands img {
    display: block;
    max-width: 260px;
    max-height: 80px;
    object-fit: contain;
}

/* Skjema-siden: forhåndsvisning av det offentlige skjemaet */
/* Delelenken er lang og skal kunne leses i sin helhet. .orgnr-rad kapper
   søkefelt til 14rem, som passer for et orgnummer, men skjulte halve URL-en. */
.orgnr-rad .skjema-lenke {
    max-width: 100%;
    flex: 1 1 20rem;
}

/* Embed-snuttene: kode som skal kopieres, ikke leses nøye. Vannrett rulling
   framfor ombrekking — en kodesnutt brutt over to linjer ser ut som to snutter. */
.embed-snutt {
    margin: 0 0 var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 8px;
    background: var(--mod-bg, #f8f9fb);
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.5;
}

.embed-snutt code {
    white-space: pre;
    color: var(--mod-tekst, #111827);
}

/* Fordelskortene på «Om skjemaene». Én kolonne på mobil, to når det er plass. */
.skjema-fordeler {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

@media (min-width: 40rem) {
    .skjema-fordeler {
        grid-template-columns: 1fr 1fr;
    }
}

.skjema-fordel {
    padding: var(--sp-3);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 12px;
    background: var(--mod-bg, #f8f9fb);
}

.skjema-fordel h3 {
    margin-top: 0;
    margin-bottom: var(--sp-1);
    font-size: 1rem;
}

.skjema-fordel p {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--mod-tekst-dus, #6b7280);
}

.skjema-forhaands {
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mod-flate, #fff);
}

.skjema-forhaands iframe {
    display: block;
    width: 100%;
    height: 1150px;
    border: none;
}

/* Bruker-detalj i plattform-kundekortet: lesevisning av opplysninger */
.bruker-verdi {
    margin: 0 0 var(--sp-2);
    font-size: 0.95rem;
}

/* Innloggingssiden: «noe skjer»-beskjed mens databasen ev. våkner */
.login-venter {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

/* Ordrelogg: enkel tidslinje i Logg-fanen */
.logg-liste {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
}

.logg-rad {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--mod-kant, #e5e7eb);
}

/* Siste rad ville ellers gi en løs strek mot kortkanten. */
.logg-rad:last-child {
    border-bottom: 0;
}

.logg-tid {
    font-size: 0.8rem;
    color: var(--mod-tekst-dus, #9ca3af);
}

.logg-tekst {
    font-size: 0.95rem;
}

/* Kladd-varsel på ordresiden (autolagret utkast) */
.kladd-varsel {
    overflow-wrap: anywhere; /* KND-22-kontrollen: en lang grunn uten mellomrom skal ikke presse stripa bred */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
    background-color: #fff8e6;
    border: 1px solid #f0dfae;
    border-radius: 0.5rem;
    color: #92400e;
    font-size: 0.9rem;
}

/* Kvittering etter at Google ble koblet til en konto som fantes fra før
   (GoogleKobletVarsel). Rolig grønn: dette er en bekreftelse på noe som gikk
   bra, ikke et varsel om noe som mangler — derfor ikke den gule kladd-stripa. */
.kvittering-stripe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
    background-color: #f1f8f3;
    border: 1px solid #cfe3d6;
    border-radius: 0.5rem;
    color: #1f5134;
    font-size: 0.9rem;
}

.kvittering-stripe svg {
    flex: none;
}

/* ===== Konfliktvarsel ved tildeling av buss/sjåfør =====
   Varsler om dobbeltbooking og for trange overganger. Oransje som standard,
   rød når ressursen faktisk er to steder samtidig. Varselet informerer — det
   sperrer ikke, så det skal være tydelig uten å rope. */
.konflikt-liste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.konflikt-varsel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background-color: #fff8e6;
    border: 1px solid #f0dfae;
    border-left: 4px solid #ea580c;
    border-radius: 0.5rem;
    color: #92400e;
    font-size: 0.9rem;
}

.konflikt-varsel.konflikt-alvorlig {
    background-color: #fef2f2;
    border-color: #fecaca;
    border-left-color: #dc2626;
    color: #991b1b;
}

.konflikt-ikon {
    flex: none;
    margin-top: 0.1rem;
}

/* min-width: 0 slik at lange adressenavn brytes i stedet for å skyve
   lenken ut av boksen på smal skjerm. */
.konflikt-tekst {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 12rem;
    min-width: 0;
}

/* «Fantes fra før»: en dempet merkelapp, ikke et nytt varsel. Den skal
   ta trykket AV linja — poenget er at brukeren ikke er skyld i denne —
   og må derfor ikke rope like høyt som konflikten selv. */
.konflikt-merke {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 0.05rem 0.4rem;
    border: 1px solid currentColor;
    border-radius: 0.7rem;
    font-size: 0.7rem;
    font-weight: 500;
    vertical-align: 1px;
    opacity: 0.75;
    white-space: nowrap;
}

.konflikt-tekst strong {
    font-weight: 600;
}

.konflikt-lenke {
    flex: none;
    white-space: nowrap;
    color: inherit;
    text-decoration: underline;
}

/* Lagring stoppet av en konflikt: samme språk som varslene, men som en egen
   boks øverst i skjemaet med de to veiene videre. */
.konflikt-bekreft {
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    background-color: #fffbf5;
    border: 1px solid #f0dfae;
    border-radius: 0.5rem;
}

.konflikt-bekreft h3 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: 1rem;
    color: #92400e;
}

.konflikt-bekreft .knapp-rad {
    margin-top: var(--sp-3);
}

/* Selskapet har valgt å sperre: rødt, ikke gult — her finnes ingen vei
   videre uten å endre noe, og fargen skal si det før man leser teksten. */
.konflikt-bekreft-sperret {
    background-color: #fef2f2;
    border-color: #fecaca;
}

.konflikt-bekreft-sperret h3 {
    color: #991b1b;
}

/* Søk-først-filtrering på ordresiden: søk + filterikon, typeahead, chips */
.sok-med-filter {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

/* Enklere søkefelt uten filterikon (Innboks, Til regnskap). .search-input sitt
   eget margin-bottom nulles ut inni .sok-felt (se under), så uten dette
   klistrer feltet seg rett på det som kommer etter — synlig nettopp når
   «Viser X av Y»-linjen ikke vises (ingen filtrering aktiv). */
.sok-rad {
    margin-bottom: var(--sp-3);
}

.sok-felt {
    position: relative;
    flex: 1;
    max-width: 28rem;
}

.sok-felt .search-input {
    width: 100%;
    margin-bottom: 0;
    padding-right: 2rem;
}

/* Skjul nettleserens innebygde clear-knapp på dette feltet — vi har vår egen
   (.sok-nullstill) med konsekvent utseende på tvers av nettlesere. */
.sok-input-egen-nullstill::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.sok-nullstill {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--mod-tekst-dus, #6b7280);
    cursor: pointer;
}

.sok-nullstill:hover {
    background: var(--mod-kant, #e5e7eb);
}

.filter-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--mod-tekst-dus, #6b7280);
    position: relative;
}

.filter-ikon.filter-aktiv {
    color: var(--mod-primar-markor);
    border-color: var(--mod-primar-markor);
}

.filter-ikon.filter-aktiv::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* UI-115 — markørfargen (≥ 3:1 mot hvitt), ikke den rå firmafargen */
    background: var(--mod-primar-markor);
}

.sok-forslag {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: #fff;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: var(--sp-2);
}

.sok-forslag-tittel {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mod-tekst-dus);
    padding: 0 var(--sp-2) var(--sp-1);
}

.sok-forslag-rad {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--sp-2);
    border: none;
    background: none;
    border-radius: 0.375rem;
    font-size: 0.95rem;
}

.sok-forslag-rad:hover {
    background: var(--mod-primar-tint, #fff7ed);
}

.sok-forslag-tom {
    display: block;
    padding: var(--sp-2);
    font-size: 0.9rem;
    color: var(--mod-tekst-dus, #9ca3af);
}

/* Valgt kunde i ordreskjemaet: lesevisning med ×-knapp for å bytte */
.kunde-valgt-rad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
    background: #fafafa;
    font-size: 0.95rem;
}

.chip-x-knapp {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-1);
    border: none;
    background: none;
    color: var(--mod-tekst-dus, #9ca3af);
    border-radius: 0.375rem;
}

.chip-x-knapp:hover {
    color: var(--mod-tekst, #18181b);
    background: var(--mod-primar-tint, #fff7ed);
}

.sok-bla-knapp {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--mod-tekst-dus, #6b7280);
    cursor: pointer;
}

.sok-bla-knapp:hover {
    background: var(--mod-kant, #e5e7eb);
}

.sok-bla-knapp.sok-bla-aktiv {
    color: var(--mod-primar-markor);
}

.sok-forslag-lang {
    max-height: 50vh;
    overflow-y: auto;
}

.filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: #f8fafc;
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.5rem;
}

.filter-panel .form-felt {
    margin-bottom: 0;
}

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

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--mod-primar-markor);
    border-radius: 999px;
    background: var(--mod-primar-tint, #fff7ed);
    color: var(--mod-tekst, #18181b);
    font-size: 0.85rem;
}

.filter-chip .chip-x {
    font-weight: 700;
    color: var(--mod-primar-mork);
}

.viser-teller {
    margin: 0 0 var(--sp-2);
}

/* Sidenavigasjon under ordrelista — store nok treffflater på mobil. */
.side-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin: var(--sp-3) 0 var(--sp-2);
}

.side-nav button {
    min-width: 6rem;
    min-height: 2.75rem;
}

.side-nav button:disabled {
    opacity: 0.45;
    cursor: default;
}

.side-teller {
    font-size: 0.9rem;
    color: var(--mod-tekst-svak, #52525b);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .sok-felt {
        max-width: none;
    }

    .filter-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 3.5rem;
        z-index: 40;
        border-radius: 0.75rem 0.75rem 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
        margin-bottom: 0;
    }
}

/* ===================== Kjøreplan =====================
   Én rad per buss per dag. Radene er brede av natur, så tidslinjen får wrappe
   fritt i stedet for å skrolle vannrett — på mobil blir brikkene liggende
   under hverandre, og det er fortsatt lesbart fordi hver brikke bærer sitt
   eget klokkeslett. */
.kjoreplan-topp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

/* UI-16: raden er 466 px bred og sprengte en 375 px-skjerm. Uten wrap arvet
   .bunnmeny (position: fixed) bredden, så «Mer» — inngangen til Kunder,
   Partnere, Priser, Innstillinger, Hjelp og Logg ut — lå utenfor skjermen og
   kunne ikke nås, mens siden nektet å rulle sidelengs. Målt tre ganger i
   levende DOM (25.08 av REV-3G, etterprøvd 25.08 og 28.08 av mastertråden):
   scrollWidth 490 → 375 av denne ene egenskapen. */
.kjoreplan-dato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.kjoreplan-dato input[type=date] {
    max-width: 11rem;
}

/* Bare forbokstaven — «capitalize» ville gjort «10. August 2026» av
   månedsnavnet, som er feil på norsk. */
.kjoreplan-ukedag::first-letter {
    text-transform: uppercase;
}

.kjoreplan-ukedag {
    color: var(--mod-tekst-svak, #52525b);
}

.kjoreplan-oppsummering {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    background-color: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant, #e4e4e7);
    border-radius: 0.5rem;
}

.kjoreplan-tall {
    display: flex;
    flex-direction: column;
    min-width: 8rem;
}

.kjoreplan-tall-verdi {
    font-size: 1.35rem;
    font-weight: 600;
}

.kjoreplan-tall-navn {
    font-size: 0.85rem;
    color: var(--mod-tekst-svak, #52525b);
}

/* Tidsakse: én rad per buss/sjåfør, hele døgnet fra venstre til høyre.
   Sporet er posisjonskontekst, og hver stolpe plasseres med inline
   left/width i prosent av døgnet — da er mellomrommene mellom oppdragene
   bokstavelig talt hullene i raden, som er hele poenget med visningen. */
/* Samme flate som .kjoreplan-oppsummering og .kp-optimaliser over den —
   uten dette var tidslinjen den ene boksen på siden som manglet kort-
   behandlingen, og lå rett på sidebakgrunnen mens alt rundt var hvitt. */
.kp-tavle {
    overflow-x: auto;
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    background-color: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant, #e4e4e7);
    border-radius: 0.5rem;
}

/* Under denne bredden blir en time så smal at ingenting er lesbart, så
   tavla får skrolle i stedet for å klemmes flat. */
.kp-tavle-bredde {
    min-width: 44rem;
}

.kp-rad {
    display: flex;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    border-bottom: 1px solid var(--mod-kant, #e4e4e7);
}

.kp-rad-tom {
    opacity: 0.55;
}

.kp-hode {
    border-bottom: 2px solid var(--mod-kant, #e4e4e7);
    padding-bottom: var(--sp-2);
}

/* KND-92: navnekolonnen står fast når tavla skrolles sidelengs. Tavla er
   minst 44rem, altså dobbelt så bred som en telefon — før skrollet navnet
   ut med resten, og et lite sveip ga «ercedes spr…» og regnr uten første
   siffer (Tage, iPhone 01.10.2026; gjenskapt med scrollLeft 24 på 390 px).
   Bakgrunnen dekker stolpene som glir under; skyggen til venstre dekker
   tavlas polstring (sticky stopper innenfor den), så ingenting stikker ut
   der heller. Negativ marg + like stor polstring loddrett: kolonnen dekker
   hele radens høyde (også radens polstring, der en farget rad ellers ville
   stukket fram over og under), uten at innholdet flytter seg. Uten
   skrolling — desktop — er alt dette usynlig. Over stolpenes z-index (≤ 2). */
.kp-navn {
    --kp-navn-flate: var(--mod-flate, #fff);
    flex: 0 0 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    margin-block: calc(-1 * var(--sp-1));
    padding-block: var(--sp-1);
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: var(--kp-navn-flate);
    box-shadow: calc(-1 * var(--sp-4)) 0 0 0 var(--mod-flate, #fff);
}

.kp-navn strong {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kp-navn small {
    font-size: 0.75rem;
    color: var(--mod-tekst-svak, #52525b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KND-92: lenka i «Uten buss»-raden («1 oppdrag å tildele →») er en knapp,
   og en knapp er ett udelelig stykke — ellipsis på <small> nådde den ikke,
   så på 7rem ble pila klippet midt i. Som blokk får den sin egen ellipsis. */
.kp-navn small > .kp-hopp {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Høyden følger antall baner: en buss uten kollisjoner har én bane og
   ser ut som før, mens en dobbeltbooket rad vokser — selve høydeøkningen
   er dermed i seg selv et varsel. */
.kp-spor {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: calc(var(--baner, 1) * 2rem);
}

.kp-hode .kp-spor {
    height: 1.1rem;
}

/* Timetallene henger på sin egen venstrekant, ikke i et rutenett — da
   stemmer de nøyaktig med stolpene under, som bruker samme prosentskala. */
.kp-time {
    position: absolute;
    top: 0;
    font-size: 0.7rem;
    color: var(--mod-tekst-svak, #52525b);
    transform: translateX(-50%);
}

.kp-strek {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--mod-kant, #e4e4e7);
}

.kp-bar {
    position: absolute;
    top: calc(var(--bane, 0) * 2rem + 0.25rem);
    height: 1.5rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    text-decoration: none;
    /* Minstebredde så et kort oppdrag ikke blir usynlig. */
    min-width: 0.35rem;
}

.kp-bar-tekst {
    padding: 0 0.3rem;
    white-space: nowrap;
    /* Over statusskraveringen, som er et absolutt posisjonert ::before. */
    position: relative;
    z-index: 1;
}

.kp-bar-oppdrag {
    background-color: var(--merkevarefarge);
    color: var(--merkevarefarge-tekst, #fff);
    /* Sjåførfargen kan være hva som helst, også nesten hvit — og en nesten
       hvit stolpe på hvit tavle er en usynlig stolpe. Teksten er fortsatt
       lesbar (Sjaforfarger.Tekstfarge snur den), men SELVE stolpen forsvant.
       Denne hårtynne ringen gir den en kant uten å synes på de mørke. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.kp-bar-oppdrag:hover {
    filter: brightness(1.1);
}

/* Status skiller planlagt fra bekreftet fra kjørt. Fra DBT-B2 ligger status
   OPPÅ sjåførfargen i stedet for å erstatte den: stolpens flate tilhører
   sjåføren, og «hvem HAR kjørt» var halve bestillingen — en fullført tur som
   ble grå svarte på det motsatte spørsmålet. */
.kp-status-planlagt {
    opacity: 0.55;
}

/* Bekreftet: full farge og en prikk i tekstfargen, altså alltid i kontrast
   mot stolpen uansett hvilken farge sjåføren har.

   Prikken ligger i FLYTEN, foran ordrenummeret, og ikke absolutt til høyre.
   To ting gikk galt med den absolutte varianten: på en stolpe der teksten
   fylte bredden malte nummeret seg oppå prikken (teksten må ligge over
   skraveringen, og da lå den også over prikken), og på en fast rute med
   20-minutters avganger var stolpen 10 px — prikken spiste hele
   sjåførfargen. I flyten skyver den bare teksten litt, og på en smal stolpe
   klippes den sammen med alt annet i stedet for å legge seg over.

   UI-150 (KND-112, Madelin 06.10.2026): 0,38 rem og 90 % dekning var for lite,
   og med 0,3 rem luft foran trengte prikken 11 px stolpe for å synes helt —
   på smale stolper ble den klippet bort. Nå 8 px og full dekning (samme som
   faneprikken, designsystemet 6.5). Stolpen er en størrelsescontainer, så
   prikken kan måle den: på en stolpe smalere enn ~14 px står prikken midt i,
   og under 12 px krymper den så det alltid er sjåførfarge rundt (den gamle
   «prikken spiste hele fargen»-feilen kommer ikke tilbake). */
.kp-status-bekreftet::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.3rem;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 1;
    flex: none;
}

@supports (width: 1cqw) {
    .kp-status-bekreftet {
        container-type: inline-size;
    }

    .kp-status-bekreftet::before {
        --kp-bekreftet-prikk: min(0.5rem, max(0.25rem, 100cqw - 0.25rem));
        width: var(--kp-bekreftet-prikk);
        height: var(--kp-bekreftet-prikk);
        margin-left: clamp(0px, (100cqw - var(--kp-bekreftet-prikk)) / 2, 0.3rem);
    }
}

/* Kjørt: fargen står, men flaten skraveres. Stripene tegnes i currentColor —
   samme triks som prikken — så de er synlige både på en nesten svart og en
   nesten hvit sjåførfarge. Prøvd og forkastet: hvite striper (usynlige på
   lyse farger), lavere metning (leses som «planlagt», ikke som «ferdig»). */
.kp-status-fullfort::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        135deg,
        currentColor 0 1px,
        transparent 1px 5px
    );
}

/* KND-97: sendt til regnskap (Ordre.SalgsgrunnlagSendtTid). Motsatt vei av
   kjørt (45° mot 135°), samme currentColor/tetthet. BEGGE pseudo-elementene
   på stolpen er opptatt (::before = kjørt over, ::after = på vei under), så
   dette er et EKSTRA background-image-lag på selve stolpen i stedet for et
   tredje pseudo-element — det tegner seg oppå kp-bar-oppdrag sin
   background-color uten å flytte prikken eller på vei-stripa.
   color-mix erstatter ::before sin opacity: 0.3, for et eget
   background-image-lag kan ikke senke bare SIN opacity uten å ta teksten
   med seg. Kjørt + sendt = kryss: begge lagene står samtidig. */
.kp-status-sendt {
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, currentColor 30%, transparent) 0 1px,
        transparent 1px 5px
    );
}

/* «På vei» (DBT-B10): sjåføren har meldt at hen er underveis. Et MERKE OPPÅ
   stolpen, ikke en ny statusfarge — ordren er fortsatt bekreftet mens bussen
   ruller, og StatusKlasse er urørt. Samme grep som bekreftet-prikken og
   skraveringen over.

   ::after og ikke ::before: begge ::before-ene er opptatt av status, og de to
   uttrykkene skal kunne stå samtidig (en bekreftet tur som er på vei har både
   prikk og stripe). Stripa ligger i venstrekanten fordi det er der stolpen
   BEGYNNER — den leses som «denne har startet». currentColor, samme triks som
   de andre merkene: synlig på både nesten svart og nesten hvit sjåførfarge. */
.kp-bar-paavei::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.25rem;
    z-index: 2;
    background-color: currentColor;
    pointer-events: none;
}

.kp-prikk-paavei {
    background-color: transparent;
    border-left: 3px solid var(--mod-tekst, #18181b);
    border-radius: 0;
}

/* KND-128 (Tage, HKB 15.10.2026): har sjåføren godkjent oppdraget? Grønn hake
   eller gult timeglass, i statusparets bakgrunn og tekst (designsystemet 3.3) —
   en egen liten rund flate, så merket leses likt på hvilken som helst
   sjåførfarge. Ligger i flyten ETTER nummeret med margin-left: auto (stolpens
   høyre ende): nummeret står der det sto, og på en smal stolpe klippes merket
   av stolpens overflow i stedet for å skyve teksten ut (KND-92). */
.kp-sjaforsvar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.85rem;
    height: 0.85rem;
    margin: 0 0.2rem 0 auto;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.kp-sjaforsvar-godkjent {
    background-color: var(--mod-gronn-bg);
    color: var(--mod-gronn-tekst);
}

.kp-sjaforsvar-venter {
    background-color: var(--mod-gul-bg);
    color: var(--mod-gul-tekst);
}

.kp-tegnforklaring .kp-sjaforsvar {
    margin: 0;
}

/* Sjåførnøkkelen under tavla: hvem som kjører i perioden, i sin farge, med
   antall dager. Flyter i flere linjer på mobil. */
.kp-sjafornokkel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--mod-tekst-svak, #52525b);
}

.kp-sjafornokkel-rad {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.kp-sjafornokkel-rad b {
    font-weight: 600;
    color: var(--mod-tekst, #18181b);
}

/* Dødtid tegnes som et hull med ramme, ikke som en flate: øyet skal lese
   det som fravær av arbeid. */
.kp-bar-tom {
    background-color: transparent;
    border: 1px dashed var(--mod-kant, #a1a1aa);
    color: var(--mod-tekst-svak, #52525b);
}

.kp-bar-garasje {
    background-color: var(--mod-kant, #d4d4d8);
    top: calc(var(--bane, 0) * 2rem + 0.7rem);
    height: 0.6rem;
}

.kp-bar-feil {
    background-color: #fef2f2;
    border: 1px solid #dc2626;
    color: #991b1b;
}

/* Et dobbeltbooket oppdrag beholder sin egen statusfarge — det er ikke
   oppdraget som er feil, det er at to av dem deler buss. Derfor et rødt
   omriss oppå, ikke en ny bakgrunn. */
.kp-bar-kollisjon {
    outline: 2px solid #dc2626;
    outline-offset: -2px;
}

/* Oppdrag uten buss/sjåfør: rav, ikke rødt — det brenner ikke, men noen må
   gjøre noe. Stiplet kant sier «ikke landet enda», samme språk som dødtiden. */
.kp-rad-utildelt {
    background-color: #fffbeb;
}

/* Den faste navnekolonnen (KND-92) har radens farge, ikke tavlas. */
.kp-rad-utildelt .kp-navn {
    --kp-navn-flate: #fffbeb;
}

.kp-rad-utildelt .kp-navn-varsel {
    color: #b45309;
}

.kp-rad-utildelt .kp-navn small {
    color: #92400e;
    font-weight: 600;
}

/* Klasseparet og ikke bare .kp-bar-utildelt: stolpene er <a>-elementer, og
   lenkefargen i temaet slår en enkeltklasse. Teksten sto i merkevarefargen på
   ravgul bakgrunn — synlig, men ikke det språket resten av «mangler»-uttrykket
   snakker. */
.kp-bar.kp-bar-utildelt {
    background-color: #fef3c7;
    border: 1px dashed #d97706;
    color: #92400e;
    box-shadow: none;
}

.kp-prikk-utildelt {
    background-color: #fef3c7;
    border: 1px solid #d97706;
}

/* Oppdrag med flere passasjerer enn bussen har seter — samme regel som gir
   rødt varsel i ordreskjemaet, endelig synlig også på tavla. Stiplet rav
   omriss, tydelig forskjellig fra dobbeltbookingens heltrukne røde. */
.kp-bar-plassbrudd {
    outline: 2px dashed #d97706;
    outline-offset: -2px;
}

.kp-prikk-plassbrudd {
    background-color: transparent;
    border: 2px dashed #d97706;
}

.kjoreplan-tall-utildelt .kjoreplan-tall-verdi,
.kjoreplan-tall-utildelt .kjoreplan-tall-navn {
    color: #b45309;
}

.kp-detalj-utildelt .kp-detalj-navn,
.kp-detalj-utildelt span {
    color: #92400e;
}

.kp-rad-kollisjon {
    background-color: #fef2f2;
}

.kp-rad-kollisjon .kp-navn {
    --kp-navn-flate: #fef2f2;
}

.kp-navn-varsel {
    color: #dc2626;
    vertical-align: -2px;
    margin-right: 0.15rem;
}

/* KND-47: sjåfør som ikke har logget inn. Oransje som konfliktvarselet,
   ikke rødt som en dobbeltbooking: turen er lagret og i orden, men
   sjåføren ser den ikke ennå. */
.kp-aktivering-ikon {
    color: #ea580c;
    vertical-align: -2px;
    margin-right: 0.15rem;
}

.kp-navn small.kp-navn-aktivering {
    color: #b45309;
    font-weight: 600;
}

.kp-detalj-aktivering {
    flex: 1 1 16rem;
    color: #92400e;
}

/* Samme trekant på ordrelista, ved merket bak sjåførnavnet. */
.aktiveringsmerke-ikon {
    vertical-align: -2px;
}

/* KND-74: kommentarmerket på ordrelista bærer synlig tekst, ikke bare title —
   på mobil finnes ingen hover. Teksten er merkets egen aria-label (står i
   Ordre.razor), så den bor ett sted. Dus blå som kommentaren i Sjåfør-fanen. */
.sjaforkommentar-merke {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #1e4e8c;
    font-weight: 600;
    vertical-align: -2px;
}

.sjaforkommentar-merke::after {
    content: attr(aria-label);
}

.kp-rad-kollisjon .kp-navn small {
    color: #991b1b;
    font-weight: 600;
}

/* Broen fra beleggsvisningen til dagen. Ligger der undertittelen ellers
   står, altså på plassen der «Dobbeltbooket» sto som død tekst — samme
   sted, samme farge, men nå med en handling og en pil som sier det. */
.kp-navn-rett {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: #991b1b;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.kp-navn-rett:hover,
.kp-navn-rett:focus-visible {
    text-decoration: underline;
}

/* Telleren i oppsummeringsstripen når den er en vei videre og ikke bare
   et tall. Beholder tallet sitt utseende — det er samme informasjon. */
.kjoreplan-tall-knapp {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kjoreplan-tall-knapp:hover .kjoreplan-tall-navn,
.kjoreplan-tall-knapp:focus-visible .kjoreplan-tall-navn {
    text-decoration: underline;
}

/* Tekst som også er en vei videre: tallet som forteller at noe mangler, og
   datoen i tidslinjehodet, åpner dagen de peker på. Knappen arver skrift og
   farge fra teksten den erstatter, slik at raden ser uendret ut for den som
   ikke trenger snarveien — understrekingen kommer først på hover/fokus.
   Samme idé som .kjoreplan-tall-knapp, men for tekst inne i en rad. */
.kp-hopp {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.kp-hopp:hover,
.kp-hopp:focus-visible {
    text-decoration: underline;
}

/* Datoen får et rødt merke når det brenner den dagen, slik at «14 d» kan
   leses uten å skanne hver bussrad. */
.kp-dagmerke-feil {
    color: #991b1b;
    font-weight: 600;
}

.kp-dagmerke-feil::after {
    content: "";
    display: block;
    width: 0.35rem;
    height: 0.35rem;
    margin: 0.1rem auto 0;
    border-radius: 50%;
    background-color: #dc2626;
}

.kp-tegnforklaring,
.kp-detaljer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    font-size: 0.8rem;
    color: var(--mod-tekst-svak, #52525b);
    margin-bottom: var(--sp-3);
}

.kp-tegnforklaring span {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.kp-prikk {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.2rem;
    display: inline-block;
}

.kp-prikk-oppdrag { background-color: var(--merkevarefarge); }
.kp-prikk-tom { border: 1px dashed var(--mod-kant, #a1a1aa); }
.kp-prikk-garasje { background-color: var(--mod-kant, #d4d4d8); }
.kp-prikk-feil { background-color: #fef2f2; border: 1px solid #dc2626; }

/* UI-150: samme 8 px runde prikk som på stolpen, ikke en 0,85 rem-rute — det
   er den prikken forklaringen forklarer. Sidemargen holder teksten på linje
   med de andre rutene i forklaringen. */
.kp-prikk-bekreftet {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.175rem;
    border-radius: 50%;
    background-color: var(--mod-tekst-svak, #52525b);
}

.kp-prikk-kjort {
    background-color: var(--mod-kant, #d4d4d8);
    background-image: repeating-linear-gradient(
        135deg,
        var(--mod-tekst-svak, #52525b) 0 1px,
        transparent 1px 4px
    );
}

/* KND-97: tegnforklaringens prikk for «sendt til regnskap» — samme oppskrift
   som kp-prikk-kjort, men motsatt vei (45°), slik stolpen selv gjør det. */
.kp-prikk-sendt {
    background-color: var(--mod-kant, #d4d4d8);
    background-image: repeating-linear-gradient(
        45deg,
        var(--mod-tekst-svak, #52525b) 0 1px,
        transparent 1px 4px
    );
}


.kp-detaljer {
    flex-direction: column;
    gap: var(--sp-1);
}

.kp-detalj-rad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
}

.kp-detalj-navn {
    font-weight: 600;
    color: var(--mod-tekst, inherit);
    flex: 0 0 10rem;
}

@media (max-width: 640px) {
    .kp-navn {
        flex-basis: 7rem;
    }

    /* Annenhver time faller bort — 24 tall på 300 px blir grøt. */
    .kp-time-odde {
        display: none;
    }
}

/* ===================== Foreslå beste buss =====================
   Rader og ikke kort: forslagene skal sammenlignes loddrett på ett tall, og
   da må tallene stå under hverandre. */
.bussforslag {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin: var(--sp-2) 0 var(--sp-3);
}

.bussforslag-rad {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) minmax(8rem, 14rem) 1fr;
    gap: var(--sp-1) var(--sp-3);
    align-items: baseline;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    background-color: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant, #e4e4e7);
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
    min-height: 2.75rem;
}

.bussforslag-rad:hover {
    border-color: var(--mod-primar-markor);
}

.bussforslag-rad.valgt {
    border-color: var(--mod-primar-markor);
    background-color: var(--mod-primar-tint, #fff7ed);
}

.bussforslag-navn {
    font-weight: 600;
}

.bussforslag-tall {
    white-space: nowrap;
}

.bussforslag-advarsel {
    color: #991b1b;
}

.bussforslag-grunn {
    color: var(--mod-tekst-svak, #52525b);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .bussforslag-rad {
        grid-template-columns: 1fr;
    }
}

/* ===================== Kjøreoptimalisering =====================
   Egen seksjon over tavla, og to nye barklasser INNI tavla (forslaget
   tegnes oppå dagens plan, ikke i en egen visning — det er poenget: du skal
   se hva som endres i samme bilde som det som er). */
.kp-optimaliser {
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    background-color: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant, #e4e4e7);
    border-radius: 0.5rem;
}

.kp-optimaliser-topp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.kp-optimaliser-topp h2 {
    margin: 0;
    margin-right: auto;
    font-size: 1.05rem;
}

/* ---- UI-14: veiviserstripa øverst i panelet ----
   En smal stripe, ikke et kort: dagen under skal se ut og virke som ellers,
   og stripa er bare «hvor er jeg, og hvor går jeg videre». Egen bakgrunn og
   en tydelig underkant slik at den leses som en ramme rundt dagen framfor en
   ny melding inne i panelet. */
.kp-veiviser {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background-color: #f4f4f5;
    border-bottom: 1px solid var(--mod-kant, #e4e4e7);
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 0.9rem;
}

.kp-veiviser-tekst {
    margin-right: auto;
    color: var(--mod-tekst, inherit);
}

/* Oppsummeringen er sluttbildet — den skal veie mer enn stripa underveis. */
.kp-veiviser-ferdig .kp-veiviser-tekst {
    font-weight: 600;
}

.kp-veiviser-sporsmal {
    margin-right: 0;
}

/* Startknappen står i .kjoreplan-oppsummering, som er en flex-rad av
   tallkort — uten dette strækk knappen seg over hele korthøyden. */
.kjoreplan-veiviser {
    align-self: center;
}

/* Restfunn fra UI-14 trinn 1b: datoknappene i tidslinjehodet var målt til
   76 × 24 px på 375 px — brukbare, men i minste laget for en tomme. De får
   32 px høyde på smal skjerm, og HODETS spor vokser like mye: knappene er
   absolutt posisjonert, så uten den høyden ville de lagt seg oppå første rad
   under. Bare periodevisningen (.kp-hode-dager): dagsvisningens timetall er
   ikke knapper og skal ikke ta plass de ikke trenger. */
/* KND-92: ukedagen over datoen — merket blir halvparten så bredt («man.» /
   «09.11» ≈ 40 px mot «man. 09.11» ≈ 77 px), så merkene har god luft på
   390 px også med iPhonens bredere skrift. Sporet er derfor 2.4rem og ikke
   2rem: to linjer pluss kollisjonsprikken. */
@media (max-width: 640px) {
    .kp-hode-dager .kp-spor {
        height: 2.4rem;
    }

    .kp-hode-dager .kp-dagmerke.kp-hopp {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        line-height: 1.15;
    }
}

/* KND-92: tynningen styres av sporets FAKTISKE bredde, ikke av antall dager
   alene. Siden skriver opptil 14 datoer (14 d: alle; 30 d: hver 3.), og de
   som faller bort når det bare er plass til 7, har klassen
   kp-dagmerke-tynnes-<antall skrevne>. De skjules når sporet er smalere enn
   antall × 80 px (Kjoreplanvisning.PxPerDagmerke — målt: «man. 09.11» er
   ≈ 77 px). Container-spørring og ikke media query: sporets bredde avhenger
   av sidemenyen og navnekolonnen, ikke bare av vinduet. Mobil (spor ≈ 580 px)
   faller alltid under, og får maks 7 som før.
   visibility og ikke display: den røde kollisjonsprikken (::after) skal stå
   igjen på dagen, slik den gjør på dagene som aldri skrives; pointer-events
   og visibility gjør knappen uklikkbar og ufokuserbar mens den er skjult. */
.kp-hode-dager .kp-spor {
    container: kp-dager / inline-size;
}

@container kp-dager (max-width: 639px) {
    .kp-dagmerke-tynnes-8 { visibility: hidden; pointer-events: none; }
    .kp-dagmerke-tynnes-8::after { visibility: visible; }
}
@container kp-dager (max-width: 719px) {
    .kp-dagmerke-tynnes-9 { visibility: hidden; pointer-events: none; }
    .kp-dagmerke-tynnes-9::after { visibility: visible; }
}
@container kp-dager (max-width: 799px) {
    .kp-dagmerke-tynnes-10 { visibility: hidden; pointer-events: none; }
    .kp-dagmerke-tynnes-10::after { visibility: visible; }
}
@container kp-dager (max-width: 879px) {
    .kp-dagmerke-tynnes-11 { visibility: hidden; pointer-events: none; }
    .kp-dagmerke-tynnes-11::after { visibility: visible; }
}
@container kp-dager (max-width: 959px) {
    .kp-dagmerke-tynnes-12 { visibility: hidden; pointer-events: none; }
    .kp-dagmerke-tynnes-12::after { visibility: visible; }
}
@container kp-dager (max-width: 1039px) {
    .kp-dagmerke-tynnes-13 { visibility: hidden; pointer-events: none; }
    .kp-dagmerke-tynnes-13::after { visibility: visible; }
}
@container kp-dager (max-width: 1119px) {
    .kp-dagmerke-tynnes-14 { visibility: hidden; pointer-events: none; }
    .kp-dagmerke-tynnes-14::after { visibility: visible; }
}

.kp-trekkliste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin: var(--sp-3) 0;
}

.kp-trekk-rad {
    display: grid;
    grid-template-columns: auto minmax(8rem, auto) minmax(10rem, auto) 1fr;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background-color: var(--mod-flate, #fafafa);
    border: 1px solid var(--mod-kant, #e4e4e7);
    border-radius: 0.4rem;
    font-size: 0.85rem;
}

.kp-trekk-avvis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--mod-kant, #e4e4e7);
    border-radius: 50%;
    background: none;
    color: var(--mod-tekst-svak, #52525b);
    cursor: pointer;
}

.kp-trekk-avvis:hover {
    border-color: #dc2626;
    color: #dc2626;
}

/* Utildelte-lista etter optimalisering gjenbruker trekk-radene, men som
   lenker rett til ordren. */
.kp-utildelte-liste {
    margin-top: var(--sp-3);
}

a.kp-trekk-rad {
    text-decoration: none;
    color: inherit;
}

a.kp-trekk-rad:hover {
    background-color: #f4f4f5;
}

.kp-trekk-ordre {
    white-space: nowrap;
}

.kp-trekk-flytt {
    white-space: nowrap;
}

.kp-trekk-grunn {
    color: var(--mod-tekst-svak, #52525b);
    overflow-wrap: anywhere;
}

/* Dobbeltbookinger motoren ikke har lov til å rydde. Liste og ikke løpende
   tekst, fordi hver linje er én sak admin må ta for hånd — én ordre å åpne,
   én buss å bytte. Rødt av samme grunn som .feilmelding over den: dette er
   noe som står igjen, ikke noe som er ordnet. */
.kp-fredet {
    margin: var(--sp-2) 0;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: #991b1b;
}

.kp-fredet li {
    margin-bottom: var(--sp-1);
    overflow-wrap: anywhere;
}

/* Forslagsstolpene i selve tidsaksen: rammer, ikke flater — de skal lese
   som en anmerkning oppå dagens plan, ikke konkurrere med de ekte
   stolpene om oppmerksomheten. */
.kp-bar-flytt-ut {
    top: calc(var(--bane, 0) * 2rem);
    height: 2rem;
    background-color: transparent;
    border: 2px dashed #dc2626;
    color: #991b1b;
    z-index: 2;
}

.kp-bar-flytt-inn {
    top: calc(var(--bane, 0) * 2rem);
    height: 2rem;
    background-color: transparent;
    border: 2px dashed #16a34a;
    color: #15803d;
    z-index: 2;
}

.kp-prikk-flytt-ut { border: 2px dashed #dc2626; }
.kp-prikk-flytt-inn { border: 2px dashed #16a34a; }

@media (max-width: 640px) {
    .kp-trekk-rad {
        grid-template-columns: auto 1fr;
    }

    .kp-trekk-flytt,
    .kp-trekk-grunn {
        grid-column: 2;
    }
}

/* Konflikttelleren i oppsummeringsstripen og brannslukker-knappen. Rødt
   brukes bare når noe faktisk er galt — står tellerne grønne, finnes de
   ikke, og da er fraværet i seg selv informasjonen. */
.kjoreplan-tall-feil .kjoreplan-tall-verdi,
.kjoreplan-tall-feil .kjoreplan-tall-navn {
    color: #991b1b;
}

.kp-knapp-feil {
    background-color: #dc2626;
    border-color: #dc2626;
}

.kp-knapp-feil:hover:not(:disabled) {
    background-color: #b91c1c;
    border-color: #b91c1c;
}

/* Periodevelger (1/3/7/14 d) og døgnmerker i beleggsvisningen. */
/* Samme pilleform som belegg-kortet på Oversikt — bryterne der inne er
   allerede stylet av .belegg-bryter, så det er bare rammen som mangler. */
.kjoreplan-perioder {
    display: inline-flex;
    gap: var(--sp-1);
    padding: var(--sp-1);
    background-color: #f4f4f5;
    border-radius: 0.5rem;
}

/* Døgnmerket sentreres over sitt eget døgn, i motsetning til timetallene
   som henger på timens venstrekant. */
/* Ingen text-transform: «man.», «tir.» er korrekt norsk med liten
   forbokstav, og capitalize gjorde bare den første ulik de andre. */
.kp-dagmerke {
    transform: translateX(-50%);
    white-space: nowrap;
}

.kp-idag {
    color: var(--mod-primar-mork);
    font-weight: 700;
}

/* ============================================================
   Hjelpegjennomgang steg 6 — sjåføren og onboardingen (K3/V2/V3)
   ============================================================ */

/* Forsidens ingress (V2): én rolig setning under overskriften. */
.side-ingress {
    margin: -4px 0 var(--sp-4);
    color: var(--mod-tekst-dus);
    font-size: 0.9rem;
}

/* Beleggsrutenettets overskrift og forklaring (V2). */
.belegg-tittel {
    margin: 0 0 2px;
    font-size: 1.05rem;
}

.belegg-tittel-hjelp {
    margin: 0 0 var(--sp-3);
}

.belegg-tom {
    margin: var(--sp-3) 0 var(--sp-2);
    color: var(--mod-tekst-dus);
}

/* Sjåførens førstegangsforklaring på Mine kjøringer (K3). Dus, ikke et
   varsel — den skal ønske velkommen, ikke rope. */
.sjafor-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* <=480 px gjor appens mobilkonvensjon .btn-avbryt 100 % bred - da skal
       knappen bryte ned pa egen linje, ikke sprenge raden vannrett. */
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--mod-primar-tint, #fff7ed);
    border-radius: 0.5rem;
}

.sjafor-intro p {
    margin: 0;
    font-size: 0.9rem;
}

.sjafor-intro .btn-avbryt {
    flex-shrink: 0;
    margin: 0;
}

/* Sjåførens bekreft/avvis på raden: knapper MED tekst (K3) — title-tooltips
   vises ikke på touch, og sjåføren ER mobilbrukeren. Pilleform med farget
   ramme så de tåler å stå i en tett rad uten å ligne på statusmerker. */
.kjoring-svar-knapp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.kjoring-svar-bekreft {
    color: #2f9e44;
    border-color: #b6dfc0;
    background-color: #f2fbf5;
}

.kjoring-svar-avvis {
    color: #c0504d;
    border-color: #e6c6c5;
    background-color: #fdf6f6;
}

.kjoring-svar-bekreft:hover,
.kjoring-svar-bekreft:focus-visible {
    background-color: #e3f6e9;
    outline: none;
}

.kjoring-svar-avvis:hover,
.kjoring-svar-avvis:focus-visible {
    background-color: #f9ebeb;
    outline: none;
}

/* «På vei» (DBT-B10). Egen, større pille enn bekreft/avvis: dette er knappen
   som trykkes med hansker på en holdeplass, ofte i bevegelse. 44 px er
   minsteflaten en tommel treffer pålitelig — de to andre er sjeldnere og
   trykkes sittende. Blå og ikke grønn: grønt er «bekreftet», og to grønne
   piller ved siden av hverandre ville sagt det samme to ganger. */
.kjoring-svar-paavei {
    color: var(--mod-primar-mork, #9a3412);
    border-color: #bcd7f0;
    background-color: #f2f8fd;
    padding: 10px 14px;
    min-height: 44px;
    font-size: 0.82rem;
}

.kjoring-svar-paavei:hover,
.kjoring-svar-paavei:focus-visible {
    background-color: #e4f0fb;
    outline: none;
}

.kjoring-svar-paavei[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* Stempelet — samme uttrykk i sjåførappen og i ordrelista, så det leses som
   én ting. Står som `paavei-merke` alene i sjåførappen og sammen med
   `status-merke` i ordrelista; derfor må reglene her tåle begge. */
.paavei-merke {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tekst-hjelp);
    font-weight: 600;
    color: var(--mod-bla-tekst);
    background-color: var(--mod-bla-bg);
    border: 1px solid var(--mod-bla);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* Rekkefølgen betyr noe: .status-merke setter farge og bakgrunn på egen hånd,
   og lista bruker begge klassene. Denne må stå etter for å vinne. */
.status-merke.paavei-merke {
    color: var(--mod-bla-tekst);
    background-color: var(--mod-bla-bg);
}

/* Raden inne i det utvidede sjåførkortet. Egen rad og ikke inne i
   .kjoring-knapper: den store knappen skal ikke stå skulder mot skulder med
   «Kan ikke kjøre». */
.paavei-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-3);
}

.paavei-storknapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

/* SJF-13: «Start tur»/«Avslutt tur» når firmaet krever start og slutt —
   minst 48 px (UI-73), sjåføren trykker med hansker. */
.startslutt-knapp {
    min-height: 48px;
    font-weight: 600;
}

/* Ordrekortets lesevisning — booking ser stempelet, men kan ikke sette det. */
.paavei-linje {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #1b5fa8;
    font-weight: 600;
}

@media (max-width: 480px) {
    /* Full bredde på mobil: knappen er hele poenget med kortet der. */
    .paavei-storknapp {
        width: 100%;
        justify-content: center;
    }
}

/* «Kom i gang»-kortet (V3): steg med avledede haker. */
.komigang-kort {
    margin-bottom: 16px;
}

.komigang-topp {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
}

.komigang-topp h2 {
    margin: 0;
    font-size: 1.05rem;
}

.komigang-steg {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
}

/* UI-109: var flex med flex-wrap: wrap. Wrap-beslutningen i flexbox bruker
   elementets HYPOTETISKE (ønskede) bredde, ikke hvor mye det kan krympe til —
   så en lang lenke ble alltid flyttet til egen linje i sin helhet, med ringen
   stående igjen alene på linja over. min-width: 0 på lenka hjalp ikke, for
   det påvirker bare kryssingen INNAD på ei linje, ikke selve
   linjedelings-valget. Grid har ikke det problemet: ringen og lenka legges i
   hver sin faste kolonne på samme rad, og lenka får lov til å krympe og
   brekke teksten inni seg via min-width: 0 i den kolonnen. Hjelpeteksten
   (.komigang-steg-hjelp under) spenner begge kolonnene og havner på rad 2,
   uendret fra før. */
.komigang-steg li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--sp-2);
    padding: 6px 0;
}

.komigang-steg a {
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: var(--mod-primar-mork, #9a3412);
    min-width: 0;
    min-height: 44px;
    padding: 7px 0;
    overflow-wrap: anywhere;
}

.komigang-steg a:hover {
    text-decoration: underline;
}

.komigang-hake {
    flex-shrink: 0;
    color: #d4d4d8;
}

.komigang-steg li.utfort .komigang-hake {
    color: #2f9e44;
}

/* Utført steg: lenken roes ned — jobben er gjort, neste steg skal trekke
   blikket. Fortsatt klikkbar (man kan ville legge inn buss nummer to). */
.komigang-steg li.utfort a {
    color: var(--mod-tekst-dus);
    font-weight: 400;
}

.komigang-steg-hjelp {
    grid-column: 1 / -1;
    margin: 0 0 0 26px;
}

.komigang-fotnote {
    margin: var(--sp-2) 0 0;
}

/* ----------------------------------------------------------------
   Partnerpanelet (/partner/{nøkkel}) — «Mine forespørsler».

   Ligger i TomLayout, som sentrerer innholdet loddrett. Det er riktig for et
   innloggingskort, men galt for en liste som kan bli lang: da havner toppen
   over skjermkanten. `align-self: flex-start` løser det fra barnet, uten å
   røre .tom-layout og dermed hver eneste anonyme side i appen.
   ---------------------------------------------------------------- */
.partnerpanel {
    align-self: flex-start;
    width: 100%;
    max-width: 620px;
    padding: var(--sp-4) 0 var(--sp-6);
}

.partnerpanel-topp h1 {
    margin-bottom: var(--sp-2);
}

.partnerpanel-kort {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: var(--sp-5);
}

.partnerpanel-gruppe {
    font-size: 1rem;
    margin: var(--sp-5) 0 var(--sp-2);
}

.partnerpanel-kvittering {
    margin-bottom: var(--sp-4);
}

/* Partnerens eget avgitte svar, gjengitt tilbake til dem. Adressen er en delt
   postkasse: kollegaen som åpner lenken etterpå må kunne se hva som allerede
   er lovet bort, ellers ringer hen og tilbyr noe annet. */
.partnerpanel-svar {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: var(--sp-3) var(--sp-4);
}

.partnerpanel-svar p {
    margin: 0 0 var(--sp-2);
}

.partnerpanel-svar p:last-child {
    margin-bottom: 0;
}

/* Forklaringen av de to prisene. Uten den tror partneren at tallene er to
   varianter av samme pris — og da blir svaret feil på en måte ingen oppdager
   før fakturaen kommer. */
.partnerpanel-forklaring {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: #eef4fb;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Forespørslene på en ordre (Ordre → Buss → Sett bort til partner). */
.partner-foresporselliste li {
    line-height: 1.55;
}

/* ⚠ E-post som ikke kom fram. E-postsystemet har ingen kø: feiler sendingen, er
   det ingen bakgrunnsjobb som prøver igjen. En forespørsel partneren aldri fikk,
   ser ellers nøyaktig ut som en de bare ikke har svart på ennå — derfor rødt og
   med handlingen rett i boksen. Dette ER et varsel, i motsetning til
   prisdifferansen over. */
.partner-epostfeil {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    align-items: flex-start;
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    background: #fdf0ef;
    border: 1px solid #f2c4c0;
    border-radius: 8px;
    color: #8a2b26;
    font-size: 0.9rem;
}

.partner-epostfeil .innstilling-hjelp {
    color: #8a2b26;
    opacity: .85;
}

/* ---------- Flerdagstur i sjåførlista (FLE-1) ---------- */

/* «Dag 2/3» i kompaktraden, og «i dag»-merket i dagsplanen. Liten brikke
   framfor bare tekst: raden leses i et blikk på en telefon, og dagnummeret
   er det som avgjør om sjåføren står på riktig hentested.
   Marginen ligger her og ikke som mellomrom i malen: Razor spiser
   linjeskiftet mellom to elementer, og «#9001Dag 2/3» klistret seg sammen. */
.kjoring-dagmerke {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 1px var(--sp-2);
    border-radius: 999px;
    background-color: var(--mod-primar-tint, #fff7ed);
    color: var(--mod-primar-mork, #9a3412);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: 1px;
}

.kjoring-dagsplan {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: var(--sp-2) 0;
}

/* Hver dag er sin egen boks. Før dette rant alle dagenes stopp sammen til én
   flat pilrekke, og «Bergen → Voss → Geilo → Bergen» så ut som én kjøring. */
.kjoring-dag {
    padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--mod-kant, #eef0f3);
    border-radius: 0 6px 6px 0;
    background-color: transparent;
}

/* Dagen raden gjelder — den sjåføren faktisk kjører nå. */
.kjoring-dag-aktiv {
    border-left-color: var(--mod-primar-markor, #c2410c);
    background-color: var(--mod-primar-tint, #f7f7fb);
}

.kjoring-dag-topp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}

.kjoring-dag-tittel {
    font-weight: 700;
}

/* Ruta bryter mellom stoppene i stedet for å skyve raden ut i bredden —
   375 px er skjermen dette faktisk leses på. */
.kjoring-rute {
    display: block;
    overflow-wrap: anywhere;
}

/* Mellomrommet mellom ordrenummer/dagmerke og strekningen. Ligger i CSS og
   ikke som et blanktegn i malen: Razor spiser mellomrom mellom elementer, og
   «<text> </text>» ble til et tomt <text>-element i DOM-en. */
.kjoring-strekning {
    margin-left: var(--sp-2);
}

/* ── Sjåførfarger (DBT-15/16) ───────────────────────────────────────────────
   Prikken som kjennetegner en sjåfør utenfor kjøreplanen: i sjåførlista, på
   ordrekortet og i sjåførfanen. Bevisst liten — den skal kunne stå foran et
   navn i en tett liste uten å bli en knapp. */
.sjafor-fargeprikk {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    vertical-align: baseline;
    margin-right: 0.3rem;
    flex: none;
    /* Tynn kant, ellers forsvinner en nesten hvit sjåførfarge helt på hvit
       bakgrunn — og da ser raden ut som om den mangler prikk. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.sjafor-fargelinje {
    display: flex;
    align-items: center;
}

/* Fargevelgeren i sjåførskjemaet: brikke + hex-felt side om side, og de
   brytes under hverandre på mobil. */
.fargevelger-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fargevelger-brikke {
    width: 2.75rem;
    height: 2.5rem;
    padding: 0.15rem;
    border: 1px solid var(--mod-kant, #d4d4d8);
    border-radius: 0.375rem;
    background: none;
    cursor: pointer;
    flex: none;
}

.fargevelger-hex {
    width: 8rem;
    flex: none;
}

/* ==========================================================================
   Avkryssing og handlingsstripe på /til-regnskap (INT-3C)
   ==========================================================================
   Gmail-mønsteret: boks per rad, «velg alle N» når hele siden er valgt, og en
   stripe med handlingene når noe er valgt. Stripa er FIXED nederst på mobil —
   samme sone som .bunnmeny (z-index 1500), så den må ligge OVER den og skyve
   innholdet like mye som bunnmenyen gjør. Ligger den under, er knappene der,
   men umulige å treffe. */

.celle-velg {
    width: 1px;             /* krymper til innholdet i tabellvisning */
    white-space: nowrap;
    padding-left: var(--sp-3) !important;
    padding-right: var(--sp-2) !important;
}

.velg-boks {
    position: relative;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    padding: 0;
    /* UI-115 — markørfargen (≥ 3:1 mot hvitt), ikke den rå firmafargen */
    accent-color: var(--mod-primar-markor);
    cursor: pointer;
    outline-offset: 2px;
}

/* 44 px touchmål (WCAG 2.5.8 / Apple HIG) uten å endre hvordan boksen SER ut:
   et usynlig lag rundt den, som ikke påvirker radhøyden. Nettleserens
   standardboks er 13 px, og en avkryssing man bommer på er verre enn ingen —
   feilklikket lander på raden under og velger feil ordre. */
.velg-boks::before {
    content: "";
    position: absolute;
    width: 44px;
    height: 44px;
    margin: -13px 0 0 -13px;
}

.liste-tabell tbody tr.rad-valgt {
    background: color-mix(in srgb, var(--merkevarefarge) 7%, transparent);
}

/* «Alle 20 på denne siden er valgt — velg alle 114» */
.velg-alle-stripe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: color-mix(in srgb, var(--merkevarefarge) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--merkevarefarge) 25%, transparent);
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.velg-alle-stripe .btn-tekst {
    padding: 0;
    font-weight: 600;
    color: var(--mod-primar-mork);
}

/* ---- Handlingsstripa ---- */

.handlingsstripe {
    position: sticky;
    bottom: var(--sp-3);
    z-index: 1200;          /* over lista, under ark (1700) og rad-meny (1600) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--mod-flate, #fff);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 0.75rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.handlingsstripe-tekst {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-3);
    font-size: 0.95rem;
}

/* Ambergul som resten av husets varsler (jf. advarselsstripa i Innstillinger).
   Rødt ville lest som «feil»; re-eksport er lov, den skal bare ikke skje
   uten at noen har sett det. */
.handlingsstripe-advarsel {
    padding: 2px var(--sp-2);
    background: #fff8e6;
    border: 1px solid #f0d9a0;
    border-radius: 0.375rem;
    font-size: 0.82rem;
    color: #7a5a00;
}

.handlingsstripe-knapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

/* Husets .btn-ny bærer «margin: 16px 0» for å stå alene i en knapperad. Her
   er avstanden gap-ens jobb — med marginen ble hver knapperad 88 px høy i
   stedet for 56, og stripa 294 px på en 812 px skjerm. Målt i browser. */
.handlingsstripe-knapper .btn-ny,
.handlingsstripe-knapper .btn-avbryt,
.handlingsstripe-knapper .btn-tekst {
    margin: 0;
}

.handlingsstripe-tom {
    padding: var(--sp-2);
    line-height: 0;
}

@media (max-width: 959.98px) {
    /* Kortvisningen: avkryssingen får sin egen kolonne til venstre, i full
       kortshøyde. Uten et eget grid-area ville den auto-plassert seg som en
       linje nederst i kortet, med «Velg:»-etiketten foran. */
    /* Kolonnen med #nr og status er fit-content(45%), ikke auto (ORD-59):
       «Ikke sendt» + utboksmerket «E-posten kom ikke fram» ved siden av
       hverandre gjorde auto-kolonnen 249 px bred på 375 px, og kundenavnet
       (brytbar) ble klemt til én bokstav per linje. Taket lar merkene bryte
       til to linjer i stedet. Kort innhold (#1001, «Ikke sendt») er smalere
       enn taket og oppfører seg som før. */
    .liste-tabell tbody tr {
        grid-template-columns: auto fit-content(45%) 1fr auto;
        grid-template-areas:
            "velg ordrenr   kunde     handling"
            "velg status    dato      handling"
            "velg strekning strekning handling"
            "velg belop     belop     handling";
    }

    .liste-tabell .celle-velg {
        grid-area: velg;
        align-self: center;
        padding-left: 0 !important;
        padding-right: var(--sp-2) !important;
    }

    /* Etiketten hører til skjermlesere her — teksten står i aria-label. */
    .liste-tabell .celle-velg::before {
        content: none;
    }
}

/* UI-148b: Til regnskaps ordreliste (.liste-tabell.tilregnskap-liste) er kort til
   og med 1211.98px, samme tall som .tabell-stablet-bred (se den blokka). Målt
   23.10.2026: med fire statusmerker («Sendt 15.10.2026 · Go 1234567»,
   «Kansellert», «Demo», «E-posten kom ikke fram») er tabellen 872 px i
   kolonner, og den stakk ut av kortet og rullet hele siden (1155 mot 1000) fra
   960 px. Bare denne siden — de andre ordrelistene beholder 959.98.

   Kopi, ikke selektorliste (brytepunktene er ulike): reglene under er
   .liste-tabell-reglene fra de to 959.98-blokkene over, i samme rekkefølge, med
   .liste-tabell byttet til .tilregnskap-liste — samme spesifisitet, og plassert
   etter grunnreglene (.liste-tabell td.handling-celle { width: 1% } osv.) som
   originalen. «•••»-menyens bunnark er ikke med: mellom 960 og 1211 er det mus
   og plass, og menyen er popover som ellers på PC. Ui148bVaktpost holder kopien
   lik originalen. */
@media (max-width: 1211.98px) {
    .tilregnskap-liste,
    .tilregnskap-liste tbody {
        display: block;
    }

    .tilregnskap-liste thead {
        display: none;
    }

    .tilregnskap-liste tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "ordrenr   kunde     handling"
            "status    dato      handling"
            "strekning strekning handling"
            "belop     belop     handling";
        gap: var(--sp-1) var(--sp-2);
        align-items: center;
        padding: var(--sp-4);
        border-bottom: 1px solid var(--mod-kant, #eef0f3);
    }

    .tilregnskap-liste tbody tr:last-child {
        border-bottom: none;
    }

    .tilregnskap-liste tbody td {
        display: block;
        min-width: 0;
        padding: 0;
        border: none;
        white-space: normal;
        font-size: 0.82rem;
        color: var(--mod-tekst-dus, #6b7280);
    }

    .tilregnskap-liste .celle-ordrenr {
        grid-area: ordrenr;
    }

    .tilregnskap-liste .celle-kunde {
        grid-area: kunde;
    }

    .tilregnskap-liste .celle-status {
        grid-area: status;
    }

    .tilregnskap-liste .celle-dato {
        grid-area: dato;
        justify-self: end;
        white-space: nowrap;
    }

    .tilregnskap-liste .celle-strekning {
        grid-area: strekning;
    }

    .tilregnskap-liste .celle-belop {
        grid-area: belop;
    }

    .tilregnskap-liste .handling-celle {
        grid-area: handling;
        align-self: start;
        width: auto;
    }

    .tilregnskap-liste .celle-ordrenr,
    .tilregnskap-liste .celle-kunde {
        font-size: 1rem;
        font-weight: 600;
    }

    .tilregnskap-liste .celle-kunde a {
        color: var(--mod-tekst, #18181b);
        text-decoration: none;
    }

    .tilregnskap-liste tbody .celle-belop.tall {
        text-align: left;
    }

    .tilregnskap-liste tbody td[data-etikett]:not([class*="celle-"])::before {
        content: attr(data-etikett) ": ";
        color: var(--mod-tekst-dus, #9ca3af);
    }

    .tilregnskap-liste tbody tr {
        grid-template-columns: auto fit-content(45%) 1fr auto;
        grid-template-areas:
            "velg ordrenr   kunde     handling"
            "velg status    dato      handling"
            "velg strekning strekning handling"
            "velg belop     belop     handling";
    }

    .tilregnskap-liste .celle-velg {
        grid-area: velg;
        align-self: center;
        padding-left: 0 !important;
        padding-right: var(--sp-2) !important;
    }

    .tilregnskap-liste .celle-velg::before {
        content: none;
    }
}

@media (max-width: 640.98px) {
    /* Fast nederst, OVER bunnmenyen (1500). Bunnmenyen er navigasjon; stripa
       er en handling brukeren står midt i, og den skal ikke kunne dekkes av
       den. Den legger seg rett over menyen i stedet for å skjule den, så
       navigasjonen fortsatt er der når utvalget tømmes. */
    .handlingsstripe {
        position: fixed;
        left: var(--sp-2);
        right: var(--sp-2);
        bottom: calc(var(--sp-2) + 56px + env(safe-area-inset-bottom, 0px));
        z-index: 1550;
        margin-top: 0;
        justify-content: stretch;
    }

    .handlingsstripe-tekst,
    .handlingsstripe-knapper {
        width: 100%;
    }

    /* Fire knapper i to rader i stedet for en vannrett rulleliste: en handling
       man må rulle for å se, finnes ikke.

       Smalere innrykk enn ellers: med husets 24 px brøt «Send til
       regnskapsfører» over to linjer, og stripa vokste til 342 px — 42 % av en
       812 px skjerm. Målt, ikke antatt. Knappene har minst 44 px høyde her (UI-73 gir .btn-avbryt 48 px utenfor stripa). */
    .handlingsstripe-knapper .btn-ny,
    .handlingsstripe-knapper .btn-avbryt {
        flex: 1 1 calc(50% - var(--sp-2));
        justify-content: center;
        min-height: 44px;
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
        white-space: nowrap;
    }

    /* «Fjern valget» ut av knapperada og opp i hjørnet: de fire handlingene
       fyller to rader på 375 px nøyaktig, så krysset ble skjøvet ned til en
       tredje rad det var alene om. Hjørnet er dessuten der man leter etter
       det — samme plass som .ark-lukk. */
    .handlingsstripe-tom {
        position: absolute;
        top: 4px;
        right: 4px;
    }

    .handlingsstripe-tekst {
        padding-right: 40px;
    }

    /* Plass til stripa OG bunnmenyen, ellers ligger den over siste rad i lista. */
    main:has(.handlingsstripe) {
        padding-bottom: 190px;
    }
}

/* Vedleggsrad i e-postutboksens detaljark (INT-3C). Én per linje: filnavn kan
   være lange, og to på samme linje ville brutt midt i navnet. */
.epost-vedlegg {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 400;
}

.epost-vedlegg svg {
    flex: none;
    color: var(--mod-tekst-dus, #6b7280);
}

/* Knappetekst som krymper med skjermen (INT-3C). «Send til regnskapsfører» er
   riktig på desktop og for langt på 375 px — to spann i markupen, én av dem
   synlig om gangen. Ikke «skjult-visuelt»: den skjulte varianten skal også være
   borte for skjermlesere, ellers leses knappen opp to ganger. */
.smal-tekst {
    display: none;
}

@media (max-width: 640.98px) {
    .bred-tekst {
        display: none;
    }

    .smal-tekst {
        display: inline;
    }
}

/* ---- Ekstrabusser i ordreskjemaet (BUSS-2) ---- */
/* Mobile-first: feltene stables i full bredde (ORD-37-fella: tre 59
   px-kontroller på 375 px er uleselige). Fra 640 px står buss og
   passasjerer side om side, med «Gjelder» og fjern-knappen under.
   Sjåføren velges i fanen Sjåfør (UI-151, KND-110). */
.ekstrabuss-rad {
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: var(--sp-2);
    margin-bottom: var(--sp-2);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    align-items: end;
}

.ekstrabuss-rad .form-felt {
    margin-bottom: 0;
}

/* Minst 44 px høy — minstemålet for en trykkflate (ORD-41 fant 30 px her):
   dette er veien ut av en rad man ombestemte seg om, og den skal kunne
   treffes med tommel. */
.ekstrabuss-fjern {
    min-height: 44px;
    font-size: 0.9rem;
    color: #e50000;
    background: none;
    border: 1px solid #e50000;
    border-radius: 0.4rem;
    padding: var(--sp-1) var(--sp-3);
    cursor: pointer;
    justify-self: start;
}

.ekstrabuss-fjern:hover {
    background: #fdeaea;
}

.ekstrabuss-merknad {
    margin-top: calc(-1 * var(--sp-1));
}

@media (min-width: 640px) {
    .ekstrabuss-rad {
        grid-template-columns: minmax(0, 1fr) 10rem;
    }

    /* Alltid i høyre kolonne, under passasjerene — også når «Gjelder»
       (bare flerdagsturer) ikke står i venstre. */
    .ekstrabuss-fjern {
        grid-column: 2;
        justify-self: end;
    }
}

/* ---------------------------------------------------------------------------
   ORD-41 / C-13: paddingkjeden på smal skjerm

   Målt på 375 px før dette: .content.px-4 (48) → .innstilling-seksjon-kortet
   (48) → .innstilling-feltboks (32) → dagkortet, som selv er et
   .innstilling-kort (48) — pluss 2 px kant på hver av de tre boksene. 182 av
   375 px, 49 % av skjermen, gikk til horisontal padding, og et dagkort satt
   igjen med 193 px innhold. Datofeltene klipte ikke, men med 2 px å gå på tåler
   oppsettet ikke et hakk større skrift.

   Luften er riktig på desktop og gal på mobil, så den halveres her i stedet for
   å fjernes. Reglene treffer HELE appen — det er med vilje: samme kjede finnes
   på /priser, /busser og alle andre innstillingsskjermer, som fikk samme
   klemme av samme grunn.
   --------------------------------------------------------------------------- */
@media (max-width: 640.98px) {
    /* !important er nødvendig, ikke slurv: .px-4 er en Bootstrap-utility, og
       de er selv deklarert !important. Uten det vinner Bootstrap uansett
       rekkefølge og spesifisitet — målt, ytterste ledd sto urørt på 48 px. */
    .content.px-4 {
        padding-left: var(--sp-3) !important;
        padding-right: var(--sp-3) !important;
    }

    .innstilling-kort {
        padding: var(--sp-3);
    }

    /* Pila (utenfor) skal ikke stikke ut av kortet når kortpolstringen er
       krympet til 12 px: gi summary egen venstrepolstring som rommer den. */
    .hjelp-emne summary {
        padding-left: 1.25rem;
    }

    .innstilling-feltboks {
        padding: var(--sp-3);
    }

    /* Prislinjas tre tallfelt sto på 59 px hver i tre kolonner (ORD-37). To
       kolonner gir dem plass til både et tall og navnet sitt; «Pris eks. mva»
       fikk aldri plass i 59 px. */
    .prislinje-tall {
        grid-template-columns: 1fr 1fr;
    }
}

/* ================================================================
   PAM-2 — det offentlige påmeldingsskjemaet
   (/pamelding/{firma}/{arrangement}, dok/pamelding/PLAN.md § 7).

   Siden bruker .kontakt-side som ramme, så logo, avsendernavn og
   «ikke gyldig»-boksen arver buss-skjemaenes utseende uendret. Bare
   det som er nytt står her: faktalista over arrangementet og
   kvitteringens deltakerliste.
   ================================================================ */
.pamelding-fakta {
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4);
    background-color: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.pamelding-fakta > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    align-items: baseline;
}

.pamelding-fakta > div + div {
    margin-top: var(--sp-2);
}

.pamelding-fakta dt {
    min-width: 5.5rem;
    font-weight: 600;
    color: #374151;
}

/* Lange stedsnavn skal brytes, aldri gi sidescroll på 375 px. */
.pamelding-fakta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.pamelding-kvitteringsliste {
    margin: 0 0 var(--sp-3);
    padding-left: 1.25rem;
}

.pamelding-kvitteringsliste li {
    overflow-wrap: anywhere;
}

/* ================================================================
   TIM-2 — Nordic Timeregistrering: registreringsskjemaet, «Min kode»
   og QR-plakaten.

   MOBIL-FØRST PÅ ORDENTLIG. Skjemaet fylles ut stående, på deltakerens
   EGEN telefon, i en gang, rett etter at hen skannet plakaten på veggen
   (133 av 180 på én time). Derfor: én kolonne, trykkflater på minst
   44 px, og ingen fem-på-rad-rutenett som blir 30 px brede på 375 px.
   Desktop arver det samme; .kontakt-side holder bredden på 560 px.

   Fargene tar merkevaren når siden har en (--mv-hoved, satt av
   Merkevarestil), og faller ellers til plattformens grønne. Det er
   samme fallback-form som resten av merkevare-avhengig CSS i huset.
   ================================================================ */

.tim-gruppetittel {
    display: block;
    margin-bottom: var(--sp-2);
    font-weight: 600;
}

/* Knapperad som BRYTER. Fem møtedager på 375 px blir to linjer, ikke fem
   smale knapper — en trykkflate under ~44 px bommes med tommelen. */
.tim-valgrad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.tim-valg {
    min-height: 44px;
    padding: 0 var(--sp-4);
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 0.5rem;
    cursor: pointer;
}

.tim-valg:hover {
    border-color: #999;
}

/* Valgt tilstand markeres med BÅDE farge, ramme og halvfet — aldri farge
   alene: på en telefonskjerm i dagslys er fargeforskjellen det første som
   forsvinner, og skjemaet fylles ut nettopp der.

   Fallbacken er var(--mod-primar, #c2410c) og ikke en egen farge: det er NØYAKTIG .btn-ny sin.
   Uten merkevare står «Registrer meg» og de valgte dagene da i samme farge,
   og sida leses som ett system i stedet for to. Har tiltaket en merkevare,
   følger begge den. */
.tim-valg-pa {
    color: var(--mv-tekst-paa-hoved, #fff);
    background-color: var(--mv-hoved, var(--mod-primar, #c2410c));
    border-color: var(--mv-hoved, var(--mod-primar, #c2410c));
    font-weight: 600;
}

.tim-dag {
    flex: 1 1 calc(33% - var(--sp-2));
    min-width: 6rem;
}

.tim-torad {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--sp-3);
}

.tim-avkrysning {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

/* 24 px, ikke nettleserens 13: dette er avkrysningen hele registreringen
   står og faller på, og den trykkes med en tommel. */
.tim-avkrysning input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.tim-erklaering {
    padding: var(--sp-4);
    background-color: #f8f9fb;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
}

/* Lenka til erklæringen står OVER avkrysningen og som egen trykkflate —
   kundens klage 07.11.2025 var at den ikke kunne leses før man krysset av. */
.tim-erklaeringslenke {
    margin: 0 0 var(--sp-3);
    font-weight: 600;
}

.tim-feltfeil {
    margin: var(--sp-1) 0 0;
    color: #b3261e;
    font-size: 0.9rem;
}

.tim-stor-knapp {
    min-height: 52px;
    width: 100%;
    font-size: 1.05rem;
}

/* ---- «Min kode» ---------------------------------------------------
   QR-en er hele siden: minst 60 % av skjermbredden på mobil. Hvit flate
   under uansett merkevare — en kode på farget bakgrunn leses dårligere,
   og kontrasten er en funksjonell egenskap her, ikke en preferanse. */
.tim-kodeside {
    text-align: center;
    padding-top: var(--sp-5);
}

.tim-qr {
    display: block;
    padding: var(--sp-3);
    background-color: #fff;
    border-radius: 0.5rem;
}

.tim-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.tim-kodeside .tim-qr {
    width: min(80vw, 420px);
    margin: 0 auto;
    border: 1px solid #e0e0e0;
}

.tim-kodenavn {
    margin-top: var(--sp-4);
    font-size: 1.6rem;
    font-weight: 600;
}

.tim-qr-liten {
    width: min(60vw, 220px);
    border: 1px solid #e0e0e0;
}

.tim-lenke {
    word-break: break-all;
}

/* ---- Forsidens tall ---------------------------------------------- */
.tim-tallrad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.tim-tall {
    flex: 1 1 12rem;
    text-align: center;
}

.tim-tall-verdi {
    display: block;
    font-size: 2rem;
    font-weight: 700;
}

.tim-tall-tekst {
    color: #555;
}

.tim-deltakerrad .ordre-rad-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* ---- Plakaten -----------------------------------------------------
   .tom-layout er flex med align-items: center. Uten denne ene ytre boksen
   blir arket og «Skriv ut» to kolonner ved siden av hverandre, og QR-en
   klemmes sammen — samme grunn som .partnerpanel har sin. */
.tim-plakat-side {
    align-self: flex-start;
    width: 100%;
}

.tim-plakat {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}

.tim-plakat-firma {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: var(--sp-2);
}

.tim-plakat-tittel {
    font-size: 2.6rem;
    margin: 0 0 var(--sp-2);
}

.tim-plakat-ingress {
    font-size: 1.3rem;
    margin-bottom: var(--sp-5);
}

.tim-plakat-qr {
    width: min(90%, 460px);
    margin: 0 auto var(--sp-5);
}

.tim-plakat-lenke {
    font-size: 1.05rem;
    word-break: break-all;
}

.tim-plakat-verktoy {
    text-align: center;
    padding-bottom: var(--sp-6);
}

/* Papiret skal bare bære arket. «Skriv ut»-knappen skjules — ellers står
   en knapp midt på veggen. */
@media print {
    .tim-plakat-verktoy {
        display: none;
    }

    .tim-plakat {
        padding-top: 0;
    }
}

/* ================================================================
   UI-52 — trykkflater ≥ 44 × 44 px på telefon

   Prinsipp 5 i dok/design/README.md. Brytepunktet er 600 px, det samme som
   UI-43 valgte og av samme grunn: det er tommelen, ikke skjermbredden, som
   trenger det ekstra. Desktop er uendret — sju kontroller på 26–41,6 px sto
   igjen etter UI-43, målt i 375 px av designtrådens CSS-revisjon 15.09.2026.

   To mønstre, valgt ut fra om kontrollen TÅLER å se større ut:

   * Brytere og handlingsknapper vokser (min-height/width). De står alene på
     linja eller i et spor som vokser med dem.
   * Dagpilene, kjøreplanens dagknapper og vis-passord-øyet får en usynlig
     ::before-flate i stedet — samme teknikk som .rad-meny-knapp
     (Components/RadMeny.razor.css). position: absolute holder den utenfor
     normalflyten, så raden blir ikke høyere, og 44 px er ikke delelig med
     26 eller 36, så flaten sentreres med top/left 50 % + transform.
     Radene har 8 px mellomrom (--sp-2), og en 44 px flate rundt en 26 px
     knapp stikker 9 px ut til hver side — altså ~1 px inn i naboen, som i
     tillegg tegnes etter og vinner der de møtes.

   Blokka må stå ETTER grunnreglene den justerer: reglene har samme vekt
   (0,1,0 / 0,2,0) og avgjøres derfor på rekkefølge. Den trenger IKKE være
   den siste i fila — senere saker legger til egne blokker under. Merkelappen
   under er det Ui52Tester finner blokka på; flytt den med blokka.
   ================================================================ */
@media (max-width: 600px) {
    /* Segmentbrytere: Oversikt og Kjøreplan (.belegg-bryter, 36 px).
       Sporet rundt vokser med dem. Ordrelistas periodevelger sto her også
       (.periode-bryter, 41,6 px); UI-126 gjorde den til .valg-knapp, som er
       44 px på alle bredder i grunnregelen og ikke trenger løftet. */
    .belegg-bryter {
        min-height: 44px;
    }

    /* Filterknappen i søkeraden (Busser, Kunder): 38 × 38. Den står ved
       siden av søkefeltet og skal fortsatt LESE som en firkantet knapp, så
       den vokser i stedet for å få en usynlig kant. */
    .filter-ikon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .belegg-navpil,
    .kjoreplan-dato .btn-tekst,
    .passord-felt-rad .kjoring-hurtig-knapp {
        position: relative;
    }

    .belegg-navpil::before,
    .kjoreplan-dato .btn-tekst::before,
    .passord-felt-rad .kjoring-hurtig-knapp::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* UI-81: «Kom i gang» på innloggingen sto på 24 px — en frittstående
       oppfordring i sin egen boks, ikke lenke i løpende tekst. Vokser (som
       bryterne over): inline-flex sentrerer teksten i den høyere flaten, så
       den står på samme sted som før. */
    .login-lesmer {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* UI-81: korte fanetekster («Buss» 38 px) ga smalere flate enn 44 px —
       bredden kom fra innholdet, ikke fra en regel. Teksten sentreres. */
    .status-fane {
        min-width: 44px;
        justify-content: center;
    }

    /* UI-81: datofeltet i belegget målte 42 px på 375 px (2.5rem + ramme)
       og står i raden med dagpilene UI-52 løftet. Målt før endringen. */
    .belegg-dato {
        min-height: 44px;
    }
}

/* UTL-21: utleiens tallfelt (Kjøretøy: årsmodell, timepris, minstetid; ordreskjemaet: pause) —
   samlet her fra Kjoretoy.razor.css og Oppdrag.razor.css, der regelen sto likt to ganger.
   Feltene er tekst med inputmode="decimal" (type="number" nekter komma), så tallregelen i
   tema-moderne.css (.search-input[type=number]) treffer dem ikke. Her får de NØYAKTIG den
   regelen — høyrestilt, like brede siffer, maks 160 px (DESIGNSYSTEM 6.6, «Tall») — og
   enheten står som dus tekst utenfor feltet. Ingen ny feltklasse. */
.utl-tall {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.utl-tall .search-input {
    max-width: 160px;
    margin-bottom: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.utl-tall .innstilling-hjelp {
    margin: 0;
}

/* ===== Sjåførkortet — delt av «Mine kjøringer» (buss) og «Mine ordre» (utleie, UTL-5B) =====
   Flyttet ordrett fra MineKjoringer.razor.css: scoped regler virker ikke på en annen side, og
   utleiens sjåførside skal ha samme oppbygging og samme klasser (UTLEIETRAAD §5a). Reglene for det
   som bare buss har (kundevarsel, km-ark, kommentarer) står igjen i den scoped fila. */
/* ===== UI-110: det åpne sjåførkortet =====================================
   Rekkefølgen ovenfra: neste steg, si fra til kunden, turen, sjeldne valg,
   sluttknappen. UTL-5B flyttet reglene for kortets skjelett hit fra
   MineKjoringer.razor.css (ordrett), så utleiens «Mine ordre» bruker de samme. */

/* Kortets innhold starter var(--sp-3) under kanten — paddingen i
   .kjoring-detalj, ikke mer. Før la tre marginer seg oppå hverandre over
   første knapp: paddingen (12 px) + .paavei-rad margin-top (12 px) +
   .btn-ny sin globale margin-top (16 px) = 40 px luft. */
.kjoring-detalj > :first-child {
    margin-top: 0;
}

/* Punkt 1: neste steg. Forklaringen står rett under knappen den forklarer,
   var(--sp-1) unna. Knappenes globale marginer (var(--sp-4) over og under)
   nulles her; avstanden eies av gap. */
.neste-steg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
}

.neste-steg .neste-steg-knapp {
    margin: 0;
    justify-content: center;
}

/* «Meld at du er på vei» rett under «Bekreft kjøring» (før bekreftelsen). */
.neste-steg .neste-steg-knapp + .neste-steg-knapp {
    margin-top: var(--sp-1);
}

.neste-steg .paavei-rad {
    margin-top: 0;
}

/* Punkt 3: turen, én opplysning per linje. */
.kjoring-tur {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-top: var(--sp-4);
}

/* KND-115: bussen øverst i kortet, full størrelse, brytes normalt. */
.kjoring-buss {
    margin-top: var(--sp-1);
    font-weight: 600;
    color: var(--mod-tekst);
}

.kjoring-fakta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin: var(--sp-1) 0 0;
    padding: 0;
    list-style: none;
}

/* Punkt 5: sluttknappen står alene — knappens globale marginer ville lagt
   16 px under den, oppå kortets egen padding. */
.kjoring-avslutt .btn-ny,
.kjoring-avslutt .btn-avbryt {
    margin: 0;
    justify-content: center;
}

/* SJF-23: litt luft over «Marker som kjørt»/«Avslutt tur» nå som den står
   helt nederst i kortet, under turdetaljene — uten avstand ville den lest
   som en fortsettelse av «melding til sjåfør»-boksen over. */
.kjoring-avslutt {
    margin-top: var(--sp-4);
}

/* KND-72: oppmøte- og leveringssted i kortets hode, én linje hver.
   Ledeteksten er halvfet; adressen har vanlig vekt og brytes heller enn å
   avkortes — gatenavnet er det sjåføren leter etter. */
.kjoring-steder {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
    font-size: 0.9rem;
    color: var(--mod-tekst);
}

.kjoring-sted {
    overflow-wrap: anywhere;
}

.kjoring-sted-etikett {
    font-weight: 600;
}