/* =========================================
   EVENTS MODUL CSS (V2)
   ========================================= */

/* --- OVERSIKT (Dashboard) --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; align-items: start; }
@media(max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }

/* Utseendet kommer fra elementstandarden i hub-layout.css (ADR-0050). Event Hub-skjemaene
   stabler felt uten wrappere, så AVSTANDEN mellom dem bor her — kun avstand, ingen farger. */
input[type="text"], input[type="datetime-local"], input[type="number"], input[type="url"], input[type="file"], select, textarea {
    margin-bottom: 15px;
}
input[type="file"]::file-selector-button {
    background: var(--nav-hover); color: var(--text-main); border: 1px solid var(--border-color);
    padding: 8px 15px; border-radius: 4px; cursor: pointer; margin-right: 15px; transition: 0.3s;
}
input[type="file"]::file-selector-button:hover { background: var(--brand-primary); color: var(--bg-main); }

label { font-size: 0.75em; color: var(--brand-primary); text-transform: uppercase; font-weight: bold; margin-bottom: 5px; display: block; }

.btn-add { background: var(--brand-primary); color: var(--text-invert); border: none; padding: 12px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 1em; margin-top: 15px; transition: 0.2s;}
.btn-add:hover { box-shadow: 0 0 15px var(--brand-primary); filter: brightness(1.2); }

.btn-action { background: transparent; border: 1px solid var(--brand-primary); color: var(--brand-primary); padding: 8px 15px; border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 0.85em; transition: 0.2s; white-space: nowrap;}
.btn-action:hover { background: var(--brand-primary); color: var(--text-invert); }
.btn-orange { color: var(--status-warning); border-color: var(--status-warning); }
.btn-orange:hover { background: var(--status-warning); color: var(--text-invert); }
.btn-danger { color: var(--status-danger); border-color: var(--status-danger); }
/* Farge-varianter MÅ være klasser, ikke inline style: en inline `color` slår
   .btn-action:hover og låser tekstfargen fast (usynlig tekst på hover). */
.btn-success { color: var(--status-success); border-color: var(--status-success); }
/* Full-bredde blokk-variant (bunn-handling i kort). Samme grunn som over:
   en inline `background` slår .btn-action:hover og knappen slutter å invertere. */
.btn-action-block { width: 100%; display: block; box-sizing: border-box; text-align: center; }
.btn-action-fill { background: var(--surface-raised); font-weight: bold; }
.inline-action-form { display: inline; }

/* Ikon-variant: kvadratisk knapp uten tekst (kopier lenke / QR). Fast bredde så de to
   står like store ved siden av hverandre uansett ikonets egen bredde. */
.btn-action-icon { padding: 8px 0; width: 40px; text-align: center; }
.btn-action-icon i { margin: 0; }

/* --- QR (plakat-delen i «Del eventet»-modalen, includes/components/event_share_modal.php) --- */

/* Lerretet står som en nøytral hevet flate mens koden lastes, og blir «papir» først
   når bildet er inne. Da slipper vi et hvitt blink i mørkt tema, og spinneren kan
   bruke vanlig tekstfarge i stedet for en hardkodet mørk hex mot hvitt. */
.qr-canvas {
    background: var(--surface-raised); border-radius: 8px; padding: 12px; margin: 0 auto 15px auto;
    width: 260px; height: 260px; display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
/* QR-koder trenger lys bunn for å kunne skannes. `--sc-polaroid-paper` er det
   eksisterende hvit-token-et for nettopp dette (samme bruk i `screen_compo_recruit.css`)
   — funksjonelt krav, men fortsatt via variabel. */
.qr-canvas.er-klar { background: var(--sc-polaroid-paper); }
.qr-canvas.er-feilet { display: none; }
.qr-canvas img { max-width: 100%; height: auto; display: none; }
.qr-canvas.er-klar img { display: block; }
.qr-spinner { color: var(--text-muted); font-size: 2em; }
.qr-canvas.er-klar .qr-spinner { display: none; }

/* --- KLARGJØRINGSLISTA (EventReadiness, «N mangler» på kortet) --- */
.mangler-modal-box h2 { color: var(--brand-primary); margin-top: 0; }
.mangler-event-title { color: var(--text-main); font-weight: bold; margin: 0 0 12px 0; font-size: 1.05em; }
.mangler-rad { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 0.92em; }
.mangler-rad:last-child { border-bottom: none; }
.mangler-rad > i { flex: none; width: 16px; text-align: center; color: var(--status-warning); }
.mangler-rad.er-ok > i { color: var(--status-success); }
/* Det som er på plass står igjen, dempet og gjennomstreket, så lista alltid viser alle seks. */
.mangler-rad.er-ok .mangler-navn { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-color); }
.mangler-fiks { margin-left: auto; flex: none; background: none; border: none; padding: 0; font: inherit; font-size: 0.85em; font-weight: 600; color: var(--brand-primary); cursor: pointer; text-decoration: none; white-space: nowrap; }
.mangler-fiks::after { content: " \2192"; }
.mangler-fiks:hover { text-decoration: underline; }
.mangler-fotnote { margin: 14px 0 0 0; font-size: 0.8em; color: var(--text-muted); }

.qr-error { display: none; color: var(--status-danger); font-size: 0.9em; margin: 0 0 15px 0; }
.qr-error.er-synlig { display: block; }
.qr-url {
    color: var(--text-muted); font-size: 0.8em; margin: 0 0 20px 0;
    word-break: break-all; line-height: 1.4;
}
.qr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.switch-container { background: var(--nav-hover); padding: 15px; border-radius: 8px; border: 1px dashed var(--border-color); }
.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text-main); font-size: 0.9em; font-weight: normal; text-transform: none; margin-bottom: 10px;}
.checkbox-label input { width: 20px; height: 20px; accent-color: var(--brand-primary); cursor: pointer; margin: 0; }

.event-card { background: var(--card-bg); padding: 0; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 25px; display: grid; grid-template-columns: 250px 1fr 350px; overflow: hidden;}
@media(max-width: 1100px) { .event-card { grid-template-columns: 1fr; } }

/* Event-statusen på kortet bruker standard .hub-tag + .t-* (ADR-0049); .status-badge/.status-* er pensjonert. */

.banner-preview { width: 100%; height: 100%; min-height: 200px; background-size: cover; background-position: center; border-right: 1px solid var(--border-color); }
/* Én kolonne (< 1100 px): kortet er full bredde, og en fast 200 px-stripe beskar banneret hardt.
   1,91:1-ramme viser hele et riktig banner; kanten flyttes fra høyre til bunn (ADR-0071 steg 0). */
@media(max-width: 1100px) {
    .banner-preview { height: auto; min-height: 0; aspect-ratio: 1.91 / 1; border-right: none; border-bottom: 1px solid var(--border-color); }
}

.ticket-box { background: rgba(var(--card-bg-rgb, 31, 40, 51), 0.4); padding: 20px; border-left: 1px solid var(--border-color); display: flex; flex-direction: column; justify-content: space-between;}
/* Tre tellere (Billetter / Innløst / Innsjekket) — wrap så de ikke klemmes
   sammen i den smale ticket-boksen på mellomstore skjermer. */
.ticket-stats { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.9em; }

/* --- DØR-SKANNER (tab_participants 2A) --- */
.door-scanner { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; border-top: 3px solid var(--status-success); }
.door-scanner-intro { flex: 1 1 250px; }
.door-scanner-actions { display: flex; gap: 10px; flex: 2 1 320px; flex-wrap: wrap; }

/* Feltet spiser resten av raden. min-width:0 er nødvendig — uten den nekter et
   flex-item å krympe under sitt eget innhold, og feltet presser knappene ut. */
.door-scanner-actions .scanner-field {
    flex: 1 1 160px; min-width: 0; margin: 0;
    padding: 10px 14px; font-size: 1em;
    background: var(--input-bg); color: var(--status-success);
    border: 1px dashed var(--status-success);
}

/* Knappene skal ha INNHOLDSBREDDE. `flex: 1 1 auto` var feilen — den lot dem
   vokse til samme bredde som feltet. min-height 44px = tommel-treff (WCAG 2.5.5). */
.door-scanner-actions .btn-cyber { flex: 0 0 auto; min-height: 44px; justify-content: center; white-space: nowrap; margin: 0; }

/* Hierarki: Skann er hovedhandlingen (fylt), Kamera er alternativet (outline).
   To fylte knapper side om side konkurrerte og gjorde raden visuelt tung. */
.btn-scan { background: var(--status-success); color: var(--text-invert); border: 1px solid var(--status-success); }
.btn-scan:hover { filter: brightness(1.15); }
.btn-scan-camera { background: transparent; color: var(--brand-primary); border: 1px solid var(--brand-primary); }
.btn-scan-camera:hover { background: var(--brand-primary); color: var(--text-invert); }

@media (max-width: 600px) {
    /* På mobil finnes ingen USB-skanner — kamera ER verktøyet. Feltet får egen
       linje, og knappene deler linja under 50/50 med full tommel-flate. */
    .door-scanner-actions { flex: 1 1 100%; }
    .door-scanner-actions .scanner-field { flex: 1 1 100%; }
    .door-scanner-actions .btn-cyber { flex: 1 1 0; }
}

/* .alert / .alert-success / .alert-error bor nå i hub-layout.css (flash-melding etter POST/redirect
   brukes av flere admin-sider — user_admin, admin_assets — som ikke laster dette arket). */


/* --- SALKART (Seating Grid) --- */
.seating-layout {
    display: grid;
    gap: 30px;
    align-items: start;
}
.seating-layout > div {
    min-width: 0;
}
@media(min-width: 1000px) {
    .seating-layout { grid-template-columns: 1fr 350px; }
}
@media(max-width: 999px) {
    .seating-layout { grid-template-columns: 1fr; gap: 20px; }
    .seating-wrapper { padding: 15px !important; width: 100%; box-sizing: border-box; }
    .seating-sidebar { width: 100%; box-sizing: border-box; }
}
.seating-wrapper {
    overflow-x: auto;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    -webkit-overflow-scrolling: touch;
}
.seating-grid {
    display: inline-flex; flex-direction: column; gap: 8px;
}
.seat-row {
    display: flex; gap: 6px; align-items: center;
}
.row-label {
    width: 60px; font-weight: bold; color: var(--brand-primary); text-align: right; margin-right: 15px; font-size: 0.9em; letter-spacing: 1px;
}
.seat {
    width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-color);
    display: flex; justify-content: center; align-items: center; font-size: 0.7em; font-weight: bold;
    background: rgba(31, 40, 51, 0.8); color: var(--text-muted); transition: 0.2s; cursor: pointer;
}
.seat:hover { border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.4); transform: translateY(-2px); }

.seat.seated { background: var(--status-danger); border-color: var(--status-danger); color: #000; cursor: pointer; box-shadow: 0 0 8px rgba(255,0,127,0.5); }
.seat.seated:hover { transform: none; box-shadow: 0 0 8px rgba(255,0,127,0.5); }

.seat.reserved { background: var(--status-warning); border-color: var(--status-warning); color: #000; cursor: pointer; }
/* ADR-0039 — ubrukt holdt plass i en reservasjon. Merket ligger øverst til HØYRE —
   samme hjørne som ankomst-haken, og det er trygt: en ubrukt holdt plass har ingen
   person å sjekke inn, så de to opptrer aldri på samme sete. (Merket lå først til
   venstre «for å komponere», men da kolliderte det med NABOSETETS hake i mellomrommet
   — Morten 2026-08-21.) */
.seat.held { position: relative; }
.seat.held::before {
    content: '\f02e'; /* fa-bookmark */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: -6px;
    right: -6px;
    color: var(--brand-primary);
    font-size: 0.95em;
    background: #000;
    border-radius: 50%;
    padding: 1px 3px;
    line-height: 1;
}

/* Fase 5.2 - Fysisk ankommet */
.seat.arrived { position: relative; }
.seat.arrived::after {
    content: '\f058'; /* fa-check-circle */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: -6px;
    right: -6px;
    color: var(--status-success);
    font-size: 1.1em;
    background: #000;
    border-radius: 50%;
    line-height: 1;
}

@keyframes pulse-arrive { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); } }
.seat.pulse-arrive { animation: pulse-arrive 1s 3; z-index: 10; border-color: var(--status-success); }


.legend-box { display: flex; gap: 20px; background: var(--card-bg); padding: 15px 25px; border-radius: 8px; border: 1px solid var(--border-color); margin-bottom: 20px; flex-wrap: wrap;}
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 0.9em; color: var(--text-main); }
.legend-color { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); }

.bench-item { padding: 10px 15px; background: rgba(0,0,0,0.3); border: 1px dashed #444; border-radius: 6px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; transition: 0.2s; }
.bench-item:hover { border-color: var(--brand-primary); }
.bench-item.active { background: rgba(255, 152, 0, 0.2); border-color: var(--status-warning); box-shadow: 0 0 10px rgba(255, 152, 0, 0.3); }

/* Navnet på benken er en egen knapp (velg person) ved siden av ☰ — ser ut som teksten før. */
.bench-velg { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: bold; line-height: 1.2; text-align: left; color: inherit; cursor: pointer; }
.bench-velg:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 3px; }
.bench-menu-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 4px; padding: 6px 12px; cursor: pointer; transition: 0.2s; }
.bench-menu-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

/* Action Bar Styling */
.seat-action-bar {
    background: rgba(15, 20, 25, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--brand-primary);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 15px rgba(var(--brand-primary-rgb), 0.3);
    color: var(--text-main);
    width: max-content;
    pointer-events: auto;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 1000;
}
.action-bar-header {
    background: rgba(0,0,0,0.4);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
    font-size: 0.85em;
    color: var(--text-muted);
}
.ab-close {
    background: none; border: none; color: var(--text-muted); cursor: pointer; transition: 0.2s;
}
.ab-close:hover { color: var(--pink); }
.action-bar-body {
    padding: 10px;
    display: flex;
    gap: 8px;
}
.ab-btn {
    background: var(--nav-hover);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ab-btn:hover { background: var(--brand-primary); color: #000; border-color: var(--brand-primary); }
.ab-btn.warning:hover { background: var(--status-warning); color: #000; border-color: var(--status-warning); }
.ab-btn.danger:hover { background: var(--pink); color: #000; border-color: var(--pink); }

@media (max-width: 768px) {
    .action-bar-body { flex-direction: column; align-items: stretch; }
    .ab-btn { padding: 12px; font-size: 0.9em; justify-content: center; }
}

.seat-action-bar::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: var(--arrow-pos, 50%);
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: var(--brand-primary) transparent transparent transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SALKARTET PÅ MOBIL — Retning C «Kartet ruller, skuffa står» (ADR-0064, 2026-09-14)
   Delt av crew/crew_seating.php og tab_seating.php (samme partial + renderer + JS).
   Desktop er urørt: skuffa ved musepekeren, sidepanel til høyre.

   Under 768 px: (1) seter 40 px og FROSSEN radkolonne (absolute + top:auto, hard kant — ingen
   sticky, ingen fade), (2) handlingsskuffa er et FAST ark over bunnmenyen som glir inn/ut — også
   for benke-personens ☰-meny, (3) benken ligger OVER kartet som chip-stripe, (4) fargeforklaringen
   på to linjer. Alt er scopet til .seating-layout / .sb-legend: event_register.php og signage
   laster samme ark og samme renderer (.seat, .legend-box) og skal ikke endres.

   To tilstander gjelder ALLE bredder (JS setter dem): `.is-valgt` på setet/benkeraden arket
   gjelder, og `body.sb-picking` = ring på ledige seter mens en person er valgt fra benken eller
   en flytting pågår — så «trykk et ledig sete» synes i kartet, ikke bare i hint-teksten.
   ───────────────────────────────────────────────────────────────────────────── */
.seat.is-valgt { outline: 3px solid var(--brand-primary); outline-offset: 1px; box-shadow: var(--brand-glow); z-index: 3; }
.bench-item.is-valgt { border-style: solid; border-color: var(--brand-primary); }
body.sb-picking .seat.available { outline: 2px solid var(--brand-primary); outline-offset: -1px; color: var(--brand-primary); }
.sb-bench-hint-kort { display: none; }

@media (max-width: 768px) {
    /* (3) Sidepanelet løses opp så kortene blir egne rutenett-celler; benken legges først. */
    .seating-sidebar { display: contents !important; } /* !important: partialen setter display:flex inline */
    .seating-sidebar > .card { min-width: 0; }
    .sb-bench { order: -1; }
    .seating-map-container { order: 0; }
    .sb-radar { order: 1; }
    .sb-log { order: 2; }
    .sb-bench .sb-bench-hint { display: none; }
    .sb-bench .sb-bench-hint-kort { display: block; margin: 0 0 10px; font-size: 0.8em; color: var(--text-muted); }
    .sb-bench #bench-list { display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; scrollbar-width: none; }
    .sb-bench #bench-list::-webkit-scrollbar { display: none; }
    .sb-bench .bench-item { flex: none; margin: 0; padding: 6px 8px 6px 12px; min-height: 44px; border-radius: 8px; }
    .sb-bench .bench-item span:last-child { display: none; } /* TID-linja — navnet holder i en chip */
    .sb-bench .bench-menu-btn { min-width: 36px; min-height: 32px; }

    /* (4) Forklaringen på én–to linjer i stedet for tre. */
    .legend-box.sb-legend { gap: 6px 14px; padding: 10px 12px; margin-bottom: 12px; font-size: 0.9em; }
    .sb-legend .legend-item { gap: 6px; font-size: 0.85em; }
    .sb-legend .legend-color { width: 13px; height: 13px; }

    /* (1) Kartet: tommel-seter og FROSSEN radkolonne. Etikettene tas ut av flyten med
       position:absolute og `top:auto` — da beholder de sin naturlige høyde i raden, men `left`
       måles mot .seating-map-container (som IKKE ruller). Scrolleren (.seating-wrapper) er ikke
       posisjonert, så den klipper dem heller ikke. Resultat: setene ruller under en hard kant,
       etikettene står stille. Ingen mask-fade og ingen sticky (begge så ut som glitch på telefon,
       Morten 2026-09-14) — et avkuttet sete er signalet om at det er mer. Scopet til
       .seating-layout så signage (screen) og setevelgeren i påmeldingen ikke berøres. */
    .seating-layout .seating-map-container { position: relative; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 0; }
    .seating-layout .seating-wrapper { width: auto; margin-left: 64px; padding: 0 !important; border: 0; border-radius: 0; background: transparent; } /* width:auto — 999px-regelen over sier 100 %, som med margin ville stukket 64 px utenfor kortet */
    /* Luft i toppen og til høyre INNE i scrollflaten: ankomst-/reservert-merkene stikker 6 px utenfor
       setet, og uten padding klippes de av scroll-beholderen (Morten, mobil 2026-09-14). */
    .seating-layout .seating-grid { gap: 6px; padding: 8px 12px 2px 8px; } /* 8 px venstre: sete 1 skal stå fritt fra den harde kanten i startposisjon */
    .seating-layout .seat-row { gap: 6px; }
    .seating-layout .row-label { position: absolute; left: 0; top: auto; width: 64px; height: 40px; margin: 0; padding: 0 6px 0 12px; box-sizing: border-box; display: flex; align-items: center; text-align: left; font-size: 0.72em; letter-spacing: 0.5px; white-space: nowrap; border-right: 1px solid var(--border-color); }
    .seating-layout .seat { width: 40px; height: 40px; font-size: 0.85em; border-radius: 6px; }
    .seating-layout .seat:hover { transform: none; }

    /* (2) Skuffa → fast ark over bunnmenyen. JS setter ikke top/left på mobil, men skulle en
       inline-verdi henge igjen vinner !important her. Solid --card-bg, ingen blur over bunnmenyen. */
    .seat-action-bar {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0;
        bottom: calc(65px + env(safe-area-inset-bottom));
        width: auto;
        border-radius: 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        background: var(--card-bg);
        backdrop-filter: none;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
        z-index: 19000; /* under .mobile-bottom-nav (20001), som .hub-action-bar */
    }
    .seat-action-bar::after { display: none; }
    /* Glir inn nedenfra og ut igjen (seating_board.js: sbVisArk legger .is-open etter reflow). */
    .seat-action-bar { transform: translateY(130%); transition: transform 0.25s ease; }
    .seat-action-bar.is-open { transform: translateY(0); }
    .action-bar-header { border-radius: 0; padding: 10px 12px 10px 16px; align-items: flex-start; gap: 8px; }
    .action-bar-header #ab_title { flex: 1; min-width: 0; display: block; line-height: 1.4; }
    .action-bar-header #ab_ticket { display: block; margin-left: 0; }
    .action-bar-header .ab-close { flex: none; min-width: 44px; min-height: 36px; font-size: 1.1em; }
    .action-bar-body { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 10px 16px 14px; }
    .ab-btn { flex: 1 1 30%; min-height: 44px; padding: 10px 10px; font-size: 0.85em; justify-content: center; letter-spacing: 0.5px; white-space: nowrap; }
    #ab_btn_move { flex-basis: 100%; order: -1; } /* primærhandlingen («Direkte flytting» / «Plasser sete») først og i hele bredden; Info/Til benken/Kast ut deler raden under */
}


/* --- DELTAKERE (Participants) --- */
/* .hub-table bor nå i hub-layout.css (lastes av header.php overalt) — ikke
   gjeninnfør en lokal kopi her, da spriker tabellene mellom modulene igjen. */

/* Rediger event (modal-runde 2, ADR-0051): «Har opplastet bilde» + Fjern-kryss over filfeltet */
/* .event-bilde-info/.event-bilde-fjern er pensjonert — bildefeltene er media_slot() (ADR-0071). */
/* Opprett/rediger event: påmeldingstype-radioene og salkart-feltene (partials/event_form.php) */
.event-regmode .checkbox-label > span { color: var(--text-muted); }
.event-regmode .checkbox-label:last-child { margin-bottom: 0; }
.event-seatmap { margin-top: 14px; }
.event-seatmap .checkbox-label { margin: 4px 0 0; }
/* Sted (ADR-0066): nedtrekk + to ikonknapper (+ nytt, blyant rediger) på én linje, i feltets høyde */
.event-sted-rad { display: flex; gap: 6px; align-items: stretch; margin-bottom: 15px; } /* samme bunnmarg som nabofeltene */
.event-sted-rad select { flex: 1 1 auto; min-width: 0; margin: 0; } /* elementregelen gir 15px bunnmarg — den ville strukket knappene */
.event-sted-knapp { flex: 0 0 42px; width: 42px; padding: 0; margin: 0; justify-content: center; background: transparent; border-color: var(--border-color); color: var(--text-muted); }
.event-sted-knapp:hover:not(:disabled) { color: var(--brand-primary); border-color: var(--brand-primary); }
.event-sted-knapp:disabled { opacity: 0.4; cursor: default; }
/* Sidepanelet i Rediger: stedet stablet (navn / adresse / veibeskrivelse / kart-lenke) */
.hub-modal-side .side-sted { display: flex; flex-direction: column; gap: 3px; font-size: 13px; padding: 4px 0 8px; border-bottom: 1px solid var(--border-color); }
.hub-modal-side .side-sted b { color: var(--text-main); font-weight: 600; }
.hub-modal-side .side-sted .side-sted-vei { color: var(--text-muted); font-style: italic; }
.hub-modal-side .side-sted a { color: var(--brand-primary); font-size: 12px; text-decoration: none; }
.hub-modal-side .side-sted a:hover { text-decoration: underline; }
.hub-modal-side .side-sted [hidden] { display: none; }
/* Nytt sted-modalen (liten, over event-modalen) */
#stedModal .hub-modal-content { max-width: 540px; } /* plass til Postnr + Sted side om side */
/* Hurtig opprett event: skjemaet på desktop, én «Nytt event»-knapp på mobil (samme modal som «Avansert») */
.event-hurtig { flex-wrap: wrap; }
.event-hurtig .event-hurtig-skjema { flex: 1 1 100%; }
.event-ny-mobil { display: none; }
@media (max-width: 768px) {
    .event-hurtig { padding: 10px !important; }
    .event-hurtig .event-hurtig-skjema { display: none !important; }
    .event-ny-mobil { display: inline-flex; width: 100%; justify-content: center; margin: 0; height: 44px; }
}
/* Arkivet på oversikten (ADR-0067): lukket <details> nederst, kompakt rad per event */
.event-arkiv { margin-top: 30px; border: 1px dashed var(--border-color); border-radius: 8px; background: rgba(var(--card-bg-rgb, 31, 40, 51), 0.4); }
.event-arkiv > summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85em; }
.event-arkiv > summary::-webkit-details-marker { display: none; }
.event-arkiv > summary:hover { color: var(--text-main); }
.event-arkiv-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.95em; opacity: 0.8; }
.event-arkiv-pil { margin-left: auto; font-size: 0.8em; transition: transform 0.2s; }
.event-arkiv[open] > .event-arkiv-pil, .event-arkiv[open] > summary .event-arkiv-pil { transform: rotate(180deg); }
.event-arkiv-liste { border-top: 1px dashed var(--border-color); padding: 6px 18px 12px; }
.event-arkiv-rad { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.event-arkiv-rad:last-child { border-bottom: 0; }
.event-arkiv-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event-arkiv-info strong { color: var(--text-main); }
.event-arkiv-meta { font-size: 0.85em; color: var(--text-muted); }
.event-arkiv-knapper { display: flex; gap: 8px; flex-wrap: wrap; }
.event-arkiv-knapper .inline-action-form { margin: 0; }
.event-tom { text-align: center; color: var(--text-muted); padding: 30px; font-style: italic; }
@media (max-width: 768px) {
    .event-arkiv-hint { display: none; }
    .event-arkiv-knapper { width: 100%; }
    .event-arkiv-knapper .inline-action-form { flex: 1; }
    .event-arkiv-knapper .btn-action { width: 100%; justify-content: center; }
}
/* Påmeldings-oppsett: «Åpen for billettsalg» står i rutenettet ved siden av et felt — bunnjustert */
.event-reg-toggle { margin: 0; align-self: end; min-height: 42px; }
.event-reg-varsel { margin: 0; }
.event-konto-boks .checkbox-label { margin: 0; }
.event-konto-boks .hub-field-help { margin: 8px 0 0 30px; }
.event-konto-boks .checkbox-label.er-delt { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color); }
/* Påmeldings-oppsett: EAV-feltvelgeren (ett kort per felt, detaljer bak kommentar-knappen) */
.eav-velger { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.eav-velger-rad { background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; }
.eav-velger-topp { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.eav-velger-navn { font-weight: 700; font-size: 0.9em; color: var(--text-main); }
.eav-velger-valg { display: flex; align-items: center; gap: 14px; }
.eav-velger-valg .checkbox-label { font-size: 0.85em; margin: 0; }
.eav-velger-knapp { width: 30px; height: 30px; font-size: 15px; }
.eav-velger-valg .checkbox-label input { width: 16px; height: 16px; }
.eav-velger-detalj { padding-top: 10px; margin-top: 10px; border-top: 1px dashed var(--border-color); }
.eav-velger-detalj .hub-modal-grid { margin-top: 10px; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 0.85em; color: var(--text-muted); text-transform: uppercase; }
/* .form-group-feltene bruker elementstandarden (ADR-0050). */

/* Bruker-info Modal Spesifikt */
.uc-header { display: flex; gap: 20px; align-items: center; margin-bottom: 25px; }
.uc-avatar { width: 80px; height: 80px; background: #000; border: 2px solid var(--brand-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5em; color: var(--brand-primary); overflow: hidden;}
.uc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.uc-grid > .is-wide { grid-column: 1 / -1; }
.uc-navn { color: var(--brand-primary); margin: 0; font-size: 1.6em; }
.uc-meta { margin: 5px 0 0; color: var(--text-muted); font-size: 0.9em; }
.uc-meta strong { color: var(--brand-primary); }
/* Aktivitetslogg (seter) i Deltakere-fanen */
.setelogg-tid { color: var(--text-muted); font-size: 0.85em; }
.setelogg-navn { color: var(--brand-primary); font-weight: 700; }
.setelogg-tekst { font-size: 0.9em; }
.setelogg-system { opacity: 0.5; }
.uc-list-box { background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; max-height: 250px; overflow-y: auto;} /* var rgba(0,0,0,.4) — svart i Light */
.uc-list-box h4 { margin: 0 0 10px 0; color: var(--brand-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 5px; position: sticky; top: -15px; background: var(--card-bg); padding-top: 15px; z-index: 10;} /* var rgba(0,0,0,.9) — svart stripe i Light */
.uc-item { font-size: 0.9em; padding: 8px 0; border-bottom: 1px dashed #333; display: flex; gap: 10px; align-items: center;}
.uc-item:last-child { border: none; padding-bottom: 0;}
.uc-item i { width: 15px; text-align: center; opacity: 0.7;}

/* ========================================= */
/* TAB TICKETS (Fra tab_tickets.php)         */
/* ========================================= */
.grid-tables { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start;}
@media(max-width: 1000px) { .grid-tables { grid-template-columns: 1fr; } }
.table-card { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.3);}
.table-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.table-header h3 { margin: 0; }

/* ── Setevelgeren for reservasjoner (billettfanen, ADR-0039) ─────────────── */
.res-seat-picker {
    display: inline-block;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    max-width: 100%;
    overflow-x: auto;
}
.res-seat-picker-row { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.res-seat-picker-label { width: 28px; font-size: 0.7em; color: var(--text-muted); flex-shrink: 0; }
.res-pick-seat {
    width: 26px; height: 26px; flex-shrink: 0;
    border: 1px solid var(--border-color); border-radius: 5px;
    background: transparent; color: var(--text-muted);
    font-size: 0.7em; cursor: pointer;
}
.res-pick-seat:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.res-pick-seat.taken { background: var(--status-warning); opacity: 0.35; cursor: not-allowed; color: #000; }
.res-pick-seat.picked { background: var(--brand-primary); color: var(--text-invert); border-color: var(--brand-primary); font-weight: bold; }

/* ── Reservasjonspanelet i billettfanen (ADR-0039) — kollapsbart <details> ── */
.res-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-primary);
    border-radius: 12px;
    margin-bottom: 30px;
    overflow: hidden;
}
.res-panel-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.2s ease;
}
.res-panel-summary::-webkit-details-marker { display: none; }
.res-panel-summary:hover { background: var(--nav-hover); }
.res-panel-summary > i.fa-bookmark { color: var(--brand-primary); font-size: 1.1em; }
.res-panel-title {
    font-weight: bold;
    color: var(--text-main);
    font-size: 1.05em;
    letter-spacing: 0.5px;
}
.res-panel-hint { color: var(--text-muted); font-size: 0.85em; }
.res-chip {
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.3);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78em;
    font-weight: bold;
    white-space: nowrap;
}
.res-chip-holdt { color: var(--status-warning); background: rgba(255, 170, 0, 0.08); border-color: rgba(255, 170, 0, 0.35); }
.res-panel-chevron { margin-left: auto; color: var(--text-muted); transition: transform 0.25s ease; }
.res-panel[open] .res-panel-chevron { transform: rotate(180deg); }
.res-panel-body { padding: 5px 20px 20px; border-top: 1px solid var(--border-color); }

/* Reservasjonskortene */
.res-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 15px;
    margin: 15px 0 25px;
}
.res-card {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.res-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.res-card-group { color: var(--text-main); font-size: 1.05em; }
.res-code-chip {
    background: transparent;
    border: 1px dashed rgba(var(--brand-primary-rgb), 0.5);
    color: var(--brand-primary);
    font-family: monospace;
    font-size: 0.85em;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-style 0.2s ease;
}
.res-code-chip:hover { background: rgba(var(--brand-primary-rgb), 0.1); border-style: solid; }
.res-code-chip.copied { border-style: solid; border-color: var(--status-success); color: var(--status-success); }
.res-progress {
    height: 6px;
    background: var(--nav-hover);
    border-radius: 3px;
    overflow: hidden;
}
.res-progress-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.res-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.82em;
    color: var(--text-muted);
}
.res-card-meta i { color: var(--brand-primary); margin-right: 3px; }
.res-meta-utlopt { color: var(--status-danger); }
.res-meta-utlopt i { color: var(--status-danger); }
.res-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

/* Ny reservasjon-skjemaet */
.res-create-form { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.res-create-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.res-create-fields label { font-size: 0.75em; }
.res-create-fields input { margin-bottom: 0; }
.res-picker-wrap label { font-size: 0.75em; margin-bottom: 8px; }
.res-create-submit { align-self: flex-start; margin: 0; padding: 10px 24px; }
.res-create-submit #resSeatCount { opacity: 0.7; font-weight: normal; }

/* =========================================================================
   MARKEDSPANELET — Event Hub → Marked (modules/events/tabs/tab_marked.php)
   Les-flaten over tellerskinna (ROADMAP 2.11, ADR-0047). Kun lesing, ingen
   skjema. Grafen er én serie med vilje (se kommentaren i fanen).
   ========================================================================= */
.marked-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}
.marked-head h2 { margin: 0; color: var(--text-main); }
.marked-head h2 i { color: var(--brand-primary); margin-right: 8px; }
.marked-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 0.9em; max-width: 720px; line-height: 1.5; }
.marked-head p strong { color: var(--text-main); }
.marked-head .btn-cyber { margin: 0; white-space: nowrap; }
.marked-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Nøkkeltall — stat tiles, ikke en graf */
.marked-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}
.marked-kpi {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
}
.marked-kpi-label {
    font-size: 0.72em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.marked-kpi-value {
    font-size: 2.1em;
    font-weight: bold;
    line-height: 1.2;
    margin: 6px 0 2px;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.marked-kpi-value.is-brand { color: var(--brand-primary); }
.marked-kpi-sub { font-size: 0.82em; color: var(--text-muted); line-height: 1.4; }

.marked-grid {
    display: grid;
    /* 460px: trakt-tabellen har fem kolonner og skal ikke klemmes — under ~950px stables kortene.
       min(460px, 100%): på skjermer smalere enn 460px skal sporet krympe, ikke sprenge sida. */
    grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

/* Tabellene — tall til høyre, tabulære sifre */
.marked-table .marked-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.marked-table th.marked-num { text-align: right; }
.marked-table td { padding: 10px 14px; }
.marked-table th { padding: 10px 14px; }
.marked-kilde { white-space: nowrap; }
.marked-kilde i { width: 18px; text-align: center; color: var(--brand-primary); margin-right: 8px; }
.marked-sum td { font-weight: bold; border-top: 2px solid var(--border-color); border-bottom: none; }
tr.marked-dim td, .marked-dim { color: var(--text-muted); }
tr.marked-dim .marked-kilde i { color: var(--text-muted); }
/* «Direkte»-raden er en rest, ikke en kilde — skilles fra kildene med en tynn linje over */
.marked-direkte td { border-top: 1px dashed var(--border-color); }
.marked-table .hub-tag { margin-left: 8px; border: 1px solid var(--border-color); color: var(--text-muted); }
.marked-table .btn-action-menu { display: inline-flex; }

.marked-note { font-size: 0.8em; color: var(--text-muted); margin: 12px 0 0; line-height: 1.5; }
.marked-note code { font-size: 0.95em; }
.marked-note i { color: var(--brand-primary); }
.marked-ordre-ikon { color: var(--status-success) !important; }

/* Egne kilder (ADR-0089) — skjema-rad nederst i Marked */
.marked-note-top { margin: 0 0 14px; }
.marked-note-top strong { color: var(--text-main); }
.marked-kilde-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; }
.marked-kilde-form label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; font-size: 0.85em; color: var(--text-muted); }
.marked-kilde-form .btn-cyber { margin: 0; white-space: nowrap; }
.marked-kilde-kode { white-space: nowrap; }
#marked-egne-kilder .marked-table td, #marked-egne-kilder .marked-table th { padding: 10px 10px; }
.marked-kilde-knapp.btn-cyber { margin: 0; padding: 6px 10px; font-size: 0.75em; white-space: nowrap; }

/* Tomtilstander */
.marked-empty { text-align: center; padding: 35px 20px; color: var(--text-muted); line-height: 1.6; }
.marked-empty i { color: var(--brand-primary); margin-bottom: 10px; }
.marked-empty p { margin: 6px 0; max-width: 560px; margin-left: auto; margin-right: auto; }
.marked-empty strong { color: var(--text-main); }
.marked-empty-inline { color: var(--text-muted); font-size: 0.9em; margin: 0; }

/* Dag for dag — én serie, horisontale stolper, tall rett på stolpen */
.marked-bars { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.marked-bar-row {
    display: grid;
    grid-template-columns: 62px 1fr 90px;
    align-items: center;
    gap: 10px;
    font-size: 0.85em;
}
.marked-bar-day { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Stolpen er en SVG: bredden er et attributt i viewBox-enheter (0–100 = prosent), så
   den er datadrevet uten inline style (STYLEGUIDE §1.2). */
.marked-bar-track {
    display: block;
    width: 100%;
    height: 16px;
    background: var(--surface-raised);
    border-radius: 4px;
    overflow: hidden;
}
.marked-bar-fill { fill: var(--brand-primary); }
.marked-bar-tot { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-main); white-space: nowrap; }
.marked-bar-ordre { color: var(--status-success); margin-left: 6px; font-size: 0.9em; }
/* Kun for skjermlesere — ikonet er dekorativt, ordet må finnes som tekst */
.marked-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
    .marked-bar-row { grid-template-columns: 52px 1fr 70px; }
    .marked-kpi-value { font-size: 1.7em; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Deltakerlista: navn + påmeldingssvar (ADR-0058)
   Delt av dørlista (crew_checkin.php) og Deltakere-fanen. Billettnavnet er personen,
   brukernavnet er kontoen — derfor står @brukernavn som undertekst, aldri som hovednavn.
   ───────────────────────────────────────────────────────────────────────────── */
.dn-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dn-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dn-icon { color: var(--text-muted); }
.dn-name { font-weight: 700; color: var(--text-main); }
/* Handlingscella: knappene skal stå på én linje også når navnecella brekker. */
.dl-actions { text-align: right; white-space: nowrap; }
/* Merke-filteret over lista (partials/deltaker_filter.php): kun avstand, skinna ER rammen (ADR-0048). */
#doorTagFilter, #partTagFilter { margin-bottom: 12px; }

/* Info-knappen: nøytral til den er åpen, så merket brand-farge. */
.action-icon-btn.is-open { color: var(--brand-primary); background: var(--nav-hover); }

/* Detaljraden: én celle over hele bredden, hevet flate så den leser som «tilhører raden over». */
.ticket-info-row > td { padding: 0 !important; background: var(--surface-raised); }
/* Tabellen kan være bredere enn skjermen (overflow-x: auto på mobil) og scrollet mot høyre.
   Da må detaljraden følge det SYNLIGE vinduet, ikke tabellens venstrekant — sticky + en
   maks-bredde ticket_info.js setter til scroll-beholderens clientWidth. */
.ti-body { position: sticky; left: 0; box-sizing: border-box; padding: 12px 16px 14px; border-left: 3px solid var(--brand-primary); font-size: 0.9em; color: var(--text-muted); }
.ti-grid { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 18px; margin: 0; }
.ti-grid dt { color: var(--text-muted); }
.ti-grid dd { margin: 0; color: var(--text-main); font-weight: 600; overflow-wrap: anywhere; }
.ti-empty { color: var(--text-muted); font-weight: 400; }
.ti-link { color: var(--brand-primary); text-decoration: none; }
.ti-link:hover { text-decoration: underline; }
/* ─────────────────────────────────────────────────────────────────────────────
   Deltakerlista på MOBIL (ADR-0063, 2026-09-14) — én CSS-fork på den delte markupen.
   Desktop er urørt: `.hub-table` med seks kolonner. Under 768 px hadde tabellen 6 kolonner
   i 339 px — status ble kuttet, kode og handlinger lå utenfor skjermen, og scrollbaren er
   usynlig på mobil, så for vakta så det ut som knappene ikke fantes.

   To forker på samme <table class="hub-table dl-liste …">:
     .is-kort  (crew/crew_checkin.php)  — Retning A «Kortliste»: raden blir et kort, «Sjekk inn»
                                          er en tommel-stor knapp (crew-sonen: store trykkflater).
     .is-tett  (tab_participants.php)   — Retning C «Tre prikker»: Rad+Sete → én Plass-kolonne,
                                          status under navnet, kode skjult, primærhandling synlig
                                          og resten bak ⋮ (hub_actionmenu.js).
   Cellene er posisjonert på nth-child, så kolonnerekkefølgen Rad · Sete · Navn · Status · Kode ·
   Handlinger er en KONTRAKT for begge flatene. Knappeteksten kommer fra `title` (innsjekk) og
   `data-label` (⋮-menyen) — door_scanner.js bygger innsjekk-knappen på nytt med samme title.
   ───────────────────────────────────────────────────────────────────────────── */
/* ⋮-menyen finnes i markupen på BEGGE bredder. På desktop er den ikke en meny: knappen skjules
   og innholdet står inline som før (samme .action-icon-btn-ikoner). */
.dl-sek { display: inline; }
.dl-sek-knapp { display: none; }
@media (min-width: 769px) {
    .dl-sek .hub-dropdown-menu { display: inline; position: static; width: auto; background: transparent; border: 0; box-shadow: none; padding: 0; animation: none; }
    .dl-sek .hub-dropdown-menu button { display: inline-block; width: auto; padding: 5px; margin: 0 4px; font-size: 1.1em; font-weight: normal; text-align: center; background: transparent; color: var(--text-muted); }
    .dl-sek .hub-dropdown-menu button:hover { background: transparent; color: var(--brand-primary); }
    .dl-sek .hub-dropdown-menu button.danger:hover { background: transparent; color: var(--status-danger); }
    .dl-sek .hub-dropdown-menu button::after { content: none; }
}

@media (max-width: 768px) {
    .dl-liste, .dl-liste tbody, .dl-liste td { display: block; }
    .dl-liste thead { display: none; }
    .dl-liste tbody { display: flex; flex-direction: column; }
    .dl-liste td { padding: 0; border: 0; }
    .dl-liste tr:hover td { background: transparent; }
    .dl-liste tr { display: block; }
    /* Tom-tilstanden («Ingen påmeldte ennå.») er en vanlig rad med colspan. */
    .dl-liste tr:not(.door-row):not(.participant-row):not(.ticket-info-row) td { padding: 14px 0; }

    /* Rad → rutenett. Rad og Sete stables i første kolonne som én «Plass».
       Celle-reglene er scopet til deltakerradene med :is(), så detaljraden («Vis svar», én td med
       colspan) og tom-tilstanden ikke arver «Rad »-prefikset og den lille skriften. */
    .dl-liste tr.door-row, .dl-liste tr.participant-row {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;
        padding: 10px 4px;
        border-bottom: 1px solid var(--border-color);
    }
    .dl-liste :is(tr.door-row, tr.participant-row) > td:nth-child(1) { grid-area: rad; align-self: end; text-align: center; font-size: 0.62em; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); line-height: 1.1; }
    .dl-liste :is(tr.door-row, tr.participant-row) > td:nth-child(1)::before { content: "Rad "; }
    .dl-liste :is(tr.door-row, tr.participant-row) > td:nth-child(1) strong { color: var(--text-muted) !important; }
    .dl-liste :is(tr.door-row, tr.participant-row) > td:nth-child(2) { grid-area: sete; align-self: start; text-align: center; font-size: 1.35em; line-height: 1.05; }
    .dl-liste :is(tr.door-row, tr.participant-row) > td:nth-child(3) { grid-area: navn; min-width: 0; }
    .dl-liste :is(tr.door-row, tr.participant-row) > td:nth-child(4) { grid-area: status; }
    .dl-liste :is(tr.door-row, tr.participant-row) > td:nth-child(5) { grid-area: kode; }
    .dl-liste :is(tr.door-row, tr.participant-row) > td:nth-child(6) { grid-area: handling; }
    .dl-liste .dn-name { overflow-wrap: anywhere; }

    /* Handlingscella: knappene får tommel-flate. `.dl-actions` er nowrap/høyre på desktop. */
    .dl-liste .dl-actions { white-space: normal; text-align: left; display: flex; align-items: center; gap: 6px; }
    .dl-liste .dl-actions .action-icon-btn,
    .dl-liste .dl-actions .btn-action-menu {
        margin: 0; padding: 0; width: 44px; height: 44px; flex: none;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--border-color); border-radius: 8px; background: transparent; font-size: 1.15em;
    }
    .dl-liste .dl-actions .action-icon-btn:hover { transform: none; }
    /* Innsjekk-knappen: fylt i success når raden VENTER, dempet kant når den er inne.
       `!important` fordi PHP og door_scanner.js setter fargen inline (title/ikon er deres kontrakt). */
    .dl-liste tr[data-checked="0"] [data-door-actions] .action-icon-btn { background: var(--status-success); border-color: var(--status-success); color: var(--text-on-status) !important; }
    .dl-liste tr[data-checked="1"] [data-door-actions] .action-icon-btn { color: var(--text-muted) !important; }
    .dl-liste .dl-actions .action-icon-btn.is-open { color: var(--brand-primary); background: var(--nav-hover); }

    /* Detaljraden («Vis svar») følger raden over; den er ikke lenger sticky i en scroller. */
    .dl-liste tr.ticket-info-row { display: block; }
    .dl-liste tr.ticket-info-row > td { display: block; }
    .dl-liste .ti-body { position: static; max-width: none !important; }

    /* ── .is-kort (crew): Retning A «Kortliste» ── */
    .dl-liste.is-kort tbody { gap: 10px; }
    .dl-liste.is-kort tr.door-row {
        grid-template-areas: "rad navn status" "sete navn status" "kode kode kode" "handling handling handling";
        row-gap: 2px;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--bg-main);
    }
    .dl-liste.is-kort :is(tr.door-row, tr.participant-row) > td:nth-child(4) { justify-self: end; text-align: right; }
    .dl-liste.is-kort :is(tr.door-row, tr.participant-row) > td:nth-child(5) { padding: 4px 0 6px 56px; font-size: 0.78em; }
    .dl-liste.is-kort tr.ticket-info-row { margin-top: -10px; border: 1px solid var(--border-color); border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden; }
    /* «Sjekk inn manuelt» / «Angre innsjekk» — teksten er knappens title. Svar-knappen står sist. */
    .dl-liste.is-kort [data-door-actions] { order: 1; flex: 1; display: flex; }
    .dl-liste.is-kort [data-ticket-info] { order: 2; }
    .dl-liste.is-kort [data-door-actions] .action-icon-btn { width: auto; flex: 1; gap: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85em; border-radius: 6px; }
    .dl-liste.is-kort [data-door-actions] .action-icon-btn::after { content: attr(title); }

    /* ── .is-tett (admin): Retning C «Tre prikker» ── */
    .dl-liste.is-tett tr.participant-row { grid-template-areas: "rad navn handling" "sete navn handling" ". status handling"; }
    .dl-liste.is-tett :is(tr.door-row, tr.participant-row) > td:nth-child(5) { display: none; }
    .dl-liste.is-tett :is(tr.door-row, tr.participant-row) > td:nth-child(4) { margin-top: 2px; }
    .dl-liste.is-tett .dl-actions { justify-content: flex-end; }
    .dl-liste.is-tett .dl-sek { display: inline-flex; }
    .dl-liste.is-tett .dl-sek-knapp { display: inline-flex; }
    /* ⋮-menyen porteres til <body> av hub_actionmenu.js — derfor ingen .dl-liste-prefiks her. */
    .dl-sek-meny button::after { content: attr(data-label); }
    .dl-sek-meny button.danger { color: var(--status-danger); }
}

/* Påmelding-fanen: bryter med etikett på én linje (show_signup_count, loan_pc_enabled). */
.reg-bryter { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.reg-bryter input[type=checkbox] { width: auto; min-height: auto; margin: 0; }
.reg-bryter-hjelp { color: var(--text-muted); }

/* Billettsida, steg 2: systemets faste spørsmål («Låne PC», ADR-0062) — samme rytme som EAV-feltene. */
.reg-fast-felt-navn { display: block; margin-bottom: 8px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.reg-fast-felt-valg { display: flex; align-items: center; gap: 10px; color: var(--text-main); font-weight: normal; text-transform: none; cursor: pointer; }
.reg-fast-felt-valg input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--brand-primary); }
.reg-fast-felt-hjelp { display: block; margin-top: 6px; color: var(--text-muted); }
.reg-fast-felt-valg.er-fullt { opacity: 0.55; cursor: not-allowed; }
.reg-laane-pc-tak.er-stram { color: var(--status-warning); }
.reg-laane-pc-tak.er-fullt { color: var(--status-danger); }
/* Vilkår for låne-PC: sammenleggbar tekst + egen avkryssing (påkrevd bare ved ja — JS) */
.reg-vilkaar { margin-top: 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-raised); }
.reg-vilkaar summary { padding: 8px 12px; cursor: pointer; color: var(--brand-primary); font-size: 0.9em; font-weight: 600; list-style: none; }
.reg-vilkaar summary::-webkit-details-marker { display: none; }
.reg-vilkaar-tekst { padding: 4px 12px 12px; font-size: 0.88em; line-height: 1.55; color: var(--text-main); }
.reg-vilkaar-valg { margin-top: 10px; font-size: 0.92em; }

.ti-toggle { margin-left: 10px; padding: 2px 10px; font: inherit; font-size: 0.85em; font-weight: 600; color: var(--brand-primary); background: transparent; border: 1px solid var(--brand-primary); border-radius: 999px; cursor: pointer; }
.ti-toggle:disabled { opacity: 0.5; cursor: default; }
.ti-none, .ti-error { font-style: italic; }
.ti-error { color: var(--status-danger); font-style: normal; }

@media (max-width: 600px) {
    .ti-grid { grid-template-columns: 1fr; gap: 2px; }
    .ti-grid dt { margin-top: 8px; font-size: 0.85em; }
}

/* ---- Event Hub › PDF Billett (ADR-0074): bildene fra biblioteket, ingen inline-stiler. Prefiks .pdf- ---- */
.pdf-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pdf-hd h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.pdf-hd h2 i { color: var(--brand-primary); }
.pdf-hd p { margin: 6px 0 0; font-size: 0.9em; }
.pdf-hd a:not(.btn-cyber) { color: var(--brand-primary); }
.pdf-flash { margin-bottom: 16px; padding: 12px 18px; border-left: 4px solid var(--status-success); }
.pdf-flash.is-error { border-left-color: var(--status-danger); }
.pdf-flash.is-warning { border-left-color: var(--status-warning); }
.pdf-flash code { font-size: 0.9em; }
.pdf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-bottom: 20px; }
.pdf-col { display: flex; flex-direction: column; gap: 20px; }
.pdf-card h3 { margin: 0 0 18px; font-size: 1.05em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--brand-primary); }
.pdf-card.is-org h3 { color: var(--status-warning); }
.pdf-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 0.85em; }
.pdf-felt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pdf-felt-bred { grid-column: 1 / -1; }
.pdf-partnere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pdf-toggle { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-color); cursor: pointer; font-size: 0.95em; }
.pdf-toggle input { width: 18px; height: 18px; margin: 0; }
/* Underskinna Billett | Bordlapper — og Bordlapper-visningen (ADR-0092). */
.hub-chip-nav.is-compact.pdf-faner { margin-bottom: 20px; } /* is-compact nuller margin — vinn på spesifisitet (som .kr-vis) */
.pdf-bl-felt { display: flex; flex-direction: column; gap: 16px; }
.pdf-bl-felt .hub-field-help { margin: 0; }
.pdf-bl-felt a, .pdf-bl-tom a { color: var(--brand-primary); }
.pdf-bl-knapper { margin-top: 18px; }
.pdf-bl-toggle { align-items: flex-start; margin-top: 0; text-transform: none; font-weight: 400; color: var(--text-main); font-size: 0.95em; margin-bottom: 0; } /* events.css gjør alle <label> til små versaler i merkefargen */
.pdf-bl-toggle input { flex: none; margin-top: 2px; }
.pdf-bl-toggle .hub-field-help { display: block; margin-top: 4px; }
.pdf-card > .hub-field-help { display: block; margin-top: 12px; }
.pdf-bl-tom { display: flex; gap: 16px; align-items: flex-start; }
.pdf-bl-tom > i { font-size: 1.6em; color: var(--text-muted); margin-top: 2px; }
.pdf-bl-tom p { margin: 0; }
.pdf-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pdf-preview-lenke { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.95em; }
.pdf-preview-lenke:hover { color: var(--brand-primary); }
@media (max-width: 900px) { .pdf-grid, .pdf-felt { grid-template-columns: 1fr; } }