/* site.css — fælles komponent- og sidestilarter.
   Farver, form og typografi kommer fra tokens.css; denne fil må ikke
   indeholde hex-værdier til brand-, tekst-, baggrunds- eller kantfarver
   (DESIGNSYSTEM_PLAN.md, etape 1). */

/* Rod-skala: kompakt på mobil (87,5 % ≈ 14px ved standard), fuld størrelse
   fra 768px. PROCENT, ikke px (Lars, 20/7): en fast px-rod tilsidesatte
   brugerens skriftstørrelses-indstilling — tekst i appen skal følge den. */
html {
  font-size: 87.5%;
}

/* iOS respekterer ikke skriftindstillinger for web-tekst, medmindre siden
   melder sig til: font-genvejen -apple-system-body giver roden telefonens
   Dynamic Type-størrelse (17px ved standard, større/mindre efter brugerens
   Tekststørrelse). Kun på mobil — desktop beholder sin tæthed. Barlow
   genindsættes af Bootstraps body-regel via --bs-body-font-family. */
@media (max-width: 767.98px) {
  @supports (font: -apple-system-body) {
    html {
      font: -apple-system-body;
    }
  }
}

/* Begrænser indholdets bredde på meget brede skærme */
.page-wrapper {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
  html {
    font-size: 100%;
  }
}

/* Fælles slet-knap stil – nowrap sikrer ikon og tekst altid på samme linje */
.btn-slet {
    white-space: nowrap;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ── Mærket (_BrandHeader) ──────────────────────────────────────────────── */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.brand-mark svg {
    flex-shrink: 0;
}

.brand-mark-tekst {
    font-weight: 700;
    letter-spacing: -.015em;
}

/* ── Neutral zone (marketing, signup, legal) ────────────────────────────── */
/* Lå tidligere i en inline-blok i _NeutralLayout — flyttet hertil, så
   salgsfladen bruger samme designsystem som produktet. */
.neutral-hero {
    background: linear-gradient(160deg, var(--bp-indigo-600) 0%, var(--bp-indigo-900) 100%);
    color: var(--bp-text-on-brand);
}

.neutral-hero a.btn-light {
    color: var(--bp-brand-active);
    font-weight: 600;
}

.neutral-zone main {
    min-height: 60vh;
}

.legal-content h1 { font-size: 1.6rem; }
.legal-content h2 { font-size: 1.25rem; margin-top: 1.5rem; }

.legal-content blockquote {
    border-left: 4px solid var(--bp-warning);
    padding-left: 1rem;
    color: var(--bp-warning-text);
    background: var(--bp-warning-bg);
}

/* ── Tom-tilstand (admin) ───────────────────────────────────────────────── */
/* Fælles komponent (etape 3 / katalog-B5) — se _TomTilstand.cshtml. */
.tom-tilstand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: var(--bp-bg-subtle);
    color: var(--bp-text-secondary);
}

.tom-tilstand-ikon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--bp-text-muted);
    margin-bottom: .75rem;
}

.tom-tilstand-overskrift {
    font-size: var(--bp-text-lg);
    font-weight: var(--bp-weight-bold);
    color: var(--bp-text-primary);
    margin: 0 0 .35rem;
}

.tom-tilstand-forklaring {
    max-width: 34rem;
    margin: 0 0 1.25rem;
    font-size: var(--bp-text-sm);
}

.tom-tilstand-forklaring:last-child {
    margin-bottom: 0;
}

/* ── Prisliste ──────────────────────────────────────────────────────────── */
.pris-liste li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .15rem 0;
}

.pris-liste .bi {
    flex-shrink: 0;
    color: var(--bp-success);
}

/* ── Hero-illustration: spilleplan-eksemplet ────────────────────────────── */
/* Bruger sp-tid-klasserne på rækkerne, så illustrationen og den rigtige plan
   ikke kan komme til at vise hver sit farvesystem. */
.spilleplan-eksempel {
    background: var(--bp-bg-card);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow-card);
    overflow: hidden;
    color: var(--bp-text-primary);
}

.spilleplan-eksempel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--bp-border-subtle);
}

.spilleplan-eksempel-titel {
    font-weight: 700;
    letter-spacing: -.01em;
}

.spilleplan-eksempel-maerkat {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bp-text-secondary);
    background: var(--bp-bg-sunken);
    border-radius: var(--bp-radius-pill);
    padding: .12rem .55rem;
}

.spilleplan-eksempel-tabel {
    width: 100%;
    font-size: .82rem;
    border-collapse: collapse;
}

.spilleplan-eksempel-tabel th {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
    padding: .5rem .6rem .35rem;
    text-align: left;
}

.spilleplan-eksempel-tabel td {
    padding: .32rem .6rem;
    border-top: 1px solid rgba(255, 255, 255, .7);
}

.spilleplan-eksempel-tid {
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.spilleplan-eksempel-fod {
    margin: 0;
    padding: .6rem 1rem .7rem;
    border-top: 1px solid var(--bp-border-subtle);
    font-size: .76rem;
    color: var(--bp-text-secondary);
}

/* ── Kamp-matrix ────────────────────────────────────────────────────────── */
.kamp-matrix {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.kamp-matrix td, .kamp-matrix th {
    border: 1px solid var(--bp-border);
    padding: 2px 4px;
    text-align: center;
}

.kamp-matrix td.kamp-stat-col {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    white-space: nowrap;
}

.kamp-matrix .top-border {
    border-top: 2px solid var(--bp-text-primary);
}

.kamp-matrix .bottom-border {
    border-bottom: 2px solid var(--bp-text-primary);
}

.kamp-matrix .row-sep {
    border-bottom: 2px solid var(--bp-danger);
}

.kamp-matrix .left-border {
    border-left: 2px solid var(--bp-text-primary);
}

.kamp-matrix .right-border {
    border-right: 2px solid var(--bp-text-primary);
}

.kampberegning-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1em;
    gap: 2em;
}

.kampberegning-radiogroup {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 220px;
}

.kampberegning-radiogroup label {
    margin-bottom: 0.3em;
    white-space: nowrap;
}

/* Den klæbende handlingskolonne (.tabel-handling-kolonne /
   .medlem-actions-sticky) er FJERNET 21/7-2026: mønsteret gjorde tabellen bred
   og skjulte rækkerne bag en uigennemsigtig kant. Rækkehandlinger ligger nu i
   en kebab-menu i en almindelig smal kolonne — se ADMIN_UI_STANDARD.md. */

/* Lange fritekst-kolonner i datatabeller (e-mail, fulde navne, nøgler):
   afkortes med ellipsis, så én lang værdi ikke trækker tabellen bred — hele
   værdien ligger i title. Se ADMIN_UI_STANDARD.md, "Bredde". */
.kol-fritekst {
    max-width: 18rem;
}

/* Redigeringstilstand (inline-redigering på de sider der endnu har den) */
tr.editing-row {
    background-color: var(--bp-brand-subtle) !important;
    border: 3px solid var(--bp-brand) !important;
    box-shadow: 0 0 15px rgba(var(--bp-brand-rgb), 0.3);
}

tr.editing-row td {
    border-color: var(--bp-brand) !important;
}

/* Hover-effekt på tabelrækker, så de er tydeligere at ramme */
.table-hover tbody tr:hover:not(.editing-row) {
    background-color: var(--bp-bg-subtle) !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* ── Indlæsningsoverlay for AJAX-handlinger ─────────────────────────────── */
.ajax-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.ajax-loading::after {
    content: attr(data-loading-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--bp-text-on-brand);
    padding: 10px 20px;
    border-radius: var(--bp-radius-sm);
    font-weight: bold;
    z-index: 1000;
}

/* ── Spillerbadges: kønsfarver ──────────────────────────────────────────── */
.badge-mand, .badge-kvinde, .badge-neutral {
    border-radius: 0.4em;
    padding: 2px 6px;
    font-size: 0.85em;
    display: inline-block;
    color: var(--bp-text-on-brand);
}

.badge-mand    { background-color: var(--bp-koen-mand); }
.badge-kvinde  { background-color: var(--bp-koen-kvinde); }
.badge-neutral { background-color: var(--bp-text-secondary); }

/* Kamp der gentages i løbet af aftenen (samme 4 spillere mod hinanden) */
.kamp-repeated { outline: 3px solid var(--bp-kamp-gentag); }

/* Kamp med 3 spillere der er på bane sammen igen (trio-gentag) */
.kamp-trio-repeated { outline: 3px dashed var(--bp-kamp-trio); }

/* Label under kampen der viser hvilke spillere der går igen */
.trio-repeat-label {
    font-size: 0.8em;
    color: var(--bp-brand-active);
    padding: 2px 4px;
    line-height: 1.4;
    word-break: break-word;
    display: block;
}

/* Kvitteringsanimation */
@keyframes successFlash {
    0% { background-color: var(--bp-success-bg); }
    100% { background-color: transparent; }
}

.row-success-flash {
    animation: successFlash 1s ease;
}

/* -------------------------------------------------- */
/* Section fieldset - collapsible bordered section     */
/* Fælles styling for alle afgrænsede sektioner       */
/* -------------------------------------------------- */
.section-fieldset {
    border: 1px solid var(--bp-border);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
    padding: 0;
}

.section-fieldset legend,
.section-legend {
    float: none;
    width: auto;
    padding: 0 0.5rem;
    margin-left: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

/* ── Kampplan (spilleplan): knap-badges i datokort ───────────────────── */
.badge-mine-kampe { background: var(--bp-tid-0); color: #0369a1; }
.badge-spilleplan { background: var(--bp-tid-2); color: var(--bp-warning-text); }

/* ── Kampplan: tidspunkt-farvepalette (8 farver, cyklisk) ─────────────── */
/* Selve farverne er tokens (--bp-tid-0..7) — produktets signatur, jf.
   DESIGNSYSTEM_PLAN.md. Her bindes de blot til tabelklasserne.
   --bs-table-bg sættes også: fra Bootstrap 5.2+ maler cellerne deres egen
   baggrund via variablen og skjuler ellers rækkens farve. */
.sp-tid-0 { background-color: var(--bp-tid-0); --bs-table-bg: var(--bp-tid-0); }
.sp-tid-1 { background-color: var(--bp-tid-1); --bs-table-bg: var(--bp-tid-1); }
.sp-tid-2 { background-color: var(--bp-tid-2); --bs-table-bg: var(--bp-tid-2); }
.sp-tid-3 { background-color: var(--bp-tid-3); --bs-table-bg: var(--bp-tid-3); }
.sp-tid-4 { background-color: var(--bp-tid-4); --bs-table-bg: var(--bp-tid-4); }
.sp-tid-5 { background-color: var(--bp-tid-5); --bs-table-bg: var(--bp-tid-5); }
.sp-tid-6 { background-color: var(--bp-tid-6); --bs-table-bg: var(--bp-tid-6); }
.sp-tid-7 { background-color: var(--bp-tid-7); --bs-table-bg: var(--bp-tid-7); }

.sp-tid-border-0 { border-left: 3px solid var(--bp-tid-0); }
.sp-tid-border-1 { border-left: 3px solid var(--bp-tid-1); }
.sp-tid-border-2 { border-left: 3px solid var(--bp-tid-2); }
.sp-tid-border-3 { border-left: 3px solid var(--bp-tid-3); }
.sp-tid-border-4 { border-left: 3px solid var(--bp-tid-4); }
.sp-tid-border-5 { border-left: 3px solid var(--bp-tid-5); }
.sp-tid-border-6 { border-left: 3px solid var(--bp-tid-6); }
.sp-tid-border-7 { border-left: 3px solid var(--bp-tid-7); }

/* text-secondary, ikke text-muted: 4,76:1 mod hvid (AA) — muted er 2,56 og
   fejler WCAG for tekst i denne størrelse (etape 4-kontrasttjek). */
.sp-tid-text { color: var(--bp-text-secondary); font-size: .75rem; }
.sp-row-even { background-color: var(--bp-bg-card); --bs-table-bg: var(--bp-bg-card); }
.sp-row-odd  { background-color: var(--bp-bg-subtle); --bs-table-bg: var(--bp-bg-subtle); }