/* =========================================
   UNIVERSAL HUB LAYOUT (LAN-hubben V4)
   ========================================= */

/* --- FANE-SKINNA (.hub-chip-nav) — Retning A, 2026-09-05 (ADR-0048) ---
   Én sammenhengende «skinne» der den aktive fanen er et hevet kort i --card-bg.
   Skinna er selve rammen (ikke lenger en svart, kantlinjet side-bar), og den
   krymper til innholdet (fit-content) så den ligger som ett objekt på sida.
   Bakgrunnen er --surface-raised oppå --bg-main: «hevet» snur automatisk riktig
   vei (lysere på mørkt tema, mørkere på lyst), og bunnlaget gjør skinna ugjennomsiktig
   så innhold som ruller under den sticky skinna ikke skinner gjennom.
   Glød på aktiv fane kommer fra --brand-glow (variables.css) — `none`-ekvivalent i Light. */
.hub-chip-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    background: linear-gradient(var(--surface-raised), var(--surface-raised)), var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 25px;
    position: sticky;
    top: 0;
    z-index: 100;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hub-chip-nav::-webkit-scrollbar { display: none; }

/* Kant-fade når skinna faktisk ruller (klassene settes av hub_core.js etter scrollposisjon).
   Scrollbaren er skjult med vilje, så uten dette ser en avkuttet fane ut som en rendringsfeil
   i stedet for «det er mer her» — målt på Event Hub mobil 2026-09-09: 761 px skinne i 339 px
   vindu, 55 % skjult. De ytterste --fade-kant pikslene holdes OPAKE så skinnas kantlinje og
   hjørne overlever masken; der ligger uansett bare skinnas padding, aldri en fane. */
.hub-chip-nav { --fade-kant: 4px; --fade-dybde: 36px; }
.hub-chip-nav.is-compact { --fade-kant: 2px; --fade-dybde: 24px; }

.hub-chip-nav.is-fade-left {
    -webkit-mask-image: linear-gradient(to right, #000 0 var(--fade-kant), rgba(0, 0, 0, 0.08) calc(var(--fade-kant) + 3px), #000 var(--fade-dybde));
            mask-image: linear-gradient(to right, #000 0 var(--fade-kant), rgba(0, 0, 0, 0.08) calc(var(--fade-kant) + 3px), #000 var(--fade-dybde));
}
.hub-chip-nav.is-fade-right {
    -webkit-mask-image: linear-gradient(to left, #000 0 var(--fade-kant), rgba(0, 0, 0, 0.08) calc(var(--fade-kant) + 3px), #000 var(--fade-dybde));
            mask-image: linear-gradient(to left, #000 0 var(--fade-kant), rgba(0, 0, 0, 0.08) calc(var(--fade-kant) + 3px), #000 var(--fade-dybde));
}
/* Begge ender: to mask-image-regler kan ikke stables (siste vinner), så midten trenger sin egen. */
.hub-chip-nav.is-fade-left.is-fade-right {
    -webkit-mask-image: linear-gradient(to right, #000 0 var(--fade-kant), rgba(0, 0, 0, 0.08) calc(var(--fade-kant) + 3px), #000 var(--fade-dybde), #000 calc(100% - var(--fade-dybde)), rgba(0, 0, 0, 0.08) calc(100% - var(--fade-kant) - 3px), #000 calc(100% - var(--fade-kant)));
            mask-image: linear-gradient(to right, #000 0 var(--fade-kant), rgba(0, 0, 0, 0.08) calc(var(--fade-kant) + 3px), #000 var(--fade-dybde), #000 calc(100% - var(--fade-dybde)), rgba(0, 0, 0, 0.08) calc(100% - var(--fade-kant) - 3px), #000 calc(100% - var(--fade-kant)));
}

.hub-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* nekter fanene å bli skvist — skinna ruller sidelengs i stedet */
    padding: 8px 16px;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--text-muted);
    font-family: inherit; /* <button> arver ellers ikke sidas font */
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer; /* så standarden funker for <button>-chips (f.eks. client-side filter), ikke bare <a> */
    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.hub-chip:hover {
    color: var(--text-main);
    background: var(--nav-hover);
}

/* Aktiv = hevet kort. `.active-tab` er programbyggerens historiske navn for det samme
   (program_builder.js) og får identisk stil, så dag-fanene der følger standarden. */
.hub-chip.active,
.hub-chip.active-tab {
    color: var(--brand-primary);
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px var(--border-color), var(--brand-glow);
}

/* Telle-merke i en fane («Deltakere 48»). Dempet i hvile, merkefarget på den aktive fanen. */
.hub-chip .chip-count {
    display: inline-flex;
    align-items: center;
    font-size: 0.78em;
    line-height: 1.4;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-muted);
}
.hub-chip.active .chip-count,
.hub-chip.active-tab .chip-count {
    background: rgba(var(--brand-primary-rgb), 0.15);
    color: var(--brand-primary);
}
/* «Noe venter»-teller (Kontrollrom, Innboksen — ADR-0080): betydning, ikke pynt (ADR-0049).
   Står ETTER active-regelen med samme spesifisitet, ellers tapte den på den aktive fanen (Copilot, #401). */
.hub-chip .chip-count.is-hot,
.hub-chip.active .chip-count.is-hot,
.hub-chip.active-tab .chip-count.is-hot { background: var(--status-warning); color: var(--text-on-status); }

/* Modifier: chip-rad INNE i et kort/modal. Skinna skal ikke være sticky der, og den
   ligger direkte på panel-bakgrunnen (gjennomsiktig hevet lag, uten --bg-main-bunn).
   Bruk: <div class="hub-chip-nav is-plain"> inni en modal/.card. (STYLEGUIDE) */
.hub-chip-nav.is-plain {
    background: var(--surface-raised);
    position: static;
    margin-bottom: 14px;
    z-index: auto;
}

/* Modifier: kompakt skinne for vekslere i kort-overskrifter (Live/Historikk i loggpaneler —
   tidligere `.btn-log-tab`) og små filtre. Kombineres med .is-plain: <div class="hub-chip-nav is-plain is-compact">. */
.hub-chip-nav.is-compact {
    padding: 2px;
    gap: 2px;
    border-radius: 8px;
    margin-bottom: 0;
}
.hub-chip-nav.is-compact .hub-chip {
    padding: 4px 10px;
    font-size: 0.75em;
    border-radius: 6px;
}

/* Modifier: skinna fyller bredden og fanene deler plassen likt (to-valgs-brytere i modaler,
   f.eks. Ny/Eksisterende bruker i Inviter Crew). */
.hub-chip-nav.is-stretch {
    width: 100%;
}
.hub-chip-nav.is-stretch .hub-chip {
    flex: 1;
    justify-content: center;
}

/* --- COMPACT ROW LISTING (Oversikten) --- */
.hub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg, #1f2833);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--neon-cyan);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.hub-row:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: #555;
    transform: translateX(3px);
}

.hub-row-info { display: flex; align-items: center; gap: 15px; }
.hub-row-title { margin: 0; font-size: 1.1em; color: var(--text-main); }
.hub-row-meta { font-size: 0.8em; color: #888; margin-top: 4px; display: flex; gap: 15px; flex-wrap: wrap; }

/* Favoritt-stjerne */
.btn-star {
    color: #444; 
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    transition: 0.2s;
}
.btn-star.active { color: var(--neon-gold, #ffeb3b); text-shadow: 0 0 10px rgba(255, 235, 59, 0.5); }
.btn-star:hover { color: var(--neon-gold, #ffeb3b); transform: scale(1.1); }

/* Responsiv fiks for mobiler */
@media (max-width: 768px) {
    .hub-row { flex-direction: column; align-items: flex-start; gap: 15px; }
    .hub-row-actions { width: 100%; display: flex; justify-content: flex-end; }
}
/* =========================================
   UNIVERSAL ACTION MENU (Dropdown)
   ========================================= */
.hub-row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hub-dropdown-container {
    position: relative;
}

/* Den lille knappen med tre prikker */
.btn-action-menu {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.btn-action-menu:hover, .btn-action-menu.active {
    background: transparent;
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}

/* Logg-veksleren Live/Historikk bruker fane-skinna: `.hub-chip-nav.is-plain.is-compact` (ADR-0048).
   (`.btn-log-tab` er pensjonert.) */

/* Varsom variant: handlinger som når ut til andre (f.eks. «Varsle om endringer»),
   der man skal stoppe opp et halvsekund før man trykker. */
/* Aksent-variant: ikon-knapper som skal bære merkefargen i hvile.
   Som inline farge ville den drept .btn-action-menu:hover. */
.btn-action-menu.is-accent { color: var(--brand-primary); border-color: var(--brand-primary); }

.btn-action-menu.is-warning {
    color: var(--status-warning);
    border-color: var(--status-warning);
}
.btn-action-menu.is-warning:hover {
    background: transparent;
    border-color: var(--status-warning);
    color: var(--status-warning);
    filter: brightness(1.25);
}

/* Selve meny-boksen */
.hub-dropdown-menu {
    display: none; /* Skjult som standard */
    position: absolute;
    right: 0;
    top: 45px;
    width: 200px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 1000;
    flex-direction: column;
    padding: 5px 0;
    animation: fadeInMenu 0.2s ease-out;
}

/* Vises når klassen .show legges til via JS */
.hub-dropdown-menu.show {
    display: flex;
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Knappene inni menyen — og lenker (en «Åpne» er en navigasjon, ikke en handling) */
.hub-dropdown-menu button,
.hub-dropdown-menu a {
    background: none;
    border: none;
    color: var(--text-main);
    padding: 12px 15px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
    text-decoration: none;
    box-sizing: border-box;
}

.hub-dropdown-menu button:hover,
.hub-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--neon-cyan);
}

.hub-dropdown-menu hr {
    border: none;
    border-top: 1px dashed #333;
    margin: 5px 0;
}

/* Farlige knapper (Slett) */
.hub-dropdown-menu button.danger:hover {
    color: var(--brand-accent);
    background: rgba(255, 0, 127, 0.1);
}
/* =========================================
   UNIVERSAL BUTTONS (Theme Engine V4)
   ========================================= */

/* `hidden`-attributtet skal ALLTID vinne over en display-regel (flex/grid/inline-flex) — UA-
   stylesheetet sier display:none, men enhver .klasse { display: flex } slår det. Modalfotens
   «Slett»-knapper (.btn-cyber) sto synlige med `el.hidden = true` (sett 2026-09-13), og repoet
   hadde fem per-komponent-kopier av samme fiks (.dw-pane, .h-visning, .notif-mark-all …).
   Én global regel lukker hele klassen av feil. */
[hidden] { display: none !important; }
.btn-cyber {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.85em;
    border: 1px solid transparent;
    text-decoration: none;
}
/* Liten variant (kort, rader). Bodde i assets.css (Utstyr) til Kopirommet trengte den (ADR-0115). */
.btn-cyber.is-sm { padding: 5px 10px; font-size: 0.8em; }

/* Primary (Fylt farge, f.eks for "Delta Nå") */
.btn-cyber-primary {
    background: var(--brand-primary);
    color: var(--bg-main);
    border-color: var(--brand-primary);
}
.btn-cyber-primary:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 15px var(--brand-primary);
    transform: translateY(-2px);
}
/* Destruktiv primærhandling (Kast ut, Slett permanent) — fylt i statusfargen, ikke merkefargen */
.btn-cyber-danger {
    background: var(--status-danger);
    color: var(--text-invert);
    border-color: var(--status-danger);
}
.btn-cyber-danger:hover { filter: brightness(1.15); box-shadow: 0 0 15px var(--status-danger); }
/* Sekundær destruktiv handling (Fjern kobling, Slett i en rediger-footer) — utlinjet, fylles ved hover */
.btn-cyber-danger-outline { background: transparent; color: var(--status-danger); border-color: var(--status-danger); }
.btn-cyber-danger-outline:hover { background: var(--status-danger); color: var(--text-invert); box-shadow: 0 0 15px var(--status-danger); }

/* Secondary (Gjennomsiktig med border, f.eks "Gå til Kamper") */
.btn-cyber-secondary {
    background: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-cyber-secondary:hover {
    background: var(--brand-primary);
    color: var(--bg-main);
    box-shadow: 0 0 15px var(--brand-primary);
}

/* Danger / Avbryt */
.btn-danger-outline {
    background: transparent;
    color: var(--brand-danger);
    border-color: var(--brand-danger);
}
.btn-danger-outline:hover {
    background: var(--brand-danger);
    color: var(--text-main);
    box-shadow: 0 0 15px var(--brand-danger);
}

/* Låst / Stengt */
.btn-locked, .btn-cyber:disabled {
    background: var(--nav-hover) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Påmeldingsrett (ADR-0113). `.hub-sperre` står der påmeldingsskjemaet ellers ville stått (landingen
   fra en QR, hjulet, tropper) — samme ord som den grå knappen i lista. `.hub-info-stripe` er stripa
   øverst på Konkurranser-sida som forklarer hvorfor knappene er grå. Begge globale fordi landings-
   sidene ikke laster member-compos.css. */
.hub-sperre {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 16px; border: 1px dashed var(--border-color); border-radius: 8px;
    background: var(--nav-hover); color: var(--text-muted); font-weight: 600; text-align: center;
}
.hub-info-stripe {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px; margin-bottom: 20px;
    border: 1px solid var(--border-color); border-left: 3px solid var(--brand-primary); border-radius: 8px;
    background: var(--card-bg); color: var(--text-main);
}
.hub-info-stripe > .fa { color: var(--brand-primary); margin-top: 3px; }
/* =========================================
   GLOBALE KORT (Glassmorphism for hele systemet)
   ========================================= */
.dashboard-grid { column-count: 1; column-gap: 25px; }
@media (min-width: 1000px) { .dashboard-grid { column-count: 2; } }

.card { 
    background: rgba(var(--card-bg-rgb, 31, 40, 51), 0.8) !important; 
    backdrop-filter: blur(12px) saturate(150%); 
    border: 1px solid var(--border-color) !important; 
    box-shadow: var(--shadow-main, 0 8px 32px 0 rgba(0, 0, 0, 0.8));
    border-radius: 12px;
    break-inside: avoid; 
    margin-bottom: 25px; 
    display: block; 
    padding: 25px;
    color: var(--text-main);
}

.card h3 { 
    margin-top: 0; 
    color: var(--brand-primary); 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 1.1em; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 15px; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
/* Program-spesifikk styling */
.schedule-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.schedule-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    border-left: 4px solid var(--brand-primary); /* Standard cyan stripe */
    transition: transform 0.2s ease;
}

.schedule-card.is-live {
    border-left-color: var(--neon-green); /* Grønn for aktiv/utlån-vibe */
    background: rgba(0, 255, 0, 0.05);
    animation: live-pulse 2s infinite;
}

.schedule-time {
    font-family: 'Courier New', monospace; /* Monospaced for tech-look */
    font-weight: bold;
    color: var(--brand-primary);
}

.schedule-icon {
    margin-right: 10px;
    color: var(--text-muted);
}

/* Animasjon for aktive poster */
@keyframes live-pulse {
    0% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.4); }
    100% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.2); }
}
/* =========================================
   INPUT-FELT — ÉN STANDARD (Retning A «nedsenket + ring», ADR-0050, 2026-09-05)
   Standarden er en ELEMENTREGEL, ikke en klasse: 339 felt i 104 filer hadde ingen klasse og
   arvet hva sida tilfeldigvis hadde. `:where()` gir regelen null spesifisitet, så enhver
   klasse- eller modulregel vinner over den — den fyller bare tomrommet.
   Avkryssing, radio, glidere, farge, fil og knapper er utenfor: de er ikke tekstfelt.
   Tilstander: hvile · hover · fokus (ring i merkefargen, glød kun der --glow-strength > 0)
   · feil (.is-error eller aria-invalid="true") · låst (disabled/readonly).
   Modifiere: .is-compact (verktøylinjer, programbyggeren). Etikett: .hub-label.
   Avstand MELLOM felt er layoutens ansvar (.hub-field / gap / modulens regel), ikke feltets. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea) {
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 9px 12px;
    min-height: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Gjennomsiktig, ikke `none`: i forced-colors/høykontrast tegnes outline i systemfargen
       mens box-shadow-ringen undertrykkes — tastaturfokus må fortsatt synes (Copilot, PR #289). */
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
:where(select) { padding-right: 32px; cursor: pointer; }
:where(select[multiple]) { min-height: 120px; padding-right: 12px; }
:where(textarea) { min-height: 96px; resize: vertical; }
/* Tilstandene bruker SAMME kvalifiserte selektor som grunnregelen — en naken `input` her
   ville gitt avkryssingsbokser og glidere hover-kant og fokusring (Copilot, PR #289). */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea):hover:not(:disabled):not([readonly]) { border-color: var(--text-muted); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea):focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent),
                0 0 12px color-mix(in srgb, var(--brand-primary) var(--glow-strength), transparent);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea).is-error,
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea)[aria-invalid="true"] {
    border-color: var(--status-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 18%, transparent);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea):disabled,
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), textarea)[readonly] {
    background: var(--surface-raised);
    color: var(--text-muted);
    border-style: dashed;
    cursor: not-allowed;
}
/* Kompakt: verktøylinjer og innebygde felt (programbyggeren, filterrader) */
.is-compact:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea) {
    padding: 5px 10px;
    min-height: 32px;
    font-size: 13px;
    border-radius: 6px;
    width: auto;
}
/* Etikett + felt som par. .hub-field gir avstanden; .hub-label er dempet versal som
   skifter til merkefargen når feltet under har fokus. */
.hub-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hub-label { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); }
.hub-field:focus-within .hub-label { color: var(--brand-primary); }
.hub-field-error { font-size: 12px; color: var(--status-danger); }
.hub-field-help { font-size: 12px; color: var(--text-muted); }
/* Dempet forklaringsrad under en notis/infoboks (Tilgang-fanen i Crew Manager, ADR-0082). */
.hub-notis-rad { color: var(--text-muted); margin-top: 6px; }

/* .badge-tag / .tag-compo / .tag-delayed / .tag-cancelled / .tag-tech er pensjonert — bruk .hub-tag + .t-* (ADR-0049). */
.sortable-ghost {
    opacity: 0.4;
    background-color: rgba(var(--brand-primary-rgb), 0.1) !important;
    border: 2px dashed var(--brand-primary) !important;
}
/* .badge-draft / .badge-live er pensjonert — programbyggeren bruker .hub-tag (ADR-0049). */

/* .badge-cyber er pensjonert — vakt-status i planneren bruker .hub-tag (ADR-0049). */
/* Kjekk liten "grip"-tekstur for drag-and-drop[cite: 30] */
.drag-grip {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: rgba(255,255,255,0.1);
    transition: color 0.2s;
}

/* =========================================
   SIDEHODE (.header-section) + skjermleser-tekst (.sr-only)
   Lå inline i includes/header.php og i sidebar.css — flyttet hit så sider uten hub-skallet (public/hjelp.php
   utlogget, i forsidens skall) får samme sidehode og samme skjulte etiketter.
   ========================================= */
.header-section {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.header-section h1 { color: var(--brand-primary); margin: 0; font-size: 2.5em; display: flex; align-items: center; gap: 15px; }
.header-section p { margin: 5px 0 0 0; color: var(--text-muted); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* =========================================
   MOBIL: SIDEHODE OG EVENTVELGER (delt)
   .header-section brukes av ~70 sider; .event-selector-box av programbyggeren og Compo Control.
   Lå tidligere under «MOBIL-FIKS FOR PROGRAM BUILDER», men er ikke byggerens.
   ========================================= */

@media (max-width: 768px) {
    /* 1. Fikser toppbjelken (Header og Velg Event) */
    .header-section {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px;
        padding-top: 20px; /* Litt ekstra luft hvis hamburgermenyen overlapper */
    }
    
    .event-selector-box {
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
    }
    
    /* Tvinger dropdown-menyen til å ta hele bredden på mobil */
    .event-selector-box select {
        flex-basis: 100%;
        margin-bottom: 10px;
    }
}

/* =========================================
   PROGRAM BUILDER — delte rester
   Layouten, kortene, forskyv-raden og mobilforken bor i assets/css/program-builder.css
   (ADR-0065, 2026-09-14). Her står bare det som deles med andre sider. Tre lag «mobil-fiks»
   for byggeren (V1.2, V1.3 og «Backstage») som pekte på klasser som ikke lenger finnes
   (.builder-grid, .shift-toolbar, .fab-add-btn, .chronos-layout, .chronos-action-bar) er fjernet.
   ========================================= */

/* Hurtigvalg-rad (program_builder, admin_planner, tab_oversikt). Tre definisjoner ble én —
   verdiene er de som vant kaskaden før. */
.quick-strike-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed var(--border-color);
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
/* ⚠️ Ingen global mobil-skjuling her: den som sto her (#350) skjulte også Event Hubs «Hurtig opprett
   event» og vaktplanens hurtigrad. Byggeren skjuler SIN rad i program-builder.css (scopet). */

/* Rullegardin-menyer (hub_actionmenu.js, byggerens tag-meny) skal alltid ligge øverst. */
.hub-dropdown-menu {
    z-index: 100020 !important; /* Tvinger menyen helt til topps — også over modalene (100010, modals.css): en meny åpnet
                                  fra et ark (Oppgave-arket, ADR-0118) porteres til <body> og havnet ellers bak arket. */
    background: var(--card-bg);
    border: 1px solid var(--brand-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* --- THE CHRONOS TIMELINE (Dashboard Versjon) --- */
.chronos-timeline {
    position: relative;
    padding: 10px 0;
}

/* Den loddrette streken bruker border-color variabelen */
.chronos-timeline::before {
    content: '';
    position: absolute;
    left: 45px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
    opacity: 0.3;
}

.timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    position: relative;
}

/* Prikken på tidslinjen */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 41px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--text-muted);
    z-index: 2;
}


.timeline-time {
    width: 35px;
    font-family: monospace;
    font-weight: bold;
    color: var(--brand-primary);
    text-align: right;
    padding-top: 8px;
}

/* SELVE BOKSEN RUNDT AKTIVITETEN */
.timeline-content {
    flex: 1;
    background: var(--nav-hover); /* Denne er mørk i Cyber/Dark, lys i Light */
    border: 1px solid var(--border-color);
    padding: 12px 15px;
    border-radius: 8px;
    transition: transform 0.2s;
}

.timeline-item:hover .timeline-content {
    transform: translateX(5px);
    background: rgba(var(--brand-primary-rgb), 0.05);
}

.timeline-title {
    margin: 0 0 4px 0;
    font-size: 1.05em;
    color: var(--text-main);
    font-weight: bold;
}

.timeline-desc {
    margin: 0 0 8px 0;
    font-size: 0.85em;
    color: var(--text-muted);
}
/* =========================================
   ACTIVE STATE: "PÅGÅR NÅ" (Hero-effekten)
   ========================================= */

/* Prikken på tidslinjen */
.timeline-item.active::before {
    background: var(--brand-purple);
    border-color: var(--brand-purple);
    box-shadow: 0 0 10px var(--brand-purple);
}

/* Neon-effekt på klokkeslettet */
.timeline-item.active .timeline-time {
    color: var(--brand-primary);
    text-shadow: 0 0 8px var(--brand-primary);
    font-size: 1.05em; 
    font-weight: 900;
}


.timeline-item.active .timeline-content {
    /* Bruker vår nye variabel - sort i cyber, lys i light */
    background: var(--active-item-bg) !important; 
    
    /* Vi beholder den fete ramma så man ser at den er aktiv */
    border: 2px solid var(--brand-primary);
    
    /* Legg på en deilig glød som fungerer i begge moduser */
    box-shadow: var(--brand-glow, 0 0 20px rgba(var(--brand-primary-rgb), 0.2));
    
    /* Litt ekstra "oomph" for å vise at den er aktiv nå */
    transform: scale(1.02);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* Fikser tittel-fargen inni det aktive kortet */
.timeline-item.active .timeline-title {
    color: var(--brand-primary);
}
/* --- QUICK-NAV FOR PROGRAM --- */
.program-quick-nav {
    display: flex;
    gap: 8px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}
.program-quick-nav::-webkit-scrollbar { display: none; }

.btn-nav-jump {
    padding: 6px 12px;
    background: var(--nav-hover);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.75em;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}
.btn-nav-jump:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-nav-jump.active-jump {
    background: var(--brand-purple);
    color: #fff;
    border-color: var(--brand-purple);
}

/* --- JUSTERING FOR ANKER-SCROLLING --- */
.timeline-day-header {
    scroll-margin-top: 120px; /* Gjør at den ikke havner bak headeren når man hopper */
}
#scroll-to-now {
    scroll-margin-top: 150px;
}
/* Program-bookends (.tag-opening / .tag-finished) er pensjonert — .hub-tag.t-primary.is-loud og .t-gold.is-loud (ADR-0049). */
/* =========================================
   UX OPPGRADERING: SCROLLBAR & TAGS
   ========================================= */

/* 1. DEN NYE GLOBALE SCROLLBAREN */
::-webkit-scrollbar {
    width: 6px; /* Supertynn */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent; /* La bakgrunnen skinne gjennom */
}

::-webkit-scrollbar-thumb {
    /* Fra temaet, ikke hardkodet hvitt: `rgba(255,255,255,.1)` var usynlig i lyst tema, så en lang skinne
       (compo-modalen, Minecraft) så ut som den var slutt (Morten 2026-10-08). Dempet tekstfarge gir en
       synlig, men rolig tommel i alle tre temaene. */
    background: color-mix(in srgb, var(--text-muted) 60%, transparent);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary); /* Lyser opp i cyan ved hover! */
    box-shadow: 0 0 10px var(--brand-primary);
}

/* 2. STATUSMERKER — .hub-tag (Retning B «punkt + nøytral», ADR-0049, 2026-09-05)
   Merket er nøytralt (--surface-raised + kant, tekst i --text-main); bare PUNKTET bærer
   statusfargen. Da avhenger tekstkontrasten aldri av statusfargen, og én regel holder i alle
   tre temaer. Klassenavnet sier BETYDNING, ikke farge:
     .t-success .t-warning .t-danger .t-primary .t-gold .t-purple .t-muted
   + .is-loud   = «høy» tilstand (Live nå, Åpning): tint + farget tekst + ring rundt punktet
   + .is-struck = gjennomstreket (Kansellert)
   Tint/tekst regnes med color-mix fra ÉN variabel — ingen hardkodede rgba-tinter, ingen
   -rgb-tvillinger. Gløden styres av --glow-strength (variables.css, 0 % i Light).
   Små bokstaver i teksten («Live nå», ikke «LIVE NÅ»); ikonet er valgfritt, punktet er der alltid. */
.hub-tag {
    --s: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}
.hub-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--s);
    box-shadow: 0 0 6px color-mix(in srgb, var(--s) var(--glow-strength), transparent);
}
.hub-tag i { font-size: 0.9em; }

.hub-tag.t-success { --s: var(--status-success); }
.hub-tag.t-warning { --s: var(--status-warning); }
.hub-tag.t-danger  { --s: var(--status-danger); }
.hub-tag.t-primary { --s: var(--brand-primary); }
.hub-tag.t-gold    { --s: var(--brand-gold); }
.hub-tag.t-purple  { --s: var(--brand-purple); }
.hub-tag.t-muted   { --s: var(--text-muted); color: var(--text-muted); }

.hub-tag.is-loud {
    background: color-mix(in srgb, var(--s) 14%, transparent);
    border-color: color-mix(in srgb, var(--s) 50%, transparent);
    /* Teksten blir i --text-main også her: gull/gul blandet mot mørk tekst ga ~2,8:1 i Light
       (Copilot, PR #288). Tint, kant og ring bærer «høy»-tilstanden. */
}
.hub-tag.is-loud::before {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--s) 25%, transparent),
                0 0 8px color-mix(in srgb, var(--s) var(--glow-strength), transparent);
}
.hub-tag.is-struck { text-decoration: line-through; }

/* Flere merker på rad (roller, team): avstand med gap, aldri inline margin på merkene. */
.hub-tag-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* Klikkbare merker (programbyggerens «fjern tag», event-kortets «N mangler», sjekklistene i Drift nå). Som <button>
   arver merket ikke sidas font, og nettleseren gir det egen bakgrunn/kant — nullstill det. */
.hub-tag[onclick], button.hub-tag { cursor: pointer; }
button.hub-tag { font-family: inherit; appearance: none; }
.hub-tag[onclick]:hover, button.hub-tag:hover, a.hub-tag[href]:hover { border-color: var(--text-muted); }

/* Deltaker-programmets CSS (.pm-*) bor i program-member.css (Retning A, ADR-0042, 2026-09-06).
   Den gamle seksjonen «THE FRONTSTAGE: DEDIKERT PROGRAMSIDE» (.program-row, .row-card,
   .status-sidebar-item, .date-divider …) er slettet — ingen andre filer brukte den. */
/* =========================================
   TOAST NOTIFICATIONS (Systemvarsler)
   ========================================= */
/* =========================================
   TOAST — én skinne (hub_core.js: showHubToast(message, type), 2026-09-14)
   Kortflate + tekst i --text-main i alle temaer; TYPEN bærer bare kant og ikon
   (.is-success / .is-error / .is-info — info = merkefargen). Ingen inline farger.
   ========================================= */
/* Bildevelgeren (hub_core.js `hubBildeKnapper` + `hubBildeForh`, Oppgaver v2 stykke 1b): Oppgave-notat, Avvik-notat,
   «Meld avvik». «Ta bilde» (kameraet direkte) bare med fingerpeker — på PC er det bare «Velg bilder». */
.hub-bildeknapper { display: inline-flex; flex: none; gap: 8px; }
@media not all and (pointer: coarse) { .hub-bildeknapp.is-kamera { display: none; } }
.hub-bilde-forh { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-bilde-forh figure { position: relative; margin: 0; width: 72px; height: 72px; flex: none; }
.hub-bilde-forh img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; border: 1px solid var(--border-color); }
.hub-bilde-forh-fjern { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-color);
    background: var(--card-bg); color: var(--text-main); cursor: pointer; font-size: 12px; }
@media (pointer: coarse) { .hub-bilde-forh-fjern { width: 32px; height: 32px; } }

/* Lysboksen (hub_core.js `hubLysboks`, 2026-10-03) — ÉN skinne for å se et bilde stort (galleriet, dommerpanelet, notater,
   avvik, kampbevis). Galleriets utseende. Over modalene (100010), så et bilde fra et ark legger seg øverst. Bakgrunnen
   er en mørk scrim som modals.css sin. Myk inn/ut: kort toning når den åpnes og når bildet byttes — aldri evig. */
.hub-lysboks { position: fixed; inset: 0; z-index: 100020; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.92); padding: 4vh 6vw; touch-action: pan-y pinch-zoom; }   /* knip for å lese en kvittering */
.hub-lysboks[hidden] { display: none; }
.hub-lysboks:not([hidden]) { animation: hub-lysboks-inn .18s ease-out; }
@keyframes hub-lysboks-inn { from { opacity: 0; } }
.hub-lysboks-scene { margin: 0; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hub-lysboks-scene img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    transition: opacity .16s ease; }   /* .16s = ventetida i hubLysboks før neste bilde settes */
.hub-lysboks-scene img.is-laster { opacity: .25; }
.hub-lysboks-scene img.is-bytter { opacity: 0; }   /* forrige/neste: det gamle toner ut, det nye inn når det er lastet */
/* Bildeteksten står på et kort med temaets egne farger — på den mørke scrimen ville `--text-main` vært mørk i lyst tema. */
.hub-lysboks-scene figcaption { display: flex; gap: 12px; align-items: baseline; justify-content: center; flex-wrap: wrap; max-width: 720px;
    text-align: center; color: var(--text-main); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 12px; }
.hub-lysboks-scene figcaption[hidden] { display: none; }
.hub-lysboks-tekst { overflow-wrap: anywhere; }
.hub-lysboks-tekst:empty, .hub-lysboks-teller:empty { display: none; }
.hub-lysboks-teller { color: var(--text-muted); font-size: .85em; font-variant-numeric: tabular-nums; }
/* `under`-linjene (galleriet: vinner som `.hub-tag.t-gold`, personer med ikon) — egen rad under teksten og telleren. */
.hub-lysboks-under { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; align-items: center;
    font-size: .88em; color: var(--text-muted); overflow-wrap: anywhere; }
.hub-lysboks-under:empty { display: none; }
.hub-lysboks-lukk, .hub-lysboks-nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 1.1em; cursor: pointer; color: var(--text-main); background: var(--card-bg); border: 1px solid var(--border-color);
    transition: background .2s, color .2s; }
.hub-lysboks-lukk:hover, .hub-lysboks-nav:hover, .hub-lysboks-lukk:focus-visible, .hub-lysboks-nav:focus-visible { background: var(--brand-primary); color: var(--text-invert); }
.hub-lysboks-lukk { top: 3vh; right: 3vw; }
.hub-lysboks-nav { top: 50%; transform: translateY(-50%); }
.hub-lysboks-nav.is-forrige { left: 2vw; }
.hub-lysboks-nav.is-neste { right: 2vw; }
.hub-lysboks-nav[hidden] { display: none; }
@media (max-width: 600px) {
    .hub-lysboks { padding: 64px 8px; }
    /* Knappene har 64 px over og under — scenen får bare det som er igjen, så et høyt stående bilde med tekst ikke
       havner under ✕ og pilene (Copilot #525). Bildeteksten ruller selv om den er lang. */
    .hub-lysboks-scene { max-height: 100%; min-height: 0; }
    .hub-lysboks-scene img { max-height: calc(100dvh - 128px - 72px); min-height: 0; }
    .hub-lysboks-scene figcaption { max-height: 60px; overflow-y: auto; }
    .hub-lysboks-nav { width: 44px; height: 44px; top: auto; bottom: 12px; transform: none; }
    .hub-lysboks-nav.is-forrige { left: 12px; }
    .hub-lysboks-nav.is-neste { right: 12px; }
    .hub-lysboks-lukk { top: 12px; right: 12px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .hub-lysboks:not([hidden]) { animation: none; }
    .hub-lysboks-scene img { transition: none; }
}

/* Autolagring — ÉN skinne (2026-10-04): linja under et felt som lagrer seg selv. Teksten settes av
   `hubAutolagring()` / `hubAutolagretTekst()` i hub_core.js. Skjult eller låst felt → ingen linje. */
.hub-autolagret { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; color: var(--text-muted); text-align: right; }
.hub-autolagret.is-feil { color: var(--status-danger); }
[hidden] + .hub-autolagret, :disabled + .hub-autolagret { display: none; }

.hub-toast {
    position: fixed;
    background: var(--card-bg, #1f2833);
    color: var(--text-main); /* var #fff — usynlig på lyst kort i Light */
    border: 1px solid var(--border-color);
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 100020; /* over modal-skallet (100010) — toasten svarer ofte på et modal-lagre */
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    max-width: min(420px, calc(100vw - 60px));
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
    
    /* Standard plassering: PC (nede til høyre) */
    bottom: 30px;
    right: 30px;
    transform: translateY(50px);
}
.hub-toast .hub-toast-icon { font-size: 1.2em; flex-shrink: 0; }
.hub-toast .hub-toast-text { min-width: 0; overflow-wrap: anywhere; }
.hub-toast.is-success { border-color: var(--status-success); }
.hub-toast.is-success .hub-toast-icon { color: var(--status-success); }
.hub-toast.is-error   { border-color: var(--status-danger); }
.hub-toast.is-error   .hub-toast-icon { color: var(--status-danger); }
.hub-toast.is-info    { border-color: var(--brand-primary); }
.hub-toast.is-info    .hub-toast-icon { color: var(--brand-primary); }

.hub-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Mobil-plassering: Toppen av skjermen (Sentrert som iOS varsler) */
@media (max-width: 768px) {
    .hub-toast {
        bottom: auto;
        top: 20px;
        left: 5%;
        right: 5%;
        width: 90%;
        max-width: none;
        transform: translateY(-50px);
    }
}

/* Modal-skallet (.hub-modal + .hub-modal-content/-header/-body/-footer) bor i modals.css (ADR-0051). */

/* =========================================
   MODALER & BRYTERE (Refaktorert fra Events)
   ========================================= */

/* Toggle Bryter */
/* Bryteren er 40x20px — for liten som tommel-mål alene. min-height gjør hele
   raden (etikett + bryter) til et 44px trykkfelt (WCAG 2.5.5) uten å endre
   utseendet på selve bryteren. */
.switch-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
/* Etikett ved siden av en bryter. Var duplisert som identisk inline style i
   tab_participants.php og admin_seating.php. */
.switch-label { font-size: 0.8em; text-transform: uppercase; color: var(--brand-primary); font-weight: bold; }
.switch { position: relative; display: inline-block; width: 40px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--input-bg); transition: .4s; border-radius: 20px; border: 1px solid var(--border-color);}
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: var(--text-main); transition: .4s; border-radius: 50%; }
.switch input:checked + .slider { background-color: var(--brand-primary); border-color: var(--brand-primary);}
.switch input:checked + .slider:before { transform: translateX(20px); background-color: var(--text-invert); }
/* Selve input-en er usynlig (opacity:0), så uten dette får tastatur-brukere
   INGEN indikasjon på at bryteren er fokusert. */
.switch input:focus-visible + .slider { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* .modal-overlay / .modal-box / .close-btn er pensjonert — .hub-modal-content.is-sm + .hub-modal-close (ADR-0051). */

/* --- ACTION ICON KNAPPER (Tannhjul, Slett, E-post, etc) --- */
.action-icon-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 5px; margin: 0 4px; transition: 0.2s; font-size: 1.1em; }
.action-icon-btn:hover { color: var(--brand-primary); transform: scale(1.1); }
.action-icon-btn.danger:hover { color: var(--status-danger); }
.action-icon-btn.warning:hover { color: var(--status-warning); }

/* ==========================================================================
   CREW MANAGEMENT: FILTER BAR & TABELL-ARKITEKTUR (Josefine Approved)
   ========================================================================== */

/* 1. FILTER BAR CONTAINER */
.crew-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    padding: 15px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Dynamisk glød-klasse når filter er aktivt (The Panic Sign) */
.crew-filter-bar.filters-active {
    border-color: var(--brand-primary);
    box-shadow: 0 0 12px rgba(var(--brand-primary-rgb), 0.2);
    /* Statisk glød — den evige pulsen (filterPulse) er fjernet 2026-09-20: ingen `infinite`
       på alltid-synlige elementer (CLAUDE.md), og lista under har backdrop-filter. */
}

/* 2. Statusfilter-gruppa bruker fane-skinna: `.hub-chip-nav.is-plain` (ADR-0048).
   (`.filter-toggle-group`/`.filter-toggle-btn` er pensjonert.) */

/* 3. THE PANIC BUTTON (Nullstill-knapp) */
.btn-panic-reset {
    background: transparent;
    color: var(--status-warning);
    border: 1px solid var(--status-warning);
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-panic-reset:hover {
    background: rgba(255, 152, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.2);
}

/* =========================================
   FLASH-MELDING etter POST → redirect (?msg=…&msg_type=success|error)
   Bodde i events.css, men user_admin.php og admin_assets.php bruker samme markup uten å
   laste det arket — da rendret meldingen som naken tekst. Hører hjemme her av samme grunn
   som .hub-table under.
   ========================================= */
.alert { padding: 15px; margin-bottom: 25px; border-radius: 8px; font-weight: bold; display: flex; align-items: center; gap: 10px; }
.alert-success { background: transparent; color: var(--brand-primary); border: 1px solid var(--brand-primary); }
.alert-error { background: transparent; color: var(--status-danger); border: 1px solid var(--status-danger); }
.alert-warning { background: transparent; color: var(--status-warning); border: 1px solid var(--status-warning); }

/* =========================================
   HUB-TABELL (kanonisk datatabell)
   Bodde tidligere KUN i events.css (i to nesten like kopier), så hver side som
   ikke lastet det arket fikk browser-default: sentrerte <th> som ikke sto over
   sin egen kolonne. Hører hjemme her fordi header.php laster hub-layout.css
   overalt — da ser en tabell likt ut uansett hvilken modul den står i.
   ========================================= */
.hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.hub-table th,
.hub-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}
.hub-table th {
    color: var(--brand-primary);
    text-transform: uppercase;
    font-size: 0.8em;
    opacity: 0.8;
}
.hub-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Kolonnevelger + sortering (ADR-0117, felles skinne — hub_table_kolonner.js). Skjult kolonne = klasse på både
   <th> og <td>; sorterbar overskrift = <button class="hub-sort"> som JS legger rundt teksten, med aria-sort på <th>. */
.hub-table .is-kol-skjult { display: none; }
.hub-table th:has(> .hub-sort) { padding: 0; }
.hub-sort {
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
    background: none; border: 0; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 20px; width: 100%;
}
.hub-sort:hover { color: var(--text-main); }
.hub-sort::after { content: "↕"; opacity: 0; color: var(--text-muted); }
.hub-sort:hover::after { opacity: 1; }
.hub-table th[aria-sort="ascending"] .hub-sort::after { content: "↑"; opacity: 1; }
.hub-table th[aria-sort="descending"] .hub-sort::after { content: "↓"; opacity: 1; }
.hub-kol-panel { padding: 12px; width: min(300px, calc(100vw - 16px)); overflow-y: auto; }
.hub-kol-gruppe { margin: 10px 4px 6px; font-size: 0.7em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.hub-kol-gruppe:first-child { margin-top: 2px; }
.hub-kol-valg { padding: 3px 6px; border-radius: 7px; font-size: 0.9em; }
.hub-kol-valg:hover { background: var(--surface-raised); }
.hub-kol-valg:has(input:disabled) { cursor: default; color: var(--text-muted); }
.hub-kol-valg small { margin-left: auto; font-size: 0.8em; color: var(--text-muted); }
.hub-kol-fot { display: flex; gap: 8px; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); margin-top: 10px; padding-top: 10px; }
.hub-kol-fot small { color: var(--text-muted); }
.hub-kol-tilbake { font: inherit; font-size: 0.9em; font-weight: 600; color: var(--brand-primary); background: none; border: 0; padding: 4px; cursor: pointer; }
.hub-kol-antall { color: var(--text-muted); font-weight: 400; }

/* 4. RESPONSERBAR STICKY TABELL-KOLONNE (Zero Layout Shift) */
.table-responsive {
    overflow-x: auto;
    width: 100%;
    position: relative;
}

/* Tvinger første kolonne (Identity) til å låse seg horisontalt på mobil */
.table-responsive table th.sticky-col-identity,
.table-responsive table td.sticky-col-identity {
    position: sticky;
    left: 0;
    background: var(--card-bg); /* Matcher kortet den ligger i */
    z-index: 5;
    min-width: 180px;
}

/* Gir en elegant skygge-effekt mot høyre så man ser tabellen scroller "under" navnet */
.table-responsive table td.sticky-col-identity::after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0));
    pointer-events: none;
}

/* Hover-effekt på rader må overstyre sticky-bakgrunnen */
.table-responsive table tr:hover td.sticky-col-identity {
    background: var(--nav-hover) !important; /* Eller din definerte rad-hover farge */
}

/* 5. PIXEL-PERFECT AVATARS */
.crew-avatar-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.crew-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand-primary);
    box-shadow: 0 0 5px rgba(var(--brand-primary-rgb), 0.3);
    background: var(--bg-main);
}

/* Profil-skallet for crew_profile.php */
.crew-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 20px;
}
@media (min-width: 992px) {
    .crew-profile-grid { grid-template-columns: 300px 1fr; }
}

/* Stor profil-avatar med opplastings-hover */
.profile-avatar-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    border: 3px solid var(--brand-primary);
    box-shadow: 0 0 15px rgba(var(--brand-primary-rgb), 0.4);
    overflow: hidden;
    background: #12161f;
}
.profile-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: var(--brand-primary);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.profile-avatar-container:hover .avatar-upload-overlay {
    opacity: 1;
}

/* Faste rammer på tabell-avatarer for å stoppe flimring/jumping */
.crew-avatar-frame {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--brand-primary);
    background-color: #1a1f29;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%2366fcf1" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C36.1 288 0 324.1 0 368.1V416c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-47.9c0-44-36.1-80.1-89.6-80.1z"/></svg>');
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    overflow: hidden;
    flex-shrink: 0;
}
.crew-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Seniority Badge / Gamified Level */
.seniority-level-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(176, 38, 255, 0.15);
    border: 1px solid var(--purple);
    color: var(--purple);
    font-family: monospace;
    font-weight: bold;
    font-size: 0.85em;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 8px rgba(176, 38, 255, 0.2);
}

/* INTERNE PROFIL-FANER — knappene bruker fane-skinna (`.hub-chip-nav.is-plain`, ADR-0048);
   kun panelene er igjen her. */
.profile-tab-pane { display: none; animation: fadeIn 0.3s ease; }
.profile-tab-pane.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* GLASSMORPHISM POP PÅ KORTENE */
.crew-profile-grid .card {
    background: rgba(31, 40, 51, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* CYBER-TIMELINE (ÆRESVEGGEN) */
.cyber-timeline {
    border-left: 2px solid rgba(var(--brand-primary-rgb), 0.3);
    padding-left: 20px;
    margin-left: 10px;
    position: relative;
}
.history-item {
    position: relative;
    padding-bottom: 20px;
}
.history-item::before {
    content: '';
    position: absolute;
    left: -26px; /* Juster for å treffe linjen nøyaktig */
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 2px solid var(--brand-primary);
    box-shadow: 0 0 8px var(--brand-primary);
}

/* ==============================================
   ONBOARDING WIZARD
   ============================================== */
.wizard-container {
    max-width: 600px;
    margin: 50px auto;
    background: rgba(10, 12, 16, 0.9);
    border: 1px solid var(--brand-primary);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.2);
    overflow: hidden;
}
.wizard-header {
    background: #000;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.wizard-header h2 {
    color: var(--brand-primary);
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 2px;
}
.wizard-step {
    padding: 30px;
    display: none;
}
.wizard-step.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}
.wizard-footer {
    padding: 15px 30px;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid var(--border-color);
    text-align: right;
}
.wizard-input-group {
    margin-bottom: 20px;
}
.wizard-input-group label {
    display: block;
    color: var(--brand-primary);
    margin-bottom: 5px;
    font-size: 0.9rem;
}
.wizard-input-group input {
    width: 100%;
    box-sizing: border-box;
    background: #111;
    border: 1px solid var(--border-color);
    color: #fff;
    padding: 12px;
    border-radius: 4px;
    font-family: monospace;
}
.wizard-input-group input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 5px rgba(var(--brand-primary-rgb), 0.5);
}
.wizard-btn {
    background: var(--brand-primary);
    color: var(--text-invert); /* Var #000: mørk tekst på #0066cc ga ~3,6:1 i Light-mode */
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}
.wizard-btn:hover {
    /* Var `background: #fff` — knappen hoppet til hvitt uansett tema. Lysner nå sitt eget
       fyll i stedet, så effekten er den samme i alle tre temaene. */
    filter: brightness(1.12);
    box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.5);
}
/* =========================================================================
   DELINGS-MODALEN (.share-*) — «Del konkurransen» (Compo, ADR-0047) og
   «Del eventet» (Event Hub, ROADMAP 2.11). Flyttet hit fra compo-admin.css
   2026-09-07 da modalen fikk to eiere. Bygger på .hub-modal (modals.css).
   ========================================================================= */
.share-kilder { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; }
.share-modal .share-kilde {
    flex: 1 1 150px;
    justify-content: center;
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.share-modal .share-kilde:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.share-modal .share-kilde-kopiert { border-color: var(--status-success); color: var(--status-success); }
.share-teller { margin: 5px 0 20px; }
.share-preview-tittel {
    margin: 0 0 8px;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
/* Etterligner Discord/Facebook-kortet: bilde over, sidenavn, tittel, beskrivelse. Grå kant
   med vilje — det er «deres» kort, ikke vårt tema. */
.share-preview {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--brand-primary);
    border-radius: 6px;
    background: var(--surface-raised);
    overflow: hidden;
}
.share-preview-bilde { width: 100%; aspect-ratio: 1.91 / 1; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.share-preview-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-preview-bilde-tom { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 2em; aspect-ratio: 4 / 1; }
.share-preview-tekst { padding: 10px 12px; }
.share-preview-site { font-size: 0.72em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.share-preview-h { font-weight: 700; color: var(--brand-primary); margin: 3px 0; }
.share-preview-d { font-size: 0.88em; color: var(--text-main); opacity: 0.85; min-height: 1.2em; white-space: pre-line; }
/* Kompakt kort (twitter:card = summary): tekst først, lite kvadratisk bilde til høyre — slik Discord
   tegner billettlenka. Det store kortet over er konkurransenes (bilde-først). */
.share-preview.is-summary { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 12px; padding: 12px; }
.share-preview.is-summary .share-preview-bilde { width: 80px; height: 80px; flex: none; aspect-ratio: auto; border-radius: 4px; }
.share-preview.is-summary .share-preview-bilde-tom { font-size: 1.4em; }
.share-preview.is-summary .share-preview-tekst { padding: 0; flex: 1; min-width: 0; }
.share-advarsler { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.share-advarsler li { font-size: 0.85em; color: var(--text-muted); }
.share-advarsler li .fa-triangle-exclamation { color: var(--status-warning); }
.share-advarsler li .fa-circle-info,
.share-advarsler li .fa-clock { color: var(--brand-primary); }
.share-intro { margin: 0 0 12px; color: var(--text-main); }
.share-intro-label { color: var(--text-muted); font-size: 0.9em; margin-right: 6px; }
.share-hjelp { margin: 0 0 6px; font-size: 0.9em; color: var(--text-muted); line-height: 1.5; }
.share-hjelp strong { color: var(--text-main); }
.share-hjelp i { color: var(--brand-primary); }
.share-advarsel-linje { margin: 0 0 12px; font-size: 0.85em; color: var(--status-warning); }
/* Plakat-delen (QR + lenke + knapper) står mellom kilde-knappene og forhåndsvisningen —
   den trenger luft under seg, ellers klistrer «Last ned PNG» seg til kort-overskriften. */
.share-plakat { margin-bottom: 26px; }
.share-plakat .qr-actions { margin-top: 4px; }
.share-modal .share-kilde-feilet { border-color: var(--status-warning); color: var(--status-warning); }

/* Merkebilde fra Bildebiblioteket inni et merke (Merke::innhold(), ADR-0101) — alle flater der merket tegnes. */
.merke-bilde { width: 78%; height: 78%; object-fit: contain; border-radius: 50%; display: block; }

/* Utstyrsskanneren (asset_scanner.js lager modalen selv): kamerafeltet. Global fordi «Skann QR» i Oppgave-arket
   (ADR-0121) åpner den fra alle sider, ikke bare utstyrssidene. */
.ur-qr-reader { width: 100%; min-height: 280px; border: 2px dashed var(--border-color); border-radius: 8px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.ur-qr-reader.is-live { display: block; }   /* mens kameraet kjører: <video>/overlegg fra html5-qrcode skal ikke klemmes av flex */

/* Bildestørrelse i Hub Editor (hub_editor.js, ADR-0011): klikk på et bilde i editoren → S/M/L/Full (bredde i %).
   Felles for Nyheter og Signage «Fritt design». Fixed og over modaler/sidepanel (100010). */
.hub-img-sizer {
    position: fixed; z-index: 100015; display: flex; gap: 4px;
    background: var(--card-bg); border: 1px solid var(--brand-primary);
    border-radius: 8px; padding: 4px; box-shadow: var(--shadow-main);
}
.hub-img-sizer[hidden] { display: none; }
.hub-img-sizer button {
    background: none; border: none; color: var(--text-main); cursor: pointer;
    font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 5px;
}
.hub-img-sizer button:hover, .hub-img-sizer button:focus-visible { background: var(--brand-primary); color: var(--bg-main); }
.hub-img-sizer button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--brand-primary); }
.ql-editor.har-bildestorrelse img { cursor: pointer; }   /* bare der velgeren finnes */

/* Hub Editor (Quill 2, ADR-0126) i temaets farger — ÉN skinne: sett `.hub-editor` på en beholder rundt editoren.
   Brukes av Nyhetssentralen og Kunnskapsbasen (flyttet hit fra nyhetssentralen.css + kunnskap.css, review #631).
   Høyde og innvendig luft er flatens egen (`.ns-sak .ql-editor`, `.kb-skriv .ql-editor`). Signage har fortsatt sin egen. */
.hub-editor .ql-toolbar.ql-snow { background: var(--bg-main); border-color: var(--border-color); border-radius: 8px 8px 0 0; }
.hub-editor .ql-container.ql-snow { border-color: var(--border-color); border-radius: 0 0 8px 8px; font-family: inherit; font-size: 1em; }
.hub-editor .ql-editor { background: var(--input-bg); color: var(--text-main); line-height: 1.65; }
.hub-editor .ql-editor.ql-blank::before { color: var(--text-muted); font-style: normal; }
.hub-editor .ql-snow .ql-stroke { stroke: var(--text-muted); }
.hub-editor .ql-snow .ql-fill { fill: var(--text-muted); }
.hub-editor .ql-snow .ql-picker { color: var(--text-muted); }
.hub-editor .ql-snow .ql-picker-options { background: var(--card-bg); border-color: var(--border-color); }
.hub-editor .ql-snow button:hover .ql-stroke, .hub-editor .ql-snow button.ql-active .ql-stroke { stroke: var(--brand-primary); }
.hub-editor .ql-snow button:hover .ql-fill, .hub-editor .ql-snow button.ql-active .ql-fill { fill: var(--brand-primary); }
.hub-editor .ql-snow .ql-editor blockquote { border-left-color: var(--border-color); color: var(--text-muted); }