/* ──────────────────────────────────────────
   FFK Akademi — designsystem
   Mørkt tema med FFK-rød som aksent.
   Prinsipper: rolig flatedesign, hårfine kantlinjer,
   rød brukes kun på primærhandlinger og aktiv navigasjon.
   ────────────────────────────────────────── */

:root {
    color-scheme: dark;

    --ffk-red: #D62933;
    --ffk-red-hover: #b92028;
    --ffk-red-text: #f26d75;

    --bg: #0e0f11;
    --bg-sidebar: #131417;
    --bg-card: #16181b;
    --bg-elevated: #1d2024;
    --bg-hover: #1a1d21;

    --border: #24272c;
    --border-strong: #33373e;

    --text: #e8eaed;
    --text-secondary: #9aa0a8;
    --text-muted: #7d848e; /* ≥ 4,5:1 mot kortbakgrunn (WCAG AA) */

    --radius-lg: 12px;
    --radius: 8px;
    --radius-sm: 6px;

    --focus-ring: 0 0 0 3px rgba(214, 41, 51, 0.35);

    /* Spillerstatus */
    --status-frisk: #34c77b;
    --status-syk: #4da3e8;
    --status-annet: #98a0ad;
    --status-redusert: #f2a33c;
    --status-skadet: #f0545e;

    /* Økttyper og aktiviteter */
    --type-fotball: #e04851;
    --type-styrke: #8b7cf0;
    --type-kamp: #e3b341;
    --type-treningskamp: #c8cdd4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden-attributtet skal alltid vinne — author-regler som setter display
   (f.eks. .chip-row { display: flex }) overstyrer ellers UA-stilarket. */
[hidden] { display: none !important; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: rgba(214, 41, 51, 0.35); }

/* Ikoner (inline SVG-sprite i base.html) */
.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-sm { width: 15px; height: 15px; }

/* Synlig fokus for tastaturnavigasjon */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ──────────────────────────────────────────
   Layout: sidebar + innhold
   ────────────────────────────────────────── */

.app {
    display: flex;
    min-height: 100dvh;
}

.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.sidebar-brand img { height: 34px; width: auto; }

.sidebar-brand-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.25;
}

.sidebar-brand-sub {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sidebar-nav {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: background 0.12s, color 0.12s;
}

.sidebar-nav a:hover { background: var(--bg-hover); color: var(--text); }

.sidebar-nav a.active {
    background: rgba(214, 41, 51, 0.12);
    color: var(--text);
}

.sidebar-nav a.active .icon { color: var(--ffk-red-text); }

.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-user { min-width: 0; }

.sidebar-user .user-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user .user-role {
    font-size: 11px;
    color: var(--text-muted);
}

.logout-form button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

.logout-form button:hover { border-color: var(--border-strong); color: var(--text); }

.main {
    flex: 1;
    min-width: 0;
    padding: 28px 32px 48px;
    max-width: 1240px;
}

/* Mobil: sidebar blir toppmeny */
@media (max-width: 800px) {
    .app { flex-direction: column; }
    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-brand { padding: 14px 16px; border-bottom: none; }
    .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 10px 10px;
        scrollbar-width: none;
    }
    .sidebar-nav::-webkit-scrollbar { display: none; }
    .sidebar-nav a { white-space: nowrap; padding: 8px 11px; }
    .sidebar-footer { padding: 10px 16px; }
    .main { padding: 20px 16px 40px; }
}

/* ──────────────────────────────────────────
   Sidehoder
   ────────────────────────────────────────── */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-subtitle { font-size: 13.5px; color: var(--text-secondary); margin-top: 4px; }

.page-subtitle a { color: inherit; }

.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ──────────────────────────────────────────
   Kort og seksjoner
   ────────────────────────────────────────── */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.card-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }

@media (max-width: 800px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .grid-6 { grid-template-columns: repeat(2, 1fr); }
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat-value.frisk    { color: var(--status-frisk); }
.stat-value.syk      { color: var(--status-syk); }
.stat-value.annet    { color: var(--status-annet); }
.stat-value.redusert { color: var(--status-redusert); }
.stat-value.skadet   { color: var(--status-skadet); }

.stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.9px;
    margin-top: 4px;
}

/* ──────────────────────────────────────────
   Lagkort
   ────────────────────────────────────────── */

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

.span-all { grid-column: 1 / -1; }

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.12s, background 0.12s;
}

.team-card:hover { border-color: var(--border-strong); background: var(--bg-hover); }

.team-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.team-card-name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--text);
}

.team-card-chevron { color: var(--text-muted); }
.team-card:hover .team-card-chevron { color: var(--text); }

.team-card-meta {
    font-size: 13px;
    color: var(--text-secondary);
    min-height: 1.5em;
}

.team-card-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.team-card-stat-value { font-weight: 700; color: var(--text); font-size: 15px; }

.team-card-actions {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ──────────────────────────────────────────
   Tabeller
   ────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

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

table.data th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--text-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.data td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--bg-hover); }

/* Posisjonsskiller i spilleroversikten: liten tittel med hårfin strek */
table.data tr.pos-divider td {
    padding: 16px 0 5px;
    border-bottom: none;
}

table.data tbody tr.pos-divider:hover td { background: none; }

table.data tr.pos-divider:first-child td { padding-top: 4px; }

.pos-divider-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--text-muted);
}

.pos-divider-inner::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Klikkbare rader og kort (JS i base.html navigerer til data-href) */
[data-href] { cursor: pointer; }

table.data td:first-child, table.data th:first-child { padding-left: 0; }
table.data td:last-child, table.data th:last-child { padding-right: 0; }

table.data a { color: var(--text); text-decoration: none; font-weight: 600; }
table.data a:hover { color: var(--ffk-red-text); }

.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions form { display: inline; }

/* ──────────────────────────────────────────
   Merker (status, roller, økttyper)
   ────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 2.5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge-frisk    { color: var(--status-frisk);    background: rgba(52, 199, 123, 0.1);  border-color: rgba(52, 199, 123, 0.25); }
.badge-syk      { color: var(--status-syk);      background: rgba(77, 163, 232, 0.1);  border-color: rgba(77, 163, 232, 0.25); }
.badge-annet    { color: var(--status-annet);    background: rgba(152, 160, 173, 0.1); border-color: rgba(152, 160, 173, 0.3); }
.badge-redusert { color: var(--status-redusert); background: rgba(242, 163, 60, 0.1);  border-color: rgba(242, 163, 60, 0.25); }
.badge-delvis   { color: var(--status-redusert); background: rgba(242, 163, 60, 0.1);  border-color: rgba(242, 163, 60, 0.25); }
.badge-skadet   { color: var(--status-skadet);   background: rgba(240, 84, 94, 0.1);   border-color: rgba(240, 84, 94, 0.25); }

/* Nøytralt merke — roller, deaktivert o.l. */
.badge-neutral {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

/* Admin-rolle — diskret brandfarge */
.badge-admin {
    color: var(--ffk-red-text);
    background: rgba(214, 41, 51, 0.12);
    border-color: rgba(214, 41, 51, 0.3);
}

.badge-plain::before { display: none; }

/* Økttyper */
.type-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.type-fotball      { color: var(--type-fotball);      background: rgba(224, 72, 81, 0.1);   border-color: rgba(224, 72, 81, 0.3); }
.type-styrke       { color: var(--type-styrke);       background: rgba(139, 124, 240, 0.1); border-color: rgba(139, 124, 240, 0.3); }
.type-kamp         { color: var(--type-kamp);         background: rgba(227, 179, 65, 0.1);  border-color: rgba(227, 179, 65, 0.3); }
.type-treningskamp { color: var(--type-treningskamp); background: rgba(200, 205, 212, 0.08); border-color: rgba(200, 205, 212, 0.3); }

/* ──────────────────────────────────────────
   Skjema
   ────────────────────────────────────────── */

.form-card { max-width: 560px; }

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ffk-red);
    box-shadow: var(--focus-ring);
}

.field textarea { resize: vertical; min-height: 96px; }

.field .help { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.field .error { font-size: 12.5px; color: var(--ffk-red-text); margin-top: 5px; }

/* Kompakt select/input i tabeller og verktøylinjer */
.select-inline,
.input-inline {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    padding: 6px 9px;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.select-inline:focus,
.input-inline:focus {
    outline: none;
    border-color: var(--ffk-red);
    box-shadow: var(--focus-ring);
}

/* Avkryssingslister (CheckboxSelectMultiple). Django >= 4 rendrer
   <div id="id_…"><div><label><input></label></div>…</div> — ikke <ul>. */
.field div[id^="id_"] > div { margin-bottom: 2px; }
.field div[id^="id_"] label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 0;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
}
.field div[id^="id_"] label:hover { background: var(--bg-hover); }
.field input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--ffk-red);
}

.form-errors {
    background: rgba(240, 84, 94, 0.08);
    border: 1px solid rgba(240, 84, 94, 0.35);
    border-radius: var(--radius);
    color: var(--ffk-red-text);
    font-size: 13.5px;
    padding: 11px 14px;
    margin-bottom: 16px;
}

.form-actions { display: flex; gap: 8px; margin-top: 20px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────
   Aktivitetsskjema — typekort, hurtigvalg og forhåndsvisning
   ────────────────────────────────────────── */

.session-editor {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(250px, 330px);
    gap: 16px;
    align-items: start;
}

.session-editor-side { position: sticky; top: 24px; }

@media (max-width: 1000px) {
    .session-editor { grid-template-columns: minmax(0, 560px); }
    .session-editor-side { position: static; }
}

/* Typevelger — fargede radio-kort, samme mønster som statusvelgeren.
   Selektoren .type-options .type-option må slå .field label (kortene
   ligger i en .field, som ellers gjør dem om til block uten prikk). */
.type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.type-options .type-option {
    flex: 1 1 auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    margin-bottom: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.type-option::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.type-option-fotball::before      { background: var(--type-fotball); }
.type-option-styrke::before       { background: var(--type-styrke); }
.type-option-kamp::before         { background: var(--type-kamp); }
.type-option-treningskamp::before { background: var(--type-treningskamp); }
.type-option-import::before { background: var(--text-secondary); }

.type-options .type-option:hover { border-color: #454a52; color: var(--text); }

.type-option-check { display: none; }

.type-options input:checked + .type-option .type-option-check { display: block; }
.type-options input:checked + .type-option::before { display: none; }

/* Fotball bruker lysere tekst enn --type-fotball: 4,5:1+ mot tonet bakgrunn (WCAG AA) */
.type-options input:checked + .type-option-fotball      { color: #e8656d;                  background: rgba(224, 72, 81, 0.1);   border-color: rgba(224, 72, 81, 0.35); }
.type-options input:checked + .type-option-styrke       { color: var(--type-styrke);       background: rgba(139, 124, 240, 0.1); border-color: rgba(139, 124, 240, 0.35); }
.type-options input:checked + .type-option-kamp         { color: var(--type-kamp);         background: rgba(227, 179, 65, 0.1);  border-color: rgba(227, 179, 65, 0.35); }
.type-options input:checked + .type-option-treningskamp { color: var(--type-treningskamp); background: rgba(200, 205, 212, 0.08); border-color: rgba(200, 205, 212, 0.35); }
.type-options input:checked + .type-option-import { color: var(--text); background: rgba(154, 160, 168, 0.1); border-color: rgba(154, 160, 168, 0.4); }

.type-options input:focus-visible + .type-option { box-shadow: var(--focus-ring); }

/* Omfangsvelger — gruppeøkt vs. individuell økt, samme kortmønster.
   Scopes som .type-options for å slå .field label (se kommentaren over). */
.scope-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scope-options .scope-option {
    flex: 1 1 auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    margin-bottom: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.scope-option::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.scope-option-gruppe::before      { background: var(--status-frisk); }
.scope-option-individuell::before { background: var(--status-syk); }

.scope-options .scope-option:hover { border-color: #454a52; color: var(--text); }

.scope-option-check { display: none; }

.scope-options input:checked + .scope-option .scope-option-check { display: block; }
.scope-options input:checked + .scope-option::before { display: none; }

.scope-options input:checked + .scope-option-gruppe      { color: var(--status-frisk); background: rgba(52, 199, 123, 0.1);  border-color: rgba(52, 199, 123, 0.35); }
.scope-options input:checked + .scope-option-individuell { color: var(--status-syk);   background: rgba(77, 163, 232, 0.1);  border-color: rgba(77, 163, 232, 0.35); }

.scope-options input:focus-visible + .scope-option { box-shadow: var(--focus-ring); }

/* Deltakerliste for individuelle økter */
.participant-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    padding: 6px;
}

.participant-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.participant-option:hover { background: var(--bg-hover); }

.participant-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--ffk-red);
}

/* Hurtigvalg-chips for dato, tid og varighet */
.chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.chip-row-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-right: 2px;
}

.chip {
    appearance: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    padding: 4px 11px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.chip:hover:not(:disabled) { border-color: #454a52; color: var(--text); }

.chip:disabled { opacity: 0.5; cursor: default; }

.chip.active {
    color: var(--ffk-red-text);
    background: rgba(214, 41, 51, 0.12);
    border-color: rgba(214, 41, 51, 0.35);
}

/* Gjentakelse: radio-chips + sluttdato for ukentlige serier */
.repeat-options { display: flex; flex-wrap: wrap; gap: 6px; }
.repeat-options .chip { cursor: pointer; }
.repeat-options input:checked + .chip {
    color: var(--ffk-red-text);
    background: rgba(214, 41, 51, 0.12);
    border-color: rgba(214, 41, 51, 0.35);
}
.repeat-options input:focus-visible + .chip { box-shadow: var(--focus-ring); }

.repeat-until { margin-top: 10px; }
.repeat-until label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.delete-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Chip-radene under tidsfeltene skal ligge tett på feltet over */
.field-chips { margin-top: -6px; }
.field-chips .chip-row { margin-top: 0; margin-bottom: 8px; }

/* Månedsrapport-velgeren i sidetoppen (lagsiden) */
.report-form { display: flex; gap: 8px; align-items: center; }

/* Spilleroverføring på lagsiden */
.cell-check { width: 30px; }

.cell-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--ffk-red);
    display: block;
}

.transfer-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ── Øktvedlegg: liste i skjema og på øktsiden ── */
.file-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    min-width: 0;
}

.file-item > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    min-width: 0;
}

.file-item > a:hover { color: var(--ffk-red-text); }

.file-item > a .icon { color: var(--text-muted); flex-shrink: 0; }

.file-item .small { margin-left: auto; white-space: nowrap; }

.file-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.file-remove input {
    width: 14px;
    height: 14px;
    accent-color: var(--ffk-red);
}

/* Forhåndsvisning av vedlegg (PDF/bilde) */
.file-preview-card { padding: 0; overflow: hidden; }

.file-preview-frame {
    display: block;
    width: 100%;
    /* Fyll resten av skjermen under toppteksten — PDF-er trenger plass */
    height: calc(100dvh - 210px);
    min-height: 640px;
    border: 0;
    background: var(--bg-elevated);
}

.file-preview-image {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* Forhåndsvisning — speiler øktkortet i kalenderen */
.preview-session {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--type-fotball);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.preview-session.styrke       { border-left-color: var(--type-styrke); }
.preview-session.kamp         { border-left-color: var(--type-kamp); }
.preview-session.treningskamp { border-left-color: var(--type-treningskamp); }

.preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.preview-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.preview-time {
    font-size: 21px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-top: 8px;
    line-height: 1.2;
}

.preview-time.is-empty {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.preview-name { font-size: 14px; font-weight: 600; margin-top: 2px; }

.preview-meta {
    font-size: 12.5px;
    color: var(--text-secondary); /* --text-muted gir bare 4,3:1 på --bg-elevated */
    margin-top: 6px;
}

.preview-content {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ──────────────────────────────────────────
   Knapper
   ────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.3;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn-primary { background: var(--ffk-red); color: #fff; }
.btn-primary:hover { background: var(--ffk-red-hover); }

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: #454a52; background: #23262b; }

/* Stille knapp — for gjentatte handlinger i tabellrader */
.btn-quiet {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn-quiet:hover { background: var(--bg-elevated); color: var(--text); }

.btn-danger {
    background: transparent;
    color: var(--ffk-red-text);
    border-color: rgba(214, 41, 51, 0.4);
}
.btn-danger:hover { background: rgba(214, 41, 51, 0.12); border-color: var(--ffk-red); }

.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: var(--radius-sm); }

.btn-block { display: flex; width: 100%; }

/* ──────────────────────────────────────────
   Meldinger (messages framework)
   ────────────────────────────────────────── */

.messages { margin-bottom: 20px; }

.message {
    padding: 11px 14px;
    border-radius: var(--radius);
    font-size: 13.5px;
    margin-bottom: 8px;
    border: 1px solid;
}

.message-success { background: rgba(52, 199, 123, 0.08); border-color: rgba(52, 199, 123, 0.3); color: var(--status-frisk); }
.message-info    { background: rgba(77, 163, 232, 0.08); border-color: rgba(77, 163, 232, 0.3); color: var(--status-syk); }
.message-error   { background: rgba(240, 84, 94, 0.08);  border-color: rgba(240, 84, 94, 0.3);  color: var(--status-skadet); }

/* ──────────────────────────────────────────
   Kalender (ukesvisning)
   ────────────────────────────────────────── */

.week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.week-nav .spacer { flex: 1; }

.calendar-legend {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Fargeprikker for økttype — brukes i legender, tellelinjer og øktlister */
.calendar-legend i,
.type-count-line i,
.type-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.type-dot { margin-right: 7px; }

.dot-fotball      { background: var(--type-fotball); }
.dot-styrke       { background: var(--type-styrke); }
.dot-kamp         { background: var(--type-kamp); }
.dot-treningskamp { background: var(--type-treningskamp); }

/* Visningsbytte Uke/Måned */
.view-toggle {
    display: inline-flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 2px;
    margin-left: 4px;
}

.view-toggle a {
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 4px;
}

.view-toggle a:hover { color: var(--text); }

.view-toggle a.active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Månedsvisning */
.month-grid-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.month-grid {
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

.month-grid-head { border-top: none; background: var(--bg-sidebar); }

.month-dayname,
.month-weeknum-head {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--text-muted);
}

.month-weeknum {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
}

.month-weeknum-head { border-right: 1px solid var(--border); }

.month-cell {
    min-height: 96px;
    padding: 6px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background 0.12s;
}

.month-cell:last-child { border-right: none; }
.month-cell:hover { background: var(--bg-hover); }
.month-cell.out { background: rgba(0, 0, 0, 0.25); }
.month-cell.out .month-daynum { color: var(--text-muted); opacity: 0.6; }

.month-daynum {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    align-self: flex-end;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.month-cell.today .month-daynum {
    background: var(--ffk-red);
    color: #fff;
}

.month-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 11px;
    line-height: 1.3;
    text-decoration: none;
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    transition: border-color 0.12s, color 0.12s;
}

.month-chip:hover { border-color: var(--border-strong); color: var(--text); }

.month-chip i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.month-chip-time { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.month-chip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 800px) {
    .month-grid { grid-template-columns: 28px repeat(7, minmax(0, 1fr)); }
    .month-cell { min-height: 64px; padding: 3px; }
    .month-chip-name { display: none; }
    .month-chip { padding: 2px 4px; }
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

@media (max-width: 1000px) { .calendar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .calendar-grid { grid-template-columns: 1fr; } }

.calendar-day {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

.calendar-day-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    padding: 2px 2px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.calendar-day.today { border-color: rgba(214, 41, 51, 0.55); }
.calendar-day.today .calendar-day-head { color: var(--ffk-red-text); border-bottom-color: rgba(214, 41, 51, 0.35); }

.calendar-session {
    display: block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--type-fotball);
    border-radius: var(--radius);
    padding: 8px 10px;
    margin-bottom: 6px;
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s;
}

.calendar-session:hover { border-color: var(--border-strong); background: #22252a; }

.calendar-session.styrke       { border-left-color: var(--type-styrke); }
.calendar-session.kamp         { border-left-color: var(--type-kamp); }
.calendar-session.treningskamp { border-left-color: var(--type-treningskamp); }

/* Individuelle økter: stiplet typekant skiller dem fra gruppeøktene */

.calendar-session .time { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calendar-session .name { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }
.calendar-session .meta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

.calendar-add {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 2px 0;
    border-radius: var(--radius-sm);
}

.calendar-add:hover { color: var(--text); }

.calendar-add .icon { width: 13px; height: 13px; }

/* ──────────────────────────────────────────
   Oppmøteliste
   ────────────────────────────────────────── */

.attendance-row form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* Merknadsfeltet står på samme linje som statusknappen og krymper heller
   enn å brekke raden i to. Tomt og uten fokus er det nesten usynlig, så
   lista holder seg rolig når ingen har merknad. */
.attendance-note-input {
    flex: 1 1 104px;
    width: auto;
    min-width: 72px;
    max-width: 150px;
}

.attendance-note-input:placeholder-shown:not(:focus) {
    background: transparent;
    border-color: transparent;
}

.attendance-note-input:placeholder-shown:not(:focus):hover {
    border-color: var(--border);
}

/* Endret, men ikke lagret ennå — lagre-knappen står ved siden av */
.attendance-note-input.is-endret {
    border-color: var(--ffk-red);
    color: var(--text);
}

.attendance-note-save { flex-shrink: 0; }

/* Statusendringen lagres i bakgrunnen — raden dempes til svaret er inne,
   så det synes at noe skjer på treg linje */
.attendance-row.is-lagrer { opacity: 0.5; }

/* Usynlig standardknapp: Enter i merknadsfeltet lagrer uten å endre status */
.submit-noop { display: none; }

/* Hospitanter: «fjern»-knappene står på egen linje under raden, siden
   skjemaer ikke kan ligge inni hverandre */
.attendance-row .guest-remove-form {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

/* Legg til hospitant — foldes ut under oppmøtelista */
.guest-add > summary {
    list-style: none;
    display: inline-flex;
    cursor: pointer;
}
.guest-add > summary::-webkit-details-marker { display: none; }

.guest-add-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.guest-add-form select { flex: 1 1 180px; }

/* Chip-radioene i gjesteskjemaet følger chip-mønsteret ellers */
.guest-add-form .chip-row { margin: 0; }

.guest-add-form .chip:has(input:focus-visible) {
    outline: 2px solid var(--ffk-red-text);
    outline-offset: 2px;
}

.guest-add-form .chip:has(input:checked) {
    border-color: var(--ffk-red);
    color: var(--text);
    background: rgba(214, 41, 51, 0.12);
}

.attendance-reason-select {
    flex-shrink: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12.5px;
    cursor: pointer;
}

/* Årsaksmeny: «Med»-knappen åpner valgene i egen rad under */
.reason-menu summary { list-style: none; }
.reason-menu summary::-webkit-details-marker { display: none; }

.reason-menu[open] {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.reason-menu-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.reason-option {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-color: var(--border-strong);
}
.reason-option:hover { color: var(--text); border-color: #454a52; }

.toggle-med {
    min-width: 92px;
    justify-content: center;
}

.toggle-med.is-med {
    background: rgba(52, 199, 123, 0.12);
    color: var(--status-frisk);
    border-color: rgba(52, 199, 123, 0.35);
}
.toggle-med.is-med:hover { border-color: var(--status-frisk); }

.toggle-med.is-ikke {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-strong);
}
.toggle-med.is-ikke:hover { color: var(--text); border-color: #454a52; }

.toggle-med.is-skadet {
    background: rgba(240, 84, 94, 0.08);
    color: var(--status-skadet);
    border-color: rgba(240, 84, 94, 0.3);
}
.toggle-med.is-skadet:hover { border-color: var(--status-skadet); }

.toggle-med.is-ute {
    background: rgba(152, 160, 173, 0.08);
    color: var(--status-annet);
    border-color: rgba(152, 160, 173, 0.35);
}
.toggle-med.is-ute:hover { border-color: var(--status-annet); }

.toggle-med.is-delvis {
    background: rgba(242, 163, 60, 0.1);
    color: var(--status-redusert);
    border-color: rgba(242, 163, 60, 0.35);
}
.toggle-med.is-delvis:hover { border-color: var(--status-redusert); }

.reason-option-delvis { color: var(--status-redusert); }

/* ──────────────────────────────────────────
   Spillersiden: hero, statusvelger, tidslinje, formstripe
   ────────────────────────────────────────── */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 12px;
}

.back-link:hover { color: var(--text); }

.player-hero {
    border-left: 3px solid var(--border-strong);
    display: flex;
    gap: 24px;
}

/* Portrettkolonnen: utklippet bunnjustert mot kortets innerkant,
   så spilleren «står» på kortkanten (-20px = kortets padding). */
.player-hero-photo {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    margin-bottom: -20px;
}

.player-hero-body { flex: 1; min-width: 0; }

.player-hero.st-frisk    { border-left-color: var(--status-frisk); }
.player-hero.st-syk      { border-left-color: var(--status-syk); }
.player-hero.st-annet    { border-left-color: var(--status-annet); }
.player-hero.st-redusert { border-left-color: var(--status-redusert); }
.player-hero.st-skadet   { border-left-color: var(--status-skadet); }

.player-hero-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Spillerbilde: utklippet spiller (PNG med transparent bakgrunn) vises
   uten ramme eller boks — bare spilleren, bunnjustert. Standardbildet er
   en byste-silhuett i samme stil. */
.player-photo {
    display: block;
    object-fit: contain;
    object-position: bottom center;
    flex-shrink: 0;
}

.player-photo-sm { width: 52px; height: 58px; }

.player-photo-hero { width: 150px; height: 172px; }

/* Mobil: portrettet sentreres ved siden av innholdet i stedet for å stå
   på kortkanten — bunnjustering gir dødt rom over bildet på smale skjermer. */
@media (max-width: 700px) {
    .player-hero { gap: 14px; }
    .player-hero-photo { align-items: center; margin-bottom: 0; }
    .player-photo-hero { width: 96px; height: 110px; }
    /* min-width-verdiene (200/220px) er dimensjonert for full kortbredde og
       sprenger den smale kolonnen ved siden av portrettet. Selektoren må slå
       basisreglene som står senere i fila. */
    .player-hero-body .player-hero-identity,
    .player-hero-body .player-hero-status-info { min-width: 0; }
}

svg.player-photo {
    fill: #343a43;
    stroke: none;
    overflow: hidden;
}

.roster-player {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* -12px = cellens bunnpadding (11px) + radlinjen, så utklippet står på linjen.
   Siste rad har ingen radlinje — trekk bare inn paddingen, ellers stikker
   bildet 1px ut av .table-wrap og gir en parasittisk scrollbar. */
.roster-player .player-photo { margin-bottom: -12px; }
table.data tr:last-child .roster-player .player-photo { margin-bottom: -11px; }

.player-hero-identity { flex: 1; min-width: 200px; }

.player-hero-meta {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.player-hero-meta a { color: inherit; }
.player-hero-meta a:hover { color: var(--text); }

.player-hero-status {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.player-hero-status-text {
    font-size: 14px;
    font-weight: 600;
    margin-left: 6px;
}

.player-hero-note {
    font-size: 14px;
    margin-top: 8px;
}

.player-hero-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 8px;
}

.player-hero-next {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 12px;
}

.player-hero-next a { color: var(--text); text-decoration: none; font-weight: 600; }
.player-hero-next a:hover { color: var(--ffk-red-text); }

/* Nøkkeltall-undertekst og datoverdier */
.stat-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.stat-value-sm {
    font-size: 16px;
    padding: 5px 0 6px;
}

/* Visuelt skjult, men tilgjengelig for tastatur/skjermleser.
   Aldri display:none — da ryker piltast-navigasjon mellom radioene. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* Statusvelger — fargede radio-kort */
.status-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.status-option {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.status-option::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-option-frisk::before    { background: var(--status-frisk); }
.status-option-syk::before      { background: var(--status-syk); }
.status-option-annet::before    { background: var(--status-annet); }
.status-option-redusert::before { background: var(--status-redusert); }
.status-option-skadet::before   { background: var(--status-skadet); }

.status-option:hover { border-color: #454a52; color: var(--text); }

.status-option-check { display: none; }

.status-options input:checked + .status-option .status-option-check { display: block; }
.status-options input:checked + .status-option::before { display: none; }

.status-options input:checked + .status-option-frisk    { color: var(--status-frisk);    background: rgba(52, 199, 123, 0.1);  border-color: rgba(52, 199, 123, 0.35); }
.status-options input:checked + .status-option-syk      { color: var(--status-syk);      background: rgba(77, 163, 232, 0.1);  border-color: rgba(77, 163, 232, 0.35); }
.status-options input:checked + .status-option-annet    { color: var(--status-annet);    background: rgba(152, 160, 173, 0.1); border-color: rgba(152, 160, 173, 0.35); }
.status-options input:checked + .status-option-redusert { color: var(--status-redusert); background: rgba(242, 163, 60, 0.1);  border-color: rgba(242, 163, 60, 0.35); }
.status-options input:checked + .status-option-skadet   { color: var(--status-skadet);   background: rgba(240, 84, 94, 0.1);   border-color: rgba(240, 84, 94, 0.35); }

.status-options input:focus-visible + .status-option { box-shadow: var(--focus-ring); }

.btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Kroppskart — skademarkering på realistisk silhuett */
.body-map {
    display: flex;
    gap: 22px;
    justify-content: center;
}

.body-map figure {
    margin: 0;
    flex: 1;
    max-width: 118px;
    text-align: center;
}

.body-map svg { width: 100%; height: auto; display: block; }

.body-map figcaption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 6px;
}

.body-map-sm { gap: 14px; }
.body-map-sm figure { max-width: 76px; }

/* Selve kroppen */
.bm-body { fill: #2e333b; }

/* Soner: usynlige til de markeres — klippes til kroppsformen,
   så markeringen følger anatomien, ikke en firkant. */
.bm-zone {
    fill: transparent;
    pointer-events: none;
    transition: fill 0.1s;
}

.bm-zone.hover { fill: rgba(240, 84, 94, 0.28); }

.bm-zone.selected { fill: rgba(240, 84, 94, 0.62); }

/* Usynlige, romslige treff-flater (kun interaktivt kart) */
.bm-hit {
    fill: transparent;
    stroke: none;
    cursor: pointer;
    pointer-events: all;
}

.injury-picker {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 16px;
}

.injury-picker .body-map { margin-top: 4px; }

/* Kart i heroen når spilleren er skadet */
.player-hero-status {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.player-hero-status-info { flex: 1; min-width: 220px; }

.player-hero-status-map { flex-shrink: 0; }

/* Kartet i heroen er kompakt nok til at skadet-kortet holder omtrent
   samme høyde som et friskt kort — detaljen står i tekstbadgen, kartet
   er kun en visuell markør. */
.player-hero-status-map .body-map { gap: 10px; }
.player-hero-status-map .body-map figure { max-width: 42px; }
.player-hero-status-map .body-map figcaption { display: none; }

/* Skadedetalj i tidslinjen */
.timeline-injury { margin-top: 8px; }

.timeline-injury summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}

.timeline-injury summary::-webkit-details-marker { display: none; }
.timeline-injury summary:hover { color: var(--text); }
.timeline-injury summary .icon { transition: transform 0.12s; }
.timeline-injury[open] summary .icon { transform: rotate(90deg); }

.timeline-injury .body-map {
    justify-content: flex-start;
    margin: 10px 0 4px;
}

/* Statushistorikk — tidslinje */
.timeline-item {
    position: relative;
    padding: 0 0 16px 24px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
}

.timeline-item.st-frisk::before    { background: var(--status-frisk); }
.timeline-item.st-syk::before      { background: var(--status-syk); }
.timeline-item.st-annet::before    { background: var(--status-annet); }
.timeline-item.st-redusert::before { background: var(--status-redusert); }
.timeline-item.st-skadet::before   { background: var(--status-skadet); }

.timeline-item::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 19px;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.timeline > .timeline-item:last-child { padding-bottom: 4px; }
.timeline > .timeline-item:last-child::after,
.timeline-more .timeline-item:last-child::after { display: none; }

.timeline-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Redigering av en tidslinjeoppføring */
.timeline-edit { margin-top: 6px; }
.timeline-edit summary {
    list-style: none;
    display: inline-flex;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
.timeline-edit summary::-webkit-details-marker { display: none; }
.timeline-edit summary:hover { color: var(--text); }

.timeline-edit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 0;
}
.timeline-edit-row { display: flex; gap: 8px; flex-wrap: wrap; }
.timeline-edit-row .input-inline { flex: 1; min-width: 130px; }
.timeline-edit-form .btn { align-self: flex-start; }
.timeline-edit > form + form { margin-top: 8px; }

.timeline-duration {
    margin-left: auto;
    font-size: 11px;
}

/* På smale flater wrapper hodet — la merket følge venstrekanten
   i stedet for å bli skjøvet løsrevet helt til høyre. */
@media (max-width: 600px) {
    .timeline-duration { margin-left: 0; }
}

.timeline-note {
    font-size: 13px;
    color: var(--text-secondary);
    border-left: 2px solid var(--border-strong);
    padding-left: 10px;
    margin-top: 7px;
}

.timeline-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.timeline-more summary {
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 0 14px 24px;
}

/* Åpen expander: koblingslinjen fortsetter gjennom summary-raden
   så tidslinjen leses som én sammenhengende linje. */
.timeline-more[open] summary::before {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.timeline-more summary::-webkit-details-marker { display: none; }
.timeline-more summary:hover { color: var(--text); }
.timeline-more summary .icon { transition: transform 0.12s; }
.timeline-more[open] summary .icon { transform: rotate(90deg); }

/* Formstripe — siste økter som celler */
.form-strip-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.form-strip {
    display: flex;
    gap: 4px;
}

.form-cell {
    flex: 1;
    max-width: 28px;
    height: 22px;
    border-radius: 4px;
    transition: border-color 0.12s, filter 0.12s;
}

.form-cell.med {
    background: rgba(52, 199, 123, 0.28);
    border: 1px solid rgba(52, 199, 123, 0.4);
}

.form-cell.ute {
    background: rgba(152, 160, 173, 0.28);
    border: 1px solid rgba(152, 160, 173, 0.4);
}

.form-cell.skadet {
    background: rgba(240, 84, 94, 0.28);
    border: 1px solid rgba(240, 84, 94, 0.4);
}

.form-cell.delvis {
    background: rgba(242, 163, 60, 0.28);
    border: 1px solid rgba(242, 163, 60, 0.4);
}

.form-cell.ikke_med {
    background: var(--bg-elevated);
    border: 1px dashed var(--border-strong);
}

.form-cell:hover { filter: brightness(1.35); }

.form-strip-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

.form-strip-legend span { display: inline-flex; align-items: center; gap: 5px; }

.form-strip-legend i {
    width: 10px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}

.form-strip-legend .cell-med    { background: rgba(52, 199, 123, 0.28); border: 1px solid rgba(52, 199, 123, 0.4); }
.form-strip-legend .cell-ikke   { background: var(--bg-elevated); border: 1px dashed var(--border-strong); }
.form-strip-legend .cell-skadet { background: rgba(240, 84, 94, 0.28); border: 1px solid rgba(240, 84, 94, 0.4); }
.form-strip-legend .cell-delvis { background: rgba(242, 163, 60, 0.28); border: 1px solid rgba(242, 163, 60, 0.4); }

.type-count-line {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 12px;
}

.type-count-line span { display: inline-flex; align-items: center; gap: 6px; }

/* Planlagt fravær: perioder over registreringsskjemaet */
.absence-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.absence-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    font-size: 13.5px;
}

.absence-item.is-active { border-color: rgba(152, 160, 173, 0.45); }
.absence-item.is-past { opacity: 0.7; }

.absence-dates {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 500;
}

.absence-note { flex: 1 1 100%; }

.absence-item form { margin-left: auto; }

/* Kamphendelser under nøkkeltallene: mål, målgivende, kort */
.event-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.card-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

.session-date-cell { white-space: nowrap; }

/* ──────────────────────────────────────────
   Tilgjengelighet per måned (stablede søyler)
   ────────────────────────────────────────── */

.avail-row {
    display: grid;
    grid-template-columns: 76px 1fr 52px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.avail-month {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.avail-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-elevated);
}

.avail-seg { display: block; min-width: 2px; }

.seg-frisk    { background: var(--status-frisk); }
.seg-redusert { background: var(--status-redusert); }
.seg-skadet   { background: var(--status-skadet); }
.seg-syk      { background: var(--status-syk); }
.seg-annet    { background: var(--status-annet); }

.avail-pct {
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.avail-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 10px;
}

.avail-legend span { display: inline-flex; align-items: center; gap: 5px; }

.avail-legend i {
    width: 10px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}

/* ──────────────────────────────────────────
   Retur etter sykdom (protokoll)
   ────────────────────────────────────────── */

.protocol-intro {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.protocol-step {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.protocol-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--status-syk);
    flex-shrink: 0;
}

.protocol-step-body { font-size: 13px; min-width: 0; }
.protocol-step-title { font-weight: 600; }
.protocol-step-title .badge { margin-left: 6px; }
.protocol-step-text { color: var(--text-secondary); margin-top: 2px; }

.protocol-warn {
    font-size: 12.5px;
    color: var(--text-secondary);
    border-left: 2px solid rgba(240, 84, 94, 0.5);
    padding-left: 10px;
    margin-top: 12px;
}

.protocol-warn strong { color: var(--text); }

/* ──────────────────────────────────────────
   Diverse
   ────────────────────────────────────────── */

.session-content {
    white-space: pre-line;
    font-size: 14px;
}

.empty-state {
    text-align: center;
    padding: 36px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.empty-state a { color: var(--text-secondary); }
.empty-state a:hover { color: var(--text); }

.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }

.inline-form { display: inline; }

/* ──────────────────────────────────────────
   Innlogging
   ────────────────────────────────────────── */

.login-wrap {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.login-card {
    width: 100%;
    max-width: 384px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
}

.login-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.login-logo img { height: 60px; }

.login-title {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.login-sub {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 2px 0 24px;
}

/* ──────────────────────────────────────────
   Kampoppstilling
   ────────────────────────────────────────── */

.match-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1000px) {
    .match-layout { grid-template-columns: 1fr; }
}

.lineup-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.lineup-toolbar .chip-row { margin-top: 0; }
.lineup-toolbar .spacer { flex: 1; }

/* Banen: stående halvdel-mot-halvdel med eget mål nederst. Grønnfargen er
   dempet så den sitter i det mørke temaet; stripene er rene kosmetiske
   klippelinjer. Brikkene plasseres i prosent av flaten. */
.pitch {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 100 / 130;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0 12.5%,
            transparent 12.5% 25%
        ),
        linear-gradient(180deg, #15391f, #112e1a);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.pitch-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 0.55;
}

.pitch-token,
.pitch-slot-empty {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pitch-token {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* Kun brikkene stjeler touch — sveip på gresset skal rulle siden */
    touch-action: none;
}

/* Brikkene er knapper (tastaturtilgjengelige) — nullstill knappestilen */
.pitch-token,
.bench-token {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: center;
}

.pitch-token:active { cursor: grabbing; }

.pitch-token .player-photo {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.pitch-token svg.player-photo { fill: #4a5160; }

.token-name {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    padding: 1px 7px;
    border-radius: 4px;
    background: rgba(10, 12, 14, 0.62);
    pointer-events: none;
}

.token-pos {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: rgba(232, 234, 237, 0.72);
    pointer-events: none;
}

.pitch-token.selected .token-name {
    background: rgba(214, 41, 51, 0.85);
    color: #fff;
}

.pitch-slot-empty {
    appearance: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(232, 234, 237, 0.65);
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    justify-content: center;
}

.pitch-slot-empty:hover,
.pitch-slot-empty.selected {
    border-color: var(--ffk-red-text);
    color: var(--ffk-red-text);
}

/* Benken under banen — samme brikker, klikk setter inn spilleren */
.bench-strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 14px 2px 4px;
    min-height: 20px;
}

.bench-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}

.bench-token svg.player-photo { fill: #343a43; }

.bench-token .token-name {
    background: none;
    color: var(--text-secondary);
    padding: 0;
}

.bench-token:hover .token-name { color: var(--text); }

/* Troppanelet: alle spillerne gruppert med hurtighandlinger */
.squad-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--text-muted);
    margin: 14px 0 4px;
}

.squad-panel .squad-group-label:first-child { margin-top: 0; }

.squad-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.squad-row:hover { background: var(--bg-hover); }

.squad-row-name {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.squad-row .small { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.squad-row-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}

.minutes-input { width: 76px; }

/* Mål og målgivende — smalere enn minuttfeltet */
.stat-input { width: 62px; }

@media (max-width: 600px) {
    .pitch-token .player-photo,
    .bench-token .player-photo { width: 40px; height: 46px; }
    .token-name { max-width: 72px; font-size: 10px; }
}

/* Plassmeny på banen + spillervelger-modal */
.slot-menu {
    position: absolute;
    transform: translate(-50%, 34px);
    z-index: 30;
    min-width: 150px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    padding: 4px;
    display: flex;
    flex-direction: column;
}

.slot-menu.over { transform: translate(-50%, calc(-100% - 58px)); }

.slot-menu button {
    appearance: none;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.slot-menu button:hover,
.slot-menu button:focus-visible { background: var(--bg-hover); }

.lineup-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(8, 9, 11, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lineup-modal {
    width: 100%;
    max-width: 420px;
    max-height: min(72dvh, 640px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.lineup-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.lineup-modal-head .card-label { margin-bottom: 0; }

.picker-row {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
}

.picker-row:hover,
.picker-row:focus-visible { background: var(--bg-hover); }

.picker-row.active {
    background: rgba(214, 41, 51, 0.12);
    color: var(--ffk-red-text);
}

.pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

/* Kampkortet på øktsiden — stor inngang til oppstillingssiden */
a.match-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s;
}

a.match-cta:hover {
    background: var(--bg-hover);
    border-color: #454a52;
}

.match-cta-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--type-kamp);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.match-cta-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.match-cta-title {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.match-cta-sub {
    font-size: 12.5px;
    color: var(--text-muted);
}

.match-cta-chevron {
    margin-left: auto;
    color: var(--text-muted);
    flex-shrink: 0;
}

a.match-cta:hover .match-cta-chevron { color: var(--ffk-red-text); }

/* Importer-modus i aktivitetsskjemaet: kun typevelgeren står igjen */
#session-form.import-aktiv > :not(#felt-type) { display: none !important; }