/* Stevneassistent – felles stil. Enkel og kompakt, uten rammeverk. */
:root {
    --farge-primaer: #1f4e79;
    --farge-primaer-mork: #163a5b;
    --farge-aksent: #c00000;
    --farge-tekst: #1d2329;
    --farge-dempet: #5f6b76;
    --farge-ramme: #d5dbe1;
    --farge-flate: #f5f7f9;
    --farge-kort: #ffffff;
    --farge-gul: #ffff99; /* Redigerbare celler, som i regnearket (FK-GRID-07) */
    --farge-ok: #1e7b34;
    --farge-feil: #b42318;
    --radius: 6px;
    --skrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--skrift);
    font-size: 15px;
    color: var(--farge-tekst);
    background: var(--farge-flate);
}

a { color: var(--farge-primaer); }
a:hover { color: var(--farge-primaer-mork); }
h1 { font-size: 1.6rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
h1:focus { outline: none; }
code { background: #eef1f4; padding: 0 .25em; border-radius: 3px; }

/* --- Ramme --- */
.topplinje {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .6rem 1.25rem;
    background: var(--farge-primaer);
    color: #fff;
}
.topplinje a { color: #fff; text-decoration: none; }
.topplinje .merke { font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.hovedmeny { display: flex; gap: .25rem; flex: 1; }
.hovedmeny a { padding: .35rem .7rem; border-radius: var(--radius); opacity: .9; }
.hovedmeny a.active, .hovedmeny a:hover { background: rgba(255,255,255,.15); opacity: 1; }
.bruker { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.bruker form { margin: 0; }
.bruker .knapp-lenke { color: #fff; }
/* Språkvalget (IFK-BV-06) vises når grensesnittet finnes på mer enn ett språk */
.sprakvalg { display: flex; gap: .5rem; margin: 0; font-size: .9rem; }
.topplinje .sprakvalg .knapp-lenke { color: #fff; }
.sprakvalg [aria-pressed="true"] { font-weight: 700; text-decoration: underline; }

.innhold { padding: 1.25rem; max-width: 1600px; margin: 0 auto; }

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

/* Tittellinjen med varsler (gjennomgående krav fra oppdragsgiver 2026-10-14): varsler som kommer og går, f.eks.
   ulagrede endringer, «lagret», feil og fremdrift, vises høyrejustert på linjen med sidetittelen. Varslene og knappene
   til høyre ligger utenfor flyten, så innholdet på siden flytter seg aldri når et varsel vises. */
.tittellinje { position: relative; margin: 0 0 .75rem; }
.tittellinje > h1 { margin: 0; padding-right: 1rem; }
.tittelhoyre {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: flex-end; gap: .75rem; max-width: 75%;
}
.sidevarsel { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.sidevarsel .melding { margin: 0; padding: .25rem .7rem; font-size: .88rem; line-height: 1.3; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.stevnetopp { margin-bottom: .75rem; }
.brodsmuler { font-size: .85rem; color: var(--farge-dempet); }
.dempet { color: var(--farge-dempet); }
.laster { color: var(--farge-dempet); font-style: italic; }

.faner { display: flex; gap: .25rem; border-bottom: 1px solid var(--farge-ramme); margin-bottom: 1rem; flex-wrap: wrap; }
.faner a { padding: .5rem .9rem; text-decoration: none; color: var(--farge-tekst); border-bottom: 3px solid transparent; }
.faner a.active { border-bottom-color: var(--farge-primaer); color: var(--farge-primaer); font-weight: 600; }
.faner a:hover { background: #e9eef3; }

/* --- Kort og lister --- */
.kort {
    background: var(--farge-kort);
    border: 1px solid var(--farge-ramme);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.kortrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.kortrad .kort { margin-bottom: 0; }
.stort-tall { font-size: 2.2rem; font-weight: 700; margin: .25rem 0; }

/* Nøkkeltall for et oppsett (FK-KAMP-01) */
.nokkeltall { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: .5rem 0 0; }
.nokkeltall dt { color: var(--farge-dempet); font-size: .85rem; }
.nokkeltall dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
table.versjoner tr.status-feilet td { color: var(--farge-feil); }
table.versjoner tr.status-pagaar td { font-style: italic; }
.lenkeliste { padding-left: 1.1rem; margin: .25rem 0; }
section { margin-bottom: 1.25rem; }

table.liste { width: 100%; border-collapse: collapse; background: var(--farge-kort); border: 1px solid var(--farge-ramme); }
table.liste th, table.liste td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--farge-ramme); vertical-align: top; }
table.liste th { background: #e9eef3; font-weight: 600; font-size: .9rem; }
table.liste tr.deaktivert td { color: var(--farge-dempet); text-decoration: line-through; }
table.kompakt td, table.kompakt th { padding: .25rem .5rem; font-size: .9rem; }

dl.fakta { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
dl.fakta dt { color: var(--farge-dempet); }
dl.fakta dd { margin: 0; }

.status { display: inline-block; padding: 0 .5rem; border-radius: 999px; font-size: .8rem; background: #e9eef3; }
.status-publisert { background: #dcf3e2; color: var(--farge-ok); }
.status-arkivert { background: #eee; color: var(--farge-dempet); }

/* --- Skjema --- */
label { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .8rem; font-weight: 500; }
label small { font-weight: 400; color: var(--farge-dempet); }
label.avkrysning { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input:not([type]), select, textarea {
    font: inherit;
    padding: .45rem .55rem;
    border: 1px solid #b8c2cc;
    border-radius: var(--radius);
    background: #fff;
    min-width: 0;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
    outline: 2px solid #4d90fe;
    outline-offset: 1px;
}
input.kode { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
input.gul, .gul { background: var(--farge-gul); }
fieldset { border: 1px solid var(--farge-ramme); border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 .8rem; }
legend { font-weight: 600; padding: 0 .25rem; }
.skjema-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 1.25rem; max-width: 1000px; }
/* Valideringsmeldingen legges i plassen under feltet, så skjemaet ikke flytter seg når den vises. */
.skjema-rutenett label { position: relative; margin-bottom: 1.25rem; }
.skjema-rutenett .validation-message { position: absolute; top: 100%; left: 0; margin-top: .1rem; line-height: 1.2; }
.skjema-linje { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.skjema-linje label { margin-bottom: 0; }
.validation-message { color: var(--farge-feil); font-size: .85rem; font-weight: 400; }
.invalid { border-color: var(--farge-feil) !important; }

.knapperad { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.knapp {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    font: inherit; font-weight: 500;
    padding: .45rem .9rem;
    border: 1px solid #b8c2cc; border-radius: var(--radius);
    background: #fff; color: var(--farge-tekst);
    cursor: pointer; text-decoration: none;
}
.knapp:hover { background: #eef2f6; }
.knapp:disabled { opacity: .55; cursor: not-allowed; }
.knapp-primaer { background: var(--farge-primaer); border-color: var(--farge-primaer); color: #fff; }
.knapp-primaer:hover { background: var(--farge-primaer-mork); color: #fff; }
.knapp-fare { border-color: var(--farge-feil); color: var(--farge-feil); }
.knapp-lenke { border: none; background: none; padding: 0; color: var(--farge-primaer); text-decoration: underline; font-weight: 400; }
.knapp-lenke:hover { background: none; }
.knapp-google { width: 100%; border-color: #8a96a3; margin-bottom: .75rem; }
.bred { width: 100%; }

.melding { padding: .6rem .8rem; border-radius: var(--radius); margin-bottom: .8rem; }
.melding-feil { background: #fdecea; color: var(--farge-feil); border: 1px solid #f5c2bd; }
.melding-info { background: #e8f1fb; color: #134a7c; border: 1px solid #bcd6f1; }
.melding-advarsel { background: #fff7e0; color: #7a5a00; border: 1px solid #f1dc9c; }

/* Passordfeltet med øye-ikonet (FK-AUTH-09): knappen står inne i feltet til høyre, og feltet har plass til den. */
.passordfelt { position: relative; display: block; }
.passordfelt input { width: 100%; padding-right: 2.6rem; }
.vis-passord {
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; border: none; border-radius: var(--radius);
    background: none; color: var(--farge-dempet); cursor: pointer;
}
.vis-passord:hover { color: var(--farge-tekst); background: #eef2f6; }
.vis-passord svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vis-passord .oye-skjul, .vis-passord[aria-pressed="true"] .oye { display: none; }
.vis-passord[aria-pressed="true"] .oye-skjul { display: inline; }

.passordregler { list-style: none; padding: 0; margin: -.4rem 0 .8rem; font-size: .88rem; }
.passordregler li.ok { color: var(--farge-ok); }
.passordregler li.mangler { color: var(--farge-dempet); }

/* Siden «Brukere»: passordet administrator gir brukeren, vises så det kan leses av. Fast bredde: Safari og Firefox regner
   bredden på en flex-rad ut fra innholdet. */
.passordlinje { margin: .4rem 0 .9rem; }
.passordlinje label { flex: none; }
input.passord { width: 15rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.ny-bruker .passordregler { margin-top: 0; }
table.brukere td.handlinger { white-space: nowrap; }
table.brukere tr.nytt-passord td { background: #f6f8fa; }

.filvelger {
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed #9fb0c0; border-radius: var(--radius);
    padding: 1.5rem; text-align: center; cursor: pointer; background: #fafcfe;
    position: relative;
}
.filvelger.drar { background: #eaf3fc; border-color: var(--farge-primaer); }
.filvelger input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* --- Kontosider --- */
.konto-side { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; }
.konto-kort { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--farge-ramme); border-radius: 10px; padding: 1.75rem 2rem; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.konto-kort .merke { font-weight: 700; color: var(--farge-primaer); margin-bottom: 1rem; letter-spacing: .02em; }
.konto-kort .lenker { margin-top: 1rem; font-size: .92rem; line-height: 1.8; }
.skille { display: flex; align-items: center; gap: .75rem; color: var(--farge-dempet); font-size: .85rem; margin: .5rem 0 1rem; }
.skille::before, .skille::after { content: ""; flex: 1; border-top: 1px solid var(--farge-ramme); }
.qr { display: flex; justify-content: center; margin: .5rem 0; }
.qr svg { width: 200px; height: 200px; }
.nokkel { text-align: center; font-size: .9rem; }
.trinn { padding-left: 1.2rem; }

/* --- Offentlige sider (mobil først, FK-PUB-07) --- */
.offentlig { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.offentlig-topp { border-bottom: 3px solid var(--farge-primaer); margin-bottom: 1rem; }
.offentlig-topp p { margin: .25rem 0 .75rem; color: var(--farge-dempet); }
.ikke-publisert { font-size: 1.1rem; padding: 2rem 0; }

/* --- Importsammendrag --- */
.sammendrag-tall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin: .75rem 0; }
.sammendrag-tall div { background: var(--farge-flate); border-radius: var(--radius); padding: .5rem .75rem; }
.sammendrag-tall strong { display: block; font-size: 1.4rem; }
details.avvik { border: 1px solid var(--farge-ramme); border-radius: var(--radius); padding: .4rem .75rem; margin-bottom: .5rem; background: #fff; }
details.avvik summary { cursor: pointer; font-weight: 600; }
details.avvik[open] summary { margin-bottom: .5rem; }

/* --- Undermeny for gren og parametersider (IFK-BV-02, FK-PAR) --- */
.underfaner { display: flex; gap: .4rem; margin: -.4rem 0 1rem; flex-wrap: wrap; }
.underfaner a {
    padding: .3rem .85rem; border: 1px solid var(--farge-ramme); border-radius: 999px;
    background: var(--farge-kort); color: var(--farge-tekst); text-decoration: none; font-size: .92rem;
}
.underfaner a.active { background: var(--farge-primaer); border-color: var(--farge-primaer); color: #fff; }
.underfaner a:hover:not(.active) { background: #e9eef3; }
.parameterknapper { align-items: center; }
.knapperad label.versjonstekst, .knapperad label.kopier { flex-direction: row; align-items: center; gap: .5rem; margin: 0; }
/* Puljer: knappen for dommerleders mal (FK-EXP-11) over tabellen */
.puljer-knapper { margin: .25rem 0 .5rem; }

/* Innveiing (FK-KAMP-11/21): knappene og versjonen på én linje, og oransje ramme når vekten eller høyden ikke passer med
   klassen (INN-5). Forklaringen står i tooltip på cellen og i tittellinja. */
.innveiing-knapper { align-items: center; margin: .25rem 0 .5rem; }
.innveiing-knapper .innveiing-versjon { margin-left: .5rem; }
.tabell-tabell td.innveiing-advarsel { box-shadow: inset 0 0 0 2px #d97706; }
.tabell-tabell td.innveiing-advarsel .celle-felt { border-color: #d97706; background-color: #fff7e6; }

/* «Til SET» og «Ført i SET» for stevneleder (FK-KAMP-23, INN-10): visningene ser ut som ringfanene, og antallet som venter,
   er blått. «1. gang» er grå når «2. gang» gjelder, og knappene i cellene tar ikke mer plass enn feltene. */
.innveiing-visninger { display: flex; gap: .3rem; flex-wrap: wrap; margin-right: .5rem; }
.innveiing-visninger a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .8rem; border: 1px solid var(--farge-ramme); border-radius: var(--radius);
    background: var(--farge-kort); color: var(--farge-tekst); text-decoration: none; font-size: .92rem;
}
.innveiing-visninger a.active { background: #e9eef3; border-color: var(--farge-primaer); font-weight: 600; }
.innveiing-antall {
    min-width: 1.5em; padding: 0 .4em; border-radius: 999px; background: #e9eef3;
    font-size: .8rem; font-weight: 600; text-align: center;
}
.innveiing-antall.venter { background: var(--farge-primaer); color: #fff; }
.innveiing-hjelp { margin: 0 0 .5rem; }
/* Valget «Innveiingssted» øverst (beslutning 10): teksten og nedtrekket på én linje, som knappene ved siden av. */
.knapperad label.innveiing-stedvalg { flex-direction: row; align-items: center; gap: .4rem; margin: 0; }
.innveiing-stedvalg select { min-width: 10rem; }

/* Kontrollen mot grensen (FK-KAMP-12): vekten som gjelder eller høyden over grensen er rød, og «Random» mer enn 5 % over
   grensen får rød ramme. Prøvene i fargeforklaringen har de samme klassene, også advarselen fra registreringen. */
.innveiing-over { --rad-farge: #fbe3e1; }
/* En utøver som er strøket, er grå med en tynn strek over teksten i «Til SET» og «Ført i SET» (INN-12). Knappen sist i raden er uten strek. */
.innveiing-stroket td:not(.fast-hoyre) { text-decoration: line-through; text-decoration-thickness: 1px; }
.tabell-tabell td.innveiing-over { color: #b42318; font-weight: 700; }
.tabell-tabell td.innveiing-over .celle-felt { color: #b42318; font-weight: 700; background-color: #fbe3e1; border-color: #b42318; }
.tabell-tabell td.innveiing-random-over, .fargeprove.innveiing-random-over { box-shadow: inset 0 0 0 2px #b42318; }
.tabell-tabell td.innveiing-random-over .celle-felt { border-color: #b42318; }
.fargeprove.innveiing-advarsel { box-shadow: inset 0 0 0 2px #d97706; }
.tabell-tabell td.innveiing-erstattet { color: #6b7280; }
.tabell-tabell .kvitter-ut, .tabell-tabell .angre, .tabell-tabell .flytt { padding: .1rem .6rem; font-size: .9rem; }
/* «Flytt» står etter teksten i «Forslag» på «Innveiing» (FK-KAMP-12). */
.tabell-tabell .flytt { margin-left: .5rem; }
.versjonstekst input { width: 24rem; max-width: 100%; }
fieldset.parametre { border: none; padding: 0; margin: 1rem 0 0; min-width: 0; }
fieldset.parametre .kort { max-width: 1100px; }
.parameter { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .35rem 0; border-bottom: 1px solid #eef1f4; }
/* Etiketten og feltet krymper ikke. Er raden for smal, brytes merknaden til neste linje. Safari og Firefox regner
   bredden på raden ut fra teksten i etiketten, ikke flex-basis. Uten fast bredde og «flex: none» krymper de feltet
   til nesten ingenting, og merknaden havner oppå det. */
.parameter > label { flex: none; flex-direction: row; align-items: center; gap: .75rem; margin: 0; }
.parameter .etikett { flex: 0 0 22rem; width: 22rem; }
.parameter > label > input, .parameter > label > select { flex: none; width: 9rem; }
.parameter > label > output { flex: none; min-width: 9rem; white-space: nowrap; }
.parameter > label > input[type=checkbox] { width: auto; }
.parameter > label > textarea { flex: 0 1 22rem; width: 22rem; max-width: 100%; }
.parameter .merknad { flex: 1 1 14rem; min-width: 12rem; }
/* Feilen står i stedet for merknaden, og ↺ har alltid plass, så raden verken blir høyere eller forskyves. */
.parameter .melding-feil { flex: 1 1 14rem; min-width: 12rem; background: none; border: none; padding: 0; font-size: .88rem; font-weight: 600; }
.tilbakestill-plass { flex: none; width: 1.9rem; height: 1.9rem; }
/* Feil i tabellene på parametersidene: linjen står alltid, også tom, så innholdet under ikke flytter seg. */
/* Feilen under en tabell har en fast linje: linjehøyden er den samme som min-height, så en feil på én linje ikke flytter
   innholdet under (varsler flytter ikke innholdet). */
.tabellfeil { min-height: 1.3em; line-height: 1.3; margin: .3rem 0 0; color: var(--farge-feil); font-size: .88rem; font-weight: 600; }
.parameter.har-feil input, .parameter.har-feil select, .parameter.har-feil textarea { border-color: var(--farge-feil); background: #fdecea; }
.merknad { color: var(--farge-dempet); font-size: .85rem; font-weight: 400; }
p.merknad { margin: .6rem 0 0; }
.tilbakestill {
    flex: none;
    width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--farge-ramme); border-radius: 999px;
    background: #fff; color: var(--farge-primaer); cursor: pointer; font-size: 1rem; line-height: 1;
}
.tilbakestill:hover:not(:disabled) { background: #eef2f6; }
/* ↺ står alltid, så ingenting flytter seg. Uten endring er den grå og kan ikke trykkes. */
.tilbakestill:disabled { color: #a9b2bc; border-color: #e3e7eb; background: #f5f7f9; cursor: default; }
.avledet { font-variant-numeric: tabular-nums; font-weight: 600; }
output.avledet { display: inline-block; padding: .45rem .55rem; background: var(--farge-flate); border: 1px dashed var(--farge-ramme); border-radius: var(--radius); }
td.avledet { background: var(--farge-flate); }
.parametre table.liste th, .parametre table.liste td { vertical-align: middle; }
table.kamptider input { width: 5.5rem; }
/* En kamptid som ikke følger §6.1, har rød ramme ved feltet, og feilen står i linja under tabellen (FK-PAR-11). */
table.kamptider input.ugyldig { border-color: var(--farge-feil); background: #fdecea; }
table.kamptider td[data-felt=maks] { white-space: nowrap; }
table.rang input { width: 5rem; }
.to-tabeller { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.to-tabeller table.liste { width: auto; min-width: 18rem; }
.ny-trekning { margin-top: .5rem; }
.skjult { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Kampsidene og versjoner (FK-KAMP, FK-GEN-03) --- */
.versjonslinje { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 .8rem; }
.versjonslinje label.versjonsvalg { flex-direction: row; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.versjonslinje select { max-width: 32rem; }
.eldre-versjon { font-weight: 500; }
.ringprogram { margin: 0 0 .75rem; }
/* Versjonsteksten får plass til forslaget («Versjon N – generert fra siste import.»), også i Safari og Firefox. */
.generering .skjema-linje input { width: 26rem; max-width: 100%; }
.ringfaner { display: flex; gap: .3rem; margin: 0 0 .75rem; flex-wrap: wrap; }
.ringfaner a {
    padding: .25rem .8rem; border: 1px solid var(--farge-ramme); border-radius: var(--radius);
    background: var(--farge-kort); color: var(--farge-tekst); text-decoration: none; font-size: .92rem;
}
.ringfaner a.active { background: #e9eef3; border-color: var(--farge-primaer); font-weight: 600; }
.ringtittel { margin-top: .25rem; }
.ringfordeling, .regler { margin: .25rem 0; padding-left: 1.2rem; }
.ringfordeling li, .regler li { margin-bottom: .3rem; }
.tabell-rull-enkel { overflow-x: auto; }
table.ringer th[scope=row] { white-space: nowrap; }
.tabell-forklaring { margin-top: .4rem; }
table.versjoner td.handlinger { white-space: nowrap; }
table.versjoner td.handlinger a + a { margin-left: .75rem; }
.sammenligning .versjonsvalg label { flex-direction: row; align-items: center; gap: .5rem; }
.sammendrag { font-weight: 500; }
/* Endringer mellom versjoner. Fargen er bakgrunnen i tabellen (--rad-farge, se farger.css). */
.endring-ny { --rad-farge: #e3f4e8; }
.endring-fjernet { --rad-farge: #fbe3e1; }

/* --- Poomsaesidene (FK-POOM) --- */
.ingress { margin: 0 0 .75rem; }
/* Fargekodene (farger.css) som bakgrunn i de enkle tabellene, f.eks. mattene og kampene i finalen. */
table.matter td, table.matter th[scope=row], .trekning-klasse table.liste td { background-color: var(--rad-farge, transparent); }
table.matter th[scope=row], table.monsterregler th[scope=row], table.tabell1 th[scope=row], table.tabell2 th[scope=row],
table.aldersklasser th[scope=row] { font-weight: 600; white-space: nowrap; }
table.monsterregler th[scope=row], table.tabell1 th[scope=row], table.tabell2 th[scope=row], table.aldersklasser th[scope=row] { background: none; }
/* Lang tekst i én linje i tabellen. Hele teksten står i title og vises når musa holdes over. */
.avkortet { display: block; max-width: 30rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.monsterregler th[scope=row] { white-space: normal; width: 18rem; }
.trekningsvalg { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; margin: 0 0 .8rem; }
.trekningsvalg label.klassevalg { flex-direction: row; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.trekningsvalg select { max-width: 32rem; }
.trekning-hode { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.trekning-hode h2 { margin: 0; font-size: 1.1rem; }
.trekning-matte { font-weight: 600; white-space: nowrap; }
.trekning-info { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: .5rem 0 .6rem; }
.trekning-info div { display: flex; gap: .4rem; }
.trekning-info dt { color: var(--farge-dempet); }
.trekning-info dd { margin: 0; font-weight: 600; }
.trekning-klasse table.liste { width: auto; min-width: 28rem; }
/* Redigeringen i poomsae (Plan_M3, inkrement 4). «Trekningsnr» i startlisten er gult, som de redigerbare cellene i tabellene
   (FK-GRID-07). Vinduene for pauseradene og lagene ligger over siden, så innholdet flytter seg ikke (beslutning 5). */
.trekning-klasse table.liste td.redigerbar { background-color: #ffff99; padding: .05rem .2rem; }
.trekning-klasse td.trekningsnr { width: 6.5rem; }
.trekning-hode-hoyre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.trekning-hode .trekk-paa-nytt { padding: .2rem .7rem; }
.dialog-rad { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.dialog-rad .dialog-felt { flex: 1 1 8rem; }
.dialog-felt select { box-sizing: border-box; width: 100%; font: inherit; padding: .3rem .4rem; }
.lag-medlemmer h3 { margin: 0 0 .3rem; font-size: .95rem; }
.lag-medlemmer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.lag-medlemmer li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem .5rem;
    background: #f6f8fa; border-radius: 4px; }
.lag-medlemmer .lag-fjern { padding: 0 .5rem; line-height: 1.4; }
.lagkontroll { margin: .4rem 0 0; }
.lagkontroll-ok { color: #1a7f37; }
.lag-kandidater { max-height: 32vh; }
table.fjernede-lag td { vertical-align: middle; }
.tidsplan-matte tr.pause td { font-style: italic; }
.bruksanvisning { max-width: 64rem; }
.bruksanvisning h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.bruksanvisning p, .bruksanvisning ul { margin: 0 0 .5rem; line-height: 1.5; }
.bruksanvisning ul { padding-left: 1.2rem; }
/* Sidene fra wikien (IFK-MILJ-09) har også nummererte lister, tabeller og kode */
.wiki ol { margin: 0 0 .5rem; padding-left: 1.4rem; line-height: 1.5; }
.wiki h3 { font-size: 1rem; margin: .6rem 0 .3rem; }
.wiki table { border-collapse: collapse; margin: 0 0 .6rem; background: var(--farge-kort); }
.wiki th, .wiki td { text-align: left; vertical-align: top; padding: .35rem .55rem; border: 1px solid var(--farge-ramme); }
.wiki th { background: #e9eef3; font-weight: 600; }
.wiki pre { background: #eef1f4; padding: .5rem .75rem; border-radius: var(--radius); overflow-x: auto; }
.wiki pre code { background: none; padding: 0; }
.wiki-kilde { font-size: .85rem; margin: .25rem 0 0; }

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

@media (max-width: 800px) {
    .topplinje { flex-wrap: wrap; gap: .5rem; }
    .hovedmeny { order: 3; width: 100%; overflow-x: auto; }
    .innhold { padding: .75rem; }
    .parameter .etikett { flex-basis: 100%; width: auto; }
    .parameter > label { flex: 1 1 100%; flex-wrap: wrap; }
}

/* --- Redigeringen (Plan_M3) ---
   Dialogene for klassen og begrunnelsen ligger over siden, så innholdet flytter seg ikke (beslutning 5). Klassecellen i
   «Utøvere» er en knapp med samme gule farge og ramme som feltene i de redigerbare cellene (FK-GRID-07). */
.dialog-bakgrunn {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 1rem;
    background: rgba(15, 23, 42, .35);
}
.dialog {
    box-sizing: border-box;
    width: min(42rem, 100%);
    max-height: 84vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.dialog h2 { margin: 0; }
.dialog-tekst { margin: 0; color: #4b5563; }
.dialog-felt { display: flex; flex-direction: column; gap: .25rem; margin: 0; }
.dialog-felt input, .dialog-felt textarea { box-sizing: border-box; width: 100%; font: inherit; padding: .35rem .5rem; }
.dialog-knapper { justify-content: flex-end; margin: 0; }
.klassevelger-liste {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    max-height: 50vh;
    overflow: auto;
    padding: .25rem;
    border: 1px solid #d0d7de;
    border-radius: var(--radius);
}
.klassevelger-liste h3 { margin: .5rem .25rem .15rem; font-size: .85rem; }
.klassevelger-liste h3.ulovlige { color: #8a4b00; }
.klassevalg {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    width: 100%;
    padding: .35rem .5rem;
    font: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}
.klassevalg:hover, .klassevalg:focus { background: #eef4ff; border-color: #b6ccff; outline: none; }
.klassevalg.naa { background: #fffde6; }
.klassevalg-vurdering { font-size: .85rem; color: #8a4b00; }
.klassevalg-merke { margin-left: .4rem; padding: 0 .35rem; font-size: .8rem; border-radius: 3px; background: #e5e7eb; }
.celle-knapp {
    box-sizing: border-box;
    width: 100%;
    min-width: 4.5rem;
    margin: 0;
    padding: .05rem .3rem;
    font: inherit;
    text-align: left;
    color: inherit;
    background-color: #fffde6;
    border: 2px solid #d9cf73;
    border-radius: 3px;
    cursor: pointer;
}
.celle-knapp:hover, .celle-knapp:focus { background-color: #fff; border-color: #1f6feb; outline: none; }

/* --- Beslutningene (FK-BES-02/03, AV-100) og masseflyttingen (FK-RED-03/04) ---
   Forklaringen er en av standardtekstene eller en egen tekst. Masseflyttingen har to lister side om side med ← og → mellom,
   og svaret står på en fast plass under listene med plass til to linjer, så listene ikke flytter seg (beslutning 5).
   Klasselista over hver liste ligger over innholdet når den er åpen. */
.forklaringvelger {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    padding: .4rem .75rem .6rem;
    border: 1px solid #d0d7de;
    border-radius: var(--radius);
}
.forklaringvelger legend { padding: 0 .3rem; font-weight: 600; font-size: .9rem; }
.forklaringsvalg { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.forklaringvelger textarea { box-sizing: border-box; width: 100%; margin-top: .2rem; font: inherit; padding: .35rem .5rem; resize: vertical; }
.forklaringvelger textarea:disabled { background: #f6f8fa; }
.dialog.masseflytting { width: min(84rem, 100%); max-height: 90vh; }
.dialog.masseflytting:focus { outline: none; }
.dialog-bakgrunn:has(.masseflytting) { padding-top: 4vh; }

/* --- Ny generering og ny import med endringene (Plan_M3, inkrement 6) ---
   Dialogen før genereringen (FK-GEN-04) og lista over endringene i appen, som også står på importsiden (FK-IMP-08). Lista ruller
   i sin egen boks, så dialogen og siden ikke vokser med den. */
.dialog.genereringsdialog { width: min(60rem, 100%); }
.endringsliste { overflow: auto; border: 1px solid #d0d7de; border-radius: var(--radius); }
.endringsliste table { width: 100%; margin: 0; }
.endringsliste thead th { position: sticky; top: 0; background: #f6f8fa; }
.endringsliste tr.konflikt td { background: #fff4e5; }
.endringsliste tr.gaar-tapt td { background: #fdecec; }
.endringsliste-grunn { display: block; color: #4b5563; font-size: .9rem; }
.endringsliste-konflikt { margin-left: .4rem; padding: 0 .35rem; border-radius: .25rem; background: #8a4b00; color: #fff; font-size: .8rem; }
.endringer-ved-import h4 { margin: .75rem 0 .35rem; }
.tabell-tabell .trekk-paa-nytt { padding: .1rem .6rem; font-size: .9rem; }
.masseflytting-lister { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: start; }
.masseflytting-liste { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.masseflytting-tom { margin: .5rem .25rem; }
.masseflytting-knapper { display: flex; flex-direction: column; gap: .6rem; align-self: center; }
.masseflytting-knapper .knapp { min-width: 3rem; font-size: 1.3rem; line-height: 1; padding: .35rem .6rem; }
.masseflytting-melding {
    box-sizing: border-box;
    min-height: 2.9rem;
    margin: 0;
    padding: .4rem .7rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
}
.klassesok { position: relative; }
.klassesok-knapp {
    box-sizing: border-box;
    width: 100%;
    padding: .4rem .6rem;
    font: inherit;
    text-align: left;
    color: inherit;
    background: #fffde6;
    border: 2px solid #d9cf73;
    border-radius: var(--radius);
    cursor: pointer;
}
.klassesok-knapp:hover, .klassesok-knapp:focus { background: #fff; border-color: #1f6feb; outline: none; }
.klassesok-bakteppe { position: fixed; inset: 0; z-index: 1001; }
.klassesok-panel {
    position: absolute;
    top: calc(100% + .2rem);
    left: 0;
    right: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.klassesok-panel input { box-sizing: border-box; width: 100%; font: inherit; padding: .35rem .5rem; }
.klassesok-liste { display: flex; flex-direction: column; gap: .1rem; max-height: 40vh; overflow: auto; }
.beslutningsknapper { display: flex; flex-wrap: wrap; gap: .3rem; }
.beslutningsknapper .knapp { padding: .15rem .55rem; }
.klasser-paa-ringen { margin: 0 0 .75rem; }
.klasser-paa-ringen > summary { cursor: pointer; font-weight: 600; margin-bottom: .4rem; }
.klasser-paa-ringen-tekst { margin: 0 0 .4rem; }

/* --- Historikken og samtidige brukere (Plan_M3, inkrement 7) ---
   «Angre» står til høyre på versjonslinja, og varslene i tittellinjen. Historikken er en dialog over siden, så innholdet
   flytter seg ikke (beslutning 5). */
.versjonslinje-hoyre { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.angre-knapp { padding: .2rem .7rem; }
.dialog.historikk-dialog { width: min(72rem, 100%); max-height: 88vh; }
.dialog.historikk-dialog:focus { outline: none; }
.dialog-bakgrunn:has(.historikk-dialog) { padding-top: 5vh; }
.historikk-fakta { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: 0; }
.historikk-fakta dt { font-weight: 600; }
.historikk-fakta dd { margin: 0; }
.historikk-netto { font-weight: 600; }
.historikk-innveiing { margin: 0; padding: .5rem .75rem; background: #f6f8fa; border-radius: var(--radius); }
.historikk-innveiing h3 { margin: 0 0 .3rem; font-size: 1rem; }
.historikk-tabell tr.angret td { color: var(--farge-dempet); text-decoration: line-through; }
.endringsoversikt-valg { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .75rem; }
.endringsoversikt-valg .valgknapper { display: flex; gap: .3rem; }
.endringsoversikt-valg .valgknapper .aktiv { background: var(--farge-primaer); border-color: var(--farge-primaer); color: #fff; }
.endringsoversikt-valg label { display: flex; flex-direction: row; align-items: center; gap: .4rem; margin: 0; }
.endringsoversikt-valg input[type="datetime-local"] { flex: none; width: 13.5rem; }
.brodsmule-klasse { margin: 0 0 .5rem; }
.historikk-knapp { padding: .1rem .5rem; }

/* --- Kontroll (FK-KAMP-16/17, FK-POOM-12) ---
   Merket med antall avvik står over hjørnet på fanen «Kontroll», utenfor flyten, så menyen og innholdet ikke flytter seg når
   det kommer eller endres (beslutning 5). Kontrollene med avvik er røde, og de som er OK, grønne. */
.underfane-med-merke { position: relative; display: inline-flex; }
.avviksmerke {
    position: absolute; top: -.55rem; right: -.5rem; z-index: 1;
    min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px;
    background: var(--farge-feil); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.2rem; text-align: center;
    box-shadow: 0 0 0 2px var(--farge-flate); pointer-events: none;
}
.kontroll-sammendrag { margin: 0 0 .75rem; font-weight: 600; }
.kontroll-sammendrag.har-avvik { color: var(--farge-feil); }
.kontroll-sammendrag.uten-avvik { color: var(--farge-ok); }
.tabell-tabell td.kontroll-ok { color: var(--farge-ok); font-weight: 600; }
.kontroll-avviksrad { --rad-farge: #fbe3e1; }
.kontroll-lenker { display: flex; flex-wrap: wrap; gap: .2rem .75rem; }
.kontroll-lenker a, a.regel { white-space: nowrap; }
.aldersklasser .tabell-tabell td.grense-endret { box-shadow: inset 0 0 0 2px #d97706; }
.klubber-uten-sted { margin-top: .5rem; }

/* --- Legge til og fjerne utøvere (FK-RED-05/06, Plan_M3 inkrement 5) ---
   Vinduet for en ny utøver ligger over siden, som de andre vinduene (beslutning 5). Klasselista ruller i en boks med fast
   høyde, og klassen som er valgt, kontrollene og feilen står på faste plasser, så vinduet ikke hopper når man søker, velger
   eller skriver. «Vis fjernede» står i verktøylinja over tabellen. */
.dialog.ny-utover { width: min(48rem, 100%); max-height: 92vh; }
.dialog.ny-utover:focus { outline: none; }
.dialog-bakgrunn:has(.ny-utover) { padding-top: 3vh; }
.ny-utover-klasse { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: .4rem .75rem .6rem;
    border: 1px solid #d0d7de; border-radius: var(--radius); }
.ny-utover-klasse legend { padding: 0 .3rem; font-weight: 600; font-size: .9rem; }
.ny-utover-klasse input[type=search] { box-sizing: border-box; width: 100%; font: inherit; padding: .35rem .5rem; }
.ny-utover-valgt { margin: 0; height: 2.8em; line-height: 1.4; overflow: auto; }
.ny-utover-klasser { height: 26vh; max-height: 26vh; }
.ny-utover-kontroller { box-sizing: border-box; height: 4.6rem; overflow: auto; margin: 0; padding: .35rem .7rem; font-size: .9rem;
    border: 1px solid #d0d7de; border-radius: var(--radius); background: #f6f8fa; }
.ny-utover-kontroller p { margin: 0; }
.ny-utover-kontroller ul { margin: 0; padding-left: 1.1rem; color: #8a4b00; }
.ny-utover-feil { min-height: 1.4em; margin: 0; color: var(--farge-feil); font-weight: 600; }
/* «Vis fjernede (n)» er en avkrysning i verktøylinja, på linje med knappene (label er ellers en kolonne med luft under). */
.tabell-valg { display: inline-flex; flex-direction: row; align-items: center; gap: .3rem; margin: 0; font-weight: 400; cursor: pointer; }
/* Knappene sidene legger i verktøylinja (Tabell.Verktoy), f.eks. «Ny utøver», «Legg til pauserad …» og «Nytt lag …», ser ut som
   knappene i tabellen. Stilen i Tabell.razor.css gjelder bare elementene tabellen lager selv. */
.tabell-verktoy .tabell-knapp { padding: .2rem .6rem; border: 1px solid var(--tabell-ramme, #c8ccd2); border-radius: 3px; background: #fff;
    color: inherit; font: inherit; cursor: pointer; }
.tabell-verktoy .tabell-knapp:hover:not(:disabled) { background: var(--tabell-hover, #f3f7fc); }