/* =========================================================
   Fritidsportalen – Frederikssund Kommune
   Krav 14.1: farver og skrifter følger kommunens officielle
   designguide (november 2018), afstemt 23-07-2026 – se
   dokumentation/AFSTEMNING-DESIGNGUIDE-OG-FRITIDSPAS.md.
   Primærfarven er guidens "Mørkeblå" Pantone 533C #21314D;
   Georgia og Tahoma er guidens egne web-erstatninger for
   Fedra Serif B og Fedra Sans (afsnit 2.1).
   Alle farver/afstande styres som design-tokens herunder –
   et paletteskifte er én blok.
   ========================================================= */

:root {
    --fp-primaer: #21314D;        /* "Mørkeblå" Pantone 533C – designguidens primære palette */
    --fp-primaer-moerk: #16223a;
    --fp-accent: #4A6E85;         /* "Gråblå" Pantone 5405C – designguidens primære palette */
    --fp-accent-lys: #edf1f7;
    --fp-baggrund: #F2F2F2;       /* "Lys grå" – designguidens primære palette */
    --fp-tekst: #333333;
    --fp-tekst-dim: #5f6a77;
    --fp-kant: #d7dbe2;
    --fp-groen: #0E7F66;          /* "Grøn" Pantone 335C – designguidens sekundære palette */
    --fp-groen-lys: #e2f3e9;
    --fp-roed: #b32121;           /* semantisk fejl-rød (guidens #EC4371 har for lav tekstkontrast, jf. guidens eget tilgængelighedskrav) */
    --fp-roed-lys: #fbe9e9;
    --fp-hvid: #ffffff;
    --fp-radius: 3px;             /* fladt, kantet udtryk som frederikssund.dk */
    --fp-radius-kort: 6px;
    --fp-skygge: 0 1px 3px rgba(22, 34, 58, .12);
    --fp-fokus-ring: 0 0 0 3px rgba(33, 49, 77, .18);
    --fp-serif: Georgia, "Times New Roman", serif; /* designguidens web-erstatning for Fedra Serif B */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Tahoma er designguidens web-erstatning for Fedra Sans */
    font-family: Tahoma, "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    color: var(--fp-tekst);
    background: var(--fp-baggrund);
}

h1 { font-family: var(--fp-serif); font-size: 1.8rem; font-weight: 600; margin: 0 0 .75rem; color: var(--fp-primaer); }
h2 { font-family: var(--fp-serif); font-size: 1.3rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: var(--fp-primaer); }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--fp-primaer); }
h1:focus { outline: none; }

a { color: var(--fp-primaer); }

.fp-dim { color: var(--fp-tekst-dim); }

/* ---------- Offentligt layout ---------- */

.fp-offentlig { display: flex; flex-direction: column; min-height: 100vh; }

.fp-header { background: var(--fp-hvid); border-bottom: 3px solid var(--fp-primaer); }

.fp-header-inner {
    max-width: 1100px; margin: 0 auto; padding: .9rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap;
}

.fp-logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1.2; }
.fp-logo-navn { font-size: 1.3rem; font-weight: 700; color: var(--fp-primaer-moerk); }
.fp-logo-kommune { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-tekst-dim); }

.fp-nav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; row-gap: .25rem; } /* MK 17.2: nav ombrydes på smalle skærme i stedet for at skabe vandret scroll */
.fp-nav a { text-decoration: none; font-weight: 600; color: var(--fp-primaer); }
.fp-nav a:hover { text-decoration: underline; }

/* Hvem er logget ind + log ud. Adskilt fra menupunkterne med en tynd streg,
   så det læses som kontooplysning og ikke som endnu en side. */
.fp-nav-bruger {
    margin-left: .5rem; padding-left: 1.25rem; border-left: 1px solid var(--fp-kant);
    color: var(--fp-tekst-dim); font-size: .9rem; max-width: 16rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-nav-logud { display: inline-flex; }
.fp-nav-logud .fp-btn-link { color: var(--fp-primaer); font-weight: 600; font-size: .95rem; }
.fp-nav-logud .fp-btn-link:hover { text-decoration: underline; background: none; }

@media (max-width: 700px) {
    .fp-nav-bruger { margin-left: 0; padding-left: 0; border-left: none; }
}

.fp-main { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.fp-footer { background: var(--fp-primaer-moerk); color: var(--fp-hvid); margin-top: auto; }
.fp-footer-inner { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem; font-size: .9rem; }

/* ---------- Forside ---------- */

.fp-hero { padding: 2.5rem 0 1.5rem; }
.fp-hero p { max-width: 42rem; font-size: 1.1rem; color: var(--fp-tekst-dim); }

/* ---------- Forside ---------- */

.fp-forside-hero { padding: 3.5rem 0 2.25rem; }
.fp-forside-hero h1 { font-size: 2.6rem; line-height: 1.15; max-width: 46rem; margin-bottom: 0; }
.fp-forside-hero h1::after {
    content: ""; display: block; width: 56px; height: 4px;
    background: var(--fp-primaer); margin: 1.2rem 0 1.1rem;
}
.fp-forside-hero p { font-size: 1.15rem; line-height: 1.55; margin: 0; }
@media (max-width: 480px) {
    .fp-forside-hero { padding-top: 2rem; }
    .fp-forside-hero h1 { font-size: 2rem; }
}

.fp-forside-kort {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem; align-items: stretch; margin-bottom: 3rem;
}

.fp-flise {
    background: var(--fp-hvid); border-radius: var(--fp-radius);
    border-top: 3px solid var(--fp-primaer); box-shadow: var(--fp-skygge);
    padding: 1.5rem 1.4rem 1.4rem;
    display: flex; flex-direction: column;
}
.fp-flise-ikon {
    width: 46px; height: 46px; border-radius: var(--fp-radius-kort);
    background: var(--fp-accent-lys); color: var(--fp-primaer);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.fp-flise-ikon svg { width: 24px; height: 24px; }
.fp-flise h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.fp-flise p { margin: 0 0 1.25rem; color: var(--fp-tekst-dim); line-height: 1.5; flex: 1 1 auto; }
/* Knapper i kolonne med fuld bredde: alle kanter flugter på tværs af fliserne */
.fp-flise-knapper { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; }
.fp-flise-knapper .fp-btn { text-align: center; }
/* Forsiden: den blå primærknap ligger altid nederst på samme linje i alle fliser,
   så knapperne flugter på tværs, selv når en flise har en ekstra lys knap over */
.fp-forside-kort .fp-flise-knapper .fp-btn { order: 1; }
.fp-forside-kort .fp-flise-knapper .fp-btn-primaer { order: 2; }

/* Hurtiglinks: kompakte ikon-kort til selvbetjeningsnavigation (Min forening) */
.fp-hurtiglinks {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .75rem; margin: 1.25rem 0 2rem;
}
.fp-hurtiglink {
    display: flex; align-items: center; gap: .75rem;
    background: var(--fp-hvid); border: 1px solid var(--fp-kant); border-radius: var(--fp-radius-kort);
    box-shadow: var(--fp-skygge); padding: .8rem .95rem;
    color: var(--fp-primaer); font-weight: 600; text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease;
}
.fp-hurtiglink:hover { background: var(--fp-accent-lys); border-color: var(--fp-accent); }
.fp-hurtiglink:focus-visible { outline: none; box-shadow: var(--fp-fokus-ring); }
.fp-hurtiglink-ikon {
    width: 38px; height: 38px; border-radius: var(--fp-radius-kort); flex-shrink: 0;
    background: var(--fp-accent-lys); color: var(--fp-primaer);
    display: flex; align-items: center; justify-content: center;
}
.fp-hurtiglink-ikon svg { width: 20px; height: 20px; }
.fp-hurtiglink:hover .fp-hurtiglink-ikon { background: var(--fp-hvid); }

/* Blødt sideskift: indholdet toner roligt ind ved hver navigation (se SideSkift.razor) */
@media (prefers-reduced-motion: no-preference) {
    .fp-side-skift { animation: fp-side-ind .22s ease-out; }
    @keyframes fp-side-ind {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: none; }
    }
}

/* Rolig, éngangs indtoning af fliserne ved sideindlæsning */
@media (prefers-reduced-motion: no-preference) {
    .fp-flise { animation: fp-flise-ind .45s ease-out backwards; }
    .fp-flise:nth-child(2) { animation-delay: .07s; }
    .fp-flise:nth-child(3) { animation-delay: .14s; }
    .fp-flise:nth-child(4) { animation-delay: .21s; }
    @keyframes fp-flise-ind {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: none; }
    }
}

/* ---------- Admin layout ---------- */

.fp-admin { display: flex; min-height: 100vh; }

.fp-admin-sidebar {
    width: 240px; flex-shrink: 0; background: var(--fp-primaer-moerk); color: var(--fp-hvid);
    display: flex; flex-direction: column; padding: 1.25rem 0;
}

.fp-admin-logo { text-decoration: none; padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; line-height: 1.2; border-bottom: 1px solid rgba(255,255,255,.15); }
.fp-admin-logo .fp-logo-navn { color: var(--fp-hvid); font-size: 1.15rem; }
.fp-admin-logo .fp-logo-kommune { color: var(--fp-accent); }

.fp-admin-nav { display: flex; flex-direction: column; padding: 1rem 0; flex: 1; }
.fp-admin-nav a {
    color: rgba(255,255,255,.85); text-decoration: none; padding: .6rem 1.25rem; font-weight: 500;
    border-left: 3px solid transparent;
}
.fp-admin-nav a:hover { background: rgba(255,255,255,.08); }
.fp-admin-nav a.active { background: rgba(255,255,255,.12); border-left-color: var(--fp-accent); color: var(--fp-hvid); }

.fp-admin-bruger { padding: 1rem 1.25rem 0; border-top: 1px solid rgba(255,255,255,.15); font-size: .9rem; display: flex; flex-direction: column; gap: .35rem; }

.fp-admin-indhold { flex: 1; padding: 1.75rem 2rem 3rem; min-width: 0; }
.fp-admin-inner { max-width: 1320px; margin: 0 auto; } /* centreret på store skærme */

/* MK 17.2: admin på mobil – kompakt pill-navigation og selvscrollende tabeller */
@media (max-width: 800px) {
    .fp-admin { flex-direction: column; }
    .fp-admin-sidebar { width: 100%; padding: .9rem 0 .6rem; }
    .fp-admin-logo { padding-bottom: .75rem; }
    .fp-admin-nav {
        flex-direction: row; flex-wrap: wrap; gap: .3rem;
        padding: .75rem 1rem;
    }
    .fp-admin-nav a {
        border-left: none; border-radius: 999px;
        padding: .35rem .8rem; font-size: .88rem;
        background: rgba(255, 255, 255, .07);
    }
    .fp-admin-nav a.active { background: rgba(255, 255, 255, .2); }
    .fp-admin-bruger {
        flex-direction: row; align-items: center; justify-content: space-between;
        padding-top: .75rem;
    }
    .fp-admin-indhold { padding: 1.25rem 1rem 2rem; }

    /* Brede tabeller scroller i egen boks i stedet for at skubbe til sidebredden */
    .fp-tabel { display: block; overflow-x: auto; }
}

/* ---------- Komponenter ---------- */

.fp-side-hoved { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

.fp-btn {
    display: inline-block; padding: .5rem 1rem; border-radius: var(--fp-radius);
    border: 1px solid var(--fp-kant); background: var(--fp-hvid); color: var(--fp-primaer);
    font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.fp-btn:hover { background: var(--fp-accent-lys); }
.fp-btn:focus-visible { outline: none; box-shadow: var(--fp-fokus-ring); }
.fp-btn:disabled { opacity: .55; cursor: not-allowed; }

.fp-btn-primaer { background: var(--fp-primaer); border-color: var(--fp-primaer); color: var(--fp-hvid); }
.fp-btn-primaer:hover { background: var(--fp-primaer-moerk); }

.fp-btn-lille { padding: .25rem .6rem; font-size: .85rem; }
.fp-btn-fare { color: var(--fp-roed); }
.fp-btn-fare:hover { background: var(--fp-roed-lys); }
.fp-btn-link { border: none; background: none; padding: 0; color: var(--fp-accent); text-align: left; }

/* Bemærk: INGEN overflow: hidden her. Den ville klippe handlingsmenuens panel
   (.fp-hmenu-panel), som hænger ud over rækken. Hjørneradius er kun 3 px, og
   th/td har ingen egen baggrund, så der er intet at klippe væk. */
.fp-tabel { width: 100%; border-collapse: collapse; background: var(--fp-hvid); border-radius: var(--fp-radius); box-shadow: var(--fp-skygge); }
.fp-tabel th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fp-tekst-dim); padding: .7rem .9rem; border-bottom: 2px solid var(--fp-kant); }
.fp-tabel td { padding: .7rem .9rem; border-bottom: 1px solid var(--fp-kant); vertical-align: top; }
.fp-tabel tbody tr:last-child td { border-bottom: none; }
.fp-tabel tbody tr:hover { background: var(--fp-accent-lys); }
/* Handlingskolonnen må IKKE være flex: en td med display:flex forlader
   tabellens layout og bliver kun så høj som sit indhold, så cellens
   underkant tegnes et stykke over rækkens egen streg. Knapperne flyder
   derfor inline og ombrydes af sig selv i smalle kolonner. */
.fp-tabel-handling { white-space: nowrap; }
.fp-tabel-handling > * { display: inline-block; vertical-align: middle; margin: 0 .4rem .3rem 0; }
.fp-tabel-handling > *:last-child { margin-right: 0; }

.fp-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.fp-badge-groen { background: var(--fp-groen-lys); color: var(--fp-groen); }
.fp-badge-graa { background: #e7ecee; color: var(--fp-tekst-dim); }

.fp-alert { padding: .75rem 1rem; border-radius: var(--fp-radius); margin: 0 0 1rem; }
.fp-alert-fejl { background: var(--fp-roed-lys); color: var(--fp-roed); border: 1px solid #ecc8c8; }
.fp-alert-fejl:focus { outline: 2px solid var(--fp-roed); outline-offset: 2px; }
.fp-alert-ok { background: var(--fp-groen-lys); color: var(--fp-groen); border: 1px solid #c4e5d1; }
.fp-alert-advarsel { background: #fdf3d7; color: #8a6d1a; border: 1px solid #f0e2b6; }

/* Filvælger (FilVaelger.razor) – stylet erstatning for browserens "Choose file" */
.fp-filvaelger { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; flex-wrap: wrap; }
.fp-filvaelger input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fp-filvaelger-knap { display: inline-flex; align-items: center; gap: .45rem; }
.fp-filvaelger-knap svg { width: 1.05rem; height: 1.05rem; }
.fp-filvaelger:hover .fp-filvaelger-knap { background: var(--fp-accent-lys); }
.fp-filvaelger:focus-within .fp-filvaelger-knap { box-shadow: var(--fp-fokus-ring); }
.fp-filvaelger-navn { font-size: .9rem; }

/* Toasts – transiente notifikationer (ToastHost.razor) */
.fp-toast-vaert { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; max-width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
.fp-toast { display: flex; align-items: flex-start; gap: .6rem; background: #fff; border-radius: var(--fp-radius); box-shadow: 0 6px 24px rgba(33, 49, 77, .18); padding: .7rem .8rem; border-left: 4px solid var(--fp-accent); pointer-events: auto; animation: fp-toast-ind .25s ease-out; }
.fp-toast-ud { animation: fp-toast-vaek .22s ease-in forwards; }
.fp-toast-succes { border-left-color: var(--fp-groen); }
.fp-toast-succes .fp-toast-ikon { color: var(--fp-groen); }
.fp-toast-fejl { border-left-color: var(--fp-roed); }
.fp-toast-fejl .fp-toast-ikon { color: var(--fp-roed); }
.fp-toast-advarsel { border-left-color: #c9a227; }
.fp-toast-advarsel .fp-toast-ikon { color: #8a6d1a; }
.fp-toast-info .fp-toast-ikon { color: var(--fp-accent); }
.fp-toast-ikon { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; margin-top: .05rem; }
.fp-toast-ikon svg { width: 100%; height: 100%; }
.fp-toast-tekst { flex: 1 1 auto; font-size: .92rem; line-height: 1.35; }
.fp-toast-luk { flex: 0 0 auto; border: none; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--fp-tekst-dim); padding: 0 .1rem; }
.fp-toast-luk:hover { color: var(--fp-tekst); }
@keyframes fp-toast-ind { from { transform: translateX(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fp-toast-vaek { to { transform: translateX(1.5rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .fp-toast, .fp-toast-ud { animation: none; }
}

.fp-kort { background: var(--fp-hvid); border-radius: var(--fp-radius); box-shadow: var(--fp-skygge); padding: 1.25rem; margin-top: 1rem; }

.fp-kpi-raekke { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.fp-kpi-kort { background: var(--fp-hvid); border-radius: var(--fp-radius); box-shadow: var(--fp-skygge); padding: 1.25rem; display: flex; flex-direction: column; }
.fp-kpi-tal { font-size: 2.2rem; font-weight: 700; color: var(--fp-primaer); }
.fp-kpi-tekst { color: var(--fp-tekst-dim); font-size: .9rem; }

/* ---------- Formularer ---------- */

.fp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem 1.25rem; margin-bottom: 1.1rem; }
.fp-felt { display: flex; flex-direction: column; gap: .3rem; }
/* I formular-grids reserveres plads til 2-linjers labels (bundjusteret), så
   inputfelterne i samme række altid flugter, selv når en label ombrydes eller
   et felt har hjælpetekst */
.fp-form-grid .fp-felt:not(.fp-felt-check) { display: grid; grid-template-rows: minmax(2.6em, auto); align-content: start; gap: .3rem; }
.fp-form-grid .fp-felt:not(.fp-felt-check) > label:first-child { align-self: end; }
.fp-felt-bred { grid-column: 1 / -1; }
.fp-felt-smal { max-width: 160px; }
.fp-felt-check { display: flex; flex-direction: row; gap: 1.5rem; align-items: center; grid-column: 1 / -1; }

.fp-felt label, .fp-login-boks label, .fp-adresse-label { font-weight: 600; font-size: .9rem; color: var(--fp-primaer); }

/* Ét fælles, moderne udtryk for ALLE redigeringsfelter:
   ens højde, kant, fokusring og tilstande på tværs af felttyper.
   input:not([type]) er vigtig: Blazors <InputText> renderer <input> UDEN
   type-attribut og ville ellers falde tilbage til rå browser-styling */
input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], input[type="time"], input[type="tel"],
input[type="url"], textarea, select {
    display: block; width: 100%; min-height: 2.5rem;
    padding: .45rem .75rem; margin: 0;
    border: 1px solid var(--fp-kant); border-radius: var(--fp-radius);
    font-size: .95rem; font-family: inherit; line-height: 1.4;
    color: var(--fp-tekst); background: var(--fp-hvid);
    transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 5rem; resize: vertical; }
select { cursor: pointer; }

input:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) { border-color: var(--fp-accent); }

input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--fp-primaer); box-shadow: var(--fp-fokus-ring);
}

input:disabled, textarea:disabled, select:disabled {
    background: var(--fp-baggrund); color: var(--fp-tekst-dim); cursor: not-allowed;
}

::placeholder { color: #98a1ad; opacity: 1; }

input[type="checkbox"], input[type="radio"] {
    width: 1.05rem; height: 1.05rem; min-height: 0; accent-color: var(--fp-primaer); cursor: pointer;
}

.fp-check { display: flex; align-items: center; gap: .45rem; font-weight: 500; }
.fp-check input { width: auto; }

.fp-filter-raekke { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.fp-filter-raekke input[type="search"] { max-width: 320px; }
.fp-filter-raekke select { max-width: 260px; }

.fp-adskiller { border: none; border-top: 1px solid var(--fp-kant); margin: 2rem 0 1.25rem; }

/* Dato- og tidskolonner: tallene skal stå under hinanden og aldrig ombrydes.
   Datoerne skrives tocifret (20.07.2026), så bredden er den samme uanset dag
   og måned – ellers hopper kolonnen, og rækkerne får forskellig højde. */
.fp-tid-celle { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Fast bredde på ugedagen (man./tirs./tors./lør.), så datoerne står i lod */
.fp-ugedag { display: inline-block; min-width: 3.1rem; }

/* Sorterbar kolonneoverskrift (SorterHoved.razor) */
.fp-sorter { padding: 0 !important; }
.fp-sorter button {
    display: flex; align-items: center; gap: .35rem; width: 100%;
    padding: .7rem .9rem; border: none; background: none; cursor: pointer;
    font: inherit; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
    font-weight: 600; color: var(--fp-tekst-dim); text-align: left;
}
.fp-sorter button:hover { color: var(--fp-primaer); background: var(--fp-accent-lys); }
.fp-sorter button:focus-visible { outline: 2px solid var(--fp-primaer); outline-offset: -2px; }
.fp-sorter-pil { font-size: .85rem; opacity: .35; }
.fp-sorter-aktiv button { color: var(--fp-primaer); }
.fp-sorter-aktiv .fp-sorter-pil { opacity: 1; }

/* Sideskift (SideVaelger.razor) – lange lister deles op, og antallet vises altid.
   Bjælken sidder under tabellen og hører synligt til den. */
.fp-sideskift {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: .75rem; padding: .6rem .9rem;
    background: var(--fp-hvid); border: 1px solid var(--fp-kant);
    border-radius: var(--fp-radius); box-shadow: var(--fp-skygge);
}
/* Er der kun én side, er bjælken ren information og skal ikke fylde som et kontrolelement */
.fp-sideskift-enkelt { background: none; border: none; box-shadow: none; padding: .4rem 0; }

.fp-sideskift-tal { color: var(--fp-tekst-dim); font-size: .9rem; }
.fp-sideskift-tal strong { color: var(--fp-tekst); font-weight: 600; }

.fp-sideskift-knapper { display: flex; align-items: center; flex-wrap: wrap; }

/* Sammenhængende knapgruppe, så det aflæses som ét sidevalg og ikke som løse knapper */
.fp-sideskift-knap {
    min-width: 2.4rem; padding: .35rem .7rem; margin-left: -1px;
    border: 1px solid var(--fp-kant); background: var(--fp-hvid); color: var(--fp-primaer);
    font-size: .9rem; font-weight: 600; line-height: 1.5; cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.fp-sideskift-knap:first-child { margin-left: 0; border-radius: var(--fp-radius) 0 0 var(--fp-radius); }
.fp-sideskift-knap:last-child { border-radius: 0 var(--fp-radius) var(--fp-radius) 0; }
.fp-sideskift-knap:hover:not(:disabled) { background: var(--fp-accent-lys); }
.fp-sideskift-knap:disabled { color: var(--fp-tekst-dim); cursor: default; opacity: .6; }
.fp-sideskift-knap:focus-visible { outline: 2px solid var(--fp-primaer); outline-offset: 1px; z-index: 1; position: relative; }

.fp-sideskift-aktiv,
.fp-sideskift-aktiv:hover { background: var(--fp-primaer); color: var(--fp-hvid); border-color: var(--fp-primaer); }

.fp-sideskift-brud { padding: .35rem .5rem; margin-left: -1px; border: 1px solid var(--fp-kant); background: var(--fp-hvid); color: var(--fp-tekst-dim); font-size: .9rem; line-height: 1.5; }

/* ---------- Kalender ---------- */

.fp-kalender { background: var(--fp-hvid); border-radius: var(--fp-radius); box-shadow: var(--fp-skygge); overflow-x: auto; }

.fp-kalender-hoved { display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 2px solid var(--fp-kant); min-width: 900px; }
.fp-kalender-daghoved { padding: .5rem .4rem; text-align: center; font-weight: 600; font-size: .9rem; display: flex; flex-direction: column; gap: .2rem; align-items: center; }
.fp-kalender-idag { background: var(--fp-accent-lys); }
.fp-kalender-dagnavn { text-transform: capitalize; }

.fp-kalender-krop { display: grid; grid-template-columns: 60px repeat(7, 1fr); min-width: 900px; }
.fp-kalender-tidkol { display: flex; flex-direction: column; }
.fp-kalender-tidcelle { height: 48px; font-size: .75rem; color: var(--fp-tekst-dim); text-align: right; padding-right: .4rem; border-top: 1px solid #eef2f3; }
.fp-kalender-dagkol {
    position: relative; border-left: 1px solid var(--fp-kant);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, #eef2f3 47px, #eef2f3 48px);
}
.fp-kalender-dagkol-lukket {
    background: repeating-linear-gradient(45deg, #f7e8e8 0, #f7e8e8 8px, #fdf3f3 8px, #fdf3f3 16px);
}

.fp-kal-blok {
    position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: .2rem .35rem;
    font-size: .72rem; line-height: 1.25; overflow: hidden; color: var(--fp-hvid);
    display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.fp-kal-enkelt { background: var(--fp-accent); color: var(--fp-hvid); }
.fp-kal-saeson { background: var(--fp-primaer); }
.fp-kal-saerarrangement { background: #c4711c; }
.fp-kal-ansoegt { opacity: .65; border: 2px dashed rgba(255,255,255,.9); }
.fp-kal-blok-tid { font-weight: 700; }
.fp-kal-blok-titel { font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.fp-kal-blok-facilitet { opacity: .85; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.fp-kal-signatur { display: flex; gap: 1.5rem; margin-top: .75rem; font-size: .85rem; color: var(--fp-tekst-dim); flex-wrap: wrap; }
.fp-kal-prik { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.fp-kal-prik.fp-kal-enkelt { background: var(--fp-accent); }
.fp-kal-prik.fp-kal-saeson { background: var(--fp-primaer); }
.fp-kal-prik.fp-kal-saerarrangement { background: #c4711c; }
.fp-kal-prik-ansoegt { background: var(--fp-hvid); border: 2px dashed var(--fp-tekst-dim); }

.fp-uge-nav { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ---------- Klik-og-book ugegrid (foreningsbooking) ---------- */

.fp-slot-krop { display: grid; grid-template-columns: 60px repeat(7, 1fr); min-width: 900px; }
.fp-slot-tidcelle { height: 36px; font-size: .75rem; color: var(--fp-tekst-dim); text-align: right; padding-right: .4rem; border-top: 1px solid #eef2f3; }
.fp-slot-kol { display: flex; flex-direction: column; border-left: 1px solid var(--fp-kant); }
.fp-slot {
    height: 36px; border: 0; border-top: 1px solid #eef2f3; background: var(--fp-hvid);
    font: inherit; font-size: .7rem; font-weight: 600; color: var(--fp-tekst-dim);
    cursor: pointer; padding: 0;
}
.fp-slot:focus-visible { outline: none; box-shadow: inset var(--fp-fokus-ring); }
.fp-slot-ledig:hover { background: var(--fp-groen-lys); }
.fp-slot-delvist { background: #f2d271; color: #5f4a0e; }
.fp-slot-delvist:hover { background: #ecc452; }
.fp-slot-optaget { background: #a9b8c6; color: #2e3d49; cursor: not-allowed; }
.fp-slot-egen { background: var(--fp-groen); color: var(--fp-hvid); cursor: not-allowed; }
.fp-slot-fortid { background: #f6f7f8; cursor: default; }
.fp-slot-lukket { background: repeating-linear-gradient(45deg, #f7e8e8 0, #f7e8e8 8px, #fdf3f3 8px, #fdf3f3 16px); cursor: not-allowed; }
.fp-slot-valgt { background: var(--fp-primaer); color: var(--fp-hvid); }
.fp-slot-valgt:hover { background: var(--fp-primaer-moerk); }
.fp-slot:disabled { pointer-events: auto; } /* bevar title-tooltip på optagne celler */
.fp-slot-visning, .fp-slot-visning:disabled { cursor: default; }
.fp-slot-visning.fp-slot-ledig:hover { background: var(--fp-hvid); }
.fp-slot-visning.fp-slot-delvist:hover { background: #f2d271; }

.fp-kal-prik.fp-slot-prik-ledig { background: var(--fp-hvid); border: 1px solid var(--fp-kant); }
.fp-kal-prik.fp-slot-delvist { background: #f2d271; }
.fp-kal-prik.fp-slot-optaget { background: #a9b8c6; }
.fp-kal-prik.fp-slot-egen { background: var(--fp-groen); }
.fp-kal-prik.fp-slot-valgt { background: var(--fp-primaer); }

/* ---------- Find ledig tid (omvendt søgning) ---------- */

.fp-tid-liste { display: flex; flex-direction: column; gap: .75rem; }
.fp-tid-kort {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    background: var(--fp-hvid); border-radius: var(--fp-radius-kort);
    box-shadow: var(--fp-skygge); padding: .9rem 1.1rem;
}
.fp-tid-billede { width: 72px; height: 72px; object-fit: cover; border-radius: var(--fp-radius-kort); flex-shrink: 0; }
.fp-tid-info { display: flex; flex-direction: column; gap: .25rem; min-width: 220px; }
.fp-tid-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; max-width: 55%; }
.fp-tidchip {
    background: var(--fp-groen-lys); color: var(--fp-groen); border: 0;
    border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .85rem;
    font-weight: 600; cursor: pointer;
}
.fp-tidchip:hover { background: var(--fp-groen); color: var(--fp-hvid); }
.fp-tidchip:focus-visible { outline: none; box-shadow: var(--fp-fokus-ring); }
@media (max-width: 700px) {
    .fp-tid-chips { margin-left: 0; max-width: 100%; }
}

.fp-book-panel { margin-top: 1rem; }
.fp-book-panel-tid { font-size: 1.05rem; color: var(--fp-primaer); display: inline-block; }
.fp-book-panel-tid::first-letter { text-transform: uppercase; }

.fp-badge-gul { background: #fdf3d7; color: #8a6d1a; }
.fp-badge-lukket { background: var(--fp-roed-lys); color: var(--fp-roed); }

/* ---------- Faner ---------- */

.fp-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.fp-tab {
    padding: .4rem .9rem; border: 1px solid var(--fp-kant); border-radius: 999px;
    background: var(--fp-hvid); font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--fp-tekst-dim);
}
.fp-tab:hover { background: var(--fp-accent-lys); }
.fp-tab-aktiv { background: var(--fp-primaer); border-color: var(--fp-primaer); color: var(--fp-hvid); }

.fp-afvis-raekke td { background: var(--fp-roed-lys); }
.fp-afvis-form { display: flex; gap: .5rem; align-items: center; }
.fp-afvis-form input { max-width: 420px; }

.fp-knap-raekke { display: flex; gap: .6rem; margin-top: .5rem; }

.fp-ledighed { margin-top: 1rem; border-top: 1px solid var(--fp-kant); padding-top: .75rem; }
.fp-ledighed-liste { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-direction: column; gap: .25rem; }
.fp-ledighed-liste li { padding: .3rem .6rem; border-radius: 5px; font-size: .9rem; }
.fp-ledighed-liste li::first-letter { text-transform: uppercase; }
.fp-ledig { background: var(--fp-groen-lys); color: var(--fp-groen); }
.fp-optaget { background: var(--fp-roed-lys); color: var(--fp-roed); }

/* ---------- Dashboard ---------- */

/* 6-kolonners komposition: linjegrafer i fuld bredde, søjlegrafer side om side,
   donuts tre på række. min-width: 0 er nødvendig, så canvas kan krympe med sin kolonne */
.fp-dashboard-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.fp-dashboard-grid > * { min-width: 0; }
.fp-graf-kort { display: flex; flex-direction: column; margin-top: 0; }
.fp-graf-kort h3 { margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--fp-kant); }
.fp-graf-bred { grid-column: 1 / -1; }
.fp-graf-halv { grid-column: span 3; }
.fp-graf-tredjedel { grid-column: span 2; }
/* Fast højde (ikke flex) – flex-baseret højde kan få Chart.js' resize-observer
   til at oscillere, så sidehøjden "vokser under" brugeren ved scroll/resize */
.fp-graf { position: relative; height: 260px; }

@media (max-width: 1100px) {
    .fp-graf-halv { grid-column: 1 / -1; }
    .fp-graf-tredjedel { grid-column: span 3; }
}
@media (max-width: 700px) {
    .fp-graf-tredjedel { grid-column: 1 / -1; }
}

/* ---------- Offentlig facilitetssøgning ---------- */

.fp-soegekort {
    height: 340px; border-radius: var(--fp-radius); border: 1px solid var(--fp-kant);
    margin-bottom: 1.25rem; z-index: 0; background: var(--fp-hvid);
}
.fp-lokation-billede { width: 240px; height: 160px; border-radius: 10px; object-fit: cover; background: var(--fp-baggrund); }

/* Facilitetssøgningens kort: lokationsfotoet som banner i fuld kortbredde */
.fp-facilitet-kort {
    display: flex; flex-direction: column; background: var(--fp-hvid);
    border-radius: var(--fp-radius); box-shadow: var(--fp-skygge); overflow: hidden;
    text-decoration: none; color: var(--fp-tekst);
}
.fp-facilitet-kort:hover { outline: 2px solid var(--fp-accent); }
.fp-facilitet-foto { width: 100%; height: 150px; object-fit: cover; display: block; }
.fp-facilitet-foto-tom {
    display: flex; align-items: center; justify-content: center;
    background: var(--fp-accent-lys); color: var(--fp-primaer); font-weight: 700; font-size: 1.1rem;
}
.fp-facilitet-krop { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem 1rem; }

/* ---------- Adressevælger med kort ---------- */

.fp-adresse-vaelger { display: flex; flex-direction: column; gap: .3rem; }
.fp-adresse-label { font-weight: 600; font-size: .9rem; }

.fp-adresse-input-wrap { position: relative; }

.fp-adresse-dropdown {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 500;
    background: var(--fp-hvid); border: 1px solid var(--fp-kant); border-radius: var(--fp-radius);
    box-shadow: 0 4px 14px rgba(0, 40, 55, .18); overflow: hidden;
}

.fp-adresse-suggestion {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
    padding: .55rem .8rem; border: none; background: none; font-size: .95rem;
    font-family: inherit; cursor: pointer; color: var(--fp-tekst);
}
.fp-adresse-suggestion:hover, .fp-adresse-suggestion--aktiv { background: var(--fp-accent-lys); }
.fp-adresse-suggestion-pin { color: var(--fp-accent); font-size: .8rem; }

.fp-adresse-kort {
    height: 300px; border-radius: var(--fp-radius); border: 1px solid var(--fp-kant);
    margin-top: .5rem; z-index: 0;
}

.fp-adresse-hint { font-size: .85rem; color: var(--fp-tekst-dim); }

/* ---------- Foreningsregister ---------- */

.fp-forening-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.fp-forening-kort {
    display: flex; gap: 1rem; align-items: center; background: var(--fp-hvid);
    border-radius: var(--fp-radius); box-shadow: var(--fp-skygge); padding: 1rem;
    text-decoration: none; color: var(--fp-tekst);
}
.fp-forening-kort:hover { outline: 2px solid var(--fp-accent); }

/* Runde emblem-logoer vises i fuld cirkel uden kasse omkring */
.fp-forening-logo { width: 84px; height: 84px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
.fp-forening-logo-tom {
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    font-size: 1.5rem; color: var(--fp-primaer); background: var(--fp-accent-lys); text-transform: uppercase;
}
.fp-forening-logo-stor { width: 140px; height: 140px; border-radius: 50%; object-fit: contain; }

.fp-forening-info { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fp-forening-aktiviteter { display: flex; gap: .3rem; flex-wrap: wrap; }

.fp-forening-detalje-hoved { display: flex; gap: 1.25rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; } /* MK 17.2: tekstblok falder under billedet på smalle skærme */
.fp-minforening-hoved { margin-top: 0; }
.fp-minforening-logo { width: 180px; height: 180px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
.fp-minforening-navn { margin: 0 0 .35rem; }
@media (max-width: 800px) { .fp-minforening-logo { width: 120px; height: 120px; } }
.fp-forening-detalje-hoved > div { min-width: 0; }
.fp-forening-detalje-hoved h1 { overflow-wrap: break-word; }
.fp-forening-detalje-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.fp-forening-detalje-grid > div { min-width: 0; } /* grid-børn må krympe, så brede tabeller ikke løber ind under nabokolonnen */
.fp-tabel-wrap { overflow-x: auto; }
.fp-forening-beskrivelse { max-width: 46rem; white-space: pre-line; }

.fp-logo-upload { display: flex; gap: 1rem; align-items: center; }
.fp-logo-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: contain; background: var(--fp-baggrund); border: 1px solid var(--fp-kant); }

/* ---------- Login ---------- */

.fp-login { display: flex; justify-content: center; padding: 3.5rem 1rem; }
.fp-login-boks {
    background: var(--fp-hvid); border-radius: var(--fp-radius);
    border-top: 3px solid var(--fp-primaer); box-shadow: var(--fp-skygge);
    padding: 2.25rem 2rem 1.75rem; width: 100%; max-width: 420px;
    display: flex; flex-direction: column;
}
.fp-login-boks h1 { margin-bottom: .35rem; }
.fp-login-boks form { display: flex; flex-direction: column; gap: .6rem; }
.fp-login-boks form label { margin-bottom: -.25rem; } /* label knyttes visuelt til sit eget felt */
.fp-login-boks button { margin-top: .9rem; width: 100%; }
.fp-login-intro { color: var(--fp-tekst-dim); margin-top: 0; }
.fp-login-glemt { text-align: center; margin: 1rem 0 0; }
.fp-login-opret {
    text-align: center; margin: 1.1rem 0 0; padding-top: 1rem;
    border-top: 1px solid var(--fp-kant); color: var(--fp-tekst-dim); font-size: .92rem;
}
.fp-login-demo {
    margin-top: 1.1rem; padding: 1rem; border-radius: var(--fp-radius);
    background: var(--fp-accent-lys); display: flex; flex-direction: column; gap: .5rem;
}
.fp-login-demo p { margin: 0; font-size: .92rem; color: var(--fp-tekst-dim); }
.fp-login-demo .fp-btn { text-align: center; background: var(--fp-hvid); }

/* ---------- Validering og fejl (Blazor) ---------- */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--fp-groen); }
.invalid { outline: 1px solid var(--fp-roed); }
.validation-message { color: var(--fp-roed); }

#blazor-error-ui {
    background: #fff3cd; color: #664d03; bottom: 0; box-shadow: 0 -1px 4px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* Brugere & rettigheder (krav 13.1) */
.fp-check-liste { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: .35rem 0; }

/* EK 16.4: supportsession – administratoren ser portalen som en anden bruger.
   Banneret skal ikke kunne overses, derfor accentfarven i fuld bredde øverst.
   Det ligger i det almindelige flow, så det ikke dækker for indholdet. */
.fp-support-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .6rem 1.5rem;
    background: var(--fp-accent);
    color: var(--fp-hvid);
    font-size: .9rem;
}
.fp-support-tekst strong { font-weight: 700; }
.fp-support-tekst strong:first-child::after { content: ": "; }
.fp-support-banner .fp-btn {
    background: var(--fp-hvid);
    color: var(--fp-primaer);
    border-color: var(--fp-hvid);
}

/* Knap i en handlingscelle, der skal postes som formular */
.fp-inline-form { display: inline-block; }

/* Deaktiverede knapper viser normalt ingen title-tooltip i browseren. Her er
   forklaringen hele pointen, så musen skal kunne nå knappen (samme greb som
   .fp-slot:disabled i kalenderen) */
.fp-btn-uden-konto:disabled { pointer-events: auto; }

/* ---- Handlingsmenu i tabelrækker (HandlingsMenu.razor) ---- */
/* Kun for skærmlæsere: knappen viser et ⋯-tegn, teksten skal stadig kunne læses op */
.fp-skjult-visuelt {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fp-hmenu { position: relative; }
.fp-hmenu-knap { min-width: 2.2rem; font-size: 1.05rem; line-height: 1; padding: .3rem .5rem; }

/* Gennemsigtig flade over resten af siden: fanger klik uden for menuen */
.fp-hmenu-skygge { position: fixed; inset: 0; z-index: 40; visibility: hidden; }

.fp-hmenu-panel {
    position: absolute; right: 0; top: calc(100% + .3rem); z-index: 41;
    min-width: 13rem; padding: .25rem 0; text-align: left;
    background: var(--fp-hvid);
    border: 1px solid var(--fp-kant); border-radius: var(--fp-radius-kort);
    box-shadow: 0 6px 18px rgba(22, 34, 58, .16);
    visibility: hidden; opacity: 0; transform: translateY(-.25rem);
    transition: opacity .12s ease, transform .12s ease;
}
.fp-hmenu-aaben .fp-hmenu-skygge { visibility: visible; }
.fp-hmenu-aaben .fp-hmenu-panel { visibility: visible; opacity: 1; transform: none; }

/* Punkterne kan være knapper, links eller knapper i en formular */
.fp-hmenu-panel form { margin: 0; }
.fp-hmenu-panel button,
.fp-hmenu-panel a {
    display: block; width: 100%; box-sizing: border-box;
    padding: .5rem .85rem; margin: 0;
    border: none; border-radius: 0; background: none; box-shadow: none;
    text-align: left; text-decoration: none; white-space: nowrap;
    font-size: .9rem; color: var(--fp-tekst); cursor: pointer;
}
.fp-hmenu-panel button:hover:not(:disabled),
.fp-hmenu-panel a:hover { background: var(--fp-accent-lys); }
.fp-hmenu-panel button:disabled { opacity: .55; cursor: not-allowed; pointer-events: auto; }
.fp-hmenu-panel .fp-hmenu-fare { color: var(--fp-roed); }
.fp-hmenu-skillelinje { height: 1px; margin: .25rem 0; background: var(--fp-kant); }

/* Menukolonnen er smal og ligger yderst til højre i rækken */
.fp-tabel-menu { width: 1%; text-align: right; }