:root {
    --merkevarefarge: #4f46e5;
    --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;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.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;
}

.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: #f4f5f8;
    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);
}

.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);
}

.innboks-melding {
    background-color: var(--mod-flate, #fff);
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.innboks-melding.ulest {
    border-left: 4px solid #1b6ec2;
    background-color: #f5f9fe;
}

.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: #666;
}

.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: #1b6ec2; color: white; }
.innboks-merke.ok { background-color: #dcfce7; color: #166534; }
.innboks-merke.feilet { background-color: #fee2e2; color: #991b1b; }

.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;
}

.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: #6b7280;
}

.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: #6b7280;
}

/* 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;
}

.pris-rad span {
    color: #6b7280;
}

.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(--merkevarefarge);
    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: #6b7280;
}

.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: #dbeafe; color: #1e40af; }

.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(--merkevarefarge);
    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: #fff;
    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);
}

.hjelp-panel p,
.hjelp-panel li {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.55;
}

.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;
    }
}

/* ----------------------------------------------------------------
   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.75rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--mod-tekst-dus, #6b7280);
}

.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.75rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--mod-tekst-dus, #6b7280);
}

.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;
}

/* 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.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--mod-tekst-dus, #6b7280);
    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(--merkevarefarge);
}

.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 #e5e7eb;
    padding-top: var(--sp-2);
}

.hjelp-emne-innhold p,
.hjelp-emne-innhold li {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.55;
}

.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(--merkevarefarge);
    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: #6b7280;
    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(--merkevarefarge);
    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: #6b7280;
}

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;
    min-height: 3rem;
    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: #1b6ec2;
    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 #e0e0e0;
}

@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;
}

.btn-ny:hover, .btn-ny:focus {
    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: #1b6ec2;
    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.5rem;
}

.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;
    min-height: 3rem;
    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, .btn-avbryt:focus {
    background-color: #dde1e5;
}

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

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

.btn-tilbud:hover, .btn-tilbud:focus {
    background-color: #e7f1fb;
    color: #1b6ec2;
}

.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;
}

/* 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;
}

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

.btn-rediger {
    display: inline-block;
    min-height: 2.5rem;
    padding: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-2);
    font-size: 0.9rem;
    font-weight: 600;
    color: #1b6ec2;
    background-color: transparent;
    border: 1px solid #1b6ec2;
    border-radius: 0.5rem;
    cursor: pointer;
}

.btn-rediger:hover, .btn-rediger:focus {
    background-color: #e7f1fb;
}


.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: #1b6ec2;
    background-color: #e7f1fb;
    border: 1px dashed #1b6ec2;
    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);
}

.btn-dagvelger {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1b6ec2;
    background-color: #e7f1fb;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

.btn-dagvelger:hover, .btn-dagvelger:focus {
    background-color: #d3e6f8;
}

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

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

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

.btn-i-dag {
    margin-top: 0;
    margin-bottom: var(--sp-4);
}

.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: #1b6ec2;
    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;
}

/* C-14: sto på 47 x 30 px — skjemaets minste trykkflate, og den sletter et
   stopp eller en prislinje UMIDDELBART, uten bekreftelse. Den er i tillegg
   veien ut av en prislinje man ombestemte seg om (ORD-42), så den skal treffes
   på første forsøk. 44 px er minstemålet for en trykkflate. */
.btn-fjern-linje {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    font-size: 0.85rem;
    color: #e50000;
    background: none;
    border: 1px solid #e50000;
    border-radius: 0.4rem;
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
}

.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;
}

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

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

.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;
}

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

.periode-bryter {
    min-height: 2.6rem;
    padding: var(--sp-1) var(--sp-4);
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
}

.periode-bryter:hover:not(.aktiv) {
    color: #333;
}

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

.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: #1b6ec2;
}

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

.ordre-tidsrom {
    font-weight: 600;
    color: #1b6ec2;
    white-space: nowrap;
}

.status-merke {
    display: inline-block;
    font-size: 0.8rem;
    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) {
    .btn-ny, .btn-avbryt {
        display: block;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

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

    .btn-rediger {
        display: block;
        width: 100%;
    }

    .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-rediger {
        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: #6b7280;
    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: #4f46e5;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 150ms ease;
}

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

.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: #9ca3af;
    text-align: center;
}

.belegg-dag.i-dag {
    color: #4f46e5;
    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 #4f46e5;
    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: #6b7280;
}

.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: #6b7280;
    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);
}

.belegg-detalj-ordre .btn-rediger {
    flex-shrink: 0;
    margin-top: 0;
    text-decoration: none;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 640.98px) {
    .belegg-detalj-ordre .btn-rediger {
        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).
   Status-strekene (fane-ok/-mangler/-delvis) overstyrer fargen lenger ned. */
.status-fane.aktiv::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-1);
    height: var(--sp-1);
    border-radius: 999px;
    background: var(--merkevarefarge);
}

/* 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);
}

.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(--merkevarefarge);
}

@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.) */
.tabell-kort {
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 12px;
    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;
}

.data-tabell thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mod-tekst-dus, #6b7280);
    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;
}

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

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

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

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

   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: 640.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;
    }

    .tabell-stablet tbody td {
        display: flex;
        gap: var(--sp-3);
        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.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--mod-tekst-dus, #6b7280);
    }

    /* 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);
    }

    .tabell-stablet tbody td.handling-celle .btn-rediger {
        display: block;
        width: 100%;
    }
}

/* ============================================================
   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;
}

/* 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. */
.tabell-kort-flyt .liste-tabell tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.tabell-kort-flyt .liste-tabell tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* ---------- «•••»-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;
}

/* Arver bevisst IKKE .btn-rediger — 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(--merkevarefarge, #4f46e5);
    outline-offset: 1px;
}

.rad-meny-knapp[aria-expanded="true"] {
    background: var(--mod-primar-tint, #eef2ff);
    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, #eef2ff);
}

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

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

/* ---------- 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;
        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.8rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--mod-tekst-dus, #9ca3af);
    }

    .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: #f4f4f5;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
}

.nokkel-tittel {
    font-size: 0.82rem;
    color: #6b7280;
}

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

/* Slett-knapp (destruktiv handling) */
.btn-slett {
    color: #b91c1c;
    border-color: #f5c2c7;
}

.btn-slett:hover,
.btn-slett:focus {
    background-color: #fef2f2;
    color: #991b1b;
}

/* 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;
    min-height: 44px;
    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(--merkevarefarge, #4f46e5);
    /* 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;
}

/* Liten outline-handlingsknapp i fanestripe-rader (f.eks. «Ny ordre») */
.btn-utsend {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.9rem;
    background: var(--mod-flate, #fff);
    color: var(--merkevarefarge, #1b6ec2);
    border: 1px solid var(--merkevarefarge, #1b6ec2);
    border-radius: 8px;
    cursor: pointer;
}

.btn-utsend:hover:not(:disabled),
.btn-utsend:focus:not(:disabled) {
    background: color-mix(in srgb, var(--merkevarefarge, #1b6ec2) 8%, #fff);
}

.btn-utsend:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 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(--merkevarefarge, #4f46e5);
}

.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, #4f46e5) 7%, #fff);
    border: 1px solid var(--mod-kant, #e5e7eb);
    border-radius: 12px;
}

.login-promo-ikon {
    color: var(--merkevarefarge, #4f46e5);
}

.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, promo-panelet skjules (skjemaet er hovedsaken) */
@media (max-width: 800px) {
    .login-kort.login-todelt {
        grid-template-columns: 1fr;
        max-width: 420px;
        padding: var(--sp-6);
    }

    .login-hoyre {
        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: #f0dfae;
    background-color: #fff8e6;
}

/* ===== Ordre-fanestripe: status i understreken =====
   Grønn = på plass / utført, rød = gjenstår. Tegnes som en tykk, avrundet
   bar (egen strek, ikke kantlinje — kantlinjer skaleres tynne av nettleseren).
   Aktiv fane vises 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::after,
.status-faner .status-fane.fane-mangler::after,
.status-faner .status-fane.fane-delvis::after,
.status-faner .status-fane.fane-konflikt::after,
.status-faner .status-fane.fane-rolig::after,
.status-faner .status-fane.fane-tom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-1);
    height: var(--sp-1);
    border-radius: 999px;
}

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

.status-faner .status-fane.fane-mangler::after {
    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::after {
    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::after {
    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::after {
    background: #5f9e6e;
}

/* Tom: fanens tall er 0. Grå og ikke grønn — grønt under et null ser ut som
   en prestasjon, og det er ingenting å være fornøyd med. Et nytt firma uten
   ordrer skal møte fire nøytrale streker, ikke fire seiersgrønne. */
.status-faner .status-fane.fane-tom::after {
    background: #d4d4d8;
}

.status-faner .status-fane.fane-ok.aktiv,
.status-faner .status-fane.fane-mangler.aktiv,
.status-faner .status-fane.fane-delvis.aktiv,
.status-faner .status-fane.fane-konflikt.aktiv,
.status-faner .status-fane.fane-rolig.aktiv,
.status-faner .status-fane.fane-tom.aktiv {
    color: var(--mod-tekst, #18181b);
    font-weight: 700;
    border-bottom-color: transparent;
}

/* Statuslinje nederst i ordreskjemaet (manuelle statusgrep) */
.ordre-statuslinje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--mod-kant, #e0e0e0);
}

.ordre-statuslinje .innstilling-hjelp {
    margin: 0;
    flex-basis: 100%;
}

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

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

/* «Sendt til regnskap»-merke i Til regnskap-lista */
.status-merke.regnskap-merke {
    background-color: #dcfce7;
    color: #166534;
}

/* 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: #e0c88a;
}

.nokkel-kort.nokkel-klikkbar.aktiv {
    border-color: var(--merkevarefarge);
    box-shadow: inset 3px 0 0 var(--merkevarefarge);
}

/* 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;
}

.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);
}

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

.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;
    }
}

/* 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);
}

.tillegg-hode {
    font-size: 0.82rem;
    color: #6b7280;
}

/* 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(--merkevarefarge);
    font-size: 0.95rem;
    line-height: 1;
}

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

.kategori-kort[open] > summary {
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--mod-kant, #e5e7eb);
}

.kategori-navn {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.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: #6b7280;
}

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

.prismodell-eksempel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--mod-kant, #e5e7eb);
}

.prismodell-eksempel > input {
    flex: 0 1 7rem;
    min-width: 0;
}

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

/* .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 to like halvdeler — KILOMETER og TID — med
   feltet sitt øverst og knappen sin under, begge steder. Overskriftene er det
   eneste som skiller dem; alt annet i de to blokkene er allerede likt. Grå
   versaler og ikke en vanlig h3, fordi kortets egentlige overskrift er
   <summary> over: dette er skillelinjer inne i ett kort, ikke nye kort. */
.kategori-aksetittel {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin: var(--sp-5) 0 var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--mod-kant, #e5e7eb);
}

/* Grunnprisen ute av kilometerrutenettet (PRI-34), timeprisen ute av
   feltboksen (PRI-33) og dagsprisen ut av den igjen (PRI-31). Smalere enn
   .form-felts 480 px: alle tre er korte kronebeløp, og et halvmeterbredt felt
   for «1 800» leser som om det ventet en setning. De tre aksene skal dessuten
   se like ut — et bredere dagsprisfelt ville lest som et felt av en annen
   type. */
.prismodell-kort .kategori-grunnpris,
.prismodell-kort .kategori-timepris,
.prismodell-kort .kategori-dagspris {
    max-width: 22rem;
    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;
}

/* PRI-32: en 0 skal se ut som et valg, ikke som en hvilken som helst
   arv/overstyr-linje. Litt tydeligere enn søsknene sine — fet skrift, mørkere
   tekst — men INGEN rød farge og INGEN varselikon: dette er opplysning om et
   tall admin selv skrev, ikke en feil systemet fant. */
.arvetekst-null {
    font-weight: 600;
    color: #1f2937;
}

/* 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: #6b7280;
}

/* 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;
    accent-color: var(--merkevarefarge);
}

.tidsenhet-valg.valgt {
    border-color: var(--merkevarefarge);
    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: #6b7280;
    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;
}

.demo-banner.venter-banner {
    background-color: #eef2ff;
    border-bottom-color: #c7d2fe;
    color: #3730a3;
}

.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;
}

/* 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: #6b7280;
    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: #6b7280;
    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);
}

.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 {
    background: #eef2ff;
    color: #4338ca;
}

/* 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: #6b7280;
}

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

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

.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(--merkevarefarge);
    box-shadow: inset 3px 0 0 var(--merkevarefarge);
}

.velg-ikon {
    color: var(--merkevarefarge);
    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: #6b7280;
    font-size: 0.9rem;
}

.rute-estimat-forbehold {
    margin-top: var(--sp-1);
    color: #6b7280;
    font-size: 0.85rem;
}

/* 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 {
    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(--merkevarefarge);
    border-color: var(--merkevarefarge);
}

.filter-ikon.filter-aktiv::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--merkevarefarge);
}

.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.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mod-tekst-dus, #9ca3af);
    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, #eef2ff);
}

.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, #eef2ff);
}

.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(--merkevarefarge);
}

.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(--merkevarefarge);
    border-radius: 999px;
    background: var(--mod-primar-tint, #eef2ff);
    color: var(--mod-tekst, #18181b);
    font-size: 0.85rem;
}

.filter-chip .chip-x {
    font-weight: 700;
    color: var(--merkevarefarge);
}

.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);
}

.kp-navn {
    flex: 0 0 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.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;
}

/* 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. */
.kp-status-bekreftet::before {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    margin-left: 0.3rem;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.9;
    flex: none;
}

/* 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
    );
}

/* «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;
}

/* 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;
}

.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-navn-varsel {
    color: #dc2626;
    vertical-align: -2px;
    margin-right: 0.15rem;
}

.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; }

.kp-prikk-bekreftet {
    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
    );
}


.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(--merkevarefarge);
}

.bussforslag-rad.valgt {
    border-color: var(--merkevarefarge);
    background-color: var(--mod-primar-tint, #eef2ff);
}

.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;
}

.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(--merkevarefarge);
    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: #6b7280;
    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: #6b7280;
}

/* 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, #eef2ff);
    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: #1b6ec2;
    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: 0.78rem;
    font-weight: 600;
    color: #1b5fa8;
    background-color: #eaf3fc;
    border: 1px solid #bcd7f0;
    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: #1b5fa8;
    background-color: #eaf3fc;
}

/* 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;
}

/* 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;
}

.komigang-steg li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 6px 0;
}

.komigang-steg a {
    font-weight: 600;
    text-decoration: none;
    color: var(--merkevarefarge, #4f46e5);
}

.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: #6b7280;
    font-weight: 400;
}

.komigang-steg-hjelp {
    flex-basis: 100%;
    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;
}

/* ⚠ REN OPPLYSNING, aldri et varsel. Ca. 10 % rabatt er praksis i bransjen og
   ikke en regel — en partner som legger seg på 4 % har tatt et forretningsvalg.
   Derfor nøytral grå og ikke gul/rød: farge er en påstand om at noe er galt. */
.partnerpanel-differanse {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: #f4f5f8;
    border-radius: 8px;
    font-size: 0.95rem;
}

.partnerpanel-differanse .innstilling-hjelp {
    display: block;
    margin-top: var(--sp-1);
}

/* 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, #eef2ff);
    color: var(--mod-primar-mork, #4338ca);
    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, #4f46e5);
    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;
    accent-color: var(--merkevarefarge);
    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(--merkevarefarge);
}

/* ---- 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. */
    .liste-tabell tbody tr {
        grid-template-columns: auto auto 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;
    }
}

@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 beholder 44 px høyde. */
    .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 legges buss og sjåfør
   side om side, med antall og fjern-knappen under. */
.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 — bevisst større enn .btn-fjern-linje (30 px, ORD-41):
   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: 2fr 2fr;
    }

    .ekstrabuss-rad .ekstrabuss-antall {
        max-width: 10rem;
    }

    .ekstrabuss-fjern {
        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);
    }

    .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;
}