/* SkytteAdmin-specifikke overrides oven på admin-vestereng.css.
   Loades sidst i App.razor. Brug til ting hvor Vestereng's default ikke
   passer SkytteAdmin's behov — fx fuld bredde i stedet for max-width: 1200px. */

/* Længere status-toast (fx "Link kopieret ...") — base er fadeOut 3s; her ~5s
   så beskeden står ~2 sek. længere før den fader ud. */
.status-message.status-long {
    animation-duration: 5s;
}

/* Generisk instant-hover-tooltip på et vilkårligt element (samme look som .info-icon's
   tooltip, 0ms delay). Bruges fx på "x af y"-prøveskydningstallet til at vise datoerne.
   Elementet skal IKKE ligge i en overflow:auto-container, ellers klippes tooltippen. */
.hover-tip {
    position: relative;
    cursor: help;
}
.hover-tip[data-tooltip]:hover::after,
.hover-tip[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: pre-line;
    width: max-content;
    max-width: 280px;
    z-index: 1000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.hover-tip[data-tooltip]:hover::before,
.hover-tip[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;
}

/* Flydende variant til elementer i en scroll-container (fx arrangementets deltagerliste),
   hvor .hover-tip ville blive klippet. Selve boblen oprettes af ui-helpers.js med
   position:fixed på body-niveau; samme look som .hover-tip. */
.hover-tip-float {
    cursor: help;
}
.floating-tip {
    position: fixed;
    background: #2e3d4d;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-line;
    width: max-content;
    max-width: 280px;
    z-index: 10000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.floating-tip-arrow {
    position: fixed;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #2e3d4d;
    z-index: 10000;
    pointer-events: none;
}
.floating-tip-arrow.below {
    border-top-color: transparent;
    border-bottom-color: #2e3d4d;
}

/* Fuld bredde overalt: admin bruger hele browser-vinduet, ikke kun 1200px.
   Padding 16px hele vejen rundt saa luften til toppen og til siderne matcher
   samme 16px gap der bruges mellem sektioner. */
.admin-content,
.admin-content-wide {
    max-width: none;
    padding: 16px;
}

/* Header-bjælken og fane-rækken skal flugte med browserens kanter (Vestereng-look).
   SkytteAdmin's .admin-screen havde 15px padding hele vejen rundt — fjernes
   her saa de mørke + lyse vandrette baand fylder fuld bredde. Indvendig padding
   paa .admin-header og .admin-tabs (14px 24px / 0 24px) holder indholdet væk
   fra kanterne. Indhold under fanerne får et padding-wrapper paa admin-content. */
/* Match selektoren i responsive.css (.normal-container .admin-screen) saa vi
   vinder paa specificitet og load-order. !important fordi force-desktop og
   force-mobile-overrides bruger !important og vil ellers vinde. */
.normal-container .admin-screen,
.admin-screen {
    padding: 0 !important;
    /* Vestereng's body-bg #f4f6f9 (lidt blålig) i stedet for SkytteAdmin's #f0f0f0
       (rent grå). Scoped til admin-screen saa kiosk-mode beholder sin egen baggrund. */
    background: #f4f6f9;
    /* Admin har minimum 1100px bredde. Smallere browser-vinduer scroller
       horisontalt — vi forsoeger ikke at stacke om eller skjule indhold. */
    min-width: 1100px !important;
    /* @media (max-width:1450px) saetter height:auto + overflow:visible —
       overrider saa admin-screen fylder fuld viewport-hoejde uanset bredde. */
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* @media saetter '.normal-container .admin-content { height:auto !important;
   overflow:visible !important }' der gjorde at admin-content ikke fyldte
   resten af viewporten paa smalle skaerme. Override saa kolonnerne kan
   fylde hele tilraadige hoejde. */
.normal-container .admin-content,
.admin-content {
    flex: 1 1 auto !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
}

/* Body skal kunne scrolle horisontalt naar viewport er smallere end admin-screen's
   min-width. responsive.css's @media (max-width:1450px) saetter html/body
   overflow:auto !important + height:auto !important — det betyder body shrinker
   til content-hoejde og admin-screen's 'height:100%' har ingen reference.
   Override: behold fuld viewport-hoejde og scroll kun horisontalt paa body.
   Ingen min-width paa html/body — saa login-siden centreres pænt paa mobil
   (login-fladen er ikke wrappet i admin-screen). */
html, body {
    height: 100vh !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
/* normal-container holder enten admin-screen ELLER login/member-screen.
   Ingen min-width her — den ligger paa admin-screen, hvor den horisontale
   scroll faktisk skal aktiveres. */
.normal-container {
    height: 100vh !important;
    overflow: hidden !important;
}

/* Den vandrette scroll virkede ikke under admin-screen's min-width (1100px):
   normal-container's overflow:hidden + blok-bredde (= viewport) klippede
   admin-screen af, saa body aldrig fik noget at scrolle. Naar viewporten er
   smallere end 1100px laaser vi normal-container til praecis 1100px og slukker
   klipningen — layoutet holder op med at presses sammen ved 1100px, og body's
   overflow-x:auto giver vandret scroll til resten af kolonnerne/fanerne.
   VIGTIGT: fast 1100px (IKKE max-content — det ville vokse til indholdets
   intrinsiske bredde, fx brede no-wrap-tabeller paa 2000px+). :has() scoper
   det til admin; login + member-screen (begge fluide/responsive) rammes ikke.
   Media-query'en holder desktop (>=1100px) helt urørt. */
@media (max-width: 1100px) {
    .normal-container:has(.admin-screen) {
        width: 1100px !important;
        overflow: visible !important;
    }
}

/* Slukket: alle responsive admin-omarrangeringer fra responsive.css's
   @media (max-width:1100px). Vi vil ALDRIG flade kolonnerne — kun scroller
   horisontalt. Listen indeholder de overrides der ellers forvandlede admin
   til mobile-stacked-layout. Bemaerk: kiosk-mode + login + member-screen
   rules paa member-screen er IKKE paavirket — de bruger andre containers. */
.normal-container .member-detail-columns,
.normal-container .member-detail-left,
.normal-container .member-detail-right,
.normal-container .member-skv-section,
.normal-container .weapon-list-panel {
    height: auto;
    overflow: visible;
    max-height: none;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}
.normal-container .member-detail-columns {
    flex-direction: row !important;
}
.normal-container .admin-header {
    flex-direction: row !important;
    align-items: center !important;
}
.normal-container .admin-controls {
    flex-wrap: nowrap;
    width: auto;
}

/* Tilbage-knap (mobile-back-btn) vises i smalle viewports. Den havde
   text-align:center fra et eller andet sted — flyttet helt til venstre +
   stoerre tekst saa den fungerer som klar tilbage-affordance paa tablet/phone. */
.mobile-back-btn {
    align-self: flex-start !important;
    text-align: left !important;
    font-size: 18px !important;
    padding: 6px 0 !important;
    margin: 0 0 8px 0 !important;
}

/* @media (max-width:1450px) capper en stribe scroll-paneler til faste
   max-heights (190px, 250px, 280px, 300px). Det giver mening i mobil-
   stacked-layout men ikke naar vi bare scroller horisontalt. Fjern caps. */
.normal-container .member-list-scroll,
.normal-container .log-viewer,
.normal-container .member-skv-section {
    max-height: none !important;
}

/* Aktivitetslog beholder en hoejde-cap (~10 raekker) med intern scroll, saa
   medlems-/proeveskytte-siden ikke vokser i det uendelige. Sticky header holder
   kolonne-overskrifterne synlige under scroll. (<=1450px bruger responsive.css'
   egen 250px-cap — begge er en cap, saa siden scroller aldrig pga. loggen.) */
.normal-container .member-activity-list {
    max-height: 360px;
    overflow-y: auto;
}
.normal-container .member-activity-list .history-header {
    position: sticky;
    top: 0;
    z-index: 1;
    /* Samme udseende som .data-table th (admin-vestereng.css). base.css'
       .history-header saetter baggrund/kant med !important. */
    background: #f7f9fb !important;
    border-bottom: 1px solid #dfe4ea !important;
    font-size: 13px;
}
/* Ellers arver "Registreret af" .history-by's graa, mindre tekst, og <strong>
   goer de andre overskrifter fede og sorte. */
.member-activity-list .history-header > span {
    color: #555;
    font-size: inherit;
    font-weight: 600;
}
.member-activity-list .history-header strong {
    font-weight: inherit;
}

/* kiosk.css har '.normal-container .admin-header { padding: 8px 0 }' der vinder
   over Vestereng's '.admin-header { padding: 14px 24px }'. Match specificiteten
   saa header faar Vestereng's hoejde + indvendige padding (24px luft i venstre). */
.normal-container .admin-header {
    padding: 14px 24px;
}

/* Brugernavn skal være hvidt paa moerk header-baggrund. */
.admin-user-name {
    color: #fff;
}

/* Header + tabs + evt. advarselsbjælker sidder tæt — ingen luft imellem.
   admin.css's '.admin-header { margin-bottom: 10px }' og '.admin-tabs
   { margin-bottom: 10px }' skubber dem væk fra hinanden — slukket her. */
.admin-header,
.admin-tabs {
    margin-bottom: 0;
}

/* admin.css gjorde .admin-content til en flex-container (display:flex, gap:15px)
   pga. MembersTab's gamle sidebar-master-detail-layout. Reset til flex-column
   med 16px gap saa direkte sektion-børn stacker med samme afstand som
   alle andre gaps i designet. MembersTab har sin egen .members-master-detail
   flex-row wrapper indeni, og master-detail tabs bruger .content-row. */
.admin-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* MembersTab's master-detail-layout — sidebar + detail-panel side om side.
   Erstatter .admin-content's flex som vi har slukket ovenfor. flex:1 i stedet
   for height:100% saa den fylder admin-content's tilraadige hoejde (admin-content
   er nu flex-column med medsendt height fra admin-screen's 100vh). */
.members-master-detail {
    display: flex;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

/* === Ensartet 16px gap baade vandret og lodret === */

/* Medlems-detalje to-kolonne match 16px. */
.member-detail-columns {
    gap: 16px;
}

/* Hver detalje-kolonne stacker sine sektioner med samme 16px gap saa der
   ikke er behov for inline margin-top paa hver enkelt section. */
.member-detail-left,
.member-detail-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tre lige brede kolonner paa medlemsoversigten. member-list-panel er
   flex: 0 0 33% og rfid-action-panel flex: 2 → 33% / 67% split.
   member-detail-left havde tidligere fixed 430-570px breakdown, hvilket
   gav kol 2 disproportionalt mere plads end kol 3. Gør den i stedet
   flex: 1 1 0 saa den deler rfid-action-panel's plads ligeligt med
   member-detail-right → ~33.5% hver paa fuld skaermbredde. */
.member-detail-left,
.force-desktop .member-detail-left {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
}
.member-detail-right {
    flex: 1 1 0;
    min-width: 0;
}

/* Info-sektioner paa medlemsoversigten skal have hvidt panel-look som
   resten af config-section'erne. Nulstil ogsaa gamle margins der ellers
   lægger sig oveni parent-kolonnens gap. */
.active-loans-panel,
.member-profile-row,
.member-activity-section {
    background: #fff;
    border: 1px solid #d4dae1;
    border-radius: 8px;
    padding: 20px;
    margin-top: 0;
    margin-bottom: 0;
}

/* rfid-action-panel har padding:10px 20px fra admin.css og force-desktop
   forcer 'padding: 16px !important'. Den padding skubbede dels kolonne 2
   ind fra venstre (oveni gap til kolonne 1), dels gav top-padding der
   maatte saa col2/3's første sektion staa lavere end col1's Medlemmer-kort.
   Nulstil padding helt — gap mellem søjler og rækker styres af
   members-master-detail / member-detail-columns. */
.rfid-action-panel,
.force-desktop .rfid-action-panel,
.force-mobile .rfid-action-panel {
    padding: 0 !important;
}

/* force-desktop forcer member-detail-columns gap til 20px — override til 16px
   saa det matcher de andre 16px gaps i designet. */
.force-desktop .member-detail-columns {
    gap: 16px !important;
}

/* SkytteAdmin's admin.css har '.form-grid > label { text-align: right }' der
   gav højre-justerede labels — uvant i Vestereng-stilen hvor labels er
   venstre-justeret. Nulstil. */
.form-grid > label {
    text-align: left;
}

/* Rød badge-variant — spec'en nævner at den skal tilfojes per projekt.
   Bruges paa fx 'Defekt'-markering paa vaaben. */
.badge-red { background: #ffebee; color: #b71c1c; }

/* Mindre standard-knap-stoerrelse end Vestereng's default (8px 14px / 14px).
   Lidt mere proportionel til vores tabel- og section-tæthed. */
.btn {
    padding: 5px 12px;
    font-size: 13px;
}

/* Orange btn-variant — bruges til 'aktion paakraevet'-knapper, fx kasse-
   åbningens kontroller-knapper hvor en mangler-handling skal udfoeres. */
.btn-warning {
    background: #f57c00;
    color: #fff;
    border-color: #f57c00;
}
.btn-warning:hover {
    background: #e65100;
    border-color: #e65100;
}

/* Kompakt knap-variant til brug i tabel-rækker — passer ind i den tætte
   data-table rækkehøjde uden at strække rækken. Brug som .btn .btn-sm
   sammen med farvevariant (btn-primary, btn-danger osv.). */
.btn-sm {
    padding: 2px 8px;
    font-size: 13px;
    border-radius: 4px;
    line-height: 1.4;
}

/* <label class='btn ...'> bruges som file-input-trigger — den native input
   er skjult og labelen trigger den. Justeringer saa label faar samme look
   som button: inline-block, ingen text-decoration, samme font.
   Disabled-state via .disabled-modifier-klassen. */
label.btn {
    display: inline-block;
    text-align: center;
    line-height: 1.2;
    user-select: none;
}
label.btn.disabled,
label.btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* member-list-scroll har grå border (2px) + padding (5px) + grå baggrund fra
   admin.css. Det skubber listen ind fra panelets kant og giver et synligt
   gap+ramme før kolonne 2 starter. Fjernes saa listen ligger flush med
   member-list-panel's kant — kun gap mellem kolonnerne er synlig. */
.normal-container .member-list-scroll {
    border: 0;
    padding: 0;
    background: transparent;
}

/* member-list-section er en config-section der wraps hele venstre kolonne
   paa medlemsoversigten. Skal fylde hele kolonnens hoejde og lade listen
   scrolle nederst.
   overflow: visible (ikke hidden) saa hvis knapper + filtre fylder mere
   end panelets hoejde paa smalle viewports, kan det hele scrolles via
   admin-content's vertikale scroll. */
.member-list-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.member-list-section > .member-list-scroll {
    flex: 1 1 auto;
    /* min-height saa listen aldrig presses helt vaek af knapper + filtre
       der overfylder panelets hoejde paa smalle viewports. */
    min-height: 240px;
    overflow-y: auto;
    /* Lad listen flow'e hele vejen ud til section's padding — ingen ekstra
       indrykning ud over selve listens items. */
    margin: 0 -20px -20px;
    padding: 0 20px 20px;
}

/* Multi-kolonne layout for admin-faner: sektioner kan grupperes i kolonner
   uden at de strækker hinanden i højden. */
.content-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;   /* IKKE stretch — hver kolonne fylder sin egen højde */
    flex-wrap: wrap;
}

.content-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Vestereng's .admin-tab er ren tekst-med-underline — SkytteAdmin har desuden
   et lille SVG- eller emoji-ikon ved siden af teksten. Disse skal flow'e
   inline med teksten uden at smadre layoutet. */
.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-tab .tab-icon-img {
    height: 18px;
    width: 18px;
    object-fit: contain;
}

.admin-tab .tab-icon {
    font-size: 16px;
    line-height: 1;
}

/* Udløbne SKV-rækker (.data-table) springer i øjnene: kursiv + svag rød baggrund.
   (Den gamle .detail-table-regel ramte ikke vores nye .data-table SKV-tabel.) */
.data-table tr.skv-expired td { font-style: italic; }
.data-table tr.skv-expired { background: #fdecea; }
.data-table tr.skv-expired:hover { background: #fbddd9; }

/* Tydelig rød "Udløbet"-pill. */
.expired-badge {
    display: inline-block;
    background: #c62828;
    color: #fff;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: bold;
    font-style: normal;
    margin-left: 6px;
}

/* Venstre-forankret info-tooltip — bruges når info-ikonet sidder tæt på venstre
   kant (ellers cuttes den centrerede tooltip i venstre side). Boksen vokser mod
   højre i stedet for at centrere, og pilen flyttes hen over ikonet. */
.info-icon.info-icon-left[data-tooltip]:hover::after,
.info-icon.info-icon-left[data-tooltip]:focus::after {
    left: 0;
    transform: none;
}
.info-icon.info-icon-left[data-tooltip]:hover::before,
.info-icon.info-icon-left[data-tooltip]:focus::before {
    left: 7px;
    transform: none;
}

/* Nedad-foldet info-tooltip — bruges når ikonet sidder øverst i en dialog med
   overflow-scroll, hvor den normale tooltip (ovenfor ikonet) klippes/giver scrollbar.
   Boksen og pilen flyttes ned under ikonet, og pilen vendes om. */
.info-icon.info-icon-below[data-tooltip]:hover::after,
.info-icon.info-icon-below[data-tooltip]:focus::after {
    top: calc(100% + 8px);
    bottom: auto;
}
.info-icon.info-icon-below[data-tooltip]:hover::before,
.info-icon.info-icon-below[data-tooltip]:focus::before {
    top: calc(100% + 3px);
    bottom: auto;
    border-top-color: transparent;
    border-bottom-color: #2e3d4d;
}

/* Højre-forankret info-tooltip — bruges når ikonet sidder tæt på højre kant.
   Boksen vokser mod venstre, og pilen flyttes hen over ikonet. */
.info-icon.info-icon-right[data-tooltip]:hover::after,
.info-icon.info-icon-right[data-tooltip]:focus::after {
    left: auto;
    right: 0;
    transform: none;
}
.info-icon.info-icon-right[data-tooltip]:hover::before,
.info-icon.info-icon-right[data-tooltip]:focus::before {
    left: auto;
    right: 7px;
    transform: none;
}

/* Mindre filter-pills — de fyldte for meget naar der er mange. Nu lidt mindre
   font + markant mindre padding (men stadig en anelse stoerre end raekkernes
   badges paa ~0.72rem). Gaelder alle .filter-btn inkl. farvevarianterne nedenfor. */
.filter-btn {
    padding: 2px 9px;
    font-size: 12px;
}

/* === Farvede filter-pills ===
   Basen (.filter-btn) er blå. Disse varianter matcher de tilsvarende række-pills
   i medlemstabellen: en "fesen" lys nuance når filteret IKKE er valgt, og den
   fulde/mørkere pill-farve når det ER valgt. Loades sidst (admin-overrides), så
   de vinder over admin-vestereng's blå .filter-btn / .filter-btn.active. */

/* Grøn — "Prøveskytter" (matcher .intro-badge #6bba5e). */
.filter-btn.filter-btn-green {
    background: #e4f3e0;
    border-color: #bfe0b5;
    color: #3f8a34;
}
.filter-btn.filter-btn-green:hover { background: #d3ebcd; }
.filter-btn.filter-btn-green.active {
    background: #4f9d43;
    border-color: #4f9d43;
    color: #fff;
}
.filter-btn.filter-btn-green.active:hover { background: #438a39; border-color: #438a39; }

/* Teal — holdnavn-filtre (matcher .team-badge #0d8a8a). */
.filter-btn.filter-btn-teal {
    background: #ddf0f0;
    border-color: #a6d9d9;
    color: #0b7676;
}
.filter-btn.filter-btn-teal:hover { background: #c9e8e8; }
.filter-btn.filter-btn-teal.active {
    background: #0d8a8a;
    border-color: #0d8a8a;
    color: #fff;
}
.filter-btn.filter-btn-teal.active:hover { background: #0a7373; border-color: #0a7373; }

/* Gul/orange — "Har udlån" (matcher .loan-active-badge #d4a017). */
.filter-btn.filter-btn-gold {
    background: #faf1d6;
    border-color: #ecd58f;
    color: #8a6a00;
}
.filter-btn.filter-btn-gold:hover { background: #f5e8bf; }
.filter-btn.filter-btn-gold.active {
    background: #d4a017;
    border-color: #d4a017;
    color: #fff;
}
.filter-btn.filter-btn-gold.active:hover { background: #ba8c10; border-color: #ba8c10; }

/* Grøn multi-select-dropdown til "Prøveskytter" (holdnavne + Intet hold) — matcher
   .filter-btn-green, saa filteret har samme farve som den gamle Prøveskytter-pill. */
.filter-dropdown-btn.filter-dropdown-btn-green {
    background: #e4f3e0;
    border-color: #bfe0b5;
    color: #3f8a34;
    font-weight: 600;
}
.filter-dropdown-btn.filter-dropdown-btn-green:hover { background: #d3ebcd; border-color: #4f9d43; }
.filter-dropdown-btn.filter-dropdown-btn-green.has-selection {
    background: #4f9d43;
    border-color: #4f9d43;
    color: #fff;
}

/* Rødlig orange — "Kassevagt" (matcher .cashier-badge #d35400). */
.filter-btn.filter-btn-cashier {
    background: #fbe6da;
    border-color: #f0c2a3;
    color: #a8420a;
}
.filter-btn.filter-btn-cashier:hover { background: #f7d8c5; }
.filter-btn.filter-btn-cashier.active {
    background: #d35400;
    border-color: #d35400;
    color: #fff;
}
.filter-btn.filter-btn-cashier.active:hover { background: #b8470a; border-color: #b8470a; }

/* Vestereng-stilen sætter .form-grid til en fast label-kolonne på 120px. Det er for
   smalt til lange labels som "Forventet antal personer:" — de har white-space:nowrap
   og bliver derfor klippet i stedet for at ombryde. Denne variant giver labels plads;
   brug den på ALLE form-grids i samme dialog, så kolonnerne flugter. */
.form-grid-wider {
    grid-template-columns: 200px 1fr;
}

/* På smalle skærme er der ikke plads til en 200px label-kolonne ved siden af
   inputtet. Stabl i stedet label over felt — så er der fuld bredde til begge,
   og labels bliver hverken klippet eller klemt. */
@media (max-width: 560px) {
    .form-grid-wider {
        grid-template-columns: 1fr;
    }
    .form-grid-wider > label,
    .form-grid-wider > .form-input {
        grid-column: 1;
    }
    .form-grid-wider > label {
        white-space: normal;
    }
}

/* Et <a class="btn"> skal se ud som en <button class="btn"> — fx "Download faktura",
   der er et rigtigt link for at kunne aabnes i en ny fane. Browserens standard-
   stylesheet understreger ankre, og der findes ingen author-regel der slaar det fra,
   saa uden dette staar knappen understreget. */
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:visited {
    text-decoration: none;
}

/* === Maanedsbladring paa statistikken ===
   De to pile og maanedsnavnet hoerer sammen som ét betjeningselement, saa de
   holdes taet og faar en let ramme der adskiller dem fra periode-pillerne. */
.stat-month-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid #d6dde4;
    border-radius: 999px;
    background: #f4f7fa;
}

/* Maanedsnavnet er svaret paa "hvilken periode ser jeg?" og skal kunne laeses
   paa afstand — derfor lidt kraftigere end pillerne omkring det. Fast bredde saa
   pilene ikke hopper sidelaens naar navnets laengde skifter (maj vs. september). */
.stat-month-name {
    min-width: 8.5em;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #24405c;
}

.filter-btn:disabled {
    opacity: .4;
    cursor: default;
}

.filter-btn:disabled:hover {
    background: #e8f2fb;
}

/* .form-grid > .form-input er en flex-række (admin.css). Elementer der skal stå UNDER hinanden
   i samme felt (fx editor + knap, eller input + hint) lægges i en .form-input-stack. */
/* Uden min-width:0 kan et bredt indhold (fx en select med lange options) presse 1fr-kolonnen
   ud over dialogens kant. */
.form-grid > .form-input {
    min-width: 0;
}
.form-grid > .form-input.form-input-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.richtext {
    width: 100%;
    min-width: 0;
}

/* Vedhæftet fil i fakturaens mail-dialog: papirclip + klikbart filnavn, så det er tydeligt at
   der ligger en fil med, og man kan åbne den. */
.attachment-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.attachment-label {
    font-weight: 500;
}
.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid #d4dae1;
    border-radius: 14px;
    background: #f5f7fa;
    color: #1d35c4;
    text-decoration: none;
    font-size: 14px;
}
.attachment-chip:hover {
    background: #eef1fd;
    border-color: #1d35c4;
    text-decoration: underline;
}
.attachment-version {
    color: #5b6272;
    font-size: 12px;
}

/* GroupedSelect (Components/Shared/GroupedSelect.razor): dropdown med gruppe-overskrifter og
   kolonner der flugter. Popup'en er position:fixed og skjult indtil grouped-select.js har
   placeret den. Rækkerne bruger subgrid, så kolonnerne er lige brede på tværs af rækker. */
.gsel { position: relative; display: inline-block; min-width: 0; max-width: 100%; }
.gsel-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 6px 10px; font: inherit; font-size: 0.9rem; text-align: left;
    background: #fff; border: 1px solid #bbb; border-radius: 4px; cursor: pointer;
}
.gsel-trigger:hover:not(:disabled) { border-color: #888; }
.gsel-trigger:focus-visible { outline: 2px solid #1d35c4; outline-offset: 1px; }
.gsel-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.gsel-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsel-placeholder { color: #777; }
.gsel-caret { color: #555; flex: 0 0 auto; }
.gsel-backdrop { position: fixed; inset: 0; z-index: 1999; }
.gsel-popup {
    position: fixed; z-index: 2000; visibility: hidden; overflow-y: auto;
    display: grid; grid-template-columns: var(--gsel-cols, 1fr);
    padding: 4px; background: #fff; border: 1px solid #bbb; border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); font-size: 0.9rem;
}
.gsel-group {
    grid-column: 1 / -1; margin-top: 6px; padding: 3px 8px 2px;
    font-weight: 700; color: #1d35c4; border-bottom: 1px solid #e1e5ec;
}
.gsel-group:first-child { margin-top: 0; }
.gsel-gap { grid-column: 1 / -1; height: 6px; }
.gsel-row {
    grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
    column-gap: 20px; padding: 5px 8px; border-radius: 4px; cursor: pointer;
}
.gsel-row.gsel-indent { padding-left: 20px; }
.gsel-row:hover, .gsel-row.gsel-active { background: #eef1fd; }
.gsel-row.gsel-selected { font-weight: 600; background: #e3e8fb; }
.gsel-cell { white-space: nowrap; }
.gsel-cell:only-child { grid-column: 1 / -1; }
.gsel-empty { grid-column: 1 / -1; padding: 8px; color: #777; }
@supports not (grid-template-columns: subgrid) {
    .gsel-row { grid-template-columns: 11rem 9rem 1fr; }
}
@media (max-width: 600px) {
    .gsel-popup { display: block; }
    .gsel-row { display: block; }
    .gsel-cell { display: inline; white-space: normal; }
    .gsel-cell + .gsel-cell::before { content: " · "; }
    .gsel-row, .gsel-group { padding-top: 9px; padding-bottom: 9px; }
}
.form-input > .gsel { flex: 1 1 auto; }

/* GroupedSelect: knappen er altid så bred som den bredeste valgmulighed (de usynlige
   .gsel-sizer-tekster deler celle med den synlige), og kolonnerne adskilles af en tynd streg
   der løber igennem alle rækker. */
.gsel-face { display: grid; flex: 1 1 auto; min-width: 0; }
.gsel-face > * { grid-area: 1 / 1; }
.gsel-sizer { visibility: hidden; height: 0; overflow: hidden; white-space: nowrap; }
.gsel-row { padding-top: 0; padding-bottom: 0; }
.gsel-cell { padding: 2px 0; }
.gsel-cell + .gsel-cell { border-left: 1px solid #d4dae1; padding-left: 20px; }
@media (max-width: 600px) {
    .gsel-cell { padding: 0; }
    .gsel-cell + .gsel-cell { border-left: 0; padding-left: 0; }
    .gsel-row { padding-top: 9px; padding-bottom: 9px; }
}
/* Tynd streg mellem afdelinger inden for en sektion. */
.gsel-row.gsel-dept-start { border-top: 1px solid #e1e5ec; border-top-left-radius: 0; border-top-right-radius: 0; }

.error-page {
    display: flex;
    justify-content: center;
    padding: 60px 16px;
}

.error-page-box {
    background: #fff;
    border: 2px solid #999;
    border-radius: 6px;
    padding: 24px 32px;
    text-align: center;
    max-width: 420px;
}

.error-page-box h2 {
    color: #1565C0;
    margin-top: 0;
}

/* Konfiguration → Rettigheder: menu til venstre, indehavere til højre. */
.perm-view-switch { display: flex; gap: 8px; margin-bottom: 12px; }
.perm-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.perm-nav { position: sticky; top: 8px; background: #fff; border: 1px solid #d5d9e2; border-radius: 8px; padding: 6px; }
.perm-nav-group { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #0d47a1;
    background: #e8eef9; border-left: 4px solid #1565C0; border-radius: 4px; padding: 6px 10px; margin: 16px 0 4px; }
.perm-nav-group:first-child { margin-top: 4px; }
.perm-nav-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; border-radius: 6px; padding: 6px 8px 6px 14px; cursor: pointer; font: inherit; color: #222; }
.perm-nav-item:hover { background: #f2f5fa; }
.perm-nav-item.active { background: #e3f2fd; color: #0d47a1; font-weight: 600; box-shadow: inset 3px 0 0 #1565C0; }
.perm-count { min-width: 22px; text-align: center; font-size: 0.75rem; border-radius: 10px; padding: 1px 6px; background: #eceff4; color: #555; }
.perm-nav-item.active .perm-count { background: #1565C0; color: #fff; }
.scope-chip { display: inline-block; background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; border-radius: 12px;
    padding: 1px 10px; margin: 2px 4px 2px 0; font-size: 0.85rem; }
.perm-actions { white-space: nowrap; text-align: right; width: 1%; }
/* Pr. person: bred personliste (navn + rettighedspiller) til venstre, den valgtes rettigheder til højre. */
.perm-layout-persons { grid-template-columns: minmax(360px, 5fr) minmax(0, 6fr); }
/* Tabel: navnet (fed, flugter i venstre kolonne) og rollerne som chips i en kolonne for sig. */
.perm-person-scroll { margin-top: 8px; max-height: 70vh; background: #fff; }
.perm-person-table td { padding: 5px 10px; vertical-align: top; }
.perm-person-table td.perm-person-name { width: 34%; padding-top: 7px; }
.perm-person-table td.perm-person-name .muted { font-size: 13px; }
.perm-person-table tr.row-selected > td { background: #e3f2fd; }
.perm-person-table tr.row-selected > td.perm-person-name { box-shadow: inset 3px 0 0 #1565C0; color: #0d47a1; }
.perm-person-table tr.row-selected .scope-chip { background: #fff; }
@media (max-width: 900px) {
    .perm-layout { grid-template-columns: 1fr; }
    .perm-nav { position: static; }
}

/* Afkrydsningsliste til omfang (PermissionScopePicker): fuld bredde, valgte rækker markeret. */
.scope-picker { width: 100%; max-height: 320px; overflow-y: auto; border: 1px solid #d5d9e2; border-radius: 6px; padding: 4px; background: #fff; box-sizing: border-box; }
.scope-picker-group { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #0d47a1;
    background: #e8eef9; border-left: 3px solid #1565C0; border-radius: 3px; padding: 3px 8px; margin: 8px 0 2px; }
.scope-picker-group:first-child { margin-top: 2px; }
.scope-picker-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 14px; border-radius: 4px; cursor: pointer; font-weight: normal; }
.scope-picker-item:hover { background: #f2f5fa; }
.scope-picker-item.checked { background: #e3f2fd; color: #0d47a1; }
.scope-picker-item input { margin: 0; }