/* ── dsvu.dk design tokens (#3, see Design and Specs/dsvu.dk-design-spec.md) ── */
:root {
    --dsvu-primary: #1a73e8;
    --dsvu-primary-hover: #1765cc;
    --dsvu-primary-soft: #e8f2fd;
    --dsvu-heading: #111827;
    --dsvu-text: #374151;
    --dsvu-muted: #6b7280;
    --dsvu-bg: #f7f8fa;
    --dsvu-surface: #ffffff;
    --dsvu-border: #e5e7eb;
    --dsvu-warning-bg: #fff8e1;
    --dsvu-warning-border: #f5d97a;
    --dsvu-warning-text: #8a6d1a;
    --dsvu-danger: #dc2626;
    --dsvu-radius: 10px;
    --dsvu-radius-sm: 8px;
}

html, body {
    font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--dsvu-bg);
    color: var(--dsvu-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dsvu-heading);
}

h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

a, .btn-link {
    color: var(--dsvu-primary);
}

a:hover, .btn-link:hover {
    color: var(--dsvu-primary-hover);
}

.btn {
    border-radius: var(--dsvu-radius-sm);
}

.btn-primary {
    color: #fff;
    background-color: var(--dsvu-primary);
    border-color: var(--dsvu-primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--dsvu-primary-hover) !important;
    border-color: var(--dsvu-primary-hover) !important;
}

/* Cards as white surfaces on the light canvas */
.card {
    border: 1px solid var(--dsvu-border);
    border-radius: var(--dsvu-radius);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    background: var(--dsvu-surface);
}

.card-header {
    background: var(--dsvu-surface);
    border-bottom: 1px solid var(--dsvu-border);
    font-weight: 600;
    color: var(--dsvu-heading);
    border-top-left-radius: var(--dsvu-radius) !important;
    border-top-right-radius: var(--dsvu-radius) !important;
}

/* ── Tables in the dsvu.dk idiom: muted small-caps headers, hairline rows ── */
.table thead th {
    color: var(--dsvu-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--dsvu-border);
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    padding: 0.55rem 0.75rem;
    border-bottom-color: var(--dsvu-border);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: #fafbfc;
}

/* ── Status lozenges (Atlassian/JIRA design guide, issue #128) ──
   ALLE statusvisninger bruger StatusLozenge.razor med disse klasser.
   Farvesemantik som Atlassians: default (grå), inprogress (blå),
   success (grøn), moved (gul), removed (rød), new (lilla). */
.lozenge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.lozenge-default    { background: #dfe1e6; color: #42526e; }
.lozenge-inprogress { background: #deebff; color: #0747a6; }
.lozenge-success    { background: #e3fcef; color: #006644; }
.lozenge-moved      { background: #fff0b3; color: #974f0c; }
.lozenge-removed    { background: #ffebe6; color: #bf2600; }
.lozenge-new        { background: #eae6ff; color: #403294; }

/* Kompakt, afdæmpet variant (StatusLozenge Compact="true", 2026-09-25): til tætte
   tabeller som eventlisterne — mindre skrift/polstring, så mærket ikke dominerer
   teksten. Farven kommer fra Radzens Shade.Lighter (tonet baggrund, farvet tekst). */
.lozenge-compact .rz-badge {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.05rem 0.4rem;
    text-transform: none;      /* normal skrift fylder mindre og læses lettere end VERSALER */
    letter-spacing: 0;
    vertical-align: middle;
}

/* ── Admin log viewer (#131) ──
   Dark box: Chrome matches scrollbar colours to the scroller's background,
   which made the thumb invisible on #1e1e1e — style it explicitly, and use
   overflow-y: scroll so the track is always visible (auto hid it entirely
   whenever the day's log was short). */
.log-viewer {
    max-height: 75vh;
    overflow-y: scroll;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: #8b949e #2d2d2d;
}

.log-viewer::-webkit-scrollbar { width: 12px; }
.log-viewer::-webkit-scrollbar-track { background: #2d2d2d; border-radius: 6px; }
.log-viewer::-webkit-scrollbar-thumb { background: #8b949e; border-radius: 6px; border: 2px solid #2d2d2d; }

/* ── Yellow info/warning banner (dsvu.dk-style) ── */
.alert-warning, .alert-info {
    background: var(--dsvu-warning-bg);
    border: 1px solid var(--dsvu-warning-border);
    color: var(--dsvu-warning-text);
    border-radius: var(--dsvu-radius-sm);
}

.alert-warning strong, .alert-info strong {
    color: var(--dsvu-warning-text);
}

/* Inputs in the dsvu.dk idiom */
.form-control, .form-select {
    border-radius: var(--dsvu-radius-sm);
    border-color: var(--dsvu-border);
}

.form-control:focus, .form-select:focus {
    border-color: var(--dsvu-primary);
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.15);
}

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

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

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

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

.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
}

.image-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    cursor: default;
}

.image-modal-close {
    position: fixed;
    top: 15px;
    right: 25px;
    font-size: 2.5rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.clickable-image {
    cursor: pointer;
}

/* (Audit 2026-09-23: den gamle .table-sticky-first-col-blok fra HTML-tabellernes tid
   er fjernet — frosne kolonner håndteres nu af RadzenDataGrid's Frozen-attribut.) */

/* Eventets periode i overskriften (2026-09-23): mindre font end selve titlen */
h1 .event-period {
    font-size: 1.05rem;
    font-weight: 400;
    white-space: nowrap;
}

/* Linkede pilotnavne på rekordlisterne (2026-09-23): åbner den offentlige pilot-popup */
.rekord-pilot-link {
    color: var(--dsvu-primary);
    text-decoration: none;
    cursor: pointer;
}

.rekord-pilot-link:hover {
    text-decoration: underline;
}

/* Radzen date pickers (shared DateInput, #124) flagged invalid by the per-field
   validation (#123): red border matching Bootstrap's .form-control.is-invalid.
   The sibling .invalid-feedback message already shows via Bootstrap's own
   .is-invalid ~ .invalid-feedback rule. */
.is-invalid .rz-inputtext {
    border-color: #dc3545;
}

/* #184: DataGrid-filterraekken (SimpleWithMenu) fylder for meget i kompakt
   densitet - knap, input og cellehoejde skaleres ned proportionalt med
   tabellens font. Radzen saetter inline height:35px paa filter-labelen,
   deraf !important. */
.rz-data-grid .rz-cell-filter {
    padding: 0.15rem 0.35rem;
}

.rz-data-grid .rz-cell-filter-label {
    height: 1.8rem !important;
}

.rz-data-grid .rz-cell-filter .rz-textbox,
.rz-data-grid .rz-cell-filter .rz-inputtext,
.rz-data-grid .rz-cell-filter .rz-dropdown,
.rz-data-grid .rz-cell-filter .rz-numeric,
.rz-data-grid .rz-cell-filter .rz-spinner {
    height: 1.65rem;
    min-height: 1.65rem;
    font-size: 0.8rem;
    padding: 0.1rem 0.4rem;
}

.rz-data-grid .rz-cell-filter .rz-dropdown .rz-dropdown-label {
    line-height: 1.45rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
}

.rz-data-grid .rz-filter-button.rz-button {
    height: 1.65rem;
    min-width: 2rem;
    padding: 0 0.3rem;
    font-size: 0.72rem;
}

.rz-data-grid .rz-filter-button .rzi {
    font-size: 0.95rem;
}

/* GENVEJE-pills (#3/#194) - globale, saa ogsaa ExtLink-genveje faar stilen */
.genvej-pill {
    display: block;
    text-align: center;
    padding: 0.35rem 0.75rem;
    margin: 0 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
}

.genvej-pill:hover {
    filter: brightness(0.96);
    text-decoration: none;
}

.genvej-blue {
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    color: #1e60c8;
}

.genvej-pill .rzi {
    font-size: 0.9rem;
    vertical-align: text-bottom;
    margin-left: 0.25rem;
}

/* Fejlbanneret (audit #310): GLOBAL regel — lå før i MainLayout.razor.css (CSS-scoped),
   så MinimalLayout-sider (Event Report/Pilot Report) viste banneret permanent. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Release Notes-/Om-formatet (2026-09-24): GLOBALT, fordi klassen deles af
   flere sider — scoped .razor.css rammer kun sin egen komponent. ── */
.release-notes {
    max-width: 800px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1f2328;
}

/* Page title + intro */
.release-notes h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.release-notes h1 + p {
    color: #656d76;
    margin-bottom: 1.5rem;
}

/* Date headers act as timeline dividers */
.release-notes h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #d0d7de;
}
.release-notes .rn-author {
    color: #656d76;
    font-weight: 400;
    font-size: 0.85em;
}

/* Change list: no default bullets on top-level items (the badge leads instead) */
.release-notes ul {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0;
}
.release-notes li {
    margin: 0.5rem 0;
}
.release-notes li strong {
    font-weight: 600;
}

/* Issue/PR reference links (e.g. #67) */
.release-notes li > a[href] {
    color: #0969da;
    text-decoration: none;
    font-weight: 500;
    margin-right: 0.15rem;
}
.release-notes li > a[href]:hover {
    text-decoration: underline;
}

/* Nested detail bullets keep discs and read as muted secondary text */
.release-notes ul ul {
    list-style: disc;
    padding-left: 1.4rem;
    margin: 0.35rem 0 0.5rem;
}
.release-notes ul ul li {
    margin: 0.2rem 0;
    color: #57606a;
    font-size: 0.92rem;
}

/* GitHub-style label badges */
.release-notes .rn-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    margin-right: 0.45rem;
    vertical-align: 0.09em;
    border: 1px solid transparent;
    line-height: 1.55;
    white-space: nowrap;
}
.release-notes .rn-nyt       { background: #dafbe1; color: #1a7f37; border-color: #aceebb; }
.release-notes .rn-fejl      { background: #ffebe9; color: #cf222e; border-color: #ffcecb; }
.release-notes .rn-sikkerhed { background: #fbefff; color: #8250df; border-color: #ecd8ff; }
.release-notes .rn-docs      { background: #ddf4ff; color: #0969da; border-color: #b6e3ff; }
.release-notes .rn-aendret   { background: #eef1f4; color: #57606a; border-color: #d0d7de; }


/* ── Mobil-sikkerhedsnet (2026-09-25): brede tabeller/grids scroller vandret inde
   i indholdet i stedet for at sprænge sidebredden. Solaris skaleres separat i
   SolarisDemoBoard.razor.css + smalt kolonnesæt under 640 px. ── */
@media (max-width: 768px) {
    article.content,
    .landing-main {
        overflow-x: auto;
    }
    article.content table {
        max-width: 100%;
    }
}

/* ── NPB master-detail (2026-09-25): rammen om ALT der hører til den valgte session
   (RadzenFieldset) — accentkant i venstre side binder den visuelt til valget i
   sessionstabellen ovenfor. ── */
.rz-fieldset.npb-valgt-session {
    border: 1px solid var(--dsvu-border);
    border-left: 4px solid var(--rz-primary);
    border-radius: 8px;
    padding: 0.5rem 1rem 1rem;
}

.rz-fieldset.npb-valgt-session > .rz-fieldset-legend,
.rz-fieldset.npb-valgt-session > legend {
    padding: 0 0.5rem;
    font-size: 1.05rem;
    color: var(--dsvu-heading);
}

/* ── NTP klasse-faner (2026-09-25): piloter på nationalholdet markeres grønt. Står
   her (ikke i scoped CSS), fordi rækkerne renderes af Radzens DataGrid. ── */
.rz-grid-table tr.ntp-paa-holdet > td {
    background-color: #d1e7dd;
}

/* ── Kopiér link-ikon i grid-celler (#344): Radzen klipper celleindhold
   (overflow: hidden), hvilket ville skære ikonets tooltip af. Kun celler, der
   rummer ikonet, åbnes — ellipsis-afkortning virker uændret i alle andre. ── */
.rz-grid-table td:has(.copy-link),
.rz-grid-table td:has(.copy-link) .rz-cell-data {
    overflow: visible;
}

/* Gæste-popup (2026-09-27): event-links uden href (klik åbner EventPublicDialog) skal stadig ligne links. */
a.np-event-link:not([href]), a.np-participant-count:not([href]), a.sf-board-row-link:not([href]) { cursor: pointer; }

/* NPB "Alle resultater" (2026-09-27): begge scrollbarer altid synlige, og overskrifterne
   står fast, mens rækkerne scroller (gridet har fast højde). */
.npb-brutto .rz-data-grid-data { overflow: scroll !important; }
.npb-brutto .rz-grid-table thead th { position: sticky; top: 0; z-index: 2; }

/* Dagsrapporter (2026-09-28): hver rapport i sin egen tydeligt afgrænsede ramme — popup og udskrift. */
.dagsrapport-kort {
    border: 1px solid #d0d7de;
    border-left: 4px solid var(--rz-primary, #3d5afe);
    border-radius: 6px;
    background: #fff;
    padding: 0.9rem 1.1rem 1rem;
    margin-bottom: 1.25rem;
    break-inside: avoid;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dagsrapport-kort-hoved {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    border-bottom: 1px solid #e6e9ee; padding-bottom: 0.5rem; margin-bottom: 0.75rem;
}
.dagsrapport-kort-dato { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #57606a; }
.dagsrapport-kort-titel { font-size: 1.15rem; margin: 0.1rem 0 0.2rem; }
.dagsrapport-kort-tekst img { max-width: 100%; height: auto; }
/* "Dagsrapporter (x)" på forsiden/kalenderen — link uden href (åbner popup'en). */
a.np-rapport-link { cursor: pointer; white-space: nowrap; }
/* Kalender (2026-09-28): Radzen skriver "Today"-knappen med stort begyndelsesbogstav i hvert
   ord (text-transform: capitalize) — på dansk skal der stå "I dag", ikke "I Dag". */
.rz-scheduler .rz-scheduler-nav .rz-button.rz-today { text-transform: none !important; } /* temaet indlæses efter app.css */

/* "?"-hjælpelink (HjaelpLink.razor) → billedvejledningen. Delt af alle layouts, derfor her. */
.hjaelp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--rz-primary, #1a73e8);
    color: var(--rz-primary, #1a73e8);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}
.hjaelp-link:hover,
.hjaelp-link:focus-visible {
    background: var(--rz-primary, #1a73e8);
    color: #fff;
    text-decoration: none;
}
.hjaelp-link.hjaelp-fast {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 1000;
    background: #fff;
}

/* ── Håndbogen (#355): tekst (vejledning.md) + skærmbilleder med markører. ── */
.vejledning {
    max-width: 900px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #1f2328;
}

/* Title + intro */
.vejledning h1 {
    font-size: 1.7rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

/* Chapter headers double as section dividers */
.vejledning h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2.25rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #d0d7de;
    scroll-margin-top: 1rem;
}
.vejledning h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}
.vejledning h4 {
    font-size: 0.98rem;
    font-weight: 600;
    margin: 1.1rem 0 0.4rem;
}

/* Body text + lists */
.vejledning p {
    margin: 0.5rem 0;
}
.vejledning ul,
.vejledning ol {
    margin: 0.5rem 0;
    padding-left: 1.4rem;
}
.vejledning li {
    margin: 0.25rem 0;
}

/* "Sådan gør du" workflow callouts (authored as blockquotes) */
.vejledning blockquote {
    margin: 1rem 0;
    padding: 0.6rem 1rem;
    background: #f6f8fa;
    border-left: 3px solid #0969da;
    border-radius: 0 6px 6px 0;
    color: #24292f;
}
.vejledning blockquote p:first-child {
    margin-top: 0;
}
.vejledning blockquote p:last-child,
.vejledning blockquote ol:last-child,
.vejledning blockquote ul:last-child {
    margin-bottom: 0;
}

/* Tables — the roles list and the rights matrix */
.vejledning table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}
.vejledning th,
.vejledning td {
    border: 1px solid #d0d7de;
    padding: 0.35rem 0.6rem;
    text-align: left;
    vertical-align: top;
}
.vejledning thead th {
    background: #f6f8fa;
    font-weight: 600;
    white-space: nowrap;
}
.vejledning tbody tr:nth-child(even) {
    background: #f6f8fa;
}

/* Inline code (routes, field names) kept subtle */
.vejledning code {
    background: #eff1f3;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.86em;
}

.hb { max-width: 1320px; }
.hb-top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.hb-soeg { position: relative; flex: 0 1 360px; }
.hb-soeg .bi { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #6b7280; }
.hb-soeg input { padding-left: 2rem; }
.hb-gaest { background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 8px; padding: .5rem .8rem; }
.hb-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2rem; align-items: start; }
.hb-panel .hb-layout { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .hb-layout { grid-template-columns: minmax(0, 1fr); } .hb-toc { display: none; } }
.hb-toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: .9rem; border-right: 1px solid #e3e7ee; padding-right: 1rem; }
.hb-toc-titel { font-weight: 600; margin-bottom: .4rem; }
.hb-toc ul { list-style: none; margin: 0; padding: 0; }
.hb-toc li { margin: .15rem 0; }
.hb-toc li.hb-toc-n3 { padding-left: .9rem; font-size: .85rem; }
.hb-toc a { color: #374151; text-decoration: none; }
.hb-toc a:hover { color: #0969da; text-decoration: underline; }
.hb-titel { font-size: 1.7rem; font-weight: 600; margin: 0 0 .5rem; }
.hb-afsnit { scroll-margin-top: 1rem; }
.hb-afsnit > h2 { font-size: 1.3rem; font-weight: 600; margin: 2.25rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid #d0d7de; }
.hb-afsnit > h3 { font-size: 1.08rem; font-weight: 600; margin: 1.6rem 0 .5rem; }
.hb-anker { color: inherit; text-decoration: none; }
.hb-anker:hover::after { content: " #"; color: #0969da; }
.hb-fod { margin-top: 2.5rem; }
.hb .vejledning { max-width: 900px; }

.hb-skaerm { margin: 1.25rem 0 1.75rem; padding: 1.1rem; background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; scroll-margin-top: 1rem; }
.hb-skaerm:target { box-shadow: 0 0 0 3px #1a73e8; }
.hb-skaerm-top { display: grid; gap: .25rem; margin-bottom: .9rem; max-width: 780px; }
.hb-skaerm-top p { margin: 0; }
.hb-skaerm-titel { font-weight: 600; font-size: 1.02rem; color: #111827; }
.hb-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8rem; color: #6b7280; }
.hb-pill { padding: 1px 9px; border-radius: 999px; background: #e8f2fd; color: #1a73e8; font-weight: 600; }
.hb-skaerm-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1fr); gap: 1.4rem; align-items: start; }
.hb-skaerm-layout.hb-smal { grid-template-columns: minmax(0, 1.1fr) minmax(260px, 1fr); }
.hb-panel .hb-skaerm-layout, .hb-panel .hb-skaerm-layout.hb-smal { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .hb-skaerm-layout, .hb-skaerm-layout.hb-smal { grid-template-columns: minmax(0, 1fr); } }
.hb-shot { position: relative; border: 1px solid #d5dbe5; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 6px 24px rgba(17,24,39,.08); }
.hb-shot img { display: block; width: 100%; height: auto; }
.hb-marker { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
    background: #c8102e; color: #fff; font: 700 12px/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums;
    display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .15s ease; }
.hb-marker:hover, .hb-marker.on, .hb-marker:focus-visible { transform: translate(-50%, -50%) scale(1.25); outline: none; }
.hb-marker:focus-visible { box-shadow: 0 0 0 3px #1a73e8; }
@media (max-width: 600px) { .hb-marker { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; } }
.hb-panel .hb-marker { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; }
ol.hb-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
ol.hb-keys li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 7px 10px; border-radius: 8px; transition: background .15s ease; }
ol.hb-keys li.on { background: #fff3f4; }
.hb-num { width: 26px; height: 26px; border-radius: 50%; background: #c8102e; color: #fff; display: grid; place-items: center; font: 700 12px/1 "Segoe UI", system-ui, sans-serif; }
ol.hb-keys b { display: block; color: #111827; font-size: .92rem; line-height: 1.35; }
ol.hb-keys p { margin: 0; font-size: .86rem; line-height: 1.45; }
.hb-note { margin-top: .75rem; padding: .6rem .8rem; border-radius: 8px; background: #f4f6f9; font-size: .84rem; color: #6b7280; }
@media (prefers-reduced-motion: reduce) { .hb-marker, ol.hb-keys li { transition: none; } }
@media print {
    /* Kun Håndbogens indhold på papir/PDF — menu og topbjælke udelades. */
    body:has(.hb) .sidebar, body:has(.hb) .top-row { display: none !important; }
    body:has(.hb) .page, body:has(.hb) main { display: block; margin: 0; }
    .hb-layout { display: block; }
    .hb-skaerm { break-inside: avoid; box-shadow: none; }
    .hb-shot { box-shadow: none; }
}

/* Håndbogen i et sidepanel ("?"-knappen, site.js teamVisHaandbog, Arne 2026-09-30): siden er stadig
   synlig og kan bruges ved siden af — på brede skærme rykkes siden ind, så intet skjules. */
.hb-sidepanel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2000;
    width: min(620px, 100vw); background: #fff; border-left: 1px solid #d0d7de;
    box-shadow: -12px 0 32px rgba(17, 24, 39, 0.18);
    display: flex; flex-direction: column;
    animation: hb-ind .18s ease-out;
}
@keyframes hb-ind { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hb-sidepanel { animation: none; } }
.hb-sidepanel-top { display: flex; align-items: center; gap: .75rem; padding: 8px 10px 8px 16px; border-bottom: 1px solid #e5e7eb; }
.hb-sidepanel-top strong { margin-right: auto; }
.hb-sidepanel-luk { border: none; background: transparent; font-size: 1.7rem; line-height: 1; padding: 0 6px; color: #374151; cursor: pointer; }
.hb-sidepanel-luk:hover { color: #111827; }
.hb-sidepanel iframe { flex: 1; width: 100%; border: 0; }
@media (min-width: 1300px) { body.hb-sidepanel-aaben .page { margin-right: min(620px, 100vw); } }
@media print { .hb-sidepanel { display: none; } body.hb-sidepanel-aaben .page { margin-right: 0; } }
.hb-panel-side { padding: 12px 16px 24px; }

/* Mål (#348): statusprikker i årsstriber/Planforløb og fremdriftsbjælker i statusfarver.
   Farverne følger StatusLozenge-mappingen (success/inprogress/moved/removed/default). */
.maal-prik { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; background: var(--rz-base-400, #adb5bd); }
.maal-prik-success { background: var(--rz-success, #198754); }
.maal-prik-inprogress { background: var(--rz-info, #0d6efd); }
.maal-prik-moved { background: var(--rz-warning, #b45309); }
.maal-prik-removed { background: var(--rz-danger, #dc3545); }
/* Oversigtsstrimmel + resultatmål-kort (#348, spec 7.1/7.2) */
.maal-strimmel-kort { cursor: pointer; }
.maal-strimmel-kort:hover { border-color: var(--rz-primary, #0d6efd); }
.maal-noegletal { background: var(--rz-base-100, #f6f7f9); border-radius: 4px; padding: .35rem .6rem; font-size: .875rem; }
.maal-chip { display: inline-block; background: var(--rz-primary-lighter, #eef2ff); color: var(--rz-primary-dark, #3730a3); border-radius: 999px; padding: 0 .6rem; margin-right: .3rem; text-decoration: none; }
/* Plan-chat som accordion (2026-09-29) */
.plan-chat-accordion { border: 1px solid var(--rz-base-300, #dee2e6); border-radius: 6px; padding: .5rem .75rem; }
.plan-chat-accordion-hoved { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.plan-chat-pil { width: 1rem; color: var(--rz-text-secondary-color, #6c757d); }
/* Trænerens overblik: hele rækken er klikbar */
.maal-overblik .rz-data-row { cursor: pointer; }
.maal-overblik .rz-data-row:hover > td { background: var(--rz-primary-lighter, #eef2ff) !important; }
/* Planforløb-matrix (#348, spec 7.6) */
.maal-forloeb .rz-grid-table td.maal-forloeb-nu, .maal-forloeb .rz-grid-table th.maal-forloeb-nu { background: var(--rz-primary-lighter, #eef2ff) !important; }
.maal-forloeb tr.maal-forloeb-sektion td { background: var(--rz-base-50, #fafafa); }
.maal-forloeb-sektion-tekst { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rz-text-secondary-color, #6c757d); }
.maal-forloeb-celle { white-space: nowrap; cursor: pointer; }
.maal-forloeb-redigerbar { border-bottom: 1px dashed var(--rz-base-400, #adb5bd); }
.maal-tekst-bagud { color: var(--rz-warning-dark, #b45309); }
/* Procesmål: markør for, hvor langt året er (#348) */
.maal-kort-klik { cursor: pointer; }
.maal-kort-klik:hover { border-color: var(--rz-primary, #4340d2); }

/* Felt-accordion (Roller på pilotens Konto, 2026-09-29): ligner et formfelt, så den flugter med Køn/Fødselsdato
   ved siden af — samme kant, hjørner og højde som RadzenDropDown; ingen kort-skygge eller ekstra margen. */
.felt-accordion.rz-accordion { box-shadow: none; margin: 0; padding: 0; background: var(--rz-input-background-color, #fff);
    border: var(--rz-input-border, 1px solid var(--rz-base-300)); border-radius: var(--rz-input-border-radius, 4px); }
.felt-accordion.rz-accordion .rz-accordion-header { margin: 0; }
.felt-accordion.rz-accordion .rz-accordion-header > button { width: 100%; padding: 0 0.75rem; margin: 0; line-height: 1.5; min-height: 38px; display: flex; align-items: center;
    gap: 0.5rem; text-align: start; font-weight: normal; font-size: var(--rz-input-font-size, 1rem); color: var(--rz-input-value-color, inherit); }
.felt-accordion.rz-accordion .rz-accordion-header > button > span:not(.rz-accordion-toggle-icon) { flex: 1; min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.felt-accordion.rz-accordion .rz-accordion-header > button > .rz-accordion-toggle-icon { order: 2; }   /* pilen til højre som i en dropdown */
.felt-accordion.rz-accordion .rz-accordion-content { padding: 0.25rem 0.75rem 0.75rem; }

/* Admin → Trafik (2026-09-30): nøgletal som små kort */
.trafik-tal { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; }
.trafik-kort { background: var(--rz-base-background-color, #fff); border: 1px solid var(--rz-base-300, #dee2e6);
    border-radius: var(--rz-border-radius, 4px); padding: 0.75rem 1rem; }
.trafik-vaerdi { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.trafik-etiket { font-size: 0.85rem; color: var(--rz-text-secondary-color, #6c757d); }

/* Notifikationer (Arne 2026-09-30, i stil med Radzens eksempler): tonet baggrund og tydelig farvet kant pr. alvor,
   fed titel, mørk læsbar detalje og skygge. Alvorsklassen sidder på wrapperen (.rz-notification-item-wrapper.rz-notification-*);
   indholdet sættes af Services/Beskeder (titel, detalje, nedtællingsbjælke). */
.rz-notification-item-wrapper .rz-notification-item { border-radius: 10px; border-left: 6px solid transparent;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14); padding: 0.85rem 1rem; }
.rz-notification-item-wrapper .rz-notification-title { font-weight: 700; font-size: 1rem; }
.rz-notification-item-wrapper .rz-notification-content { font-size: 0.9rem; color: #1f2937; margin-top: 2px; }
.rz-notification-success .rz-notification-item { background: #e6f6e6; border-left-color: #2e7d32; }
.rz-notification-success .rz-notification-title, .rz-notification-success .rz-notification-icon { color: #1b5e20; }
.rz-notification-info .rz-notification-item { background: #e3f0fb; border-left-color: #1565c0; }
.rz-notification-info .rz-notification-title, .rz-notification-info .rz-notification-icon { color: #0d47a1; }
.rz-notification-warn .rz-notification-item, .rz-notification-warning .rz-notification-item { background: #fdf6d8; border-left-color: #b88a00; }
.rz-notification-warn .rz-notification-title, .rz-notification-warn .rz-notification-icon,
.rz-notification-warning .rz-notification-title, .rz-notification-warning .rz-notification-icon { color: #6d5200; }
.rz-notification-error .rz-notification-item { background: #fde8e8; border-left-color: #c62828; }
.rz-notification-error .rz-notification-title, .rz-notification-error .rz-notification-icon { color: #8e1b1b; }

/* Find i FAI (2026-09-30): rækker hvor fødselsdatoen passer — også i RadzenDataGrid'ens fastlåste celler. */
.rz-data-row[data-match] > td, .rz-data-row[data-match] > td.rz-frozen-cell { background-color: #e6f6e6 !important; }

/* Graf-tooltips (Radzen) ligger i en popup, der ellers fanger klikket under musen — så virker klik på
   fx donut-felterne ikke (Support → Pr. status, 2026-09-30). Tooltip'en selv har allerede pointer-events: none. */
.rz-popup:has(> .rz-chart-tooltip) { pointer-events: none; }

/* Henvendelser (#351): besked og tråd — tekst vises som ren tekst med bevarede linjeskift. */
.kontakt-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.kontakt-svar { margin-top: .6rem; padding: .5rem .75rem; border-left: 3px solid #d0d7de; background: #f6f8fa; border-radius: 0 6px 6px 0; }
.kontakt-svar-support { border-left-color: #1a73e8; background: #eef4fd; }

/* Support → "Pr. status": klikbar forklaring ved donutten (2026-09-30) — klik filtrerer listen. */
.status-forklaring { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.status-forklaring button { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: none; padding: .15rem .4rem; border-radius: 6px; text-align: left; white-space: nowrap; }
.status-forklaring button:hover { background: #f0f2f5; }
.status-forklaring button.valgt { background: #e8f2fd; font-weight: 600; }
.status-prik { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }

/* Om-siden: personkort pr. rolle (#352) — i stil med Radzens "Team"-blok, bygget med almindelige elementer. */
.om-personer { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; max-width: 1100px; }
.om-person { background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; padding: 1.1rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.om-person img, .om-person-initialer { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: .6rem; }
.om-person-initialer { display: grid; place-items: center; background: #e8f2fd; color: #1a73e8; font-weight: 700; font-size: 1.6rem; }
.om-person-navn { font-weight: 600; color: #111827; }
.om-person-rolle { font-size: .85rem; color: #6b7280; margin-bottom: .4rem; }
.om-person-note { font-size: .88rem; margin: 0 0 .5rem; white-space: pre-wrap; }
.om-person-kontakt { margin-top: auto; font-size: .88rem; }

/* Eventbeskrivelse (#364): formateret tekst fra RadzenHtmlEditor — billeder holdes inden for bredden. */
.event-beskrivelse { max-width: 900px; overflow-wrap: anywhere; }
.event-beskrivelse img { max-width: 100%; height: auto; }
.event-beskrivelse table { border-collapse: collapse; }
.event-beskrivelse td, .event-beskrivelse th { border: 1px solid #d0d7de; padding: .25rem .5rem; }
.event-beskrivelse p:last-child { margin-bottom: 0; }

/* Afkrydsning = RadzenSwitch overalt (Arne 2026-10-01): grøn, når den er slået til. Sat på .rz-switch (ikke :root),
   så temaets egne :root-variabler ikke vinder på rækkefølgen. */
.rz-switch {
    --rz-switch-checked-background-color: var(--rz-success);
    --rz-switch-checked-circle-background-color: #fff;
}

/* HTML-editorerne (eventbeskrivelse, TC-rapport, dagsrapporter) kan trækkes større/mindre i højden med håndtaget
   nederst til højre (Arne 2026-10-02). Startstørrelsen er komponentens Style-højde; indholdsområdet følger med. */
.rz-html-editor {
    resize: vertical;
    overflow: hidden;
    min-height: 180px;
}