html {
    scrollbar-gutter: stable;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --flp-max: 1480px;
    --flp-gutter: 16px;
}

.ui-modern {
    --flp-bg: #f4f1ea;
    --flp-card: #e6e0d6;
    --flp-surface-secondary: #ddd5c7;
    --flp-text: #1f1f1f;
    --flp-text-secondary: #4a4a4a;
    /* RETTET (VIS-005, funksjonstest 27. august 2026): #6f6a61 mot kortbakgrunnen
       #e6e0d6 ga 4,09:1 og strøk WCAG AA (4,5:1) for vanlig tekst under 24 px.
       #5f5a52 gir 5,21:1 mot --flp-card, 6,06:1 mot --flp-bg og 4,69:1 mot
       --flp-surface-secondary - alle tre kombinasjonene består nå AA. */
    --flp-muted: #5f5a52;
    --flp-border: #cfc4b4;
    --flp-primary-action: #2f4f4f;
    --flp-primary-action-hover: #243c3c;
    --flp-secondary-action: #6b5e4a;
    --flp-secondary-action-hover: #5a4f3e;
    --flp-status-active: #4a6c6f;
    --flp-status-planned: #8a8174;
    --flp-status-followup: #c18f59;
    --flp-status-disabled: #7a7a7a;
    /* Kritisk/destruktiv. Verdien er IKKE ny - det er samme røde som
       .flp-button--danger og .flp-severity--kritisk alt bruker. Men
       variabelen har aldri eksistert: .flp-alert--error refererte til den
       med en hardkodet fallback, og traff fallbacken hver eneste gang.
       Definert her 30. august 2026 (trinn 3) slik at fargen har ETT sted,
       jf. designsystemets § 2 «bruk variabelen, aldri tallet». */
    --flp-severity-kritisk: #8d3434;
    /* M102-02 (blind revisjon, Middels, rettet 3. august 2026): farge per
       kildemodul i årshjulets kalender-/tidslinjevisning (ARSHJUL-FR-003/§10,
       "farge/ikon per modul, men tekstlig etikett skal alltid finnes" -
       WCAG §12). Én farge per source_module-verdi som faktisk kobles inn i
       yearwheel_items() - se yearwheel_source_module_color(). */
    --flp-source-routines: #4a6c6f;
    --flp-source-events: #8a8174;
    --flp-source-hospitering: #c18f59;
    --flp-source-meetings: #6b5e4a;
    --flp-source-followups: #2f4f4f;
    --flp-source-onboarding: #7a7a7a;
    --flp-source-arsplan: #a3623e;
    --flp-source-vehicles: #5a4f3e;
    --flp-source-default: #6f6a61;
    background: var(--flp-bg);
    color: var(--flp-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    margin: 0;
}

.ui-modern a { color: inherit; }

.flp-inner {
    width: 100%;
    max-width: var(--flp-max);
    margin: 0 auto;
    padding-inline: var(--flp-gutter);
}

.ui-modern .flp-global-topbar {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e6e2da;
}

.ui-modern .flp-global-topbar .flp-inner {
    padding-block: 10px;
}

.ui-modern .flp-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid #1f4b44;
    border-radius: 999px;
    overflow: hidden;
    background: #e7dfd2;
    line-height: 1;
}

.ui-modern .flp-brand__flp {
    background: #1f4b44;
    color: #fff;
    font-weight: 900;
    padding: 9px 14px;
    font-size: 18px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-modern .flp-brand__name {
    color: #1f4b44;
    font-weight: 800;
    padding: 9px 14px 9px 12px;
    font-size: 14px;
    letter-spacing: .06em;
    white-space: nowrap;
}

.ui-modern .flp-brand:hover { filter: brightness(0.98); }

.ui-modern .flp-brand:hover,
.ui-modern .flp-brand:focus,
.ui-modern .flp-brand:active {
    text-decoration: none;
}

.ui-modern .flp-brand:focus {
    outline: 2px solid rgba(31, 75, 68, 0.25);
    outline-offset: 3px;
}

.ui-modern .flp-subbar {
    width: 100%;
    background: transparent;
}

.ui-modern .flp-subbar .flp-inner {
    padding-block-start: 10px;
    padding-block-end: 0;
}

.ui-modern .flp-subbar__grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
}

.ui-modern .flp-subbar__left {
    min-width: 124px;
}

.ui-modern .flp-subbar__nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ui-modern .flp-subbar__right {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 10px;
}

.ui-modern .flp-user-meta-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ui-modern .flp-school-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--flp-primary-action);
    line-height: 1.1;
}

.ui-modern .flp-back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid var(--flp-primary-action);
    background: transparent;
    color: var(--flp-primary-action);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.ui-modern .flp-back-button:hover {
    background: var(--flp-primary-action);
    color: #fff;
}


.ui-modern .flp-nav-link,
.ui-modern .flp-button,
.ui-modern button,
.ui-modern input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    background: transparent;
    border: 2px solid var(--flp-primary-action);
    color: var(--flp-primary-action);
    cursor: pointer;
}

.ui-modern .flp-nav-link:hover,
.ui-modern .flp-button:hover,
.ui-modern button:hover,
.ui-modern input[type="submit"]:hover {
    background: var(--flp-primary-action);
    color: #fff;
}

.ui-modern .flp-main {
    padding: 18px 0 72px;
}

.ui-modern .flp-main--auth .flp-inner {
    display: flex;
    justify-content: center;
    padding-block-start: 26px;
}

.ui-modern .flp-container,
.ui-modern .flp-vehicles { margin: 0; }

.ui-modern .flp-card,
.ui-modern .flp-main .flp-inner > form,
.ui-modern .flp-main .flp-inner > table,
.ui-modern .flp-main .flp-inner > ul,
.ui-modern .validation-errors,
.ui-modern .flash {
    background: var(--flp-card);
    border-radius: 20px;
    border: 1px solid var(--flp-border);
    box-shadow: 0 10px 24px rgba(31, 31, 31, 0.08);
    padding: 18px 20px;
    margin-bottom: 16px;
}

/* Styrket MFA-anbefaling (27. juli 2026, hoved-SRS §11.1-gapet) - fortsatt en
   myk påminnelse (ingen håndhevelse), men skal skille seg tydelig visuelt fra
   vanlige info-meldinger på samme side. Gjenbruker den eksisterende
   "followup"-aksentfargen (samme tone som brukes andre steder for "krever
   oppmerksomhet") i stedet for å innføre en ny, ubrukt farge i paletten. */
.ui-modern .flp-mfa-warning {
    border-left: 5px solid var(--flp-status-followup);
    background: #f4ead9;
}

.ui-modern h1,
.ui-modern h2,
.ui-modern h3,
.ui-modern p { margin-top: 0; }
.ui-modern .flp-eyebrow { margin: 0 0 4px; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--flp-muted); }
.ui-modern .flp-lead,
.ui-modern .flp-subtitle { color: var(--flp-text-secondary); }

/* RETTET 31. august 2026: uten align-items arvet raden `stretch`, og
   handlingen til høyre ble strukket til hele radens høyde. På «Mine moduler»
   ble «Tilpass» 84x366 px - en loddrett kapsel. `center` fjerner strekket
   uten å flytte etiketten, som allerede sto midtstilt i den strukne boksen. */
.ui-modern .flp-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.ui-modern .flp-actions { display: flex; align-items: flex-start; align-self: flex-start; gap: 10px; flex-wrap: wrap; }
.ui-modern .flp-routine-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
.ui-modern .flp-routine-button-active {
    background: var(--flp-primary-action);
    color: #fff;
}
.ui-modern .flp-routine-config {
    background: var(--flp-card);
    border-radius: 20px;
    border: 1px solid var(--flp-border);
    box-shadow: 0 10px 24px rgba(31, 31, 31, 0.08);
    padding: 18px 20px;
    margin-bottom: 16px;
}
.ui-modern .flp-routine-config-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: start;
}
.ui-modern .flp-routine-config-settings {
    display: grid;
    gap: 12px;
}
.ui-modern .routine-info {
    background: color-mix(in srgb, var(--flp-surface-secondary) 70%, white);
    border: 1px solid color-mix(in srgb, var(--flp-status-active) 35%, white);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(31, 31, 31, 0.06);
    line-height: 1.5;
}
.ui-modern .routine-info h3 {
    margin: 0 0 12px;
}
.ui-modern .routine-info p {
    margin: 0 0 10px;
}
.ui-modern .routine-info ul {
    margin: 0 0 10px 18px;
    padding: 0;
}
@media (max-width: 820px) {
    .ui-modern .flp-routine-config-layout {
        grid-template-columns: 1fr;
    }
}
.ui-modern .flp-button--primary { background: var(--flp-primary-action); color: #fff; }
.ui-modern .flp-button--primary:hover { background: var(--flp-primary-action-hover); }
.ui-modern .flp-button--ghost { border-color: var(--flp-secondary-action); color: var(--flp-secondary-action); }
.ui-modern .flp-button--ghost:hover { background: var(--flp-secondary-action); color: #fff; }
.ui-modern .flp-button--compact {
    padding: 8px 14px;
    font-size: 0.88rem;
}

.ui-modern .flp-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--flp-surface-secondary); border: 1px solid var(--flp-border); font-size: .82rem; }
.ui-modern .flp-status-aktiv { background: color-mix(in srgb, var(--flp-status-active) 16%, white); border-color: color-mix(in srgb, var(--flp-status-active) 36%, white); color: var(--flp-status-active); }
.ui-modern .flp-status-midlertidig_ute,
.ui-modern .flp-status-ute_av_drift { background: color-mix(in srgb, var(--flp-status-followup) 18%, white); border-color: color-mix(in srgb, var(--flp-status-followup) 38%, white); color: var(--flp-status-followup); }


.ui-modern .flp-chip-toggle-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-modern .flp-chip-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ui-modern .flp-chip-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ui-modern .flp-chip-toggle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #7f8c99 70%, white);
    background: color-mix(in srgb, #d7dfe7 65%, white);
    color: #2f3b47;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.ui-modern .flp-chip-toggle input:checked + span,
.ui-modern .flp-chip-toggle.is-checked span {
    border-color: color-mix(in srgb, #2e7d32 68%, white);
    background: color-mix(in srgb, #2e7d32 34%, white);
    color: #0f4d17;
}

/* SKOLER-FR-035 (29. august 2026): en avkrysset klasse er ikke det samme som
   en KLAR klasse. Brikken her og statusen i «Klassedekning» lenger ned på
   samme side viste tidligere to forskjellige ting om samme klasse - alle
   brikkene var grønne selv om halve dekningstabellen sto gul. Da er brikken
   ikke en status, bare en huskelapp på hva noen har krysset av.

   Grønn = klassen er klar (intern dekning OG bekreftet mot Vegvesenets liste).
   Gul   = skolen tilbyr den, men noe mangler ennå. Samme gule som
           flp-badge--warning, slik at fargen betyr det samme overalt. */
.ui-modern .flp-chip-toggle--ikke-klar input:checked + span,
.ui-modern .flp-chip-toggle--ikke-klar.is-checked span {
    border-color: color-mix(in srgb, #d59a00 46%, white);
    background: color-mix(in srgb, #d59a00 26%, white);
    color: #7a5500;
}

/* En klasse som er tatt ut av tilbudet er fortsatt avkrysset ut den siste
   dagen den tilbys (valid_to er SISTE gyldige dag). Uten en egen tilstand
   leses den som «fjerningen virket ikke» - det var nøyaktig misforståelsen
   29. august 2026. Gjennomstreket og dempet, med datoen i title. */
.ui-modern .flp-chip-toggle--avsluttes input:checked + span,
.ui-modern .flp-chip-toggle--avsluttes.is-checked span {
    border-color: var(--flp-muted);
    background: color-mix(in srgb, var(--flp-muted) 12%, white);
    color: var(--flp-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.ui-modern .flp-chip-toggle input:focus-visible + span {
    outline: 2px solid color-mix(in srgb, #2e7d32 48%, white);
    outline-offset: 2px;
}

.ui-modern .flp-chip-toggle--ikke-klar input:focus-visible + span {
    outline-color: color-mix(in srgb, #d59a00 60%, white);
}

/* Fargeforklaring under brikkerekka. Fargen alene er aldri nok - den som ikke
   skiller gult fra grønt, skal fortsatt kunne lese hva som gjelder. Hver
   brikke har i tillegg en title med hva som mangler. */
.ui-modern .flp-chip-forklaring {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    font-size: .86rem;
    color: var(--flp-text-secondary);
}
.ui-modern .flp-chip-forklaring span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ui-modern .flp-chip-forklaring i {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid;
    flex: none;
}
.ui-modern .flp-chip-forklaring .er-klar {
    border-color: color-mix(in srgb, #2e7d32 68%, white);
    background: color-mix(in srgb, #2e7d32 34%, white);
}
.ui-modern .flp-chip-forklaring .ikke-klar {
    border-color: color-mix(in srgb, #d59a00 46%, white);
    background: color-mix(in srgb, #d59a00 26%, white);
}
.ui-modern .flp-chip-forklaring .avsluttes {
    border-color: var(--flp-muted);
    background: color-mix(in srgb, var(--flp-muted) 12%, white);
}

.ui-modern .flp-chip-toggle--readonly span {
    cursor: default;
}

.ui-modern .flp-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-modern .flp-muted-text {
    color: var(--flp-muted);
    font-size: 0.9rem;
}

/* Generisk autolagringsstatus (public/assets/autosave.js), avklart av Thomas
   1. august 2026 - settes inn av scriptet rett etter enhver textarea med
   data-autosave-entity-type. */
.ui-modern .flp-autosave-status {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--flp-muted);
    min-height: 1em;
}

.ui-modern .flp-autosave-status--error {
    color: #a15c00;
}

.ui-modern .flp-badge--class {
    background: color-mix(in srgb, var(--flp-primary-action) 18%, white);
    border-color: color-mix(in srgb, var(--flp-primary-action) 40%, white);
    color: var(--flp-primary-action);
    font-weight: 700;
}

.ui-modern .flp-badge--success {
    background: color-mix(in srgb, #2e7d32 20%, white);
    border-color: color-mix(in srgb, #2e7d32 38%, white);
    color: #1b5e20;
    font-weight: 700;
}

.ui-modern .flp-badge--warning {
    background: color-mix(in srgb, #d59a00 24%, white);
    border-color: color-mix(in srgb, #d59a00 40%, white);
    color: #7a5500;
    font-weight: 700;
}

.ui-modern .flp-badge--neutral {
    background: color-mix(in srgb, var(--flp-muted) 20%, white);
    border-color: color-mix(in srgb, var(--flp-muted) 34%, white);
    color: var(--flp-text-secondary);
}

/* Modul 111 (Undervisningsavvik, full SRS-utbygging, migrasjon 053,
   27. juli 2026): alvorlighetsgrad KRITISK og "krever umiddelbar
   handling"-merking trenger en tydeligere farge enn warning/neutral. */
.ui-modern .flp-badge--danger {
    background: color-mix(in srgb, #c62828 20%, white);
    border-color: color-mix(in srgb, #c62828 40%, white);
    color: #8e0000;
    font-weight: 700;
}

/* Migrasjon 065 (§ 6-6): "Lås opp"-bekreftelsesdialogen for bekreftet
   klasseautorisasjon (app/teachers/view.php). Native <dialog> - minimal
   styling, gjenbruker eksisterende fargevariabler/knappeklasser. */
.ui-modern dialog.flp-confirm-dialog {
    max-width: 480px;
    width: calc(100% - 2rem);
    border: 1px solid var(--flp-border);
    border-radius: 8px;
    padding: 20px;
    background: var(--flp-card);
    color: var(--flp-text);
}

.ui-modern dialog.flp-confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.ui-modern dialog.flp-confirm-dialog .flp-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.ui-modern .flp-table--teachers td,
.ui-modern .flp-table--teachers th {
    vertical-align: middle;
}

.ui-modern table,
.ui-modern .flp-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}
.ui-modern th,
.ui-modern td,
.ui-modern .flp-table th,
.ui-modern .flp-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--flp-border);
    vertical-align: top;
}
.ui-modern th,
.ui-modern .flp-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--flp-text-secondary); }
.ui-modern .flp-table-actions { text-align: right; }

.ui-modern .flp-row-highlight { background: color-mix(in srgb, var(--flp-status-followup) 20%, white); }


.ui-modern .flp-table--upcoming-tasks tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--flp-surface-secondary) 24%, transparent);
}

.ui-modern input,
.ui-modern select,
.ui-modern textarea,
.ui-modern .flp-input {
    border-radius: 12px;
    border: 1px solid var(--flp-border);
    background: var(--flp-bg);
    color: var(--flp-text);
    padding: 10px 12px;
    font: inherit;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}
.ui-modern input[type="checkbox"],
.ui-modern input[type="radio"] {
    width: auto;
    max-width: none;
    padding: 0;
    accent-color: var(--flp-primary-action);
}
.ui-modern label,
.ui-modern .flp-field { display: grid; gap: 6px; font-weight: 600; color: var(--flp-text-secondary); margin-bottom: 12px; }

/* RETTET (VIS-001, funksjonstest 27. august 2026): .flp-grid manglet vertikal
   justering. CSS Grid strekker som standard (align-items: stretch) hvert
   element til hoyden av den hoyeste naboen i samme rad. Et vanlig datofelt ved
   siden av et tekstomrade ble derfor malt til 916 px, en avkrysningsboks til
   897 px og «Opprett mote»-knappen til 308 px. Fordi klassen er delt av alle
   skjemaene i portalen, gikk feilen igjen pa tvers av moduler - derfor rettes
   den her, i felleskomponenten, og ikke med sidevise unntak. */
/* .flp-grid defineres naa i designsystembolken nederst i fila (30. august
   2026). Regelen som sto her - repeat(auto-fit, minmax(220px, 1fr)) uten
   tak - ga opptil sju kolonner paa bred skjerm. To konkurrerende
   definisjoner av samme klasse er nettopp den forvirringen designsystemet
   skal fjerne, saa den er borte herfra i stedet for aa bli skygget. */
/* Knapper og enlinjekontroller beholder sin naturlige hoyde og bredde ogsa nar
   de star alene i en rutenettrad. */
.ui-modern .flp-grid > button,
.ui-modern .flp-grid > .flp-button,
.ui-modern .flp-grid > input[type="submit"] { align-self: start; width: fit-content; }
.ui-modern .flp-grid--checks { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
.ui-modern .flp-span-all { grid-column: 1 / -1; }
.ui-modern .flp-field--full { grid-column: 1 / -1; }

.ui-modern .flp-card--compact {
    padding: 12px 16px;
}

/* .flp-yearwheel-controls er fjernet 30. august 2026. Den var en egen
   rutenettkomponent uten kolonnetak, og den la etikett og kontroll som
   hver sin celle - saa etikettene havnet visuelt ved feil felt. Alle tre
   aarshjulene (fl/, teachers/, kontor/) bruker naa .flp-grid--filter med
   hvert par i en .flp-field, som resten av portalen. */

/* M102-02 (blind revisjon, Middels, rettet 3. august 2026): ekte
   kalenderrutenett (månedsvisning) og en horisontal tidslinje
   (tidslinjevisning) - ARSHJUL-FR-003 ("Brukeren skal kunne vise ...
   tidslinje"), §2/§10 (kalendervisninger). Tabellen (§10 "Listevisning")
   beholdes uendret for de øvrige periodevalgene (dag/uke/kvartal/halvt
   år/år), der en rutenettvisning gir mindre visuell mening. */
.ui-modern .flp-source-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    flex: 0 0 auto;
    background: var(--flp-source-default);
}
.ui-modern .flp-source-dot--routines { background: var(--flp-source-routines); }
.ui-modern .flp-source-dot--events { background: var(--flp-source-events); }
.ui-modern .flp-source-dot--hospitering { background: var(--flp-source-hospitering); }
.ui-modern .flp-source-dot--meetings { background: var(--flp-source-meetings); }
.ui-modern .flp-source-dot--followups { background: var(--flp-source-followups); }
.ui-modern .flp-source-dot--onboarding { background: var(--flp-source-onboarding); }
.ui-modern .flp-source-dot--arsplan { background: var(--flp-source-arsplan); }
.ui-modern .flp-source-dot--vehicles { background: var(--flp-source-vehicles); }

.ui-modern .flp-yearwheel-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--flp-text-secondary);
}
.ui-modern .flp-yearwheel-legend li {
    display: flex;
    align-items: center;
    list-style: none;
}

/* RETTET (VIS-002, funksjonstest 27. august 2026): 'repeat(7, 1fr)' ga hver
   kolonne en automatisk minstebredde lik innholdets minstebredde. Hendelses-
   lenkene har white-space: nowrap, sa kolonnene kunne ikke krympe likt:
   dokumentet ble 1413 px bredt i et 1280 px vindu, og lordag/sondag havnet
   utenfor skjermen. minmax(0, 1fr) + min-width: 0 nedover lar kolonnene
   faktisk krympe, og .flp-calendar-scroll avgrenser eventuell sideveis rulling
   til selve kalenderen i stedet for hele dokumentet. */
.ui-modern .flp-calendar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.ui-modern .flp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
    min-width: 0;
}
.ui-modern .flp-calendar-grid__weekday {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--flp-text-secondary);
    text-align: center;
    padding: 2px 0;
}
.ui-modern .flp-calendar-day {
    border: 1px solid var(--flp-border);
    border-radius: 6px;
    min-height: 90px;
    padding: 4px 6px;
    background: var(--flp-surface-secondary);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.ui-modern .flp-calendar-day--outside {
    opacity: 0.45;
}
.ui-modern .flp-calendar-day--today {
    border-color: var(--flp-primary-action);
    border-width: 2px;
}
.ui-modern .flp-calendar-day__number {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--flp-text-secondary);
}
.ui-modern .flp-calendar-day__item {
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    line-height: 1.2;
    text-decoration: none;
    color: var(--flp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ui-modern .flp-calendar-day__item:hover {
    text-decoration: underline;
}
.ui-modern .flp-calendar-day__more {
    font-size: 0.75rem;
    color: var(--flp-text-secondary);
}
@media (max-width: 640px) {
    /* Pa mobil presenteres maneden som en agendaliste: kalenderrutenettet gir
       ingen mening pa 390 px, og et 7-kolonners rutenett tvang hele dokumentet
       sideveis (dokumentbredde 489 px i et 390 px vindu). */
    .ui-modern .flp-calendar-grid {
        grid-template-columns: 1fr;
    }
    .ui-modern .flp-calendar-grid__weekday {
        display: none;
    }
    .ui-modern .flp-calendar-day {
        min-height: unset;
    }
    .ui-modern .flp-calendar-day--outside {
        display: none;
    }
    .ui-modern .flp-calendar-day--empty {
        display: none;
    }
    .ui-modern .flp-calendar-day__item {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}

.ui-modern .flp-timeline {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 4px;
    border-left: 3px solid var(--flp-border);
}
.ui-modern .flp-timeline__entry {
    position: relative;
    padding: 4px 0 14px 20px;
}
.ui-modern .flp-timeline__entry::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--flp-source-default);
    border: 2px solid var(--flp-bg);
}
.ui-modern .flp-timeline__entry--routines::before { background: var(--flp-source-routines); }
.ui-modern .flp-timeline__entry--events::before { background: var(--flp-source-events); }
.ui-modern .flp-timeline__entry--hospitering::before { background: var(--flp-source-hospitering); }
.ui-modern .flp-timeline__entry--meetings::before { background: var(--flp-source-meetings); }
.ui-modern .flp-timeline__entry--followups::before { background: var(--flp-source-followups); }
.ui-modern .flp-timeline__entry--onboarding::before { background: var(--flp-source-onboarding); }
.ui-modern .flp-timeline__entry--arsplan::before { background: var(--flp-source-arsplan); }
.ui-modern .flp-timeline__entry--vehicles::before { background: var(--flp-source-vehicles); }
.ui-modern .flp-timeline__date {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--flp-text-secondary);
}
.ui-modern .flp-timeline__title {
    display: block;
}
.ui-modern .flp-timeline__meta {
    font-size: 0.8rem;
    color: var(--flp-text-secondary);
}
.ui-modern .flp-form-actions,
.ui-modern .flp-actions-row,
.ui-modern .flp-action-bar { display: flex; gap: 10px; flex-wrap: wrap; }

.ui-modern .flp-module-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.ui-modern .flp-module-card {
    border-radius: 20px;
    border: 2px solid transparent;
    padding: 20px;
}
.ui-modern .flp-module-card--green { background: var(--flp-card); }
.ui-modern .flp-module-card--purple { background: var(--flp-surface-secondary); }
.ui-modern .flp-module-card--pink { background: color-mix(in srgb, var(--flp-secondary-action) 20%, var(--flp-bg)); }
.ui-modern .flp-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ui-modern .flp-shortcuts a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--flp-card);
    border-radius: 999px;
    padding: 12px 16px;
    border: 2px solid color-mix(in srgb, var(--flp-primary-action) 28%, white);
    text-decoration: none;
    font-weight: 700;
}


.ui-modern .flp-login-card {
    width: min(100%, 380px);
    max-width: 540px;
    background: var(--flp-card);
    border: 1px solid var(--flp-border);
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(31, 31, 31, 0.12);
    padding: 24px;
}

.ui-modern .login-form button[type="submit"] {
    margin-top: 16px;
}
.ui-modern .flp-alert { background: color-mix(in srgb, var(--flp-status-followup) 16%, white); border: 1px solid color-mix(in srgb, var(--flp-status-followup) 42%, white); color: #6b4e2f; border-radius: 12px; padding: 10px 12px; }

@media (max-width: 900px) {
    .ui-modern .flp-module-grid { grid-template-columns: 1fr; }

    .ui-modern .flp-brand__name {
        font-size: 0.78rem;
        letter-spacing: 0.03em;
    }

    .ui-modern .flp-subbar__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ui-modern .flp-subbar__left {
        min-width: 0;
    }

    .ui-modern .flp-subbar__right .flp-school-name {
        display: none;
    }
}

.ui-modern .flp-report-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    /* RETTET (VIS-001): 'end' lot fortsatt hoye naboer bestemme radhoyden. */
    align-items: start;
}
.ui-modern .flp-report-filter-grid > div { min-width: 0; }

.ui-modern .flp-report-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ui-modern .flp-table-wrap {
    overflow-x: auto;
}

/* FLP-SRS-101 (Dashboard) - modul 101 fullbygges per SRS, 27. juli 2026.
   Itemiserte "Krever handling"-lister (DASHBOAR-FR-003/004) - gjenbruker
   samme kort-/pill-formspråk som .flp-shortcuts, kun med en ekstra
   meta-linje per element (kilde, klasse, dato, alvorlighet). */
.ui-modern .flp-dashboard-items {
    display: grid;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ui-modern .flp-dashboard-item a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--flp-card);
    border-radius: 14px;
    padding: 10px 14px;
    border: 2px solid color-mix(in srgb, var(--flp-primary-action) 22%, white);
    text-decoration: none;
}
.ui-modern .flp-dashboard-item__title {
    font-weight: 700;
}
.ui-modern .flp-dashboard-item__meta {
    font-size: 0.82rem;
    color: var(--flp-text-secondary);
}
.ui-modern .flp-dashboard-greeting {
    padding: clamp(12px, 2vw, 22px) 4px 4px;
}
.ui-modern .flp-dashboard-greeting h1 {
    margin: 2px 0 4px;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
}
.ui-modern .flp-dashboard-greeting p:last-child {
    margin: 0;
    color: var(--flp-text-secondary);
}
.ui-modern .flp-dashboard-greeting .flp-dashboard-status-line {
    margin-top: 9px;
    color: var(--flp-text);
    font-weight: 700;
}
.ui-modern .flp-role-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ui-modern .flp-role-status-card {
    display: grid;
    min-height: 128px;
    align-content: center;
    gap: 5px;
    padding: 17px;
    color: var(--flp-text);
    text-decoration: none;
    border: 1px solid var(--flp-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--flp-card) 80%, white);
    box-shadow: 0 8px 24px rgba(49, 58, 55, .055);
    transition: transform .15s ease, border-color .15s ease;
}
.ui-modern .flp-role-status-card:hover,
.ui-modern .flp-role-status-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--flp-primary-action);
}
.ui-modern .flp-role-status-card > span { font-weight: 750; }
.ui-modern .flp-role-status-card strong { font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1; }
.ui-modern .flp-role-status-card small { color: var(--flp-muted); }
.ui-modern .flp-role-status-card--action,
.ui-modern .flp-role-status-card--attention { border-left: 5px solid #9a5b3f; }
.ui-modern .flp-role-status-card--notice { border-left: 5px solid #c09a55; }
.ui-modern .flp-role-launcher { padding: clamp(18px, 3vw, 26px); }
.ui-modern .flp-role-launcher .flp-eyebrow { margin-bottom: 2px; }
.ui-modern .flp-role-launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}
.ui-modern .flp-role-launcher-grid > a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    min-height: 82px;
    padding: 13px;
    color: var(--flp-text);
    text-decoration: none;
    border: 1px solid var(--flp-border);
    border-radius: 13px;
    background: rgba(255,255,255,.42);
}
.ui-modern .flp-role-launcher-grid > a:hover,
.ui-modern .flp-role-launcher-grid > a:focus-visible {
    border-color: var(--flp-primary-action);
    background: #f2ece1;
}
.ui-modern .flp-role-launcher-icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #dce4df;
    color: #294d49;
    font-weight: 850;
}
.ui-modern .flp-role-launcher-grid a > span:last-child { color: var(--flp-muted); font-size: .82rem; }
.ui-modern .flp-fl-full-worklist,
.ui-modern .flp-fl-agenda-details,
.ui-modern .flp-role-full-worklist,
.ui-modern .flp-role-agenda-details { padding: 18px 22px; }
.ui-modern .flp-fl-full-worklist > summary,
.ui-modern .flp-fl-agenda-details > summary,
.ui-modern .flp-role-full-worklist > summary,
.ui-modern .flp-role-agenda-details > summary { min-height: 34px; }
.ui-modern .flp-fl-full-worklist > .flp-worklist-tools__body,
.ui-modern .flp-fl-agenda-details > .flp-worklist-tools__body,
.ui-modern .flp-role-full-worklist > .flp-full-worklist__body,
.ui-modern .flp-role-agenda-details > .flp-role-agenda-details__body { padding-top: 18px; }
.ui-modern .flp-role-agenda-details__body > .flp-card {
    margin: 0;
    border: 0;
    box-shadow: none;
}
.ui-modern .flp-role-agenda-details__body > .flp-card + .flp-card { margin-top: 14px; }
.ui-modern .flp-fl-agenda-section-heading {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--flp-border);
}
.ui-modern .flp-dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.ui-modern .flp-dashboard-priority-card,
.ui-modern .flp-dashboard-action-card {
    background: color-mix(in srgb, var(--flp-card) 76%, white);
}
.ui-modern .flp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ui-modern .flp-card-header h2 { margin: 0; }
.ui-modern .flp-count-badge {
    display: inline-grid;
    min-width: 2rem;
    min-height: 2rem;
    place-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 800;
    color: #fff;
    background: #667573;
}
.ui-modern .flp-count-badge--action { background: #9a5b3f; }
.ui-modern .flp-dashboard-item form { margin: 0; }
.ui-modern .flp-dashboard-item__button {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--flp-primary-action) 22%, white);
    border-radius: 12px;
    background: var(--flp-card);
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.ui-modern .flp-dashboard-item__button:hover,
.ui-modern .flp-dashboard-item a:hover { background: #f2ece1; }
.ui-modern .flp-agenda-list {
    display: grid;
    gap: 0;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.ui-modern .flp-agenda-list li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) minmax(80px, 120px);
    gap: 10px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--flp-border);
}
.ui-modern .flp-agenda-list li:last-child { border-bottom: 0; }
.ui-modern .flp-agenda-list time { color: var(--flp-text-secondary); font-variant-numeric: tabular-nums; }
.ui-modern .flp-agenda-list a { font-weight: 700; }
.ui-modern .flp-agenda-list a,
.ui-modern .flp-agenda-list span { min-width: 0; overflow-wrap: anywhere; }
.ui-modern .flp-agenda-list span { color: var(--flp-muted); font-size: .82rem; }
.ui-modern .flp-severity {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #d7d9d8;
    color: #303b39;
    font-weight: 700;
}
.ui-modern .flp-severity--kritisk { background: #8d3434; color: #fff; }
.ui-modern .flp-severity--hoy,
.ui-modern .flp-severity--høy { background: #b75d3d; color: #fff; }
.ui-modern .flp-severity--middels { background: #d9ad58; color: #352b1b; }
.ui-modern .flp-severity--lav { background: #82969d; color: #fff; }
.ui-modern .flp-worklist-tools summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    list-style: none;
}
.ui-modern .flp-worklist-tools summary::-webkit-details-marker { display: none; }
.ui-modern .flp-worklist-tools summary::after { content: '⌄'; font-size: 1.35rem; }
.ui-modern .flp-worklist-tools[open] summary::after { transform: rotate(180deg); }
.ui-modern .flp-worklist-tools summary span { color: var(--flp-muted); font-size: .9rem; font-weight: 400; }
.ui-modern .flp-worklist-tools__body { padding-top: 18px; }
.ui-modern .flp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ui-modern .flp-empty-state { color: var(--flp-muted); }
.ui-modern .flp-dashboard-hidden-note {
    padding: 10px 16px;
}
.ui-modern .flp-inline-form {
    display: inline-block;
    margin: 2px 6px 2px 0;
}
/* Hvem dekker klassen, i Klassedekning: én blokk per person, med brikkene for
   klassene vedkommende dekker rett under navnet. Brikkene gjenbruker
   tilbudsstripens utseende med vilje - det er samme slags opplysning, og to
   ulike former for det samme er en form å lære for mye. */
.ui-modern .flp-dekkende + .flp-dekkende {
    margin-top: 8px;
}
.ui-modern .flp-dekkende__brikker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}
.ui-modern .flp-dekkende__brikker .flp-tilbudsstripe__brikke {
    padding: 1px 8px;
    font-size: .78rem;
}
/* Klassen du står i nå. Uten dette må man legge sammen «raden jeg er i» og
   «brikkene under navnet» i hodet for å se hele bildet. */
.ui-modern .flp-tilbudsstripe__brikke--denne {
    box-shadow: 0 0 0 2px color-mix(in srgb, #1b5e20 45%, white);
}

/* Bekreftet TEA-dato i Klassedekning. Må være et blokkelement: står den som
   løs tekst rett foran «.flp-inline-form» (inline-block), blir skjemaet
   trukket opp på samme linje som datoen i akkurat de radene som har en dato,
   mens radene uten begynner til venstre. Målt 30. august 2026: 445 px mot
   358 px i samme kolonne. */
.ui-modern .flp-tea-bekreftet {
    margin: 0 0 4px;
}
/* M101-03: lagrede dashbord-/årshjulfiltre (migrasjon 069). */
.ui-modern .flp-preset-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 12px;
}
.ui-modern .flp-preset-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

/* DASHBOAR-FR-015: mobil visning skal prioritere handlinger fremfor
   tabeller. Under 640px gjøres "kommende oppgaver"-tabellene (identifisert
   med data-label-row/data-label, se dashboard-sidene) om til stablede kort
   - samme informasjon, men uten sidescrolling eller bitte små kolonner.
   Andre tabeller i systemet er upåvirket av dette (beholder
   .flp-table-wrap sin horisontale scroll som før). */
@media (max-width: 640px) {
    .ui-modern table:has(tr[data-label-row]) thead {
        display: none;
    }
    .ui-modern table:has(tr[data-label-row]) tbody tr {
        display: block;
        border-bottom: 1px solid var(--flp-border);
        padding: 8px 0;
    }
    .ui-modern table:has(tr[data-label-row]) tbody td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border-bottom: none;
        padding: 3px 0;
        text-align: right;
    }
    .ui-modern table:has(tr[data-label-row]) tbody td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--flp-text-secondary);
        text-align: left;
    }
    .ui-modern table:has(tr[data-label-row]) tbody td:last-child {
        justify-content: flex-end;
    }

    .ui-modern .flp-report-filter-grid,
    .ui-modern .flp-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Felles app-skall – godkjent FLP frontendretning (2026-08-05)
   ------------------------------------------------------------------------- */
.flp-app-brandbar {
    background: #fbfaf6;
    color: #182321;
    border-bottom: 1px solid #ded7c8;
}

/* Kompakte informasjonskort. Brukes blant annet på kjøretøykortet. */
.ui-modern .flp-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 14px;
}
.ui-modern .flp-detail-grid > div,
.ui-modern .flp-detail-stack {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--flp-border) 72%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--flp-bg) 74%, white);
}
.ui-modern .flp-detail-wide { grid-column: 1 / -1; }
.ui-modern .flp-detail-label {
    margin: 0 0 4px;
    color: var(--flp-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ui-modern .flp-detail-value { margin: 0; font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; }
.ui-modern .flp-detail-note { margin: 5px 0 0; color: var(--flp-muted); font-size: .78rem; }
.ui-modern .flp-tire-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ui-modern .flp-tire-column { display: grid; align-content: start; gap: 10px; }
.ui-modern .flp-tire-column h3 { margin: 0 0 2px; }

@media (max-width: 900px) {
    .ui-modern .flp-dashboard-overview-grid { grid-template-columns: 1fr; }
    .ui-modern .flp-role-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-modern .flp-role-launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ui-modern .flp-agenda-list li { grid-template-columns: 88px minmax(0, 1fr); }
    .ui-modern .flp-agenda-list span { grid-column: 2; }
    .ui-modern .flp-tire-grid { grid-template-columns: 1fr; }
    .ui-modern .flp-worklist-tools summary span { display: none; }
    .ui-modern .flp-role-status-grid,
    .ui-modern .flp-role-launcher-grid { grid-template-columns: 1fr; }
    .ui-modern .flp-role-status-card { min-height: 104px; }
    .ui-modern .flp-fl-full-worklist > summary span,
    .ui-modern .flp-fl-agenda-details > summary span,
    .ui-modern .flp-role-full-worklist > summary span,
    .ui-modern .flp-role-agenda-details > summary span { display: block; }
}

.flp-app-brandbar .flp-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.flp-brand__wordmark {
    color: #315b59;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.flp-brand-context {
    display: grid;
    justify-items: end;
    gap: 2px;
    color: #3d4845;
    text-align: right;
}

.flp-brand-context span { color: #66706d; font-size: .86rem; }

.flp-app-toolbar {
    position: relative;
    /* Loftet fra 30 til 40 samtidig: verktoylinjen er panelets
       stacking-kontekst, saa panelets z-index maales innenfor denne. */
    z-index: 40;
    background: #e9e1d2;
    border-bottom: 1px solid #d2c7b5;
    color: #17201f;
}

.flp-toolbar-row {
    min-height: 60px;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 18px;
}

.flp-app-menu, .flp-account-menu { position: relative; }
.flp-app-menu summary, .flp-account-menu summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid #c7bba8;
    background: #fffdf8;
    border-radius: 10px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    font-weight: 650;
}
.flp-app-menu summary { width: 44px; padding: 0; background: #315b59; color: #fff; border-color: #315b59; font-size: 1.2rem; }
.flp-app-menu summary::-webkit-details-marker, .flp-account-menu summary::-webkit-details-marker { display: none; }
.flp-app-menu summary:focus-visible, .flp-account-menu summary:focus-visible, .flp-dashboard-home:focus-visible,
.flp-app-menu__panel a:focus-visible, .flp-account-menu nav a:focus-visible, .flp-context-nav a:focus-visible {
    outline: 3px solid #d28b32;
    outline-offset: 3px;
}

.flp-dashboard-home { color: #17201f; font-weight: 700; text-decoration: none; padding: 10px 4px; }
.flp-live-date { justify-self: end; color: #5c6562; font-size: .9rem; }
.flp-live-clock { font-variant-numeric: tabular-nums; font-weight: 750; }

.flp-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(24, 35, 33, .42);
    backdrop-filter: blur(2px);
}
.flp-modal {
    width: min(100%, 560px);
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid #cdbfa9;
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 24px 70px rgba(24, 35, 33, .28);
}
.flp-modal h2 { margin-top: .2rem; }
.flp-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.flp-modal-actions form { margin: 0; }

/* RETTET 29. august 2026 (Thomas): nedtrekksmenyen la seg BAK modulmenyen
   under - "Arbeidsliste / Nytt avvik / Dashboard ..." skinte tvers gjennom
   den apne menyen. Aarsaken er at .flp-context-nav har position: relative
   (for gradienten som viser at rekka kan rulles) og staar SENERE i DOM-en.
   Uten z-index vinner den som kommer sist. En nedtrekksmeny skal alltid
   ligge ytterst; 60 er valgt for aa ligge over verktoylinjen (30) og
   klassestatusstripen (30), men under modal (1000) og
   feilmeldingsknappen (900). */
.flp-app-menu__panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 10px);
    left: 0;
    width: min(720px, calc(100vw - 32px));
    max-height: min(72vh, 720px);
    overflow: auto;
    display: block;
    padding: 14px;
    border: 1px solid #d2c7b5;
    border-radius: 14px;
    background: #f8f4eb;
    box-shadow: 0 18px 48px rgba(28, 38, 35, .18);
}

.flp-menu-area { width: 50%; border: 1px solid transparent; border-radius: 10px; padding: 6px 14px 6px 6px; }
.flp-menu-area:hover, .flp-menu-area:focus-within { background: #fffdf8; border-color: #ddd2c0; }
.flp-menu-area__title { display: flex; align-items: center; gap: 9px; padding: 9px; color: #243f3d; font-weight: 700; text-decoration: none; }
.flp-menu-area__title::after { content: '›'; margin-left: auto; }
.flp-menu-area ul {
    position: absolute;
    inset: 14px 14px 14px calc(50% - 2px);
    display: none;
    list-style: none;
    margin: 0;
    padding: 6px 0 5px 14px;
    border-left: 1px solid #ddd2c0;
    overflow: auto;
}
.flp-menu-area:hover ul,
.flp-menu-area:focus-within ul,
.flp-menu-area:only-child ul { display: block; }
.flp-menu-area li a { display: block; border-radius: 7px; color: #3c4845; padding: 7px 9px; text-decoration: none; }
.flp-menu-area li a:hover { background: #eee7da; color: #193f3c; }

.flp-account-menu { justify-self: end; }
.flp-account-menu nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    padding: 8px;
    display: grid;
    background: #fffdf8;
    border: 1px solid #d2c7b5;
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(28, 38, 35, .16);
}
.flp-account-menu nav a { color: #263532; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.flp-account-menu nav a:hover { background: #eee7da; }

.flp-context-nav { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px 62px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.flp-context-nav::-webkit-scrollbar { display: none; }
.flp-context-nav a { white-space: nowrap; color: #40504d; text-decoration: none; font-size: .9rem; padding: 6px 10px; border-radius: 7px; }
.flp-context-nav a:hover { background: rgba(255,255,255,.58); color: #173f3b; }

@media (max-width: 760px) {
    .flp-app-brandbar .flp-inner { min-height: 66px; align-items: flex-start; padding-top: 14px; padding-bottom: 12px; }
    .flp-brand-context { max-width: 60%; }
    .flp-brand-context span { font-size: .75rem; }
    .flp-toolbar-row { grid-template-columns: auto auto 1fr auto; gap: 9px; min-height: 58px; }
    .flp-live-clock { font-size: .9rem; }
    .flp-live-date { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding-bottom: 8px; }
    .flp-app-menu__panel { position: fixed; top: 132px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 150px); }
    .flp-menu-area { width: 100%; }
    .flp-menu-area ul { position: static; display: block; padding: 0 0 5px 34px; border-left: 0; overflow: visible; }
    .flp-menu-area__title::after { content: ''; }
    .flp-account-menu summary { width: 44px; overflow: hidden; white-space: nowrap; padding: 0 10px; font-size: 0; }
    .flp-account-menu summary > span { font-size: 1rem; }
    .flp-context-nav { padding-left: 0; }
    .ui-modern .flp-main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    .flp-brand-context span { display: block; font-size: .68rem; line-height: 1.2; }
    .flp-toolbar-row { gap: 6px; }
    .flp-dashboard-home { font-size: .9rem; }
    .flp-live-clock { font-size: .82rem; }
}

/* Modulkortene på dashbordet. Taket kom til 31. august 2026: dette var fri
   auto-fit uten kolonnetak - samme feil § 3 i designsystemet beskriver - og
   ga sju kolonner så snart beholderen ble bred. Samme minmax-teknikk som
   .flp-grid: minstebredden vinner på smal skjerm, delingen på bred. */
.flp-module-widget-grid {
    --flp-kol: 4;
    --flp-kol-min: 210px;
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            max(
                var(--flp-kol-min),
                calc((100% - (var(--flp-kol) - 1) * 12px) / var(--flp-kol))
            ),
            1fr
        )
    );
    gap: 12px;
}
.flp-module-widget { display: grid; align-content: start; gap: 9px; min-height: 145px; color: var(--flp-text); text-decoration: none; }
.flp-module-widget:hover { border-color: var(--flp-primary-action); transform: translateY(-1px); }
.flp-module-widget strong { font-size: 1.08rem; }
.flp-module-widget > span:last-child { color: var(--flp-text-secondary); font-size: .9rem; }
.flp-widget-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flp-widget-setting { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px; border: 1px solid var(--flp-border); border-radius: 12px; background: rgba(255,255,255,.42); }
.flp-widget-setting > span { grid-column: 1; color: var(--flp-text-secondary); font-size: .88rem; }
.flp-order-buttons { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 5px; }
@media (max-width: 520px) { .flp-widget-setting { grid-template-columns: 1fr; } .flp-order-buttons { grid-column: 1; grid-row: auto; } }

/* Systemadministratorens kontrollrom. Forsiden prioriterer status og avvik;
   tunge oppsettsskjemaer ligger fortsatt tilgjengelig, men forstyrrer ikke
   den daglige oversikten. */
.ui-modern .flp-sa-dashboard {
    display: grid;
    gap: 16px;
}
.ui-modern .flp-sa-dashboard > * { margin-block: 0; }
.ui-modern .flp-sa-intro { padding-top: 8px; }
/* RETTET 31. august 2026: rutenettet var låst til fire kolonner, men
   kontrollrommet har FEM statuskort. Det femte havnet alene på rad to på all
   bred desktop. Kolonnetallet følger nå kortantallet. Trappen nedover bruker
   designsystemets egne brytepunkter (1024 og 768) - ikke nye tall - og er
   satt slik at fem kolonner holder helt ned til 1024 px. Et vindu på 1280 px
   har typisk 1265 px layoutbredde når rullefeltet er trukket fra, så et
   brytepunkt på 1280 ville slått inn nettopp der kravet sier fem på rad.
   Se § 1.4 i docs/FLP-DESIGNSYSTEM.md. */
.ui-modern .flp-sa-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.ui-modern .flp-sa-status-card {
    display: grid;
    gap: 5px;
    min-height: 132px;
    align-content: center;
    padding: 18px;
    color: var(--flp-text);
    text-decoration: none;
    border: 1px solid var(--flp-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--flp-card) 78%, white);
    box-shadow: 0 8px 24px rgba(49, 58, 55, .055);
    transition: transform .15s ease, border-color .15s ease;
}
.ui-modern .flp-sa-status-card:hover,
.ui-modern .flp-sa-status-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--flp-primary-action);
}
.ui-modern .flp-sa-status-card strong {
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    line-height: 1;
}
.ui-modern .flp-sa-status-card__label { font-weight: 750; }
.ui-modern .flp-sa-status-card > span:last-child { color: var(--flp-muted); font-size: .85rem; }
.ui-modern .flp-sa-status-card--alert { border-left: 5px solid #9a5b3f; }
.ui-modern .flp-sa-status-card--notice { border-left: 5px solid #c09a55; }
.ui-modern .flp-sa-launcher { padding: clamp(18px, 3vw, 28px); }
.ui-modern .flp-sa-launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.ui-modern .flp-sa-launcher-grid > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    min-height: 86px;
    padding: 14px;
    color: var(--flp-text);
    text-decoration: none;
    border: 1px solid var(--flp-border);
    border-radius: 14px;
    background: rgba(255,255,255,.44);
}
.ui-modern .flp-sa-launcher-grid > a:hover,
.ui-modern .flp-sa-launcher-grid > a:focus-visible { background: #f2ece1; border-color: var(--flp-primary-action); }
.ui-modern .flp-sa-launcher-icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #dce4df;
    color: #294d49;
    font-size: .82rem;
    font-weight: 850;
}
.ui-modern .flp-sa-launcher-grid strong { align-self: end; }
.ui-modern .flp-sa-launcher-grid a > span:last-child { align-self: start; color: var(--flp-muted); font-size: .82rem; }
.ui-modern .flp-sa-priority-grid { align-items: stretch; }
.ui-modern .flp-sa-priority-grid > .flp-card { margin: 0; }
.ui-modern .flp-sa-details { padding: 0; overflow: clip; }
.ui-modern .flp-sa-details > summary { padding: 18px 22px; }
.ui-modern .flp-sa-details > .flp-worklist-tools__body { padding: 0 22px 22px; }
.ui-modern .flp-sa-details > summary span { display: block; line-height: 1.45; }
.ui-modern .flp-sa-system-health { padding: clamp(18px, 3vw, 28px); }
.ui-modern .flp-sa-health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.ui-modern .flp-sa-health-grid > div {
    display: grid;
    gap: 4px;
    padding: 15px;
    border: 1px solid var(--flp-border);
    border-radius: 12px;
    background: rgba(255,255,255,.4);
}
.ui-modern .flp-sa-health-grid span,
.ui-modern .flp-sa-health-grid small { color: var(--flp-muted); }
.ui-modern .flp-sa-health-grid strong { font-size: 1.08rem; }
.ui-modern .flp-sa-admin-section { display: grid; gap: 10px; scroll-margin-top: 110px; }
.ui-modern .flp-sa-section-heading { padding: 18px 4px 4px; }
.ui-modern .flp-sa-section-heading h2 { margin: 2px 0 4px; }
.ui-modern .flp-sa-section-heading p:last-child { margin: 0; color: var(--flp-muted); }
.ui-modern .flp-sa-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}
.ui-modern .flp-sa-form-grid p,
.ui-modern .flp-sa-inline-create p { display: grid; gap: 6px; margin: 0; }
.ui-modern .flp-sa-form-grid input,
.ui-modern .flp-sa-inline-create input { width: 100%; }
.ui-modern .flp-sa-form-grid .flp-form-actions { grid-column: 1 / -1; }
.ui-modern .flp-sa-inline-create {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    max-width: 720px;
    margin-bottom: 18px;
}
.ui-modern .flp-sa-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.ui-modern .flp-sa-check-grid label {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--flp-border);
    border-radius: 11px;
    background: rgba(255,255,255,.4);
}
.ui-modern .flp-sa-log-details h3 { margin-top: 24px; }

/* Statuskortene har sin egen trapp på designsystemets brytepunkter, og er
   derfor tatt ut av de to eldre 900/620-reglene under. */
@media (max-width: 1023px) {
    .ui-modern .flp-sa-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ui-modern .flp-sa-status-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .ui-modern .flp-sa-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-modern .flp-sa-launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .ui-modern .flp-sa-health-grid,
    .ui-modern .flp-sa-launcher-grid,
    .ui-modern .flp-sa-form-grid { grid-template-columns: 1fr; }
    .ui-modern .flp-sa-form-grid .flp-form-actions { grid-column: 1; }
    .ui-modern .flp-sa-inline-create { grid-template-columns: 1fr; }
    .ui-modern .flp-sa-status-card { min-height: 112px; }
}
.flp-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}

.flp-area-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .35rem 1rem;
    color: inherit;
    text-decoration: none;
}

.flp-area-card .flp-eyebrow {
    grid-column: 1 / -1;
}

.flp-area-card > strong {
    font-size: 1.05rem;
}

.flp-area-card:hover,
.flp-area-card:focus-visible {
    border-color: var(--flp-teal, #315d5b);
    box-shadow: 0 8px 24px rgb(25 55 52 / 12%);
}

.flp-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.flp-quick-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: var(--flp-primary-action);
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.flp-quick-actions a:hover,
.flp-quick-actions a:focus-visible {
    background: var(--flp-primary-action-hover);
}

.flp-definition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 1.25rem 0 0;
}

.flp-definition-grid > div {
    padding: 1rem;
    border: 1px solid var(--flp-border);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .42);
}

.flp-definition-grid dt { color: var(--flp-muted); font-size: .86rem; font-weight: 700; }
.flp-definition-grid dd { margin: .35rem 0 0; }

@media (max-width: 680px) {
    .flp-quick-actions {
        grid-template-columns: 1fr;
    }
}

/* Fagassistent (11. august 2026, Thomas' tilbakemelding): "Send spørsmål"
   ga tidligere ingen synlig tilbakemelding mens siden ventet på svar fra
   den eksterne språkmodellen (kan ta flere sekunder) - uklart om trykket
   faktisk ble registrert, og et utålmodig dobbeltklikk kunne i prinsippet
   sende inn spørsmålet to ganger før siden rakk å navigere bort. Knappen
   grås ut og deaktiveres umiddelbart ved innsending, og et spinner-overlegg
   vises over selve spørsmålsfeltet (se app/fagassistent/index.php sitt
   <script>).
   UTVIDET 11. august 2026 (samme tilbakemelding, generalisert til hele
   appen): den samme gråtonen skal gjelde ALLE innsendingsknapper i
   systemet, ikke bare de med klassen .flp-button - se
   public/assets/submit-guard.js, som styrer dette globalt via
   :disabled/[aria-disabled] på ethvert <button>/input[type=submit] i et
   POST-skjema. Selektoren speiler derfor den generelle knappe-regelen
   lenger opp i denne filen (.ui-modern .flp-nav-link/.flp-button/button/
   input[type="submit"]), ikke bare .flp-button alene. */
.ui-modern .flp-button:disabled,
.ui-modern .flp-button[aria-disabled="true"],
.ui-modern button:disabled,
.ui-modern button[aria-disabled="true"],
.ui-modern input[type="submit"]:disabled,
.ui-modern input[type="submit"][aria-disabled="true"] {
    background: var(--flp-surface-secondary);
    border-color: var(--flp-border);
    color: var(--flp-muted);
    cursor: not-allowed;
    opacity: .75;
}
.ui-modern .flp-button:disabled:hover,
.ui-modern .flp-button[aria-disabled="true"]:hover,
.ui-modern button:disabled:hover,
.ui-modern button[aria-disabled="true"]:hover,
.ui-modern input[type="submit"]:disabled:hover,
.ui-modern input[type="submit"][aria-disabled="true"]:hover {
    background: var(--flp-surface-secondary);
    color: var(--flp-muted);
}

.ui-modern .flp-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    color: var(--flp-muted);
    font-weight: 700;
}

/* Uten denne overstyrer regelen over nettleserens egen [hidden]-skjuling (de
   har lik CSS-spesifisitet - display: inline-flex ville "vunnet" og vist
   statusteksten selv når elementet er hidden). Fanget under visuell
   verifisering av denne endringen 11. august 2026 - se tilsvarende regel for
   .flp-field-overlay under. */
.ui-modern .flp-inline-status[hidden] {
    display: none;
}

.ui-modern .flp-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--flp-border);
    border-top-color: var(--flp-primary-action);
    animation: flp-spin .8s linear infinite;
}

@keyframes flp-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-modern .flp-spinner {
        animation-duration: 2.2s;
    }
}

.ui-modern .flp-field-overlay-wrap {
    position: relative;
}

.ui-modern .flp-field-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--flp-card) 90%, transparent);
    color: var(--flp-text);
    font-weight: 700;
    text-align: center;
    padding: 8px 12px;
}

.ui-modern .flp-field-overlay[hidden] {
    display: none;
}

/* =========================================================================
   Rettelser etter funksjonstest 27.-28. august 2026
   (VIS-003, VIS-004, UX-002, UX-003 og tilgjengelighet)
   ========================================================================= */

/* --- VIS-004: lange tekniske identifikatorer -----------------------------
   En sjekksum i et <code>-element malte 457 px og tvang hele mobilsiden
   sideveis (dokumentbredde 534 px i et 390 px vindu). Verdien bryter na
   lokalt, og har en kopieringsknapp slik at brukeren slipper a markere
   den for hand. */
.ui-modern .flp-copyfield {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    flex-wrap: wrap;
}
.ui-modern .flp-copyfield__value {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    background: var(--flp-surface-secondary);
    border-radius: 6px;
    padding: 2px 6px;
}
.ui-modern .flp-copyfield__button { flex: 0 0 auto; }
.ui-modern .flp-button--tiny {
    padding: 3px 9px;
    font-size: .78rem;
    border-radius: 8px;
}
/* Generell sikring: ingen <code>/<pre> skal kunne utvide dokumentet. */
.ui-modern code { overflow-wrap: anywhere; }
.ui-modern .flp-pre-scroll,
.ui-modern pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- «Tekniske detaljer»-sammenbrett -------------------------------------
   Interne kravkoder, tabellnavn og ratt JSON er bevart (revisjonsspor),
   men flyttet ut av den primaere brukeroppgaven. */
.ui-modern .flp-details {
    margin: 10px 0 0;
    border: 1px solid var(--flp-border);
    border-radius: 10px;
    background: var(--flp-surface-secondary);
    padding: 8px 12px;
}
.ui-modern .flp-details > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--flp-text-secondary);
    font-size: .9rem;
}
.ui-modern .flp-details[open] > summary { margin-bottom: 8px; }
.ui-modern .flp-help {
    margin: 4px 0 0;
    font-size: .85rem;
    color: var(--flp-muted);
}
.ui-modern .flp-filter-confirm {
    border: 1px solid var(--flp-border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--flp-surface-secondary);
}
.ui-modern .flp-filter-confirm p { margin: 0 0 4px; }
.ui-modern .flp-filter-confirm ul { margin: 0; }

/* --- VIS-003: mobilnavigasjon --------------------------------------------
   Kontekstmenyen var 343 px synlig med 502 px innhold, rullefeltet var
   skjult i CSS, og de generelle lenkene («Dashboard», «Arshjul»,
   «Moduler», «Fagassistent») lag foran sidens egne. Aktiv modul markeres na
   visuelt og programmatisk, og en gradient viser at det finnes mer innhold
   til hoyre. Lenkerekkefolgen rettes i app/partials/header.php. */
.flp-context-nav { position: relative; }
.flp-context-nav a[aria-current="page"] {
    background: rgba(255, 255, 255, .78);
    color: #173f3b;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 #2f4f4f;
}
.flp-context-nav__wrap {
    position: relative;
    min-width: 0;
}
.flp-context-nav__wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 10px;
    width: 34px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(251, 250, 246, 0), rgba(251, 250, 246, .95));
}
@media (max-width: 860px) {
    /* Pa mobil skal rulling vaere synlig, ikke skjult. */
    .flp-context-nav { scrollbar-width: thin; }
    .flp-context-nav::-webkit-scrollbar { display: block; height: 4px; }
    .flp-context-nav::-webkit-scrollbar-thumb { background: #c3bcae; border-radius: 4px; }
}

/* --- UX-002: fast handlingslinje pa lange skjemaer -----------------------
   Pa laererkortet la «Lagre» 3081 px unna rollefeltet; i Varslingssenteret
   7060 px unna forste innstillingsgruppe. Handlingslinjen folger na med
   nederst pa skjermen, sier hvilket omfang den lagrer, og viser om det
   finnes ulagrede endringer. */
.ui-modern .flp-stickybar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--flp-card) 94%, white);
    border: 1px solid var(--flp-border);
    border-radius: 14px;
    box-shadow: 0 -6px 20px rgba(28, 38, 35, .12);
}
/* RETTET (UX-002b): display:flex over slaar nettleserens egen [hidden]-regel,
   saa den maa gjentas her - samme monster som .flp-confirm-backdrop[hidden].

   INGEN inn-animasjon her, og det er et bevisst valg. Et forsok med
   translateY(8px) ble forkastet fordi en transform paa et position:sticky-
   element forskyver punktet den festes i: linja la seg 8 px UNDER
   skjermkanten i stedet for paa den. Stopper animasjonen opp for den er
   ferdig - noe som faktisk skjedde i testnettleseren - blir forskyvningen
   staaende. Aatte piksler pynt er ikke verdt aa risikere at handlingslinja
   havner utenfor skjermen. */
.ui-modern .flp-stickybar[hidden] { display: none; }
.ui-modern .flp-stickybar__scope {
    font-size: .86rem;
    color: var(--flp-text-secondary);
    margin-right: auto;
}
.ui-modern .flp-stickybar__state {
    font-size: .86rem;
    font-weight: 700;
    color: var(--flp-muted);
}
.ui-modern .flp-stickybar__state[data-dirty="1"] { color: #8a4b1d; }

/* --- UX-003: felles bekreftelses- og attestasjonskomponent ---------------
   Portalen brukte tre ulike monstre: nettleserens native confirm(), sma
   vanlige avkrysningsbokser for formell attestasjon, og skjulte bokser som
   hjelpeteksten likevel ba brukeren merke. */
.ui-modern .flp-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 26, 25, .55);
}
.ui-modern .flp-confirm-backdrop[hidden] { display: none; }
.ui-modern .flp-confirm {
    width: min(520px, 100%);
    background: #fffdf8;
    border: 1px solid var(--flp-border);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 20px 60px rgba(20, 26, 25, .35);
}
.ui-modern .flp-confirm h2 { margin: 0 0 8px; font-size: 1.1rem; }
.ui-modern .flp-confirm__object {
    font-weight: 700;
    background: var(--flp-surface-secondary);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}
.ui-modern .flp-confirm__consequence { margin: 0 0 12px; }
.ui-modern .flp-confirm__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* Formell attestasjon: tydelig avgrenset kort med 18-20 px kontroll. */
.ui-modern .flp-attest {
    display: block;
    border: 2px solid var(--flp-border);
    border-radius: 14px;
    background: var(--flp-surface-secondary);
    padding: 12px 14px;
    margin: 12px 0;
}
.ui-modern .flp-attest__title {
    font-weight: 700;
    margin: 0 0 6px;
}
.ui-modern .flp-attest__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500;
    margin: 0;
}
.ui-modern .flp-attest__row input[type="checkbox"] {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    margin-top: 2px;
}
.ui-modern .flp-attest__meta {
    margin: 8px 0 0;
    font-size: .85rem;
    color: var(--flp-muted);
}
.ui-modern .flp-attest button[disabled] { opacity: .55; cursor: not-allowed; }

/* Vanlige avkrysningsbokser skal ha en klikkflate som samsvarer med det
   brukeren ser - ikke et stort usynlig omrade rundt en 13 px markering. */
.ui-modern label.flp-check {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 8px;
}
.ui-modern label.flp-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Synlig fokusmarkering overalt - ikke bare i menyene. */
.ui-modern a:focus-visible,
.ui-modern button:focus-visible,
.ui-modern input:focus-visible,
.ui-modern select:focus-visible,
.ui-modern textarea:focus-visible,
.ui-modern summary:focus-visible {
    outline: 3px solid #2f4f4f;
    outline-offset: 2px;
}

/* Ingen side skal kunne bli bredere enn skjermen. */
html, body { max-width: 100%; overflow-x: clip; }

/* Kompakt handlingslinje pa smale skjermer: omfangsteksten far egen linje,
   knappene star ved siden av hverandre. Malt pa 390 px under UX-002-arbeidet. */
@media (max-width: 480px) {
    .ui-modern .flp-stickybar {
        padding: 8px 10px;
        gap: 6px 8px;
        border-radius: 12px;
    }
    .ui-modern .flp-stickybar__scope {
        flex: 1 0 100%;
        margin-right: 0;
        font-size: .78rem;
    }
    .ui-modern .flp-stickybar__state { font-size: .8rem; margin-right: auto; }
    .ui-modern .flp-stickybar button { padding: 7px 12px; font-size: .85rem; }
}

/* -------------------------------------------------------------------------
   VIS-001, andre runde (28. august 2026): <fieldset> inne i .flp-grid
   -------------------------------------------------------------------------
   Foerste retting fjernet STREKKINGEN (align-items: start). Den avdekket et
   annet, underliggende problem paa TSK/TEA-avviksskjemaet, som strekkingen
   tidligere hadde maskert:

   Skjemaet ser slik ut:

       <form class="flp-grid">
           <fieldset>            <- 15 felt ligger HER INNE
               ... Laerer, Klasse, tre datoer, feiltype, aarsak, status ...
           </fieldset>
           <label>Verifikasjonsdato</label>
           <label>Verifikasjonsresultat</label>
           ...
       </form>

   Et <fieldset> er ETT rutenettelement. Alle de femten feltene inne i det ble
   derfor presset ned i EN smal kolonne paa ca. 220 px, mens de loese feltene
   ved siden av fikk hver sin kolonne - og «Lagre» havnet oeverst til hoyre i
   sin egen kolonne. Malt paa localhost 28. august 2026.

   Rettelsen er i felleskomponenten, ikke paa siden:

     1. Et fieldset som er direkte barn av .flp-grid spenner ALLTID hele
        bredden. Det kan aldri klemmes ned i en kolonne igjen, uansett hvilken
        side det staar paa.
     2. .flp-fieldset-plain er for de fieldsettene som KUN finnes for aa baere
        `disabled` - de har ingen egen tittel og skal ikke se ut som en boks.
        De blir gjennomsiktige og faar SAMME rutenett som skjemaet ellers, slik
        at feltene inne i dem laegger seg som om fieldsettet ikke fantes.
        Fieldsettet beholdes fordi det er det som faktisk deaktiverer feltene
        for en bruker uten redigeringsrett - det er en tilgangskontroll i
        markupen, ikke pynt.
     3. Handlingsraden spenner hele bredden og havner nederst, der den hoerer
        hjemme - ikke som en smal kolonne midt i skjemaet.
   ------------------------------------------------------------------------- */
.ui-modern .flp-grid > fieldset {
    grid-column: 1 / -1;
    min-width: 0;
}

/* RETTET 30. august 2026 (trinn 2): denne hadde sitt EGET rutenett med
   repeat(auto-fit, minmax(220px, 1fr)) og dermed intet kolonnetak - samme
   feil som .flp-grid hadde foer trinn 1, bare paa et annet sted. Da
   skoleprofilen ble delt i fieldset, ga den fire kolonner igjen.
   Arver naa tak og verdier fra .flp-grid. */
.ui-modern fieldset.flp-fieldset-plain {
    border: 0;
    padding: 0;
    margin: 0 0 var(--flp-rom-5);
    --flp-kol: 2;
    --flp-kol-min: 220px;
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            max(
                var(--flp-kol-min),
                calc((100% - (var(--flp-kol) - 1) * var(--flp-rom-4)) / var(--flp-kol))
            ),
            1fr
        )
    );
    gap: var(--flp-rom-4);
    align-items: start;
}
.ui-modern fieldset.flp-fieldset-plain:last-of-type { margin-bottom: 0; }
/* Seksjonsoverskriften i en <legend> skal staa paa egen rad, ikke som en
   rutenettcelle ved siden av foerste felt. */
.ui-modern fieldset.flp-fieldset-plain > legend {
    grid-column: 1 / -1;
    float: left;
    width: 100%;
    padding: 0;
}
.ui-modern fieldset.flp-fieldset-plain > .flp-field--full,
.ui-modern fieldset.flp-fieldset-plain > .flp-span-all { grid-column: 1 / -1; }

/* Fieldset MED egen tittel beholder rammen, men fyller bredden. */
.ui-modern .flp-grid > fieldset:not(.flp-fieldset-plain):not(.flp-card):not(.flp-attest) {
    border: 1px solid var(--flp-border);
    border-radius: 12px;
    padding: 12px 14px;
}
.ui-modern .flp-grid > fieldset > legend {
    font-weight: 700;
    color: var(--flp-text-secondary);
    padding: 0 6px;
}

.ui-modern .flp-grid > .flp-form-actions { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .ui-modern fieldset.flp-fieldset-plain { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   FEILMELDINGSKNAPPEN (29. august 2026)

   Fast i nedre hoyre hjorne, paa hver innlogget side. Valgt framfor et punkt
   i hamburgermenyen fordi den da er synlig UTEN et klikk, uansett hvor langt
   ned brukeren har rullet. En feil meldes i det oyeblikket den oppdages,
   eller ikke i det hele tatt.

   Knappen er en vanlig lenke. Uten JavaScript aapner den skjemaet som egen
   side; med JavaScript aapner den samme skjema i en dialog.

   Paa smal skjerm krymper den til en sirkel med bare symbolet, slik at den
   ikke legger seg over innholdet i et skjema.

   FARGEVALGET (rettet 29. august 2026 etter tilbakemelding fra Thomas)
   Foerste versjon brukte --flp-primary-action (#2f4f4f) med hvit tekst og en
   tung skygge. Den var teknisk lesbar, men "hard" mot den varme, dempede
   paletten resten av portalen bruker - en morkegroenn pille som ropte fra
   hjornet paa hver eneste side. En knapp som ALLTID staar der, skal ikke ha
   samme visuelle vekt som en primaerhandling brukeren faktisk skal utfore.
   Hvit tekst paa mork flate er dessuten det vanskeligste aa lese naar
   skriften er liten.
   Naa er den en lys brikke med morke bokstaver, samme familie som kortene:
   den lofter seg fra bakgrunnen med kant og en myk skygge i stedet for med
   farge. Symbolet beholder en dempet teal (--flp-status-active) saa den
   fortsatt leses som "meld fra", ikke som en tilfeldig lenke.
   ------------------------------------------------------------------------- */
.flp-feilmelding-knapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 999px;
    /* Kanten er teal, ikke --flp-border. Maalt 29. august 2026:
       --flp-border (#cfc4b4) gir bare 1.52:1 mot sidebakgrunnen, godt under
       de 3:1 WCAG 1.4.11 krever for omrisset til en komponent - brikken ville
       vaert lett aa lese, men vanskelig aa FINNE. --flp-status-active gir
       5.08:1 mot siden og 4.36:1 over et kort, og er den mykeste av fargene i
       paletten som klarer kravet. Den binder samtidig kanten til symbolet,
       slik at brikken leses som ett objekt. */
    border: 1px solid var(--flp-status-active);
    /* Litt lysere enn --flp-bg, slik at brikken lofter seg bade over
       sidebakgrunnen og over et kort. */
    background: #fbf8f3;
    color: var(--flp-text);
    font-weight: 600;
    font-size: .92rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(31, 31, 31, .10);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.flp-feilmelding-knapp:hover,
.flp-feilmelding-knapp:focus-visible {
    background: #fff;
    border-color: var(--flp-primary-action);
    color: var(--flp-text);
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(31, 31, 31, .16);
}
.flp-feilmelding-knapp > span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--flp-status-active);
    color: var(--flp-status-active);
    font-weight: 800;
    font-size: .78rem;
}

.flp-feilmelding-dialog {
    width: min(560px, calc(100vw - 32px));
    border: 1px solid var(--flp-border);
    border-radius: 14px;
    padding: 22px 24px 20px;
    background: var(--flp-card);
    color: inherit;
}
.flp-feilmelding-dialog::backdrop { background: rgba(0, 0, 0, .38); }
.flp-feilmelding-dialog h2 { margin: 0 0 6px; }
.flp-feilmelding-dialog textarea { width: 100%; }
.flp-feilmelding-dialog__lukk { position: absolute; top: 10px; right: 12px; }
.flp-feilmelding-dialog__lukk button {
    border: 0;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--flp-muted);
    padding: 4px 8px;
}
.flp-feilmelding-dialog__handlinger {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

/* Trang skjerm: bare symbolet, slik at knappen ikke daekker skjemafelter. */
@media (max-width: 560px) {
    .flp-feilmelding-knapp {
        right: 12px;
        bottom: 12px;
        padding: 12px;
        gap: 0;
    }
    .flp-feilmelding-knapp__tekst {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Utskrift: knappen hoerer ikke hjemme paa papir. */
@media print {
    .flp-feilmelding-knapp { display: none; }
}

/* --- Godkjenningsmatrisen (migrasjon 135) -------------------------------
   Lærere nedover, godkjenningsobjekter bortover. Tabellen er bred av natur -
   elleve kolonner pluss navn og periode - så den ruller INNE i sin egen
   beholder. Sida skal aldri rulle sidelengs. */
.ui-modern .flp-tabell-rull {
    overflow-x: auto;
    margin: 12px 0 0;
}
.ui-modern .flp-matrise th,
.ui-modern .flp-matrise td {
    white-space: nowrap;
}
.ui-modern .flp-matrise__kol {
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    padding-left: 6px;
    padding-right: 6px;
}
/* Førstehjelp kommer fra Norsk Førstehjelpsråd, ikke Vegvesenet. Kolonnen
   skilles visuelt fordi det ER et annet godkjenningssystem - ikke som pynt. */
.ui-modern .flp-matrise__kol--nfr {
    border-left: 2px solid var(--flp-border);
    color: var(--flp-text-secondary);
}
/* Kolonnen «Vis lærerne»-knappen i Skoleprofilen peker på. */
.ui-modern .flp-matrise__kol--markert,
.ui-modern .flp-matrise__celle--markert {
    background: color-mix(in srgb, #d59a00 14%, white);
}
.ui-modern .flp-matrise__celle {
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}
.ui-modern .flp-matrise__celle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}
/* Huket av, men ikke kontrollert hos kilden. Skal se annerledes ut enn både
   avkrysset og tomt - ellers ser «jeg tror hun har det» identisk ut med en
   kontrollert hake. */
.ui-modern .flp-matrise__celle--ukontrollert {
    background: color-mix(in srgb, #d59a00 16%, white);
}
.ui-modern .flp-matrise__bekreft {
    margin: 4px 0 0;
}
.ui-modern .flp-matrise__bekreft button {
    padding: 2px 7px;
    font-size: .72rem;
    line-height: 1.3;
    border-radius: 8px;
}
/* RETTET 30. august 2026. Thomas: «Lagre-knappen la seg oppå datofeltet.»
   Årsaken var spesifisitet, ikke en manglende regel: «.ui-modern
   .flp-matrise td { white-space: nowrap }» over har ett elementledd mer enn
   en ren klasseregel, og vant derfor over «white-space: normal» her. Cellen
   sto altså i nowrap, de to datofeltene med width:100% havnet på SAMME
   linje, og innholdet rant ut av cellen - rett inn under Lagre-knappen i
   neste kolonne, som tegnes OVER fordi den kommer senere i dokumentet.
   Målt i nettleser før rettingen: celle 496 px bred, innhold 942 px.
   Selektoren har nå td-leddet med, slik at den faktisk vinner. */
.ui-modern .flp-matrise td.flp-matrise__periode {
    white-space: normal;
    min-width: 190px;
}
.ui-modern .flp-matrise__periode input[type="date"] {
    /* display:block, ikke bare width:100%. Da stables feltene uansett hva
       white-space skulle finne på å være - ett lag mindre å brekke. */
    display: block;
    width: 100%;
    margin-bottom: 4px;
}

/* Lesende stripe over matrisen: skolens klassetilbud med status. En gul
   klasse er en LENKE inn i kolonnen som fikser den. */
.ui-modern .flp-tilbudsstripe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
}
.ui-modern .flp-tilbudsstripe__brikke {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}
.ui-modern .flp-tilbudsstripe__brikke--gronn {
    border-color: color-mix(in srgb, #2e7d32 68%, white);
    background: color-mix(in srgb, #2e7d32 12%, white);
    color: #1b5e20;
}
.ui-modern .flp-tilbudsstripe__brikke--gul {
    border-color: color-mix(in srgb, #d59a00 62%, white);
    background: color-mix(in srgb, #d59a00 16%, white);
    color: #7a5600;
}
.ui-modern .flp-tilbudsstripe__brikke--avsluttes {
    border-color: var(--flp-muted);
    background: color-mix(in srgb, var(--flp-muted) 10%, white);
    color: var(--flp-text-secondary);
    text-decoration: line-through;
}
a.ui-modern .flp-tilbudsstripe__brikke:hover,
.ui-modern a.flp-tilbudsstripe__brikke:hover {
    border-width: 2px;
    padding: 3px 10px;
}
.ui-modern .flp-card--markert {
    border-left: 3px solid color-mix(in srgb, #d59a00 62%, white);
    border-radius: 0;
}

@media (max-width: 720px) {
    /* Samme selektor som basisregelen over - ellers taper den på
       spesifisitet, og mobilbredden får aldri sin smalere kolonne. */
    .ui-modern .flp-matrise td.flp-matrise__periode { min-width: 150px; }
    .ui-modern .flp-matrise__kol { font-size: .74rem; }
}

/* Trafikklys, fordi vi er en trafikkskole (Thomas, 29. august 2026). Rødt er
   sjeldent med vilje: det betyr at noe faktisk ER galt - ikke at noe er
   ukjent. Et rødt som lyser for ofte er et rødt ingen ser. */
.ui-modern .flp-tilbudsstripe__brikke--rod {
    /* REVERSERT 30. august 2026: full bakgrunn, lys tekst. Den lyse varianten
       leste som rosa og forsvant ved siden av gult. Roedt skal se ut som en
       stopp. Kontrast #fdf5f4 mot #8c1d18 = 8.9:1, godt over AA. */
    border-color: #6d1713;
    background: #8c1d18;
    color: #fdf5f4;
}
.ui-modern .flp-chip-forklaring .kan-ikke {
    border-color: #6d1713;
    background: #8c1d18;
}
/* Rød rad i matrisen: godkjenningsperioden er utløpt, og da er ingen av
   hakene gyldige lenger. */
.ui-modern .flp-matrise__periode--utlopt {
    background: color-mix(in srgb, #b3261e 9%, white);
}

/* Bekreftelse i selve raden. Flash-meldingen tegnes oeverst paa siden, og i en
   matrise med seksten laerere betyr det seksten turer opp og ned for aa lese
   den. Denne staar der du allerede er. */
/* RETTET 30. august 2026. Kommentaren over sa at meldingen ikke fikk dytte
   tabellen bredere. Det stemte ikke: «width: max-content» inne i en
   tabellcelle er nettopp et bidrag til kolonnens iboende bredde, så
   Lagre-kolonnen gikk fra 104 px til 276 px i det øyeblikket en melding kom -
   hele tabellen vokste fra 1351 til 1537 px og fikk sidestilt rulling, hver
   eneste gang noen lagret. Målt i nettleser.
   Meldingen ligger nå i en EGEN rad under lærerraden (colspan over hele
   bredden), høyrestilt slik at den fortsatt lander rett under knappen du
   trykte. En rad kan ikke påvirke kolonnebredder. */
.ui-modern .flp-matrise__meldingsrad td {
    white-space: normal;
    padding-top: 0;
    padding-bottom: 8px;
    text-align: right;
    border-top: 0;
}
.ui-modern .flp-rad-melding {
    display: inline-block;
    margin: 0;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 400;
    white-space: normal;
    max-width: 360px;
    text-align: left;
}
.ui-modern .flp-rad-melding--ok {
    background: color-mix(in srgb, #2e7d32 12%, white);
    color: #1b5e20;
}
.ui-modern .flp-rad-melding--feil {
    background: color-mix(in srgb, #b3261e 12%, white);
    color: #8c1d18;
}

/* Huket av, men ikke kontrollert hos kilden. Sporsmaalstegnet staar i cellen
   fordi TILSTANDEN hoerer hjemme der; knappen under sier hva du kan GJORE med
   den. Forste forsok blandet de to, og knappen leste som en feilmelding. */
.ui-modern .flp-matrise__ukontrollert {
    display: block;
    margin-top: 2px;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    color: #7a5600;
}

/* Roed brikke i skoleprofilen: klassen KAN IKKE TILBYS naa. Ingen har
   dekningen, eller den som har den er ikke lenger godkjent. Skilt fra gul med
   vilje - gul betyr "noe mangler", roedt betyr "dette er stengt". */
.ui-modern .flp-chip-toggle--kan-ikke input:checked + span,
.ui-modern .flp-chip-toggle--kan-ikke.is-checked span {
    /* Samme reversering som tilbudsstripen - se der. */
    border-color: #6d1713;
    background: #8c1d18;
    color: #fdf5f4;
}
.ui-modern .flp-chip-toggle--kan-ikke input:focus-visible + span {
    outline: 2px solid #b3261e;
    outline-offset: 2px;
}


/* ==========================================================================
   DESIGNSYSTEM - felles verdier og komponenter
   Lagt til 30. august 2026.

   HVORFOR DENNE BOLKEN FINNES
   Portalen hadde allerede en gjennomtenkt fargepalett (kontrastmålt mot WCAG
   AA, se kommentaren ved --flp-muted), men ingen felles skala for avstand,
   radius, typografi eller kontrollhøyde. Resultatet var at hver modul fant opp
   sine egne verdier, og at 50 klassenavn som PHP-koden allerede brukte -
   .flp-field-hint (115 steder i 26 filer), .flp-list, .flp-alert--error,
   .flp-button--secondary, .flp-checkbox-label - ikke hadde en eneste regel.
   De rendret som vanlig brødtekst, uten at noe så «ødelagt» ut.

   Derfor er hovedgrepet her å DEFINERE det markupen allerede sier, ikke å
   skrive om markupen. Det gir samme utseende på tvers av 47 filer uten å
   endre en eneste PHP-linje - og uten risiko for å brekke en POST-handling.

   REGEL FOR FREMTIDIG ARBEID: se docs/FLP-DESIGNSYSTEM.md. Nye sider skal
   bruke en av de tre sidemalene og de komponentene som står der. Trenger du
   noe nytt, utvid en eksisterende komponent før du lager en ny.
   ========================================================================== */

.ui-modern {
    /* --- Avstandsskala ---------------------------------------------------
       Én skala, brukt overalt. Tallene er ikke tilfeldige: 4-8-12-16-24-32-48
       er den samme doblende rytmen som allerede lå implisitt i de fleste
       eksisterende reglene (14px og 18px er rundet inn til 16 og 24). */
    --flp-rom-1: 4px;
    --flp-rom-2: 8px;
    --flp-rom-3: 12px;
    --flp-rom-4: 16px;
    --flp-rom-5: 24px;
    --flp-rom-6: 32px;
    --flp-rom-7: 48px;

    /* --- Radius og dybde -------------------------------------------------
       Tre trinn holder. Skygger er bevisst nesten usynlige: portalen skal
       være rolig, ikke dekorert. */
    --flp-radius-s: 6px;
    --flp-radius-m: 10px;
    --flp-radius-l: 14px;
    --flp-skygge-1: 0 1px 2px rgba(31, 31, 31, .06);
    --flp-skygge-2: 0 2px 8px rgba(31, 31, 31, .09);

    /* --- Typografi -------------------------------------------------------
       Hjelpetekst skal være UNDERORDNET (Thomas: «hjelpetekster skal være
       visuelt underordnet»), derfor et eget, mindre trinn. */
    --flp-tekst-xs: .8125rem;
    --flp-tekst-s: .875rem;
    --flp-tekst-m: 1rem;
    --flp-tekst-l: 1.125rem;
    --flp-tekst-xl: 1.375rem;
    --flp-tekst-xxl: 1.75rem;
    --flp-linje-tett: 1.3;
    --flp-linje: 1.5;

    /* --- Kontroller ------------------------------------------------------
       40px er minste komfortable trykkflate på mobil. Alt som kan klikkes
       skal nå denne høyden. */
    --flp-kontroll-h: 40px;
    --flp-kontroll-h-liten: 32px;

    /* --- Innholdsbredder per sidemal ------------------------------------
       Dette er rettingen på «sideinnholdet kan bli altfor bredt».
       --flp-max (1480px) gjelder fortsatt ytterrammen, men INNHOLDET
       begrenses etter hva slags side det er:
         liste   - tabeller trenger plass, men ikke uendelig
         detalj  - lesbar, men kan ha to spalter
         skjema  - lesbar linjelengde er viktigere enn å fylle skjermen
       Se .flp-inner--<mal> lenger ned. */
    --flp-bredde-arbeidsflate: var(--flp-max);
    --flp-bredde-liste: 1320px;
    --flp-bredde-detalj: 1080px;
    --flp-bredde-skjema: 820px;
    --flp-bredde-innlogging: 460px;
    --flp-lesbar: 72ch;
}

/* ==========================================================================
   SIDEBEHOLDER OG SIDEMALER
   Klassen settes i app/partials/header.php ut fra hvilken side som vises,
   slik at ingen av de 102 sidene måtte endres for å få riktig bredde.
   En side kan overstyre ved å sette $sidemal før headeren inkluderes.
   ========================================================================== */
/* NY 31. august 2026: «arbeidsflate». Et kontrollrom er ikke en detaljside.
   Systemadministratorens dashbord ble klassifisert som detalj (1080px) bare
   fordi fila heter dashboard.php, og sto som en smal søyle på bred skjerm.
   Malen settes ALDRI av filnavn - den settes eksplisitt med $sidemal på de
   få sidene som er administrative arbeidsflater. Se § 1 og § 1.4 i
   docs/FLP-DESIGNSYSTEM.md. */
.ui-modern .flp-inner--arbeidsflate { max-width: var(--flp-bredde-arbeidsflate); }
.ui-modern .flp-inner--liste { max-width: var(--flp-bredde-liste); }
.ui-modern .flp-inner--detalj { max-width: var(--flp-bredde-detalj); }
.ui-modern .flp-inner--skjema { max-width: var(--flp-bredde-skjema); }
.ui-modern .flp-inner--innlogging { max-width: var(--flp-bredde-innlogging); }

/* Sidehode: overskrift, kort forklaring, og eventuell hovedhandling til
   høyre. Samme plassering på alle tre malene - det er nettopp det som gjør
   at man «vet hvor man er» uten å lete. */
.ui-modern .flp-sidehode {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--flp-rom-3) var(--flp-rom-5);
    margin-bottom: var(--flp-rom-5);
}
.ui-modern .flp-sidehode__tekst { min-width: 0; flex: 1 1 320px; }
.ui-modern .flp-sidehode h1 {
    font-size: var(--flp-tekst-xxl);
    line-height: var(--flp-linje-tett);
    margin: 0 0 var(--flp-rom-2);
}
.ui-modern .flp-sidehode__forklaring {
    margin: 0;
    color: var(--flp-muted);
    font-size: var(--flp-tekst-s);
    max-width: var(--flp-lesbar);
}
.ui-modern .flp-sidehode__handling { flex: 0 0 auto; }

/* ==========================================================================
   RUTENETT - varianter i stedet for auto-fit uten tak

   FØR: repeat(auto-fit, minmax(220px, 1fr)) med en ytre ramme på 1480px ga
   opptil SEKS kolonner. Målt på FL-dashbordet ved bare 1100px: fem kolonner.

   ETTER: samme responsive oppførsel, men med et TAK. minmax-en tar den
   største av «minst 220px» og «bredden delt på ønsket antall kolonner»:
   på smal skjerm vinner 220px og rutenettet kollapser som før, på bred
   skjerm vinner delingen og det stopper på taket. Ingen media queries,
   ingen sidevise unntak.

   Standard er 2. Thomas: «normalt én eller to kolonner; tre kolonner bare
   når feltene er korte og tydelig hører sammen; aldri fem eller seks
   tilfeldige kolonner på stor skjerm.»
   ========================================================================== */
.ui-modern .flp-grid {
    --flp-kol: 2;
    --flp-kol-min: 220px;
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            max(
                var(--flp-kol-min),
                calc((100% - (var(--flp-kol) - 1) * var(--flp-rom-4)) / var(--flp-kol))
            ),
            1fr
        )
    );
    gap: var(--flp-rom-4);
    align-items: start;
}
.ui-modern .flp-grid--1 { --flp-kol: 1; }
.ui-modern .flp-grid--2 { --flp-kol: 2; }
/* Tre kolonner: kun for korte felt som hører sammen (dato, tid, antall). */
.ui-modern .flp-grid--3 { --flp-kol: 3; --flp-kol-min: 170px; }
/* Sammendrag: korte nøkkeltall, tåler flere kolonner fordi hvert felt er
   én linje. */
.ui-modern .flp-grid--sammendrag { --flp-kol: 4; --flp-kol-min: 150px; }
/* Filterområde: skal se ut som ett avgrenset felt, ikke som skjemaet. */
.ui-modern .flp-grid--filter { --flp-kol: 4; --flp-kol-min: 180px; }
/* Avkrysningslister tåler flere, smalere kolonner - de er ett ord hver. */
.ui-modern .flp-grid--checks { --flp-kol: 4; --flp-kol-min: 160px; }

/* Handlingsrad: knapper skal ligge på rekke, ikke i rutenettceller. */
.ui-modern .flp-handlingsrad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flp-rom-3);
}
.ui-modern .flp-handlingsrad--slutt { justify-content: flex-end; }

/* ==========================================================================
   KOMPONENTER SOM MARKUPEN ALLEREDE BRUKER, MEN SOM MANGLET ENHVER REGEL
   ========================================================================== */

/* --- Hjelpetekst (115 steder i 26 filer, ingen regel) --------------------
   Rendret identisk med brødtekst, så en hjelpesetning så like viktig ut som
   selve innholdet. Skal være underordnet: mindre, dempet, tett på feltet
   den forklarer. */
.ui-modern .flp-field-hint,
.ui-modern .flp-hint {
    display: block;
    margin: var(--flp-rom-1) 0 0;
    color: var(--flp-muted);
    font-size: var(--flp-tekst-s);
    font-weight: 400;
    line-height: var(--flp-linje);
    max-width: var(--flp-lesbar);
}
/* Står hjelpeteksten før innholdet (som en seksjonsforklaring), trenger den
   luft under i stedet for over. */
.ui-modern .section-title + .flp-field-hint,
.ui-modern h2 + .flp-field-hint,
.ui-modern h3 + .flp-field-hint { margin: 0 0 var(--flp-rom-3); }

/* --- Seksjonsoverskrift -------------------------------------------------
   .section-title brukes gjennom hele portalen og hadde heller ingen regel. */
.ui-modern .section-title,
.ui-modern .flp-section-title {
    font-size: var(--flp-tekst-l);
    line-height: var(--flp-linje-tett);
    margin: 0 0 var(--flp-rom-3);
    font-weight: 700;
}
/* Gruppetittel: overskriften OVER en gruppe kort, ikke inni ett.
   En variant av .section-title, ikke en ny komponent (§ 8.2).

   Skoleprofilen er 6 900 px høy og har seks kort. Uten et nivå over kortene
   fikk gruppen «Personell og tilknytninger» nøyaktig samme vekt som kortet
   «Lærere ved skolen» inni den - tre nivåer som så like ut. Denne varianten
   gir gruppen luft over seg og en tynn linje under, slik at øyet ser hvor én
   gruppe slutter og den neste begynner. */
.ui-modern .section-title--gruppe {
    font-size: var(--flp-tekst-xl);
    margin: var(--flp-rom-6) 0 var(--flp-rom-4);
    padding-bottom: var(--flp-rom-2);
    border-bottom: 1px solid var(--flp-border);
}
.ui-modern .section-title--gruppe:first-of-type { margin-top: var(--flp-rom-5); }

.ui-modern .flp-section { margin-bottom: var(--flp-rom-6); }
.ui-modern .flp-section:last-child { margin-bottom: 0; }

/* --- Skjema -------------------------------------------------------------
   Holder skjemaet på lesbar bredde og gir seksjonene fast rytme. */
.ui-modern .flp-form { display: grid; gap: var(--flp-rom-5); }
.ui-modern .flp-form--compact { gap: var(--flp-rom-3); }

/* --- Lister -------------------------------------------------------------
   .flp-list og .flp-plain-list brukes som «liste uten kulepunkter». */
.ui-modern .flp-list,
.ui-modern .flp-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--flp-rom-2);
}
.ui-modern .flp-list > li,
.ui-modern .flp-plain-list > li { min-width: 0; }
.ui-modern .flp-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--flp-rom-2); }

/* --- Varsler ------------------------------------------------------------
   .flp-alert hadde én regel, men ingen av de fire variantene markupen
   bruker. Alle fire så like ut - en feilmelding var visuelt identisk med en
   kvittering. */
.ui-modern .flp-alert,
.ui-modern .flp-banner {
    border: 1px solid var(--flp-border);
    border-left-width: 4px;
    border-radius: var(--flp-radius-m);
    padding: var(--flp-rom-3) var(--flp-rom-4);
    margin-bottom: var(--flp-rom-4);
    background: var(--flp-surface-secondary);
    font-size: var(--flp-tekst-s);
    line-height: var(--flp-linje);
}
.ui-modern .flp-alert > :first-child,
.ui-modern .flp-banner > :first-child { margin-top: 0; }
.ui-modern .flp-alert > :last-child,
.ui-modern .flp-banner > :last-child { margin-bottom: 0; }
.ui-modern .flp-alert--info { border-left-color: var(--flp-status-active); }
.ui-modern .flp-alert--success { border-left-color: var(--flp-primary-action); }
.ui-modern .flp-alert--warning,
.ui-modern .flp-banner--warn { border-left-color: var(--flp-status-followup); }
.ui-modern .flp-alert--error { border-left-color: var(--flp-severity-kritisk); }

/* Samme feil, én familie til - funnet 30. august 2026 (trinn 3).
   .flash har hatt en regel siden lenge (linje ~233), men .flash-error,
   .flash-success og .flash-warning har ALDRI hatt noen. Det er den samme
   feilen som over, og den satt et verre sted: den globale flash-visningen i
   app/partials/header.php skriver class="flash flash-<type>", så HVER
   set_flash(..., 'error') i hele portalen - 569 kall - rendret nøyaktig som
   en kvittering. En avvist innsending så ut som en vellykket lagring.

   Rettet i CSS alene, ikke ved å bytte klasse i markupen: da virker det
   overalt på én gang, også i de fire sidene som skriver klassen direkte,
   og ingen POST-håndtering røres. Kantfargene er de samme variablene som
   .flp-alert--* bruker, så de to familiene leses likt. */
.ui-modern .flash {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--flp-border);
}
.ui-modern .flash-info { border-left-color: var(--flp-status-active); }
.ui-modern .flash-success { border-left-color: var(--flp-primary-action); }
.ui-modern .flash-warning { border-left-color: var(--flp-status-followup); }
.ui-modern .flash-error { border-left-color: var(--flp-severity-kritisk); }

/* --- Fritekst fra en bruker ---------------------------------------------
   Elevens tilbakemelding, et møtereferat, et oppfølgingsnotat: tekst et
   menneske har skrevet med linjeskift som betyr noe. Sto som
   style="white-space:pre-line;" sju steder i fem moduler - samme behov,
   sju kopier, umulig å endre ett sted. Nå én komponent.

   overflow-wrap er ikke pynt: et langt norsk sammensatt ord uten
   mellomrom flyter ellers ut av kortet på 390 px, som det gjorde på
   tilbakemeldingssiden i trinn 1. */
.ui-modern .flp-fritekst {
    white-space: pre-line;
    overflow-wrap: break-word;
    max-width: var(--flp-lesbar);
}

/* --- Knapper: sekundær og destruktiv ------------------------------------
   .flp-button--secondary (11 steder) og .flp-button--danger var udefinerte.
   En «Slett»-knapp så nøyaktig ut som en «Lagre»-knapp. Thomas: «destruktive
   handlinger skal skilles fra vanlig lagring». */
.ui-modern .flp-button--secondary,
.ui-modern button.flp-button--secondary {
    background: transparent;
    color: var(--flp-text);
    border: 1px solid var(--flp-border);
}
.ui-modern .flp-button--secondary:hover,
.ui-modern button.flp-button--secondary:hover {
    background: var(--flp-surface-secondary);
}
.ui-modern .flp-button--danger,
.ui-modern button.flp-button--danger {
    background: transparent;
    color: #8d3434;
    border: 1px solid #8d3434;
}
.ui-modern .flp-button--danger:hover,
.ui-modern button.flp-button--danger:hover {
    background: #8d3434;
    color: #fff;
}
/* Destruktive handlinger skal ikke stå skulder ved skulder med lagring. */
.ui-modern .flp-handlingsrad--destruktiv {
    margin-top: var(--flp-rom-5);
    padding-top: var(--flp-rom-4);
    border-top: 1px solid var(--flp-border);
}

/* Lenkeknapp - en knapp som skal se ut som en lenke (brukes inne i lister). */
.ui-modern .flp-btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--flp-primary-action);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    min-height: 0;
}

/* --- Avkrysningsboks ----------------------------------------------------
   .flp-checkbox-label brukes 8 steder uten regel, ved siden av den
   eksisterende, gode .flp-check-komponenten. Samles her: samme utseende,
   samme trykkflate, uansett hvilket av de to navnene markupen bruker. */
.ui-modern .flp-checkbox-label,
.ui-modern .flp-check--inline {
    display: flex;
    align-items: flex-start;
    gap: var(--flp-rom-2);
    min-height: var(--flp-kontroll-h-liten);
    line-height: var(--flp-linje);
    cursor: pointer;
    font-weight: 400;
}
.ui-modern .flp-checkbox-label > input[type="checkbox"],
.ui-modern .flp-checkbox-label > input[type="radio"],
.ui-modern .flp-check--inline > input[type="checkbox"],
.ui-modern .flp-check--inline > input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
}
.ui-modern .flp-check--inline { display: inline-flex; margin-right: var(--flp-rom-4); }

/* --- Nøstet kort --------------------------------------------------------
   Et kort inne i et kort skal ikke ha samme vekt som ytterkortet. */
.ui-modern .flp-card--nested {
    background: var(--flp-bg);
    border: 1px solid var(--flp-border);
    border-radius: var(--flp-radius-m);
    padding: var(--flp-rom-3) var(--flp-rom-4);
}

/* --- Tomtilstand --------------------------------------------------------
   En tom liste skal si hva som mangler og hva man kan gjøre, ikke være
   blank. */
.ui-modern .flp-tom {
    padding: var(--flp-rom-6) var(--flp-rom-4);
    text-align: center;
    color: var(--flp-muted);
    border: 1px dashed var(--flp-border);
    border-radius: var(--flp-radius-m);
}
.ui-modern .flp-tom__tittel {
    display: block;
    color: var(--flp-text);
    font-weight: 700;
    margin-bottom: var(--flp-rom-2);
}

/* --- Resultatoppsummering over en liste --------------------------------- */
.ui-modern .flp-resultat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--flp-rom-2) var(--flp-rom-4);
    margin: var(--flp-rom-4) 0 var(--flp-rom-3);
    color: var(--flp-muted);
    font-size: var(--flp-tekst-s);
}

/* ==========================================================================
   TABELLER - ingen horisontal overflyt på siden
   En bred tabell skal rulle inne i sin egen ramme, aldri dytte hele siden.
   ========================================================================== */
.ui-modern .flp-tabellramme {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--flp-radius-m);
}

/* ==========================================================================
   MOBIL
   ========================================================================== */
@media (max-width: 640px) {
    .ui-modern .flp-sidehode { gap: var(--flp-rom-3); }
    .ui-modern .flp-sidehode h1 { font-size: var(--flp-tekst-xl); }
    .ui-modern .flp-sidehode__handling { width: 100%; }
    .ui-modern .flp-sidehode__handling > .flp-button,
    .ui-modern .flp-sidehode__handling > button { width: 100%; }
    /* Alle rutenett faller til én kolonne. Uten dette klemmer et
       tre-kolonners rutenett seg inn på 390px fordi minmax-en fortsatt
       tillater det når --flp-kol-min er lav. */
    .ui-modern .flp-grid,
    .ui-modern fieldset.flp-fieldset-plain { --flp-kol: 1; --flp-kol-min: 100%; }
}


/* ==========================================================================
   RESTEN AV DE UDEFINERTE KLASSENAVNENE
   Fanget av tools/sjekk_designsystem.php. Alle sto i markupen fra før uten
   en eneste CSS-regel, og rendret derfor som vanlig tekst eller et helt
   nøytralt kort. De defineres her i stedet for å låses som gjeld - det er
   billigere å gi dem riktig utseende én gang enn å la hver side finne opp
   sitt eget senere.
   ========================================================================== */

/* Modulkort med tilstandsfarge. Fargen ligger som en venstrekant, samme
   grep som varslene - ikke som fylt bakgrunn, som ville skreket. */
.ui-modern .flp-module-card--muted {
    opacity: .72;
    border-style: dashed;
}
.ui-modern .flp-module-card--red { border-left: 4px solid #8d3434; }
.ui-modern .flp-module-card--orange { border-left: 4px solid var(--flp-status-followup); }

/* Vertikal stabling med systemets avstandsskala. */
.ui-modern .flp-stack { display: grid; gap: var(--flp-rom-4); align-content: start; }
.ui-modern .flp-stack--tett { gap: var(--flp-rom-2); }

/* Innhold + sidespalte. Sidespalten er sekundær og skal ikke ta halve
   bredden; den faller under innholdet på smal skjerm. */
.ui-modern .flp-grid--sidebar {
    grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr);
}
@media (max-width: 900px) {
    .ui-modern .flp-grid--sidebar { grid-template-columns: 1fr; }
}

/* Feltnivå-advarsel: skal stå NÆR feltet den gjelder (Thomas:
   «valideringsmeldinger nær riktig felt»), og skille seg fra hjelpetekst. */
.ui-modern .flp-field-warning,
.ui-modern .flp-detail-warning-text {
    display: block;
    margin-top: var(--flp-rom-1);
    color: #8d3434;
    font-size: var(--flp-tekst-s);
    line-height: var(--flp-linje);
}
.ui-modern .flp-field--warning > input,
.ui-modern .flp-field--warning > select,
.ui-modern .flp-field--warning > textarea { border-color: #8d3434; }

/* Et enkeltfunn i en kontrollrapport. */
.ui-modern .flp-finding {
    border: 1px solid var(--flp-border);
    border-left: 4px solid var(--flp-status-planned);
    border-radius: var(--flp-radius-m);
    padding: var(--flp-rom-3) var(--flp-rom-4);
    margin-bottom: var(--flp-rom-3);
}

/* Valg av skole/medlemskap: hele raden skal være trykkflate. */
.ui-modern .flp-membership-list { display: grid; gap: var(--flp-rom-2); list-style: none; margin: 0; padding: 0; }
.ui-modern .flp-membership-option {
    display: flex;
    align-items: center;
    gap: var(--flp-rom-3);
    min-height: var(--flp-kontroll-h);
    padding: var(--flp-rom-3) var(--flp-rom-4);
    border: 1px solid var(--flp-border);
    border-radius: var(--flp-radius-m);
    cursor: pointer;
}
.ui-modern .flp-membership-option:hover { background: var(--flp-surface-secondary); }

/* Dashbordets widgetområde og den utvidbare arbeidslisten.

   RETTET 31. august 2026: dette var et auto-fit-rutenett på YTTERseksjonen,
   som også inneholder overskriftsraden. Overskriften («Mine moduler» +
   «Tilpass») og modulrutenettet ble dermed to sidestilte celler à 516 px, og
   handlingen ble strukket loddrett. Kolonnerutenettet hører på
   .flp-module-widget-grid - altså rundt kortene - ikke rundt overskriften.
   Se § 3 i docs/FLP-DESIGNSYSTEM.md. */
.ui-modern .flp-dashboard-widgets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--flp-rom-4);
}
.ui-modern .flp-dashboard-items--compact { gap: var(--flp-rom-2); }
.ui-modern .flp-full-worklist { margin-top: var(--flp-rom-4); }

/* Tofaktordialogen. */
.ui-modern .flp-mfa-dialog { max-width: 420px; }

/* Radene i dekk-/rutineoversiktene. */
.ui-modern .flp-routine-period-row,
.ui-modern .flp-tire-swap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flp-rom-3);
    padding: var(--flp-rom-2) 0;
    border-bottom: 1px solid var(--flp-border);
}
.ui-modern .flp-routine-period-row:last-child,
.ui-modern .flp-tire-swap:last-child { border-bottom: 0; }
.ui-modern .flp-routine-historisk { opacity: .7; }
.ui-modern .flp-tire-swap--view { border-bottom: 0; }

/* Merkelapp for nye elementer. */
.ui-modern .flp-count-badge--new { background: var(--flp-status-followup); color: #352b1b; }

/* Bekreftelsesboksen ved eksisterende klasse. */
.ui-modern .flp-confirm-existing-class-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--flp-rom-2);
    margin-top: var(--flp-rom-2);
}

/* Innstillingsskjemaet for dashbordets widgets. */
.ui-modern .flp-widget-settings { display: grid; gap: var(--flp-rom-4); }

/* --- Brede tabeller skal RULLE, ikke klippes ----------------------------
   Funnet 30. august 2026 ved måling: godkjenningsmatrisen stakk 517 px
   utenfor siden på 390 px bredde - og fordi html har «overflow-x: clip»
   ble den KLIPPET, ikke rullbar. På mobil var halve matrisen dermed
   uleselig og uten noen måte å nå den på.

   Årsaken var to eldre regler som drar hver sin vei: .flp-table har
   «width: 100%; overflow: hidden», mens .flp-matrise-cellene har
   «white-space: nowrap». Tabellen tvinges da til rammens bredde samtidig
   som innholdet ikke kan brytes - og det som ikke får plass, klippes bort
   av tabellens egen overflow i stedet for å rulle i rammen rundt.

   Inne i en rulleramme skal tabellen ha sin NATURLIGE bredde. Da er det
   rammen som ruller, slik den var ment. */
.ui-modern .flp-tabell-rull > table,
.ui-modern .flp-tabellramme > table {
    width: auto;
    min-width: 100%;
    overflow: visible;
}
.ui-modern .flp-tabell-rull,
.ui-modern .flp-tabellramme { max-width: 100%; }

/* --- Enhver bred tabell ruller, også de uten egen ramme ------------------
   Målt 30. august 2026: 18 tabeller var bredere enn skjermen på 390 px uten
   noen rulleramme rundt seg. Å legge en <div> rundt hver av dem ville
   betydd 18 markup-endringer med hver sin risiko for å brekke en POST.
   Tabellen blir i stedet sin EGEN rullebeholder på smale skjermer.

   Tabeller som allerede ligger i en ramme settes eksplisitt tilbake, ellers
   ville de fått to rullefelt inni hverandre. */
@media (max-width: 900px) {
    .ui-modern .flp-table,
    .ui-modern table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
    .ui-modern .flp-tabell-rull > table,
    .ui-modern .flp-tabellramme > table,
    .ui-modern .flp-table-wrap > table {
        display: table;
        overflow: visible;
    }
}

/* --- Lange norske sammensatte ord skal brytes ---------------------------
   Funnet 30. august 2026 ved måling: «Ny tilbakemeldingsforespørsel» i en
   <h1> var 409 px bred i en 316 px spalte på 390 px skjerm, og dyttet hele
   siden 56 px sidelengs. Norsk lager slike ord hele tiden -
   «tilbakemeldingsforespørsel», «etterutdanningsperiode»,
   «godkjenningsobjekt» - så dette er ikke en enkeltside, det er språket.

   «break-word» bryter bare når ordet faktisk ikke får plass. Det er med
   vilje ikke «anywhere», som ville brutt ord som godt kunne stått hele. */
.ui-modern h1,
.ui-modern h2,
.ui-modern h3,
.ui-modern h4,
.ui-modern p,
.ui-modern li,
.ui-modern label,
.ui-modern td,
.ui-modern th,
.ui-modern dt,
.ui-modern dd,
.ui-modern .flp-badge,
.ui-modern .flp-field-hint {
    overflow-wrap: break-word;
}

/* --- Nøkkelopplysning (etikett over verdi) ------------------------------
   Detaljsidenes oppsummering besto av en stabel <p><strong>Etikett:</strong>
   verdi</p>. Det leser som løpende tekst, ikke som nøkkeltall man skanner -
   og på et lærerkort med åtte slike linjer må man lese alle for å finne én.

   I en .flp-grid--sammendrag blir hver av dem en egen celle med etiketten
   dempet over verdien. Da ser man statusen uten å lese.

   Brukes på lærerkortet, skoleprofilen og kjøretøykortet. */
.ui-modern .flp-noekkel {
    display: grid;
    gap: 2px;
    min-width: 0;
    align-content: start;
}
.ui-modern .flp-noekkel__etikett {
    font-size: var(--flp-tekst-s);
    line-height: var(--flp-linje);
    color: var(--flp-muted);
}
.ui-modern .flp-noekkel__verdi {
    font-size: var(--flp-tekst-m);
    line-height: var(--flp-linje);
    font-weight: 600;
}
/* En verdi som mangler skal se ut som at den mangler, ikke som en verdi. */
.ui-modern .flp-noekkel__verdi--tom {
    font-weight: 400;
    color: var(--flp-muted);
}

/* En handlingsrad som følger innhold trenger luft over - ellers klemmer
   knappene seg inntil siste tekstlinje. */
.ui-modern .flp-grid + .flp-handlingsrad,
.ui-modern .flp-noekkel + .flp-handlingsrad,
.ui-modern p + .flp-handlingsrad,
.ui-modern table + .flp-handlingsrad,
.ui-modern .flp-tabellramme + .flp-handlingsrad {
    margin-top: var(--flp-rom-4);
}