/* Styling for admin-shell, faner, tabeller, knapper, dialoger */

.admin-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.admin-header {
    background: #2e3d4d;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-title {
    font-size: 18px;
    font-weight: 600;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

/* Klikbart version-badge i admin-header — viser fx "v42" eller "v42·dirty".
   Tooltip viser fuld SHA + build-tid. Klik åbner changelog-dialog. */
.version-badge {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Consolas', 'Courier New', monospace;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    padding: 2px 6px;
    border-radius: 3px;
}
.version-badge:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Changelog-tabel — monospace SHA-kolonne, kompakt layout */
.version-changelog-table { font-size: 13px; }
.version-changelog-table td.version-sha {
    font-family: 'Consolas', 'Courier New', monospace;
    white-space: nowrap;
    color: #777;
}

.admin-tabs {
    background: #fff;
    border-bottom: 1px solid #d4dae1;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.admin-tab {
    background: transparent;
    border: 0;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 15px;
    color: #555;
    border-bottom: 3px solid transparent;
}

.admin-tab:hover { color: #1565c0; }
.admin-tab.active {
    color: #1565c0;
    border-bottom-color: #1565c0;
    font-weight: 600;
}

.admin-content {
    flex: 1;
    padding: 24px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.admin-content-wide {
    max-width: 1400px;
}

/* Bruges på fanen Personer som har mange kolonner og brug for hele skærmbredden.
   Ingen max-width, mindre vandret padding så sidebar og tabel reelt fylder kanten. */
.admin-content-full {
    max-width: none;
    padding: 24px 16px;
}

/* Personer-fanens tabel skal udnytte browserens fulde højde uden at presse
   siden over viewport-grænsen. ~280px afsat til admin-header + admin-tabs +
   content-padding + person-detail-padding + section-header + filter-bar. */
.admin-content-full .table-scroll {
    max-height: calc(100vh - 280px);
}

/* Forening-sidebar matcher visuelt tabellens højde og scroller internt hvis nødvendigt. */
.admin-content-full .personer-tab {
    align-items: stretch;
}
.admin-content-full .forening-list {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* ── Konfigurations-sektioner ────────────────────────────── */
.config-tab {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.config-section {
    background: #fff;
    border: 1px solid #d4dae1;
    border-radius: 8px;
    padding: 20px;
}

.config-section h3 {
    margin: 0 0 12px;
    font-size: 16px;
    color: #2e3d4d;
}

.config-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.config-section-header h3 { margin: 0; }

/* ── Collapsible config-sections (kun når elementet er <details>) ─────
   Klik på summary folder ind/ud. Actionknapper i summary skal kalde
   @onclick:stopPropagation="true" så de ikke trigger toggle. */
details.config-section { padding: 0; }
details.config-section > summary {
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
details.config-section > summary::-webkit-details-marker { display: none; }
details.config-section > summary::before {
    content: "▶";
    font-size: 10px;
    color: #777;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    margin-right: 8px;
}
details.config-section[open] > summary::before { transform: rotate(90deg); }
details.config-section > summary > h3 {
    margin: 0;
    flex: 1;
}
details.config-section[open] > summary {
    border-bottom: 1px solid #eef1f4;
}
details.config-section > summary:hover {
    background: #fafbfd;
}
details.config-section[open] > summary:hover {
    background: transparent;
}
details.config-section .config-section-body {
    padding: 16px 20px;
}

.muted { color: #777; font-size: 14px; margin: 8px 0 0; }

/* ── Tabel ───────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 1px 10px;
    text-align: left;
    border-bottom: 1px solid #dfe4ea;
    border-right: 1px solid #eef1f4;
}
.data-table th:last-child,
.data-table td:last-child { border-right: 0; }

.data-table th {
    background: #f7f9fb;
    color: #555;
    font-weight: 600;
    font-size: 13px;
}

.data-table tbody tr:hover { background: #fafbfd; }

.action-cell { text-align: right; white-space: nowrap; }

/* Scrollable wrapper for tables der kan blive lange — viser ~10 rækker, derefter scroll.
   Sticky thead holder kolonneoverskrifterne synlige under scroll. */
.table-scroll {
    max-height: 360px;
    overflow: auto;
    border: 1px solid #eef1f4;
    border-radius: 4px;
}
.table-scroll .data-table { border-collapse: separate; border-spacing: 0; }
.table-scroll .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f9fb;
    box-shadow: inset 0 -1px 0 #d4dae1;
}

/* ── Knapper ─────────────────────────────────────────────── */
.btn {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
}

.btn-primary {
    background: #1565c0;
    color: #fff;
    border-color: #1565c0;
}
.btn-primary:hover { background: #0d47a1; }

.btn-outline {
    background: #fff;
    color: #2e3d4d;
    border-color: #d4dae1;
}
.btn-outline:hover { background: #f4f6f9; }

.btn-danger {
    background: #c62828;
    color: #fff;
    border-color: #c62828;
}
.btn-danger:hover { background: #8e0000; }

.btn-link {
    background: transparent;
    border: 0;
    color: #1565c0;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
}
.btn-link:hover { text-decoration: underline; }

.btn-link:disabled {
    color: #999;
    cursor: default;
}
.btn-link:disabled:hover { text-decoration: none; }

.btn-link-danger { color: #c62828; }

/* ── Badge ───────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.badge-green { background: #e6f4ea; color: #1b5e20; }

/* ── Dialog ──────────────────────────────────────────────── */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog-box {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.dialog-box h2 {
    margin: 0 0 16px;
    font-size: 18px;
    color: #2e3d4d;
}

.dialog-error {
    color: #c62828;
    font-weight: 600;
    margin: 12px 0;
    padding: 8px 10px;
    background: #ffebee;
    border-radius: 6px;
    font-size: 14px;
}

.dialog-buttons {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Form-grid ───────────────────────────────────────────── */
.form-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 3px 12px;
    align-items: center;
}

.form-grid label {
    color: #444;
    font-size: 14px;
}

.form-grid .form-input input,
.form-grid .form-input select {
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #d4dae1;
    border-radius: 6px;
}
.form-grid .form-input textarea {
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #d4dae1;
    border-radius: 6px;
}

.form-required {
    color: #c62828;
    margin-left: 2px;
}

.form-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.form-grid-wide {
    grid-template-columns: 140px 1fr;
}

/* ── Personer-fane: master-detail ────────────────────────── */
.personer-tab {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}

.forening-list {
    background: #fff;
    border: 1px solid #d4dae1;
    border-radius: 8px;
    padding: 16px;
}

.forening-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forening-list-items li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.forening-list-items li:hover { background: #f4f6f9; }

.forening-list-items li.selected {
    background: #e3f2fd;
    color: #0d47a1;
    font-weight: 600;
}

.forening-count {
    background: #d4dae1;
    color: #555;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
}

.forening-list-items li.selected .forening-count {
    background: #1565c0;
    color: #fff;
}

.person-detail {
    background: #fff;
    border: 1px solid #d4dae1;
    border-radius: 8px;
    padding: 20px;
}

/* ── LockersConfig master-detail (inde i en config-section) ── */
.locker-config {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    margin-top: 12px;
}

.locker-config-list {
    background: #f7f9fb;
    border: 1px solid #d4dae1;
    border-radius: 6px;
    padding: 12px;
    min-height: 80px;
}

.locker-config-detail {
    border: 1px solid #d4dae1;
    border-radius: 6px;
    padding: 12px;
    min-height: 80px;
}

.action-buttons {
    display: flex;
    gap: 6px;
}

.info-message {
    padding: 8px 10px;
    background: #e3f2fd;
    color: #0d47a1;
    border-radius: 6px;
    font-size: 14px;
    margin: 10px 0 0;
}

/* Fejl-besked: samme layout som info-message, men med rød/orange palette
   så den tydeligt signalerer at noget gik galt. */
.error-message {
    padding: 8px 10px;
    background: #ffebee;
    color: #b71c1c;
    border-left: 4px solid #c62828;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    margin: 10px 0 0;
}

/* Info-ikon ved siden af en label/checkbox. Bruger en custom CSS-tooltip
   via [data-tooltip]-attribut så vi kan styre delay (0ms) — native
   title-attribut har 500-1000ms browser-delay vi ikke kan overskrive. */
.info-icon {
    display: inline-block;
    margin-left: 6px;
    cursor: help;
    font-size: 15px;
    vertical-align: middle;
    position: relative;
}

.info-icon[data-tooltip]:hover::after,
.info-icon[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #2e3d4d;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    width: 320px;
    z-index: 1000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    /* Vises straks — ingen delay. */
}

.info-icon[data-tooltip]:hover::before,
.info-icon[data-tooltip]:focus::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2e3d4d;
    z-index: 1000;
}

/* Advarsel: blødere orange palette — brugt fx ved sletning af person der
   har en kritisk rolle som formand/kasserer. */
.warning-message {
    padding: 8px 10px;
    background: #fff3e0;
    color: #5d4037;
    border-left: 4px solid #f57c00;
    border-radius: 6px;
    font-size: 14px;
    margin: 10px 0;
}

/* ── PersonDetail-visning ────────────────────────────────── */
.person-detail-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.person-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #eef1f4;
    padding-bottom: 12px;
}

.person-detail-name {
    margin: 0;
    font-size: 18px;
    color: #2e3d4d;
}

.person-detail-meta {
    margin: 4px 0 0;
    font-size: 13px;
}

/* Filter-bar over person-listen. */
.person-filters,
.invoice-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0 12px;
    flex-wrap: wrap;
}

/* Antal/sum-tekst yderst til højre i invoice-filter-bar'en. */
.invoice-summary {
    margin-left: auto;
    font-size: 13px;
}
.person-search {
    padding: 6px 10px;
    border: 1px solid #d4dae1;
    border-radius: 6px;
    font-size: 14px;
    min-width: 220px;
}
/* Filter-pille-stil matchet med SkytteAdmin's fp-rfid/pill-rfid: lyseblå inaktiv,
   fuld blå aktiv. */
.filter-btn {
    padding: 4px 14px;
    border: 1.5px solid #aad0ee;
    border-radius: 16px;
    background: #e8f2fb;
    color: #5b9bd5;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}
.filter-btn:hover { background: #d4e7f7; }
.filter-btn.active {
    background: #5b9bd5;
    color: #fff;
    border-color: #5b9bd5;
}
.filter-btn.active:hover { background: #4a8bc4; border-color: #4a8bc4; }

/* "Nulstil filtre" i en filter-bar. Bevidst btn-link og ikke .filter-btn: pillerne
   er tilstands-toggles ("er dette filter slået til?"), mens nulstil er en handling.
   Ville den se ud som en pille, ville den læses som endnu et filter man kan slå
   til. Vises kun når mindst ét filter afviger fra fanens default. */
.filter-reset {
    font-size: 13px;
    padding: 4px 6px;
    white-space: nowrap;
}

/* Bar over tabellen til kolonne-toggle. Bruger en neutral grå palette med
   checkbox-prefix (☐/☑) så det er visuelt adskilt fra de blå filter-pills —
   filter = "hvilke rækker", kolonne = "hvilke kolonner". */
.column-toggle-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 10px;
    font-size: 13px;
}

/* Pill'en holder samme rolige grå udseende uanset state — det er udelukkende
   checkbox-ikonet (☐/☑) der ændrer sig, så pillerne ikke "konkurrerer" med
   filter-pillerne om opmærksomhed. */
.column-pill {
    padding: 4px 12px;
    border: 1.5px solid #d4dae1;
    border-radius: 16px;
    background: #f4f6f9;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.column-pill:hover { background: #e8eaee; }

.column-pill-check {
    font-size: 14px;
    margin-right: 2px;
}
.column-pill.active .column-pill-check { color: #2e7d32; }

/* Preview af mail-body i Mails-fanens detalje-dialog — viser HTML
   som det vil se ud i mailen, indrammet så det er tydeligt at det
   er en eksisterende mail (ikke et editerbart felt). */
.mail-body-preview {
    border: 1px solid #d4dae1;
    border-radius: 6px;
    padding: 12px 14px;
    background: #fafbfd;
    max-height: 240px;
    overflow-y: auto;
    font-size: 13px;
}

/* Placeholder-knapper over brødtekst-feltet i bulk-email-dialogen — klik
   indsætter {placeholder}-koden ved cursoren. Lyseblå pill-look. */
.placeholder-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 6px;
    font-size: 12px;
}
.placeholder-pill {
    padding: 3px 10px;
    border: 1px solid #aad0ee;
    border-radius: 12px;
    background: #e8f2fb;
    color: #1565c0;
    cursor: pointer;
    font-size: 12px;
    font-family: monospace;
}
.placeholder-pill:hover { background: #d4e7f7; }

/* Skyttetype-tiles på admin person-formularen. Lignende look som radio-tiles
   på /registrer-skud, men i en mindre version der passer i form-grid'et.
   Klik på en aktiv tile af-selecter den (toggle). */
.shooter-type-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.shooter-type-tile {
    padding: 6px 14px;
    border: 1.5px solid #d4dae1;
    border-radius: 6px;
    background: #fff;
    color: #2e3d4d;
    cursor: pointer;
    font-size: 13px;
}
.shooter-type-tile:hover { border-color: #1565c0; }
.shooter-type-tile.selected {
    background: #e3f2fd;
    border-color: #1565c0;
    color: #0d47a1;
    font-weight: 600;
}

/* Brikker/skabe-sektion inde i Redigér-person-dialogen — top-spacing
   plus subtle separator så det visuelt løsrives fra stamdata-formen. */
.edit-person-assignments {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e0e6eb;
}

/* Mini-tabel til år/sats-input i FeeTypes-dialogen. Kompakt så flere
   års-rækker kan stå indenfor dialogens bredde. */
.rate-mini-table {
    border-collapse: collapse;
    margin-bottom: 6px;
}
.rate-mini-table th {
    text-align: left;
    font-size: 12px;
    color: #555;
    padding: 2px 8px 2px 0;
    font-weight: 600;
}
.rate-mini-table td {
    padding: 2px 8px 2px 0;
}
.rate-mini-table input[type="number"] {
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid #d4dae1;
    border-radius: 4px;
}

/* Tæller helt ude til højre i filter-bar'en. */
.person-count {
    margin-left: auto;
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

/* ── Reconnect-modal (overstyrer Blazor's default engelske dialog) ───────
   Blazor sætter components-reconnect-{show,failed,rejected,refreshing} på
   #components-reconnect-modal afhængig af state. Default er skjult. */
.reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.reconnect-modal.components-reconnect-show,
.reconnect-modal.components-reconnect-failed,
.reconnect-modal.components-reconnect-rejected,
.reconnect-modal.components-reconnect-refreshing {
    display: flex;
}

.reconnect-dialog {
    background: #fff;
    padding: 24px 28px;
    border-radius: 8px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
}
.reconnect-dialog h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #2e3d4d;
}
.reconnect-dialog p {
    margin: 0 0 12px;
    color: #555;
    font-size: 14px;
}

.reconnect-state { display: none; }
.reconnect-modal.components-reconnect-show .reconnect-state-rejoining { display: block; }
.reconnect-modal.components-reconnect-refreshing .reconnect-state-refreshing { display: block; }
.reconnect-modal.components-reconnect-failed .reconnect-state-failed { display: block; }
.reconnect-modal.components-reconnect-rejected .reconnect-state-rejected { display: block; }

.reconnect-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}

/* Bemærkning vises som blødt fremhævet linje under stamdataene — bevarer linjeskift fra textarea. */
.person-detail-comment {
    margin: 6px 0 0;
    font-size: 13px;
    color: #555;
    white-space: pre-line;
    font-style: italic;
}

.person-detail-roles {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.role-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: #e8f0fb;
    color: #1f4e8c;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #c9def1;
}

.assignment-section {
    border: 1px solid #eef1f4;
    border-radius: 6px;
    padding: 12px 14px;
    background: #fafbfd;
}

.assignment-section h4 {
    margin: 0;
    font-size: 14px;
    color: #2e3d4d;
}

/* Klikbare rækker i persontabel */
.data-table tr.row-clickable { cursor: pointer; }
.data-table tr.row-clickable:hover { background: #e8f4fb; }

/* Valgt række — Våben, Ammunition og Skabe. Samme grønne som .member-selected
   på medlemsoversigten, så "det her klikkede jeg på" ser ens ud i hele admin.
   Baggrunden sættes på td og ikke på tr: en td-baggrund males oven på tr'ens,
   så markeringen overlever row-clickable:hover og row-deleted uden !important.
   Klassen blev allerede sat i markuppen i alle tre faner — den manglede bare
   styling, så den valgte række så ud præcis som de andre. */
.data-table tr.row-selected > td { background: var(--color-success-light); }

/* Slettede rækker — vist når "Vis slettede" er aktiveret. Greyed-out + kursiv
   på alle celler undtagen action-cellen, så Gendan-knappen forbliver læsbar. */
.data-table tr.row-deleted td:not(.action-cell) {
    color: #999;
    font-style: italic;
}
.data-table tr.row-deleted { background: #fafafa; }
.deleted-tag {
    margin-left: 8px;
    color: #c62828;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
}

/* Skjulte rækker — vist når "Inkluder skjulte" er aktiveret. Mindre dæmpet
   end slettede (de er stadig "rigtige" personer, bare ikke admin-relevante). */
.data-table tr.row-hidden { background: #fbfcfd; cursor: pointer; }
.data-table tr.row-hidden td { color: #6b7178; font-style: italic; }
.data-table tr.row-hidden:hover { background: #f0f4f8; }

/* "Vis slettede"-toggle som chip ved siden af actionknapper. */
.show-deleted-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid #d4dae1;
    border-radius: 16px;
    background: #fff;
    user-select: none;
}
.show-deleted-toggle:hover { background: #f4f6f9; }
.show-deleted-toggle input { margin: 0; cursor: pointer; }

/* Wrapper til actionknapper i summary — gør plads til toggle + knapper på samme linje */
.summary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Fakturaer-fane ──────────────────────────────────────── */
.invoices-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.invoices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.invoices-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoices-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Live-progress mens en bulk-operation (fakturagenerering, mail-/rykker-udsendelse)
   kører — grøn tekst venstre for knapperne. */
.busy-progress {
    color: #1b5e20;
    font-weight: 600;
    font-size: 14px;
    margin-right: 8px;
}

/* Sortable kolonneoverskrift — bruges på fakturalisten. */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.data-table th.sortable:hover {
    background: #eef2f6;
}

/* Hvid baggrund + tynd ramme om selve tabellen, så row-separator-stregerne
   ikke fortaber sig i den grå sidebaggrund. Border-radius leveres af
   .table-scroll-wrappern. */
.invoices-tab .data-table {
    background: #fff;
}

/* Kebab-knap i action-cellen. Holder cellen lille — alle handlinger sker
   i en popup-dialog. */
.row-menu-toggle {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #2e3d4d;
    padding: 4px 10px;
}
.row-menu-toggle:hover {
    background: #eef2f6;
    border-color: #d4dae1;
}

/* Backdrop ovenpå hele siden mens row-menu er åben. Gennemsigtig — fanger
   kun klik så vi kan lukke menuen ved klik udenfor. */
.row-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

/* Selve popover'en. position: fixed gør at den ikke clippes af table-scroll
   overflow. JS sætter top/left baseret på klik-koordinater. */
.row-menu-popover {
    position: fixed;
    z-index: 100;
    min-width: 200px;
    background: #fff;
    border: 1px solid #b0bec5;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Skjul default-focus-ring på selve popover-containeren — den er kun
   fokuseret for at fange Esc-tasten via @onkeydown. */
.row-menu-popover:focus { outline: none; }

.row-menu-item {
    text-align: left;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: #2e3d4d;
    cursor: pointer;
}
.row-menu-item:hover,
.row-menu-item:focus {
    background: #e8f4fb;
    outline: none;
}
.row-menu-item:disabled {
    color: #9aa4b1;
    cursor: not-allowed;
}
.row-menu-item:disabled:hover { background: transparent; }
.row-menu-item-danger { color: #c62828; }
.row-menu-item-danger:hover,
.row-menu-item-danger:focus { background: #ffebee; }

/* ── OrganizationProfile ─────────────────────────────────── */
/* Read-only-visningen er en grid med to kolonner (label + værdi). Hver
   række får en blød horisontal linje nedenunder så lange tekster ikke
   "flyder sammen" med næste række. Linjen tegnes på både dt og dd så den
   strækker sig hele vejen på tværs. */
.org-profile-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    margin: 12px 0 0;
    font-size: 14px;
}

.org-profile-grid dt,
.org-profile-grid dd {
    padding: 8px 0;
    border-bottom: 1px solid #eef1f4;
}

.org-profile-grid dt {
    color: #555;
    font-weight: 600;
    padding-right: 16px;
}

.org-profile-grid dd {
    margin: 0;
    color: #222;
}

/* Bevarer linjeskift i tekst-felter — bruges på faktura-fodtekst og rykker-tekst
   i org-profile-visningen, så det vises som indtastet uden at skulle åbne rediger.
   pre-line bevarer \n men kollapser stadig flere mellemrum, så formatering ser
   ensartet ud uanset hvordan brugeren har skrevet. */
.org-profile-grid dd.multiline-text {
    white-space: pre-line;
}

/* ── ShotConfigSection — to paner side om side ───────────── */
.shot-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 12px;
}

.shot-config-pane {
    border: 1px solid #eef1f4;
    border-radius: 6px;
    padding: 14px;
    background: #fafbfd;
}

.shot-config-pane h4 {
    margin: 0;
    font-size: 14px;
    color: #2e3d4d;
}

/* Totals-række i skud-rapporten */
.data-table tr.totals-row {
    background: #f4f6f9;
    border-top: 2px solid #1565c0;
}

/* Shots tab top-area */
.shots-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Per-forening summary cards inside the "Summeringer per forening" details */
.forening-summary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forening-summary-card {
    background: #fafbfd;
    border-color: #eef1f4;
}

.forening-summary-card > summary > h4 {
    margin: 0;
    flex: 1;
    font-size: 14px;
    color: #2e3d4d;
}

.forening-summary-card > summary {
    padding: 10px 16px;
}

.forening-shot-total {
    color: #555;
    font-size: 13px;
    font-weight: 600;
    background: #eef1f4;
    padding: 2px 10px;
    border-radius: 10px;
}

/* ── Minimal mobil-tilpasninger ────────────────────────────────
   Appen er desktop-first; vi laver ikke fuld responsive layout.
   Disse to media queries fjerner de værste mobile-bumps uden at
   ændre desktop-oplevelsen. */

/* Personer-fanens master-detail stacker under 800px så hovedindholdet
   ikke kvæles af den 280px brede Foreninger-sidebar. */
@media (max-width: 800px) {
    .personer-tab { grid-template-columns: 1fr; }
    .admin-content-full .forening-list { max-height: 240px; }
}

/* Info-tooltip skrumper til viewport-bredden på mobil, så den ikke
   stikker udenfor skærmen. Pilen bliver hvor den var. */
@media (max-width: 600px) {
    .info-icon[data-tooltip]:hover::after,
    .info-icon[data-tooltip]:focus::after {
        width: 90vw;
        max-width: 320px;
    }
}

/* ── Statistik-fanen ──────────────────────────────────────── */

/* Nøgletal som fliser. Grid frem for flex, så tallene står på linje
   i kolonner uanset hvor lange etiketterne er. */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin: 4px 0 8px;
}
/* Små links under nøgletallene, fx "Se indmeldte" / "Se udmeldte". */
.stat-tile {
    border: 1px solid #dfe6ec;
    border-radius: 6px;
    background: #f7fafc;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat-tile-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1b3a57;
    line-height: 1.1;
}
.stat-tile-label { font-size: 0.8rem; color: #5b6b7a; }
/* Etiketten som link, fx "Indmeldt i perioden" der åbner listen over medlemmerne. */
.stat-tile-label.btn-link { color: #1565c0; padding: 0; text-align: left; font-size: 0.8rem; }
.stat-tile-note { font-size: 0.72rem; color: #8a97a3; font-style: italic; }

/* Forklarings-popup paa noegletals-felterne.

   Egen tooltip frem for title-attributten: browserens egen har ~1 sekunds
   forsinkelse, kan ikke ombrydes paent, og teksterne her er hele saetninger.

   Feltet faar position:relative som anker, og .stat-tiles maa derfor ikke
   klippe — deraf overflow:visible. pointer-events:none paa selve boblen, saa
   den ikke kan komme til at ligge i vejen for et klik paa feltet nedenunder. */
.stat-tiles { overflow: visible; }
.stat-tile { position: relative; }
.stat-tile-help {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: 320px;
    padding: 8px 10px;
    background: #263238;
    color: #fff;
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.35;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s;
    pointer-events: none;
}
/* Pilen ned mod feltet. */
.stat-tile-help::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 16px;
    border: 5px solid transparent;
    border-top-color: #263238;
}
.stat-tile:hover .stat-tile-help,
.stat-tile:focus-within .stat-tile-help {
    opacity: 1;
    visibility: visible;
}
/* Sidste felt faar boblen hoejrestillet, saa den ikke skubber siden ud i
   vandret scroll. Der er BEVIDST ingen nth-child-regel her: .stat-tiles er et
   auto-fill-grid, saa antallet af kolonner afhaenger af skaermbredden, og en
   fast "hver 3." ville vende boblen paa felter midt i raekken paa en bred
   skaerm. Kun det sidste felt er garanteret yderst til hoejre. */
.stat-tile:last-child .stat-tile-help {
    left: auto;
    right: 0;
}
.stat-tile:last-child .stat-tile-help::after {
    left: auto;
    right: 16px;
}

/* Sektions-headeren spænder over sine afdelinger, så den skal skille sig
   ud fra afdelingsrækken nedenunder. */
.stat-table thead tr:first-child th { background: #eef4f9; font-size: 0.85rem; }
.stat-table td, .stat-table th { white-space: nowrap; }

/* Statistiktabeller med få kolonner: så smalle som indholdet tillader, men aldrig bredere
   end siden — flere afdelinger gør tabellen bredere, og bliver den for bred, scroller den. */
.stat-fit { display: inline-block; max-width: 100%; vertical-align: top; }
.stat-fit > .data-table { width: auto; }
.stat-fit > .data-table th,
.stat-fit > .data-table td { padding-left: 12px; padding-right: 12px; }
.stat-fit > .data-table td + td,
.stat-fit > .data-table th + th { min-width: 70px; }

/* Graferne er inline SVG uden bibliotek — to søjlediagrammer retfærdiggør
   ikke en ekstern afhængighed, og inline SVG følger med i print-vinduet
   uden at skulle re-initialiseres af JavaScript. */
.stat-chart {
    overflow-x: auto;
    padding: 4px 0;
}
.stat-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #555;
    margin-top: 4px;
}
.stat-legend i {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: -1px;
}

/* Heatmap over ankomster: faste, smalle kolonner så ugen kan læses som et gitter.
   Farven sættes inline pr. celle (alpha efter værdien). */
.stat-heatmap { width: auto; }
.stat-heatmap th, .stat-heatmap td {
    text-align: center;
    min-width: 30px;
    font-size: 0.8rem;
    white-space: nowrap;
}
.stat-heatmap tbody td { border: 1px solid #fff; }
.stat-heatmap .stat-heatmap-total { font-weight: 600; color: #1b3a57; background: #f2f5f8; }

/* Vandrette bjælker (aldersfordeling, fremmødehyppighed, belægning, klubber):
   tre-kolonne-grid så etiketter og tal står på linje. */
.stat-hbars {
    display: grid;
    grid-template-columns: max-content minmax(120px, 1fr) max-content;
    gap: 4px 10px;
    align-items: center;
    max-width: 720px;
    margin: 6px 0;
}
.stat-hbars-wide { max-width: 960px; }
.stat-hbar-label { font-size: 0.85rem; color: #333; }
.stat-hbar-sub { display: block; font-size: 0.72rem; }
.stat-hbar-track { background: #eef2f6; border-radius: 3px; height: 14px; overflow: hidden; }
.stat-hbar { background: #2563a8; height: 100%; border-radius: 3px; }
.stat-hbar-full { background: #c62828; }
.stat-hbar-value { font-size: 0.85rem; white-space: nowrap; }

/* Top lister: fire små tabeller i et gitter, én kolonne på smal skærm. */
.stat-top-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 0 15px;
}
.stat-top-grid .config-section { min-width: 0; }
.stat-top-note { margin: -6px 0 6px; font-size: 0.8rem; }
@media (max-width: 480px) {
    .stat-top-grid { grid-template-columns: 1fr; }
    .stat-hbars { grid-template-columns: max-content minmax(60px, 1fr) max-content; }
}

.stat-group-row td { background: #f7fafc; }
.stat-negative { color: #c62828; }
.stat-positive { color: #2e7d32; }
.stat-subheading { margin: 14px 0 4px; font-size: 0.95rem; }
.stat-count-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
    max-width: 720px;
}
.stat-comp-header { flex-wrap: wrap; gap: 4px 12px; }

@media print {
    /* Fliserne skal ikke brække midt over en sideskift-grænse. */
    .stat-tile, .stat-chart, .stat-hbars { break-inside: avoid; }
    /* Heatmap og bjælker er farvede baggrunde — browseren dropper dem ellers på papir. */
    .stat-heatmap td, .stat-hbar, .stat-hbar-track {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Forklaringerne er en hover-hjælp — de hører ikke hjemme på papir. */
    .stat-tile-help { display: none; }
}