/* VisionLAN - Pages: dashboard, profile, auth, messaging, bracket, integrations */

/* ══════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════ */

.dashboard-greeting {
    margin-bottom: 0;
}

.dashboard-greeting h2 {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0;
}

/* Icon circle used in ticket/empty states */
.dash-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: var(--vl-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--icon-color) 15%, transparent);
    color: var(--icon-color);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Shoutbox wrapper — fill available height with bottom padding */
.dashboard-shoutbox-wrap {
    padding-bottom: 2rem;
}
.dashboard-shoutbox-wrap .shoutbox {
    height: calc(100vh - 180px);
    min-height: 400px;
    max-height: none;
}
.dashboard-shoutbox-wrap .shoutbox-messages {
    max-height: none;
}

@media (max-width: 991.98px) {
    .dashboard-shoutbox-wrap .shoutbox {
        height: 400px;
    }
}

/* ══════════════════════════════════════════
   PROFILE
   ══════════════════════════════════════════ */

.profile-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--vl-gradient-accent);
    color: #fff;
}

.profile-cover-wrapper {
    position: relative;
}

.profile-cover {
    height: 200px;
    border-radius: var(--vl-radius) var(--vl-radius) 0 0;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(0, 206, 201, 0.1));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-cover-edit {
    position: absolute;
    inset: 0;
    border-radius: var(--vl-radius) var(--vl-radius) 0 0;
    background: rgba(0, 0, 0, 0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.9rem;
    opacity: 0;
}

.profile-cover-edit:hover {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.profile-cover-display {
    position: relative;   /* forankrer .detail-cover-edit */
    height: 200px;
    border-radius: var(--vl-radius);
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(0, 206, 201, 0.1));
    background-size: cover;
    background-position: center;
}

.profile-cover-display--card-top {
    border-radius: var(--vl-radius) var(--vl-radius) 0 0;
}

/* Raden med avatar + navn som henger over coverkanten.
   `.profile-cover-display` er `position: relative` (den forankrer
   `.detail-cover-edit`), og et posisjonert element males OVER etterfoelgende
   innhold som ikke selv er posisjonert. Uten `z-index` her forsvant altsaa
   avataren BAK coveret — det skjedde paa `/admin/users/{id}`, der coveret
   ligger inne i kortet. Profilsida og lagsida slapp unna ved et uhell:
   raden deres ligger i et Bootstrap-`.card`, som selv er `position: relative`.
   Verdiene stod inline tre steder foer dette; cover-bilder.md forbyr det. */
.profile-header-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

/* Handlingsmenyen i kortets topp. `flex: 0 0 auto` saa ellipsisen ikke
   klemmes bort av et langt navn — det er navnet som skal brytes, ikke
   knappen. Se docs/design/interaksjon.md. */
.profile-header-actions {
    margin-left: auto;
    flex: 0 0 auto;
    padding-bottom: 4px;
}

/* Kortet som BAERER menyen maa male over kortet under.

   `.card` har `backdrop-filter`, og det gjoer hvert kort til en egen
   stablingskontekst. Mellom to likestilte kontekster avgjoer DOM-rekkefoelgen
   alene — saa kortet UNDER malte over menyen uansett hvilken `z-index`
   `.profile-header-row` hadde inni sitt eget kort. Menyen laa ikke bare bak;
   den ble ogsaa blurret av backdrop-filteret til kortet foran.

   `:has()` gjoer at neste side som tar i bruk moensteret ikke trenger aa vite
   om dette. 5 er godt under topbaren (100), som fortsatt skal ligge oeverst. */
.card:has(.profile-header-actions) {
    position: relative;
    z-index: 5;
}

.profile-avatar-edit {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--vl-bg-card-solid);
    background: var(--vl-bg-card-solid);
}

.profile-avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vl-primary);
    color: #fff;
    border: 2px solid var(--vl-bg-card-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    transition: background 0.15s;
}

.profile-avatar-edit-btn:hover {
    background: var(--vl-primary-hover);
}

.profile-avatar-display {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--vl-bg-card-solid);
    background: var(--vl-bg-card-solid);
    flex-shrink: 0;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 0.5rem;
}

.avatar-option {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.15s;
    opacity: 0.7;
}

.avatar-option:hover {
    opacity: 1;
    border-color: var(--vl-border);
    transform: scale(1.1);
}

.avatar-option.selected {
    opacity: 1;
    border-color: var(--vl-accent);
    box-shadow: 0 0 0 2px var(--vl-accent-glow);
}

/* ══════════════════════════════════════════
   AUTH PAGES (login, register, onboarding)
   ══════════════════════════════════════════ */

.auth-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.auth-card {
    background: var(--vl-bg-card);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 80px rgba(108, 92, 231, 0.06);
}

.auth-card h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.auth-card .brand-logo {
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--vl-gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
}

.auth-card .btn-primary {
    padding: 0.7rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
}

.auth-card .form-control {
    padding: 0.75rem 1rem;
}

.password-wrapper {
    position: relative;
}

.password-wrapper .form-control {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--vl-text-muted);
    cursor: pointer;
    transition: color 0.15s;
    z-index: 2;
}

.password-toggle:hover {
    color: var(--vl-text);
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
}

.auth-footer a {
    color: var(--vl-text-muted);
    text-decoration: underline;
    text-decoration-color: rgba(139, 148, 158, 0.3);
}

.auth-footer a:hover {
    color: var(--vl-text);
}

.auth-logo {
    height: 36px;
    width: auto;
    opacity: 0.95;
}

.btn-social {
    background: var(--vl-glass);
    border: 1px solid var(--vl-border);
    color: var(--vl-text-muted);
    border-radius: var(--vl-radius-xs);
    padding: 0.6rem;
    transition: all 0.2s ease;
}

.btn-social:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--vl-text);
    border-color: var(--vl-glass-border);
}

.btn-social:disabled {
    opacity: 0.4;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--vl-text-muted);
    font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vl-border);
}

@media (max-width: 576px) {
    .auth-card {
        padding: 2rem 1.5rem;
        border-radius: var(--vl-radius-sm);
    }

    .auth-container {
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════
   MESSAGING — Split-panel (Messenger/Discord)
   ══════════════════════════════════════════ */

.msg-layout {
    display: flex;
    gap: 0.5rem;
    /* Break out of .app-content padding and max-width */
    max-width: none;
    margin: -0.5rem -1.5rem -1.5rem;
    padding: 0.5rem;
    /* Fill parent fully: content-box height + negated padding (0.5rem top + 1.5rem bottom = 2rem) */
    height: calc(100% + 2rem);
    overflow: hidden;
}

.msg-sidebar {
    width: 340px;
    min-width: 280px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    background: var(--vl-bg-card);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    flex-shrink: 0;
    overflow: hidden;
}

.msg-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.msg-sidebar-header h5 { margin: 0; font-size: 1rem; }

.msg-sidebar-search {
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
}

.msg-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem;
}

.msg-conv-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--vl-radius-xs);
    cursor: pointer;
    color: var(--vl-text);
    transition: background 0.12s;
}

.msg-conv-item:hover {
    background: var(--vl-glass);
}

.msg-conv-active {
    background: rgba(108, 92, 231, 0.12);
}

.msg-conv-active:hover {
    background: rgba(108, 92, 231, 0.16);
}

.msg-conv-unread .msg-conv-name {
    color: var(--vl-text);
    font-weight: 700;
}

.msg-conv-unread .msg-conv-preview {
    color: var(--vl-text);
    font-weight: 500;
}

.msg-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.msg-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vl-gradient-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.msg-avatar-support {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vl-primary);
    border-radius: 50%;
    padding: 4px;
}
.msg-avatar-support img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.msg-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.msg-avatar-sm.msg-avatar-placeholder {
    display: inline-flex;
    font-size: 0.65rem;
}

.msg-conv-body {
    flex: 1;
    min-width: 0;
}

.msg-conv-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.msg-conv-name {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-conv-time {
    font-size: 0.7rem;
    color: var(--vl-text-muted);
    flex-shrink: 0;
}

.msg-conv-preview {
    font-size: 0.78rem;
    color: var(--vl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.msg-unread-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--vl-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

.msg-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--vl-bg-card);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    overflow: hidden;
}

.msg-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chat-container {
    display: flex;
    flex-direction: column;
    margin: -0.5rem -1.5rem -1.5rem;
    height: calc(100% + 2rem);
    overflow: hidden;
}
.chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.chat-back {
    background: none;
    border: none;
    color: var(--vl-text-muted);
    font-size: 1rem;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.15s;
}

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

.chat-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0;
}

.chat-header-name {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-sub {
    font-weight: 400;
}

/* ── Right info sidebar (Messenger-style) ── */

.msg-info-sidebar {
    width: 340px;
    min-width: 280px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--vl-bg-card);
}

.msg-info-sidebar[hidden] {
    display: none;
}

.msg-info-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vl-glass-border);
    flex-shrink: 0;
}

.msg-info-header-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.msg-info-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 1rem;
    gap: 0.5rem;
}

.msg-info-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.msg-info-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vl-gradient-accent);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.msg-info-name {
    font-weight: 600;
    font-size: 1.05rem;
}

.msg-info-sub {
    font-size: 0.8rem;
    color: var(--vl-text-muted);
}

.msg-info-actions {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    justify-content: center;
}

.msg-info-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: var(--vl-text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    transition: color 0.15s;
    padding: 0.4rem;
    text-decoration: none;
}

.msg-info-action-btn i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vl-glass);
    font-size: 0.9rem;
}

.msg-info-action-btn:hover {
    color: var(--vl-text);
}

.msg-info-action-btn.active i {
    background: var(--vl-primary);
    color: #fff;
}

.msg-info-divider {
    height: 1px;
    background: var(--vl-glass-border);
    margin: 0;
}

/* Legacy info panel (kept for group inline sections) */
.chat-info-panel {
    border-bottom: 1px solid var(--vl-border);
    background: var(--vl-surface);
    max-height: 50vh;
    overflow-y: auto;
}

.chat-info-inner {
    padding: 1rem;
}

.chat-info-section {
    margin-bottom: 1rem;
}

.chat-info-section:last-child {
    margin-bottom: 0;
}

.chat-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--vl-text-muted);
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    display: block;
}

.chat-info-members {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-info-member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    border-radius: 0.375rem;
    transition: background 0.15s;
}

.chat-info-member:hover {
    background: rgba(255,255,255,0.04);
}

.chat-info-member-name {
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chat-date-sep {
    text-align: center;
    margin: 1rem 0 0.5rem;
}

.chat-date-sep span {
    font-size: 0.7rem;
    color: var(--vl-text-muted);
    background: var(--vl-bg-card-solid);
    padding: 0.2rem 0.75rem;
    border-radius: 10px;
    text-transform: capitalize;
}

.chat-msg { max-width: 70%; }
.chat-msg-mine { align-self: flex-end; text-align: right; }
.chat-msg-other {
    align-self: flex-start;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 0.65rem;
}

.chat-msg-content {
    min-width: 0;
}

.chat-msg-sender {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--vl-accent);
    margin-bottom: 2px;
    padding-left: 0.5rem;
}

.chat-bubble {
    display: inline-block;
    padding: 0.5rem 0.85rem;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.45;
    word-break: break-word;
    text-align: left;
}

.chat-bubble-mine {
    background: var(--vl-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-bubble-other {
    background: var(--vl-bg-elevated);
    color: var(--vl-text);
    border-bottom-left-radius: 4px;
}

.chat-bubble-deleted { opacity: 0.5; font-style: italic; }

/* Card messages */
.chat-card {
    min-width: 220px;
    max-width: 320px;
}
.chat-card-image {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}
.chat-card-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}
.chat-card-body {
    padding: 0.5rem 0;
}
.chat-card-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
.chat-card-desc {
    font-size: 0.8rem;
    color: var(--vl-text-muted);
}
.chat-card-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
}
.chat-card-actions .btn {
    flex: 1;
    font-size: 0.75rem;
}
.chat-card-status {
    padding-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.chat-card-status-accepted {
    color: var(--vl-success, #28a745);
}
.chat-card-status-declined,
.chat-card-status-withdrawn {
    color: var(--vl-text-muted);
}

/* Card in own bubble — adjust for blue background */
.chat-bubble-mine .chat-card-desc,
.chat-bubble-mine .chat-card-status {
    color: rgba(255,255,255,0.7);
}
.chat-bubble-mine .chat-card-status-accepted {
    color: #8fffb0;
}

/* Link preview cards */
.chat-link-preview {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.15);
    text-decoration: none;
    color: inherit;
    margin-top: 0.4rem;
    max-width: 340px;
}
.chat-link-preview:hover {
    background: rgba(0,0,0,0.25);
}
.chat-link-preview-img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    display: block;
}
.chat-link-preview-body {
    padding: 0.5rem 0.65rem;
}
.chat-link-preview-domain {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.6;
    margin-bottom: 0.15rem;
}
.chat-link-preview-title {
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-link-preview-desc {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-bubble-other .chat-link-preview {
    background: rgba(255,255,255,0.06);
}
.chat-bubble-other .chat-link-preview:hover {
    background: rgba(255,255,255,0.1);
}

.chat-msg-time {
    font-size: 0.65rem;
    color: var(--vl-text-muted);
    margin-top: 2px;
    padding: 0 0.5rem;
}

.chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    background: var(--vl-bg-elevated);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    padding: 0.5rem 0.75rem;
    color: var(--vl-text);
    font-size: 0.875rem;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s;
}

.chat-input:focus { border-color: var(--vl-primary); }
.chat-input::placeholder { color: var(--vl-text-muted); }

.chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--vl-primary);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.chat-send-btn:hover { background: var(--vl-primary-hover); }
.chat-send-btn:active { transform: scale(0.95); }

/* Messages — modal-specific classes (tabs, user results) */

.msg-user-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--vl-radius-xs);
    cursor: pointer;
    transition: background 0.15s;
}

.msg-user-result:hover { background: var(--vl-glass); }
.msg-user-selected { opacity: 0.6; }

.msg-selected-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.msg-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    border-radius: 999px;
    padding: 0.2rem 0.6rem 0.2rem 0.2rem;
    font-size: 0.8rem;
    color: var(--vl-text);
}

.msg-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 0.55rem;
}

.msg-chip-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vl-primary);
    color: #fff;
}

.msg-chip-remove {
    cursor: pointer;
    font-size: 0.65rem;
    opacity: 0.6;
    margin-left: 0.15rem;
}

.msg-chip-remove:hover { opacity: 1; }

.chat-attach-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--vl-glass-border);
    background: transparent;
    color: var(--vl-text-muted);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.chat-attach-btn:hover {
    color: var(--vl-primary);
    border-color: var(--vl-primary);
}

.chat-image {
    max-width: 280px;
    max-height: 300px;
    border-radius: var(--vl-radius-xs);
    display: block;
    cursor: pointer;
    transition: opacity 0.15s;
}
.chat-image:hover { opacity: 0.85; }

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--vl-radius-sm);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.lightbox-close:hover { opacity: 1; }

/* Typing indicator */
.chat-typing-indicator {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    opacity: 0.7;
}
.typing-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vl-text-muted);
    animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.chat-file-link {
    display: flex;
    align-items: center;
    color: var(--vl-primary);
    text-decoration: none;
    font-size: 0.85rem;
}

.chat-file-link:hover { text-decoration: underline; }

/* Tablet: info sidebar as overlay */
@media (max-width: 1199.98px) {
    .msg-info-sidebar {
        position: fixed;
        right: 0.5rem;
        top: calc(var(--vl-topbar-height) + 0.5rem);
        height: calc(100vh - var(--vl-topbar-height) - 1rem);
        z-index: 100;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
        width: 340px;
        transform: translateX(calc(100% + 1rem));
        transition: transform 0.25s ease;
    }
    .msg-info-sidebar:not([hidden]) {
        transform: translateX(0);
    }
    .msg-info-backdrop {
        display: block;
    }
}

@media (min-width: 1200px) {
    .msg-info-backdrop {
        display: none !important;
    }
}

.msg-info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.4);
    display: none;
}

/* Mobile: stacked panels (list → chat → info) like Messenger */
@media (max-width: 767.98px) {
    .msg-layout {
        gap: 0;
        padding: 0;
        margin: -0.5rem -1rem -1rem;
        height: calc(100% + 1.5rem);
    }

    .msg-sidebar {
        width: 100%;
        max-width: none;
        min-width: 0;
        border-radius: 0;
        border: none;
    }

    .msg-chat {
        display: none;
        width: 100%;
        border-radius: 0;
        border: none;
    }

    .msg-info-sidebar {
        position: fixed;
        inset: 0;
        top: var(--vl-topbar-height);
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        z-index: 100;
        transform: none !important;
        box-shadow: none;
        display: none;
        border: none;
        border-radius: 0;
    }

    .msg-info-sidebar:not([hidden]) {
        display: flex;
    }

    /* Level 1: show chat, hide sidebar */
    .msg-chat-open .msg-sidebar { display: none; }
    .msg-chat-open .msg-chat { display: flex; }

    .chat-msg { max-width: 85%; }

    /* Hide backdrop on mobile (info covers full screen) */
    .msg-info-backdrop { display: none !important; }
}

/* ══════════════════════════════════════════
   BRACKET VIEWER
   ══════════════════════════════════════════ */

.bracket-container {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 1rem 0;
    align-items: flex-start;
}

.bracket-round {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 220px;
    justify-content: space-around;
    flex: 1;
}

.bracket-round-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vl-text-muted);
    text-align: center;
    margin-bottom: 0.25rem;
}

.bracket-match {
    background: var(--vl-bg-card);
    border: 1px solid var(--vl-border);
    border-radius: var(--vl-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s;
}

.bracket-match:hover {
    border-color: var(--vl-primary);
}

.bracket-match--done {
    opacity: 0.85;
}

.bracket-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--vl-border);
}

.bracket-slot:last-child {
    border-bottom: none;
}

.bracket-slot--winner {
    background: rgba(108, 92, 231, 0.15);
}

.bracket-slot--winner .bracket-player {
    font-weight: 600;
    color: var(--vl-primary);
}

.bracket-player {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.bracket-score {
    font-weight: 600;
    min-width: 20px;
    text-align: right;
}

.bracket-match--tbd {
    opacity: 0.5;
    border-style: dashed;
}

.bracket-slot--empty .bracket-player {
    font-style: italic;
    opacity: 0.5;
}

/* SVG Bracket */
.svg-bracket-wrapper {
    position: relative;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    background: var(--vl-bg-dark, #0d1117);
    overflow: hidden;
}

.svg-bracket-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: flex;
    gap: 0.25rem;
}

.svg-bracket-controls .btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    line-height: 1;
    backdrop-filter: blur(4px);
    background: rgba(0,0,0,0.4);
}

/* Høyden settes av `fitToContainer()` i svg-bracket.js — den følger
   bracketen. 55vh er bare til den har kjørt. */
.svg-bracket-viewport {
    overflow: hidden;
    height: 55vh;
    padding: 0.5rem;
    cursor: grab;
    user-select: none;
}

.svg-bracket-viewport.is-panning {
    cursor: grabbing;
}

.svg-bracket-canvas {
    display: inline-block;
    transform-origin: 0 0;
    will-change: transform;
}

.svg-bracket-viewport svg {
    display: block;
    font-family: Inter, -apple-system, sans-serif;
}

.svg-bracket-viewport .bracket-match-g:hover rect:first-child {
    filter: brightness(1.3);
}

/* `marker(deltakerId)` i svg-bracket.js: én deltakers kamper, resten dempet */
.svg-bracket-viewport .bracket-match-g { transition: opacity 0.2s; }
.svg-bracket-viewport svg.bracket-markert .bracket-match-g { opacity: 0.2; }
.svg-bracket-viewport svg.bracket-markert .bracket-match-g--med { opacity: 1; }

/* ══════════════════════════════════════════
   INTEGRATIONS
   ══════════════════════════════════════════ */

.integration-card .nav-card-icon {
    position: relative;
}

.integration-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--vl-bg-card);
}

.integration-status.active {
    background: #00b894;
    box-shadow: 0 0 6px rgba(0, 184, 148, 0.4);
}

/* ══════════════════════════════════════════
   EDITOR LAYOUT (fullscreen editor pattern)
   ══════════════════════════════════════════
   Full-width layout for editors (seatmap, etc.)
   that need maximum screen real estate.
   Fills entire app-content area with flex column.

   Structure:
     .editor-layout
       .editor-toolbar          (primary toolbar)
       .editor-toolbar          (optional secondary toolbar)
       .editor-canvas           (flex-grow area)
       .editor-statusbar        (optional bottom bar)
*/

.editor-layout {
    max-width: none;
    margin: -0.5rem -1.5rem -1.5rem;
    display: flex;
    flex-direction: column;
    height: calc(100% + 2rem);  /* compensate for negated app-content padding (0.5 top + 1.5 bottom) */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

/* ── Editor toolbar ── */

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--vl-bg-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-height: 0;
}

.editor-toolbar .btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
}

.editor-toolbar .btn i {
    font-size: 0.78rem;
}

.editor-toolbar .btn-group .btn {
    padding: 0.25rem 0.5rem;
}

.editor-toolbar .form-control {
    padding: 0.15rem 0.35rem;
    font-size: 0.78rem;
    height: auto;
    line-height: 1.3;
}

.editor-toolbar .toolbar-sep {
    width: 1px;
    height: 1.25rem;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.editor-toolbar .toolbar-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    user-select: none;
}

.editor-toolbar .toolbar-spacer {
    flex: 1;
}

.editor-toolbar .toolbar-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

/* Color swatch toggle buttons (zones, categories, etc.) */
.editor-toolbar .color-swatch {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.editor-toolbar .color-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.editor-toolbar .color-swatch:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.5);
}

/* ── Editor canvas (main work area) ── */

.editor-canvas {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Editor statusbar (bottom hint/info) ── */

.editor-statusbar {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 0.2rem 0.75rem;
    background: var(--vl-bg-card);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   CHECK-IN STATION
   ══════════════════════════════════════════ */

.checkin-station {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* Top bar with back + search + event name + stats */
.checkin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--vl-bg-card);
    border-bottom: 1px solid var(--vl-border);
    flex-shrink: 0;
    z-index: 10;
}

.checkin-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkin-btn-back {
    text-decoration: none;
    color: var(--vl-text);
    padding: 0.75rem 1rem;
}

.checkin-topbar-center {
    flex: 1;
    text-align: center;
}

.checkin-event-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--vl-text);
}

.checkin-event-label i {
    color: var(--vl-primary);
}

/* Event picker (when no event selected) */
.checkin-event-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.checkin-event-pick-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--vl-bg-card);
    border: 1px solid var(--vl-border);
    border-radius: var(--vl-radius-sm);
    color: var(--vl-text);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    touch-action: manipulation;
    min-height: 56px;
}

.checkin-event-pick-btn:hover {
    border-color: var(--vl-primary);
    background: var(--vl-bg-elevated);
}

.checkin-event-pick-btn i {
    color: var(--vl-primary);
    font-size: 1.2rem;
}

.checkin-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--vl-border);
    border-radius: var(--vl-radius-sm);
    background: var(--vl-bg-elevated);
    color: var(--vl-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    touch-action: manipulation;
    min-height: 48px;
}

.checkin-btn:hover {
    background: var(--vl-bg-card);
    border-color: var(--vl-primary);
}

.checkin-btn i {
    font-size: 1.1rem;
}

/* Stats in topbar */
.checkin-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.checkin-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--vl-text);
    font-size: 0.95rem;
}

.checkin-stat-main {
    font-size: 1.3rem;
}

.checkin-stat-main i {
    color: var(--vl-accent);
    font-size: 1.1rem;
}

.checkin-stat-main strong {
    font-weight: 700;
}

.checkin-stat-detail {
    display: flex;
    gap: 0.5rem;
}

.checkin-stat-pill {
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.checkin-stat-paid {
    background: rgba(0, 206, 201, 0.15);
    color: var(--vl-accent);
}

.checkin-stat-reserved {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

/* Main area — feedback display */
.checkin-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: pointer;
    transition: background 0.3s;
}

.checkin-hidden-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Ready state */
.checkin-ready {
    text-align: center;
    color: var(--vl-text-muted);
}

.checkin-ready-icon {
    font-size: 6rem;
    margin-bottom: 1.5rem;
    opacity: 0.3;
}

.checkin-ready h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vl-text-muted);
    margin-bottom: 0.5rem;
}

.checkin-ready p {
    font-size: 1.1rem;
    opacity: 0.6;
}

/* Feedback states */
.checkin-feedback {
    text-align: center;
    width: 100%;
    max-width: 700px;
    padding: 3rem 2rem;
    border-radius: var(--vl-radius);
    animation: checkinFadeIn 0.2s ease-out;
}

@keyframes checkinFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.checkin-feedback-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.checkin-feedback h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Det leseren sendte, rett under overskriften. Smaatt med vilje: det er for
   aa kunne kontrollere, ikke for aa leses i koen. */
.checkin-lest {
    margin: -1rem 0 1.5rem;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    overflow-wrap: anywhere;
}

.checkin-lest code {
    font-size: inherit;
}

/* Kvitteringen staar til neste skanning, saa den maa si at stasjonen tar imot. */
.checkin-neste {
    margin: 1.5rem 0 0;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
}

.checkin-lest-hint {
    margin-top: 0.35rem;
    color: #ffc107;
}

/* Success */
.checkin-success {
    background: rgba(40, 167, 69, 0.12);
    border: 2px solid rgba(40, 167, 69, 0.4);
}

.checkin-success .checkin-feedback-icon { color: #28a745; }
.checkin-success h1 { color: #28a745; }

.checkin-station:has(.checkin-success) .checkin-main {
    background: rgba(40, 167, 69, 0.06);
}

/* Oppslag i logga — en LESNING, ikke en hendelse.

   Bevisst uten farge: groenn, roed og gul er reservert for noe som nettopp
   skjedde med en billett. Slaar du opp hvem som kom inn 21:34, har ingenting
   skjedd, og skjermen skal si det. */
.checkin-oppslag {
    background: var(--vl-bg-card);
    border: 2px solid var(--vl-border-light);
}

.checkin-oppslag .checkin-feedback-icon { color: var(--vl-text-muted); }
.checkin-oppslag h1 { color: var(--vl-text); font-size: 1.5rem; }

/* Error */
.checkin-error {
    background: rgba(220, 53, 69, 0.12);
    border: 2px solid rgba(220, 53, 69, 0.4);
}

.checkin-error .checkin-feedback-icon { color: #dc3545; }
.checkin-error h1 { color: #dc3545; }

.checkin-station:has(.checkin-error) .checkin-main {
    background: rgba(220, 53, 69, 0.06);
}

/* Warning */
.checkin-warning {
    background: rgba(255, 193, 7, 0.12);
    border: 2px solid rgba(255, 193, 7, 0.4);
}

.checkin-warning .checkin-feedback-icon { color: #ffc107; }
.checkin-warning h1 { color: #ffc107; }

.checkin-station:has(.checkin-warning) .checkin-main {
    background: rgba(255, 193, 7, 0.06);
}

/* Scanning */
.checkin-scanning {
    background: var(--vl-bg-card);
    border: 2px solid var(--vl-border);
}

.checkin-scanning .checkin-feedback-icon { color: var(--vl-primary); }

/* Ticket info card */
.checkin-ticket-info {
    margin-top: 1rem;
}

.checkin-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.checkin-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.checkin-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--vl-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vl-text-muted);
    font-size: 1.5rem;
}

.checkin-user-details {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.checkin-user-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--vl-text);
}

.checkin-user-email {
    font-size: 0.9rem;
    color: var(--vl-text-muted);
}

.checkin-ticket-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.checkin-detail {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    color: var(--vl-text-muted);
}

.checkin-detail i {
    color: var(--vl-primary);
}

/* Action buttons (verify/dismiss) */
.checkin-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.checkin-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: var(--vl-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    touch-action: manipulation;
    min-height: 52px;
}

.checkin-action-btn:active {
    transform: scale(0.97);
}

.checkin-action-verify {
    background: #28a745;
    color: #fff;
}

.checkin-action-verify:hover { opacity: 0.9; }

.checkin-action-dismiss {
    background: var(--vl-bg-elevated);
    color: var(--vl-text);
    border: 1px solid var(--vl-border);
}

.checkin-action-dismiss:hover {
    border-color: var(--vl-primary);
}

/* Recent log strip */
.checkin-recent {
    flex-shrink: 0;
    border-top: 1px solid var(--vl-border);
    background: var(--vl-bg-card);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.checkin-recent-list {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.checkin-recent-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--vl-bg-elevated);
    border-radius: var(--vl-radius-xs);
    border: 1px solid var(--vl-glass-border);
    white-space: nowrap;
    font-size: 0.8rem;
}

.checkin-recent-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.checkin-recent-name {
    font-weight: 600;
    color: var(--vl-text);
}

.checkin-recent-seat {
    color: var(--vl-accent);
    font-weight: 600;
}

.checkin-recent-time {
    color: var(--vl-text-muted);
    font-size: 0.75rem;
}

/* Search overlay */
.checkin-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
}

.checkin-search-overlay.active {
    display: flex;
}

.checkin-search-panel {
    width: 100%;
    max-width: 600px;
    background: var(--vl-bg-card-solid);
    border-radius: var(--vl-radius);
    border: 1px solid var(--vl-border);
    overflow: hidden;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.checkin-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vl-border);
}

.checkin-search-header h2 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkin-btn-close {
    background: none;
    border: none;
    color: var(--vl-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkin-btn-close:hover {
    color: var(--vl-text);
}

.checkin-search-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: none;
    border-bottom: 1px solid var(--vl-border);
    background: var(--vl-bg-elevated);
    color: var(--vl-text);
    font-size: 1.1rem;
    outline: none;
}

.checkin-search-input::placeholder {
    color: var(--vl-text-muted);
}

.checkin-search-results {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem;
}

.checkin-search-hint {
    text-align: center;
    padding: 2rem;
    color: var(--vl-text-muted);
    font-size: 0.95rem;
}

.checkin-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--vl-radius-xs);
    border: 1px solid transparent;
    transition: background 0.15s;
}

.checkin-search-item:hover {
    background: var(--vl-bg-elevated);
}

/* Ingen dimming lenger.

   Raden ble tonet til 50 % naar personen var inne — rimelig da den var
   «ferdig, ingenting mer aa gjoere her». Naa ER den inngangen til aa angre en
   feilinnsjekk, og da maa navnet vaere like lesbart som de andre. Statusen
   baeres av det groenne merket. */
.checkin-search-item-done .checkin-search-avatar {
    opacity: 0.6;
}

.checkin-search-item-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.checkin-search-item-user div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.checkin-search-item-user strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkin-search-item-user small {
    color: var(--vl-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkin-search-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.checkin-search-item-info {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
    flex-shrink: 0;
}

/* Raden baerer OPPLYSNING, ikke handlinger.

   Den hadde en merkelapp og opptil to knapper i hoeyre kant. Paa telefon
   stablet de seg under hverandre uten luft, og det var ikke lenger mulig aa
   se hvilken bruker de hoerte til. Handlingene ligger naa i detaljvisninga,
   ett trykk unna — se `visDeltaker()` i checkin.js. */
.checkin-search-merke {
    flex-shrink: 0;
}

.checkin-search-item-pil {
    flex-shrink: 0;
    color: var(--vl-text-muted);
    font-size: 0.8rem;
}

.checkin-search-item-user .checkin-search-item-info {
    display: block;
}

.badge-checkin-klar {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(74, 158, 255, 0.15);
    color: #4a9eff;
}

.badge-checkin-ubetalt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.badge-checkin-done {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.badge-checkin-status {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--vl-bg-elevated);
    color: var(--vl-text-muted);
}

/* Related tickets (same order) */
.checkin-related {
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--vl-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.checkin-related-header {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vl-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.checkin-related-header i {
    margin-right: 0.4rem;
}

.checkin-related-list {
    padding: 0.4rem;
}

.checkin-related-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--vl-radius-xs);
    font-size: 0.85rem;
}

.checkin-related-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.checkin-related-name {
    font-weight: 600;
    color: var(--vl-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkin-related-type {
    color: var(--vl-text-muted);
    font-size: 0.8rem;
}

.checkin-related-seat {
    color: var(--vl-accent);
    font-weight: 600;
    font-size: 0.8rem;
}

.checkin-related-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    white-space: nowrap;
}

.checkin-related-status.status-in {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.checkin-related-status.status-paid {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.checkin-related-status.status-other {
    background: rgba(158, 158, 158, 0.15);
    color: #9e9e9e;
}

.checkin-ready-mobil {
    display: none;
    margin-top: 0.75rem;
    color: var(--vl-accent);
    font-weight: 600;
}

.checkin-recent-item:hover {
    background: var(--vl-bg-hover, rgba(255, 255, 255, 0.08));
    transition: background 0.15s;
}

/* Touch-friendly: larger tap targets on small screens */
@media (max-width: 768px) {
    .checkin-topbar {
        padding: 0.5rem 0.75rem;
    }

    /* Arrangementsnavnet vekk paa telefon.
       «VisionLAN 2026» brakk over to linjer mellom soekeknappen og telleren,
       og dro kalenderikonet med seg opp paa en egen linje — maalt paa 390 px
       29.09.2026. Navnet er dessuten den opplysningen i topplinja som betyr
       minst: den som staar i doera vet hvilket arrangement hun sjekker inn
       til. Telleren og Soek maa staa. */
    .checkin-topbar-center {
        display: none;
    }

    /* Paa telefon finnes det ingen strekkodeleser, og «Klar til skanning»
       peker paa utstyr som ikke er der. Linja under sier hva man gjor i
       stedet. Se `checkin.js`. */
    .checkin-ready-mobil {
        display: block;
    }

    .checkin-btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    .checkin-stat-main {
        font-size: 1.1rem;
    }

    .checkin-stat-detail {
        display: none;
    }

    .checkin-feedback {
        padding: 2rem 1rem;
    }

    .checkin-feedback-icon {
        font-size: 4rem;
    }

    .checkin-feedback h1 {
        font-size: 1.4rem;
    }

    .checkin-user-name {
        font-size: 1.2rem;
    }

    .checkin-action-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }

    .checkin-search-panel {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
    }

    /* Raden staar vannrett ogsaa paa telefon.

       Kolonnen var noedvendig da raden hadde knapper som trengte full bredde.
       Naa er hoeyresida ett lite merke og en pil, og da er én linje baade
       tettere og lettere aa lese: navnet og statusen hoerer synlig sammen. */
    .checkin-search-item {
        gap: 0.6rem;
        padding: 0.75rem 0.85rem;
    }

    .checkin-search-merke {
        padding: 0.3rem 0.55rem;
        font-size: 0.72rem;
    }
}

/* ══════════════════════════════════════════
   CHECKOUT WIZARD
   ══════════════════════════════════════════ */

.checkout-wizard {
    max-width: 800px;
    margin: 0 auto;
}

.checkout-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.checkout-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vl-glass);
    color: var(--vl-text);
    text-decoration: none;
    transition: background 0.15s;
    flex-shrink: 0;
}

.checkout-back:hover {
    background: var(--vl-bg-hover);
    color: var(--vl-text);
}

.checkout-header-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Step indicator */
.checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkout-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--vl-glass);
    color: var(--vl-text-muted);
    border: 2px solid var(--vl-glass-border);
    transition: all 0.2s;
}

.checkout-step.active .checkout-step-num {
    background: var(--vl-primary);
    color: #fff;
    border-color: var(--vl-primary);
}

.checkout-step.done .checkout-step-num {
    background: var(--vl-success, #28a745);
    color: #fff;
    border-color: var(--vl-success, #28a745);
}

.checkout-step-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vl-text-muted);
}

.checkout-step.active .checkout-step-label {
    color: var(--vl-text);
    font-weight: 600;
}

.checkout-step.done .checkout-step-label {
    color: var(--vl-text);
}

.checkout-step-line {
    width: 40px;
    height: 2px;
    background: var(--vl-glass-border);
    margin: 0 0.5rem;
}

/* Checkout option cards (ticket types + payment methods) */
/* Betalingsvelgeren er én beholder med skillelinjer, ikke frittstaaende kort.
   Radene skal vaere like hoye og rolige — det er radioknappen som baerer
   valget, ikke en ramme rundt hver rad. */
.checkout-payment-methods {
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    background: var(--vl-bg-card);
    overflow: hidden;
}

.checkout-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border: none;
    border-bottom: 1px solid var(--vl-glass-border);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 0;
}

.checkout-option:last-child {
    border-bottom: none;
}

.checkout-option:hover:not(.disabled) {
    background: var(--vl-glass);
}

.checkout-option.selected {
    background: rgba(var(--vl-primary-rgb, 99, 102, 241), 0.10);
}

.checkout-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkout-option-radio {
    flex-shrink: 0;
}

.checkout-option-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--vl-primary);
    cursor: pointer;
}

/* Ikonet/merket staar til hoyre for teksten, etter Vipps' Paymark-oppsett:
   navnet leses forst, merket bekrefter. `.checkout-option-body` har flex: 1 og
   skyver det ut mot kanten. */
.checkout-option-icon {
    font-size: 1.3rem;
    color: var(--vl-primary);
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

/* Betalingsleverandørers egne merker (paymarks).
   Vipps' paymark er 4:3 (138.67 × 104), ikke kvadratisk. `height: auto` er
   derfor ikke kosmetikk: en fast kvadratisk boks ville enten forvrengt merket
   eller rammet det inn, og begge deler bryter retningslinjene. Ingen filter
   eller egen bakgrunn — fargen er merkevaren. */
.payment-paymark {
    width: 32px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Kortmerkene: to logoer side om side.
   ------------------------------------
   Slotten er 32 px, som holder til ETT merke. Kortmetoden baerer to — Visa og
   Mastercard — fordi det er DE kjoeperen kjenner igjen, ikke «Stripe».

   Merkene er egne bilder med lys bakgrunn, slik kortmerker skal vises. Paa den
   moerke flata leses de som to smaa hvite kort, og det er ogsaa slik de staar i
   de fleste kassene folk har sett foer. */
.checkout-option-icon--flere {
    width: auto;
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.checkout-option-icon--flere .payment-paymark {
    width: 30px;
    margin: 0;
    border-radius: 3px;
}

.checkout-option-body {
    flex: 1;
    min-width: 0;
}

.checkout-option-title {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Beskrivelsene er admin-skrevne og kan gaa over flere avsnitt (angrefrister,
   hva som skjer ved manglende betaling). Ukuttet gjor de radene tre ganger saa
   hoye som de andre, og lista mister rytmen. Derfor én linje til vanlig, og
   hele teksten saa snart metoden er valgt — da er den ogsaa relevant. */
.checkout-option-desc {
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    margin-top: 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

/* Tilbake til vanlig blokk naar den er valgt — `-webkit-box` og `pre-line`
   sammen gir upaalitelig linjeskift naar klemmen er borte. */
.checkout-option.selected .checkout-option-desc {
    display: block;
    overflow: visible;
}

/* ── Kvittering (/app/orders/{id}) ───────────────────────────────────────
   Utfallet forst og stort, bokholderiet sist og nedtonet. Referanser og
   ordrenummer er noe man slaar opp *hvis* noe skal ettergaas — de skal ikke
   konkurrere med billettene om oppmerksomheten. */
.order-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    margin-bottom: 1rem;
}

.order-hero-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: rgba(25, 135, 84, 0.15);
    color: #2ec27e;
}

.order-hero-icon--pending {
    background: var(--vl-glass);
    color: var(--vl-text-muted);
}

/* ── Betalingskortet paa /app/orders/{id} ──────────────────────────────
   Sidas eneste egentlige jobb, og den leses av trettenaaringer og av
   besteforeldre som ikke er tekniske. Derfor stor tekst, numrerte steg, og
   ingenting som konkurrerer om oppmerksomheten.
   Ingen farget venstrekant — se design/komponenter.md. */
.betal-kort {
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.betal-tittel {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--vl-text);
    margin: 0 0 1rem;
}

.betal-steg {
    margin: 0;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--vl-text);
}

.betal-steg li::marker { color: var(--vl-text-muted); font-weight: 600; }
.betal-steg strong { color: var(--vl-text); font-size: 1.1em; }

/* Merkingen skal kunne leses av og limes inn. Den bryter paa lange navn i
   stedet for aa flyte ut av kortet paa en telefon. */
.betal-merking {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    background: var(--vl-bg-dark);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
}

.betal-merking-verdi {
    flex: 1 1 14rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    color: var(--vl-text);
    word-break: break-word;
    user-select: all;
}

.betal-kopi {
    flex: 0 0 auto;
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text);
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.betal-kopi:hover { background: var(--vl-bg-elevated); }
.betal-kopi:focus-visible { outline: 2px solid var(--vl-primary); outline-offset: 2px; }

.betal-note {
    margin: 1rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--vl-text-muted);
}

.betal-etterpaa {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--vl-glass-border);
    font-size: 0.9rem;
    color: var(--vl-text-muted);
}

/* Sammenfoldet bokholderi. Knappen skal se ut som en knapp, ikke som en
   overskrift man kan lure paa om er klikkbar. */
.order-summary-toggle {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
    cursor: pointer;
}

.order-summary-toggle:hover { color: var(--vl-text); }
.order-summary-toggle:focus-visible { outline: 2px solid var(--vl-primary); outline-offset: 3px; }
.order-summary-toggle i { transition: transform 0.15s ease; font-size: 0.7rem; }

@media (prefers-reduced-motion: reduce) {
    .order-summary-toggle i { transition: none; }
}

.order-summary {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--vl-glass);
    font-size: 0.85rem;
    color: var(--vl-text-muted);
}

/* Verdiene arver den nedtonede fargen fra .order-summary — meta-row setter
   normalt full tekstfarge, og da hadde nedtoningen forsvunnet. */
.order-summary .meta-row,
.order-summary .meta-row span {
    color: inherit;
}

.order-summary code {
    color: inherit;
    background: none;
    padding: 0;
}

/* Valideringsfeil — se components/form-errors.js og
   docs/design/interaksjon.md. Meldingen staar under feltet den gjelder, i
   samme rodfarge som resten av feiltilstandene. */
.field-error-message {
    color: var(--bs-danger, #dc3545);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

/* For grupper og lister som ikke er skjemakontroller og derfor ikke kan bruke
   Bootstrap sin `.is-invalid`. */
.field-invalid {
    border: 1px solid var(--bs-danger, #dc3545) !important;
    border-radius: var(--vl-radius);
}

.checkout-option-avail {
    font-size: 0.75rem;
    color: var(--vl-text-muted);
    margin-top: 0.25rem;
}

.checkout-option-price {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--vl-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ticket row with inline qty */
.checkout-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--vl-radius);
    border: 2px solid var(--vl-glass-border);
    background: var(--vl-bg-card);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s, background 0.15s;
}

.checkout-ticket-row.active {
    border-color: var(--vl-primary);
    background: rgba(var(--vl-primary-rgb, 99, 102, 241), 0.08);
}

.checkout-ticket-row.disabled {
    opacity: 0.5;
}

.checkout-ticket-info {
    flex: 1;
    min-width: 0;
}

.checkout-row-price {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--vl-primary);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

.checkout-ticket-info-btn {
    background: none;
    border: none;
    color: var(--vl-text-muted);
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    font-size: 0.85rem;
    border-radius: 50%;
    transition: color 0.15s;
    vertical-align: middle;
    margin-left: 0.35rem;
}

.checkout-ticket-info-btn:hover {
    color: var(--vl-primary);
}

/* Quantity control */
.checkout-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    overflow: hidden;
}

.checkout-qty-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--vl-glass);
    color: var(--vl-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}

.checkout-qty-btn:hover:not(:disabled) {
    background: var(--vl-bg-hover);
}

.checkout-qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.checkout-qty-value {
    width: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Summary bar */
.checkout-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vl-glass-border);
}

.checkout-summary-total {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.checkout-total-price {
    font-weight: 700;
    font-size: 1.3rem;
}

/* Nav bar (back/next) */
.checkout-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vl-glass-border);
}

.checkout-seat-count {
    font-weight: 600;
    color: var(--vl-text-muted);
}

/* Order summary on step 3 */
.checkout-order-summary {
    padding: 1rem 1.25rem;
    background: var(--vl-glass);
    border-radius: var(--vl-radius);
    border: 1px solid var(--vl-glass-border);
}

.checkout-summary-seats {
    font-size: 0.8rem;
    color: var(--vl-accent);
    margin-top: 0.35rem;
}

/* Step seats — wider seatmap */
.checkout-step-seats #seatmap-container {
    margin: 0 -1rem;
}

/* Guardian */
.checkout-guardian {
    padding: 1.25rem;
    background: var(--vl-glass);
    border-radius: var(--vl-radius);
    border: 1px solid var(--vl-glass-border);
}

/* Responsive */
@media (max-width: 768px) {
    .checkout-wizard {
        padding: 0;
    }

    .checkout-steps {
        gap: 0;
    }

    .checkout-step-label {
        display: none;
    }

    .checkout-step-line {
        width: 24px;
    }

    .checkout-option {
        padding: 0.75rem 1rem;
    }

    .checkout-summary-bar,
    .checkout-nav-bar {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* ══════════════════════════════════════════
   ADMIN NOTIFICATIONS — To-field & search
   ══════════════════════════════════════════ */

.notif-to-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: var(--vl-bg-input, var(--vl-glass));
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    cursor: text;
    min-height: 38px;
    transition: border-color 0.15s;
}
.notif-to-field:focus-within {
    border-color: var(--vl-primary);
}

.notif-to-input {
    flex: 1;
    min-width: 140px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--vl-text);
    font-size: 0.85rem;
    padding: 0.15rem 0;
}
.notif-to-input::placeholder {
    color: var(--vl-text-muted);
}

/* Chips */
.notif-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
}
.notif-chip.bg-warning { color: #1a1d27; }
.bg-discord { background-color: #5865F2 !important; color: #fff; }

.notif-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    margin-left: 0.15rem;
    cursor: pointer;
}
.notif-chip-remove:hover { opacity: 1; }

/* Dropdown */
.notif-dropdown {
    display: none;
    position: relative;
    z-index: 50;
    background: var(--vl-bg-card);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    margin-top: 0.25rem;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.notif-dropdown.show { display: block; }

.notif-dropdown-empty {
    padding: 0.75rem 1rem;
    color: var(--vl-text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.notif-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
}
.notif-dropdown-item:hover,
.notif-dropdown-item.active {
    background: var(--vl-glass);
}

.notif-result-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.notif-result-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--vl-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    flex-shrink: 0;
}
.notif-result-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.notif-result-info {
    flex: 1;
    min-width: 0;
}
.notif-result-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-result-sub {
    font-size: 0.72rem;
    color: var(--vl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-result-badge {
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* Outbox column list */
.outbox-col-recipient { flex: 2 1 170px; min-width: 0; }
.outbox-col-channel   { flex: 0 0 90px; }
.outbox-col-status    { flex: 0 0 90px; }
.outbox-col-body      { flex: 2 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outbox-col-sender    { flex: 1 1 100px; min-width: 0; }
.outbox-col-time      { flex: 0 0 100px; text-align: right; }

@media (max-width: 575.98px) {
    /* Mobil: mottaker + status paa foerste linje, meldinga paa andre.
       Kanal og avsender faller bort — de er sortering, ikke svaret. */
    .outbox-col-recipient { flex: 1 1 0; order: 1; }
    .outbox-col-status    { flex: 0 0 auto; order: 2; }
    .outbox-col-time      { flex: 0 0 auto; order: 3; font-size: 0.75rem; text-align: right; }
    .outbox-col-body      { flex: 1 1 100%; order: 4; font-size: 0.75rem; }
    .outbox-col-channel   { display: none; }
    .outbox-col-sender    { display: none; }
}

/* ══════════════════════════════════════════
   HUB (/app startside)
   Hero-en er "dynamic island": venstresiden staar stille, hoyresporet
   bytter last etter fase. Tiles under. Skisser: _tmp/app-redesign/
   ══════════════════════════════════════════ */

.hub-greeting { margin-bottom: 1.5rem; }
.hub-greeting h2 { margin: 0; letter-spacing: -0.02em; }
.hub-greeting-sub { margin: 0.3rem 0 0; color: var(--vl-text-muted); font-size: 0.92rem; }

/* Samlestabel for kortene som vil noe av brukeren — valideringsvarsel,
   avstemning — og heroen rett under. Alle tre skal staa like tett; de er én
   gruppe man leser ovenfra og ned, ikke tre atskilte blokker.
   Bunnmarginen er derfor den samme som gap-en. */
.hub-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Barna baerer egne bunnmarginer fordi de ogsaa brukes frittstaaende. Inne i
   stabelen legger de seg oppaa gap-en og gir ujevn avstand.
   Klassen er DOBLET med vilje: `.hub-actions > *` har samme spesifisitet som
   `.hub-cta`, som staar lenger ned i fila og dermed vant. Det var grunnen til
   at avstandene her var 36px og 56px i stedet for 12px. */
.hub-actions.hub-actions > * {
    margin-bottom: 0;
}

.hub-validation {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--vl-radius);
    color: var(--vl-text);
}
.hub-validation > i { font-size: 1.3rem; color: #f59e0b; }

/* ── Hero ── */

.hub-hero {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.6rem;
    margin-bottom: 2rem;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    background:
        linear-gradient(100deg, rgba(10, 14, 23, 0.94) 28%, rgba(10, 14, 23, 0.5) 100%),
        linear-gradient(135deg, #2a1f5e 0%, #123f52 60%, #0a0e17 100%);
    color: var(--vl-text);
    text-decoration: none;
}
.hub-hero--link { transition: border-color 0.18s ease, transform 0.18s ease; }
.hub-hero--link:hover { border-color: rgba(0, 206, 201, 0.35); transform: translateY(-2px); }
.hub-hero--empty { background: var(--vl-glass); border-style: dashed; }

.hub-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.hub-hero-main { min-width: 0; }

/* Handlingene i en hero staar UNDER tittelblokka, ikke i hoyre hjoerne.
   Hjoernet er der oeyet lander, og paa en side man aapner for aa LESE er det
   ikke knappene man leter etter. Hoyresida hoerer fristen til. */
.hub-hero-handlinger {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.hub-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vl-accent);
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.hub-kicker--muted { color: var(--vl-text-muted); }

.hub-event-name { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.hub-event-meta { color: var(--vl-text-muted); font-size: 0.85rem; margin-top: 0.3rem; }

.hub-live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #00b894;
    margin-right: 0.45rem;
    vertical-align: middle;
    animation: hub-pulse 2.2s ease-in-out infinite;
}
@keyframes hub-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.55); }
    60%      { box-shadow: 0 0 0 7px rgba(0, 184, 148, 0); }
}

.hub-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.hub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 99px;
    font-size: 0.78rem;
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
}
.hub-chip i { font-size: 0.75rem; color: var(--vl-accent); }

.hub-hero-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.hub-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--vl-text-muted);
}
.hub-hero--link:hover .hub-hero-link { color: var(--vl-accent); }

/* ── Island: hoyresporet som bytter last ── */

.hub-island {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 290px;
}
.hub-island-cap {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vl-text-muted);
    font-weight: 700;
    text-align: right;
}

.hub-countdown { display: flex; gap: 0.55rem; justify-content: flex-end; }
.hub-cd-unit {
    min-width: 62px;
    padding: 0.5rem 0.35rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
}
.hub-cd-num { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.hub-cd-lbl {
    display: block;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vl-text-muted);
    margin-top: 0.35rem;
}

.hub-island-next {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--vl-text-muted);
    margin-top: 0.2rem;
}
.hub-island-next i { font-size: 0.65rem; color: var(--vl-accent); }

/* Oeya er det ene handlingsverdige i heroen, og peker paa tidsplanen.
   Heroen selv er IKKE en lenke — se design/paneler.md § Ansvarsfordeling:
   heroen svarer paa «hva skjer naa», flisene paa «hvor gaar jeg». */
.hub-island-next,
.hub-ag-row {
    text-decoration: none;
    color: inherit;
}

/* Ingen bakgrunn paa hover her. Raden er `display: flex` med teksten
   hoeyrestilt, saa flata er full bredde mens teksten er kort — en bakgrunn
   ville markert et omraade som staar langt utenfor det man peker paa.
   Fargeskiftet sier det samme uten aa lyve om utstrekningen.
   Trykkflata forblir bred, som er riktig paa touch. */
.hub-island-next {
    transition: color 0.15s;
}

.hub-island-next:hover,
.hub-island-next:focus-visible {
    color: var(--vl-text);
}

/* Agendaradene er derimot ekte rader i en liste — der leses en bakgrunn som
   den raden man peker paa, ikke som et vilkaarlig felt. */
.hub-ag-row {
    transition: background 0.15s;
}

.hub-ag-row:hover,
.hub-ag-row:focus-visible {
    background: var(--vl-glass);
    border-radius: 8px;
}

/* Stort noekkeltall i island-en (admin-hub-ens omsetning). Hoyrestilt som
   resten av island-en — kapselen over og linja under staar allerede der. */
.hub-stat-big {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--vl-text);
    line-height: 1.2;
    margin-bottom: 0.35rem;
    text-align: right;
}

.hub-ag-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--vl-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vl-glass-border);
}
.hub-ag-row--now { background: rgba(0, 184, 148, 0.1); border-color: rgba(0, 184, 148, 0.32); }
.hub-ag-when {
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--vl-text-muted);
    min-width: 42px;
    padding-top: 0.2rem;
}
.hub-ag-row--now .hub-ag-when { color: #6ee7c4; }
.hub-ag-body { flex: 1; min-width: 0; }
.hub-ag-title { font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
.hub-ag-meta { font-size: 0.72rem; color: var(--vl-text-muted); margin-top: 0.1rem; }
.hub-ag-bar {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
    overflow: hidden;
}
.hub-ag-bar span { display: block; height: 100%; background: #00b894; border-radius: 2px; }

/* ── Seksjonsoverskrift ── */

.hub-sec { display: flex; align-items: center; gap: 0.75rem; margin-top: 2.2rem; margin-bottom: 1rem; }
.hub-sec h3 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vl-text-muted);
    white-space: nowrap;
}
.hub-sec-line { flex: 1; height: 1px; background: var(--vl-glass-border); }

/* ── Tiles ── */

.hub-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 0.9rem;
}

.hub-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 146px;
    padding: 1.4rem 0.9rem;
    background: var(--vl-bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius);
    text-align: center;
    color: var(--vl-text);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hub-tile:hover {
    transform: translateY(-3px);
    border-color: var(--tint, var(--vl-primary));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: var(--vl-text);
}

.hub-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 18px;
    font-size: 1.5rem;
    background: color-mix(in srgb, var(--tint) 15%, transparent);
    color: var(--tint);
    transition: transform 0.18s ease;
}
.hub-tile:hover .hub-tile-icon { transform: scale(1.06); }

.hub-tile-label { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.hub-tile-sub { font-size: 0.74rem; color: var(--vl-text-muted); margin-top: -0.5rem; }

/* Hjornet baerer VARSLER — status hoerer hjemme i underteksten.
   Badgen ligger paa kanten, ikke inne i tilen: tilen er app-ikonet i denne
   metaforen. Slagskygge i stedet for ring, fordi bakgrunnen er en gradient
   og en hard ring ville avslort seg som feil nyanse. */
.hub-tile-badge {
    position: absolute;
    top: 0; right: 0;
    transform: translate(34%, -34%);
    min-width: 22px; height: 22px;
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    background: #e17055;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
}

/* Tilstandsprikk i samme hjorne som badgen, men den sier noe annet: badgen er
   et ANTALL som krever handling, prikken er en TILSTAND. De vises aldri
   samtidig — se tile() i pages/app/hub.js.

   Fargen staar aldri alene: `title` baerer teksten, og underteksten paa flisa
   sier det samme med ord. En rod prikk er ubrukelig for den som ikke skiller
   rodt fra gront. */
.hub-tile-prikk {
    position: absolute;
    top: 0; right: 0;
    transform: translate(28%, -28%);
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--vl-bg-card-solid);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hub-tile-prikk.er-apen   { background: #00b894; }
.hub-tile-prikk.er-stengt { background: #6b7280; }
.hub-tile-prikk.er-venter { background: #fdcb6e; }

/* Egen bestilling som er klar. Den ene tilstanden som krever at hun reiser
   seg, og derfor den eneste som beveger seg. */
.hub-tile-prikk.er-klar {
    background: #00b894;
    animation: hub-prikk-puls 1.6s ease-in-out infinite;
}

@keyframes hub-prikk-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.6); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 184, 148, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hub-tile-prikk.er-klar { animation: none; }
}

.hub-footlinks {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.5rem;
    font-size: 0.82rem;
}
.hub-footlinks a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--vl-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.hub-footlinks a:hover { color: var(--vl-text); }
/* Handlinger man knapt skal trenge — forlat en gruppe, slett noe — hoerer i
   samme rad som de andre nedtona lenkene, ikke som roede knapper oeverst.
   To nivaaer, etter regelen i design/interaksjon.md:

   --undo    reversibel: noeytral i hvile, konsekvensfargen paa hover
   --danger  ugjenkallelig: fargen staar allerede i hvile */
.hub-footlink--undo:hover,
.hub-footlink--undo:focus-visible,
.hub-footlink--danger {
    color: #e8907a;
}

.hub-footlink--danger:hover,
.hub-footlink--danger:focus-visible {
    color: #f0a894;
}

/* Eksterne verktoy i footlink-raden. Pila sier at lenka forlater appen — uten
   den ser en snarvei til webmail ut som en side i panelet. */
.hub-footlink--ext::after {
    content: '↗';
    font-size: 0.85em;
    opacity: 0.55;
    margin-left: -0.1rem;
}

@media (max-width: 760px) {
    .hub-island { min-width: 0; width: 100%; }
    .hub-island-cap, .hub-island-next { text-align: left; justify-content: flex-start; }
    .hub-stat-big { text-align: left; }
    .hub-countdown { justify-content: flex-start; }
}

@media (max-width: 576px) {
    .hub-tiles { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
    .hub-tile { min-height: 126px; padding: 1.1rem 0.7rem; }
    .hub-tile-icon { width: 48px; height: 48px; font-size: 1.3rem; }
    .hub-event-name { font-size: 1.25rem; }
    .hub-countdown { width: 100%; }
    .hub-cd-unit { flex: 1; }
}

/* Invitasjon til ubesvart avstemning. Én rad, ikke en widget — selve
   avstemningen hoerer hjemme paa /app/polls/{id}. */
.hub-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
    margin-bottom: 2rem;
    border-radius: var(--vl-radius);
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.3);
    color: var(--vl-text);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.hub-cta:hover {
    border-color: rgba(108, 92, 231, 0.6);
    transform: translateY(-2px);
    color: var(--vl-text);
}
.hub-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(108, 92, 231, 0.2);
    color: #a99bff;
    font-size: 1.05rem;
}
/* ── Alvor ──
   Tre nivaaer, og de SKAL se forskjellige ut. «Foreldresamtykke mangler» og
   «du har ikke stemt» er ikke samme sak, og et varsel som ser like alvorlig ut
   som fire andre er ikke et varsel lenger. Standard (lilla) er `kjekt`.
   Se docs/planer/deltakeropplysninger.md § 4. */
.hub-cta--maa {
    background: rgba(225, 112, 85, 0.10);
    border-color: rgba(225, 112, 85, 0.35);
}
.hub-cta--maa:hover { border-color: rgba(225, 112, 85, 0.65); }
.hub-cta--maa .hub-cta-icon { background: rgba(225, 112, 85, 0.18); color: #ff8a6d; }

.hub-cta--bor {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.32);
}
.hub-cta--bor:hover { border-color: rgba(245, 158, 11, 0.6); }
.hub-cta--bor .hub-cta-icon { background: rgba(245, 158, 11, 0.18); color: #f0b429; }

/* Samlekortet naar det er FLERE punkter. Tallet er poenget — man skal se hvor
   mange ting som venter uten aa aapne noe. */
.hub-cta-antall {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--vl-text-muted);
}

.hub-cta-body { flex: 1; min-width: 170px; display: flex; flex-direction: column; }
.hub-cta-title { font-weight: 600; font-size: 0.92rem; }
.hub-cta-sub { font-size: 0.79rem; color: var(--vl-text-muted); margin-top: 0.1rem; }

/* ══════════════════════════════════════════
   SJEKKLISTE — «for du kommer»
   /app/sjekkliste. Hub-en viser ETT kort; her staar punktene hver for seg med
   plass til aa forklare. Se docs/planer/deltakeropplysninger.md.
   ══════════════════════════════════════════ */

.sjekk-liste { display: flex; flex-direction: column; gap: 0.9rem; }

.sjekk-punkt {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--vl-radius);
    background: var(--vl-bg-card);
    border: 1px solid var(--vl-glass-border);
}

/* Alvoret ligger i IKONET og i merkelappen, ikke i en farget venstrekant og
   ikke i hele flata. Fire roede bokser over hverandre er fire like tunge ting,
   og da er ingen av dem viktige. Se design/interaksjon.md. */
.sjekk-punkt-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--vl-text-muted);
    font-size: 1.05rem;
}
.sjekk-punkt--maa .sjekk-punkt-ikon { background: rgba(225, 112, 85, 0.16); color: #ff8a6d; }
.sjekk-punkt--bor .sjekk-punkt-ikon { background: rgba(245, 158, 11, 0.16); color: #f0b429; }

.sjekk-punkt-tekst { min-width: 0; flex: 1; }

.sjekk-punkt-topp {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sjekk-punkt-alvor {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vl-text-muted);
    white-space: nowrap;
}
.sjekk-punkt--maa .sjekk-punkt-alvor { color: #ff8a6d; }
.sjekk-punkt--bor .sjekk-punkt-alvor { color: #f0b429; }

.sjekk-punkt-tekst p {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--vl-text-muted);
}

.sjekk-punkt-knapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* ══════════════════════════════════════════
   TIDSLINJE — programmet
   Delt mellom /app/schedule (deltakere) og /crew/schedule (crew som
   designer det samme programmet). Se components/tidslinje.js.

   ── Ingen farget venstrekant ──

   Forrige versjon ga hver post en boks med bakgrunn og en tonet stripe
   langs venstre kant. Da veier «Retro-krok aapner» like tungt som
   finalen, og tretti CS-kamper fyller skjermen med identiske klosser.

   Naa: ingen kort, ingen rammer. Typografi baerer hierarkiet, kategori er
   en prikk, og FLATE brukes bare paa det ene som skjer naa.
   ══════════════════════════════════════════ */

.sched-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

/* ── Naa-kortet: det eneste som skal ha vekt ────────────────── */

.tp-naa-kort {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.22), rgba(0, 206, 201, 0.10));
    border: 1px solid rgba(108, 92, 231, 0.4);
    border-radius: var(--vl-radius);
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.5rem;
}
.tp-naa-merke {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c9c0ff;
    margin-bottom: 0.35rem;
}
.tp-naa-kort h2 {
    margin: 0 0 0.3rem;
    font-size: 1.45rem;
    line-height: 1.15;
}
.tp-naa-under {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;
    font-size: 0.85rem;
    color: #cfd6e4;
}

/* Skilletegn, ikke bare luft.
   Linja sto som fire opplysninger med et mellomrom mellom seg og leste seg som
   en setning: «18:00-19:00 fredag Info Inngangen». Arrangoeren 30.09.2026:
   «Jeg forstaar ikke denne heller. Fredag info inngangen. Det gir ikke mening.»
   Dagen er naa foldet inn i klokkeslettet (`tidslinje.js`), og resten skilles
   med en prikk — samme skilletegn som undertekstene i lista bruker. */
.tp-naa-under > * + *::before,
.tp-naa-meta > * + *::before {
    content: '·';
    margin-right: 0.5rem;
    color: #6e7887;
}

/* Framdrift. «Slutter om 20 min» er mer nyttig enn «18:00-19:30» naar man
   staar i hallen og lurer paa om man rekker noe annet. */
.tp-strek {
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.14);
    margin: 0.85rem 0 0.4rem;
    overflow: hidden;
}
.tp-strek i { display: block; height: 100%; background: var(--vl-accent); }
.tp-rest { font-size: 0.76rem; color: #cfd6e4; }

.tp-nest {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-top: 0.7rem;
    margin-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.88rem;
}
.tp-nest b { font-variant-numeric: tabular-nums; color: #c9c0ff; }
.tp-nest span { color: #cfd6e4; }

/* ── Dagoverskrift ──────────────────────────────────────────── */

.tp-dag {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: 1.8rem 0 0.6rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--vl-glass-border);
}
.tp-dag:first-child { margin-top: 0.4rem; }
.tp-dag h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.tp-dag span { font-size: 0.78rem; color: var(--vl-text-muted); }

/* ── Radene ─────────────────────────────────────────────────── */

.tp-rad {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 0.9rem;
    padding: 0.6rem 0.5rem;
    border-radius: 8px;
}
.tp-rad:hover { background: var(--vl-glass); }
.tp-rad--forbi { opacity: 0.38; }
.tp-rad--forbi:hover { opacity: 0.6; }
.tp-rad--klikk, .tp-rad--gruppe { cursor: pointer; }
.tp-rad--gruppe .tp-tittel { font-weight: 600; }

.tp-tid {
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    color: var(--vl-text-muted);
}
.tp-tittel {
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.3;
    min-width: 0;
}
.tp-tittel small {
    display: block;
    font-weight: 400;
    font-size: 0.77rem;
    color: var(--vl-text-muted);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-hoyre {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    align-self: center;
}

/* Kategori er en PRIKK, ikke en kantstripe: den sier hva posten er uten aa
   farge hele raden. */
.tp-kat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--vl-text-muted);
    white-space: nowrap;
}
.tp-kat i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

.tp-pil {
    color: var(--vl-text-muted);
    transition: transform 0.15s;
    display: inline-block;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1;
}
.tp-pil--aapen { transform: rotate(90deg); }

/* ── Kampene under en aapnet turnering ──────────────────────── */

.tp-utvidet {
    grid-column: 1 / -1;
    /* Linjer opp med TITTELEN, ikke med tidskolonnas kant: tidskolonna er
       3.6rem og gapet 0.9rem, saa tittelen begynner paa 4.5rem. Sto det paa
       3.6rem, hang innholdet 0.9rem ut til venstre for det det hoerer under. */
    margin: 0.5rem 0 0.35rem 4.5rem;
}
.tp-runde {
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6e7887;
    margin: 0.55rem 0 0.1rem;
}
.tp-runde:first-child { margin-top: 0; }
.tp-kamp {
    display: flex;
    gap: 0.7rem;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    padding: 0.22rem 0.35rem;
    border-radius: 5px;
}
.tp-kamp b {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    flex: 0 0 3rem;
}
.tp-kamp--forbi { opacity: 0.45; }
.tp-rad--klikk .tp-kamp:hover,
.tp-kamper .tp-kamp[data-tp-id]:hover { background: var(--vl-glass); color: var(--vl-text); cursor: pointer; }

/* ── Det utfoldede: paamelding og beskrivelse (bare /app) ───── */

/* Knappen ligger BAK et klikk, ikke i raden. En «Meld av»-knapp man kan treffe
   mens man blar er en avmelding man ikke mente. */
.tp-detalj {
    background: var(--vl-glass);
    border-radius: var(--vl-radius-sm);
    padding: 0.8rem 0.95rem;
}
.tp-detalj p {
    margin: 0 0 0.7rem;
    font-size: 0.86rem;
    color: var(--vl-text-muted);
}
.tp-detalj p:last-child { margin-bottom: 0; }
.tp-detalj-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.tp-detalj-rad .tp-plasser { font-size: 0.8rem; color: var(--vl-text-muted); }

.tp-deltakere {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.7rem;
}
.tp-deltaker {
    font-size: 0.74rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--vl-text-muted);
}

/* ── Paamelding (bare /app) ─────────────────────────────────── */

.tp-pille {
    font-size: 0.68rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--vl-text-muted);
    white-space: nowrap;
}
.tp-pille--paa { background: rgba(0, 206, 201, 0.16); color: #7ff0ed; }
.tp-pille--full { background: rgba(225, 112, 85, 0.16); color: #ffb3a7; }

.signup-btn {
    background: transparent;
    border: 1px solid var(--vl-glass-border);
    color: var(--vl-text-muted);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.76rem;
    cursor: pointer;
    white-space: nowrap;
}
.signup-btn:hover { border-color: var(--vl-primary); color: var(--vl-text); }
.signup-btn--cancel:hover { border-color: rgba(225, 112, 85, 0.6); color: #ffb3a7; }
.signup-btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 560px) {
    .tp-rad { grid-template-columns: 3.1rem minmax(0, 1fr) auto; gap: 0 0.6rem; }
    .tp-utvidet { margin-left: 3.7rem; }
    .tp-naa-kort h2 { font-size: 1.25rem; }
}

.orders-toggle-older {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    background: transparent;
    border: none;
    border-radius: 99px;
    color: var(--vl-text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.orders-toggle-older:hover {
    color: var(--vl-text);
    background: var(--vl-glass);
}
.orders-toggle-older i { font-size: 0.7rem; }

/* ── Paneltilgang (/admin/settings/access) ──────────────────────────────
   Kolonnebasert liste. Faste bredder paa «Paneler» og handlingskolonnen:
   variabel bredde der ville forskjovet radene i forhold til hverandre. */
.acc-col-name   { flex: 2 1 220px; min-width: 0; }
.acc-col-why    { flex: 1 1 170px; min-width: 0; }
.acc-col-panels { flex: 0 0 120px; }
.acc-col-act    { flex: 0 0 40px; text-align: right; }

@media (max-width: 767.98px) {
    .list-item.col-list-row > .acc-col-name   { flex: 1 1 100%; order: 1; }
    .list-item.col-list-row > .acc-col-why    { flex: 1 1 auto; order: 2; }
    .list-item.col-list-row > .acc-col-panels { flex: 0 0 auto; order: 3; }
    .list-item.col-list-row > .acc-col-act    { flex: 0 0 auto; order: 4; margin-left: auto; }
}

/* ==========================================================================
   Kassa (POS) og kundeskjerm — /admin/pos og /embed/pos
   ==========================================================================
   To fullskjermflater som viser samme ordre fra hver sin side av disken.
   Kassa er tett og tastbar; kundeskjermen er stor og lesbar paa avstand.
   Begge folger .checkin-station-monsteret: egen topbar, 100vh, ingen scroll
   paa ytterste niva.
*/

.pos-station {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.pos-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--vl-bg-card);
    border-bottom: 1px solid var(--vl-border);
    flex-shrink: 0;
}

.pos-topbar-left,
.pos-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pos-topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--vl-text);
}

.pos-terminal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    color: var(--vl-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Kassa: varegitter til venstre, ordren til hoyre. */
.pos-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.pos-catalog {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    overflow: hidden;
}

.pos-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.pos-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    align-content: start;
    padding-bottom: 1rem;
}

/* Varekort. Store nok til aa treffes med fingeren paa en berorringsskjerm. */
.pos-product {
    /* Markoeren for «kan tilpasses» ligger absolutt i hjornet. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 110px;
    padding: 0.75rem;
    border-radius: var(--vl-radius-sm);
    background: var(--vl-bg-card);
    border: 1px solid var(--vl-border);
    color: var(--vl-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.06s;
}

.pos-product:hover {
    border-color: var(--vl-primary);
}

/* Kort, tydelig kvittering paa at trykket registrerte. */
.pos-product:active {
    transform: scale(0.97);
}

.pos-product-thumb {
    height: 52px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-product-thumb img {
    max-height: 52px;
    max-width: 100%;
    object-fit: contain;
}

.pos-product-thumb i {
    font-size: 1.5rem;
    color: var(--vl-text-muted);
    opacity: 0.4;
}

.pos-product-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-product-price {
    margin-top: auto;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vl-accent);
}

/* Ordrepanelet. */
.pos-order {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--vl-bg-card-solid);
    border-left: 1px solid var(--vl-border);
}

.pos-order-head {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--vl-border);
    flex-shrink: 0;
}

.pos-lines {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Ordrelinja bygger paa .list-item, men en kvittering skal ikke stable
   vertikalt slik .list-item gjor paa smale skjermer — kassa staar alltid
   paa en skjerm bred nok til en linje. */
.list-item.pos-line {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
}

.pos-line-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.2;
}

.pos-line-unit {
    display: block;
    font-size: 0.72rem;
    color: var(--vl-text-muted);
}

/* ── Bestillingsknappen i kassas topbar ───────────────────────────────────
   Kiosken og kjokkenet er som regel to rom. Den som staar i luka maa se at
   det har kommet noe uten aa ha kjokkenskjermen i syne.
*/
.pos-ordre-knapp {
    position: relative;
    width: 38px;
    height: 32px;
    border-radius: var(--vl-radius-xs);
    border: 1px solid var(--vl-border);
    background: var(--vl-glass);
    color: var(--vl-text);
    cursor: pointer;
}

.pos-ordre-knapp:hover { border-color: var(--vl-primary); }

.pos-ordre-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e17055;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 19px;
}

.pos-ordre-kort {
    padding: 0.9rem;
    border-radius: var(--vl-radius-sm);
    border: 1px solid var(--vl-border);
    background: var(--vl-bg-card);
}

.pos-ordre-kort + .pos-ordre-kort { margin-top: 0.75rem; }

/* Leveringslinja staar oeverst og i egen farge. Den som plukker maa vite om
   posen skal over disken eller ut i hallen FOER han leser varelinjene. */
.pos-ordre-levering {
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--vl-radius-xs);
    background: var(--vl-glass);
    font-size: 0.85rem;
}

.pos-ordre-linjer { font-size: 0.95rem; }
.pos-ordre-linjer > * + * { margin-top: 0.2rem; }

.pos-ordre-antall-linje {
    display: inline-block;
    min-width: 1.9rem;
    font-weight: 700;
    color: var(--vl-accent);
}

.pos-ordre-valg {
    margin-left: 1.9rem;
    font-size: 0.82rem;
    color: #fdcb6e;
}

.pos-ordre-betal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--vl-border);
}

/* Ubetalt: det er her kassa tar imot pengene for en app-bestilling, og grå
   tekst med tre smaa knapper ble ikke sett («det er ingen maate aa ta
   betalt», 03.10.2026). Samme gule tone som «Ikke betalt» paa kjoekkenet. */
.pos-ordre-betal.er-ubetalt {
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: var(--vl-radius-sm);
    background: rgba(255, 193, 7, 0.08);
}

.pos-ordre-betal-tekst {
    color: #ffc107;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 0.25rem;
}

.pos-ordre-handlinger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

/* «Uten loek · Med bacon» under varenavnet paa ordrelinja i kassa. Samme
   informasjon som paa kjokkenskjermen, i samme farge, saa crew kjenner den
   igjen naar de leser opp bestillingen. */
.pos-line-valg {
    display: block;
    font-size: 0.78rem;
    color: #fdcb6e;
    line-height: 1.25;
}

/* Liten markor i hjornet av varekortet: denne aapner et valg i stedet for aa
   gaa rett i ordren. */
.pos-product-valg {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    font-size: 0.7rem;
    color: var(--vl-text-muted);
}

.pos-qty {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.pos-qty-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vl-radius-xs);
    border: 1px solid var(--vl-border);
    background: var(--vl-glass);
    color: var(--vl-text);
    font-size: 0.8rem;
    cursor: pointer;
}

.pos-qty-btn:hover {
    border-color: var(--vl-primary);
}

.pos-qty-value {
    min-width: 26px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.pos-line-total {
    flex: 0 0 68px;
    text-align: right;
    font-weight: 600;
    font-size: 0.9rem;
}

.pos-line-discount {
    display: block;
    font-size: 0.7rem;
    color: var(--vl-accent);
}

.pos-order-foot {
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--vl-border);
    background: var(--vl-bg-card);
}

.pos-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.pos-total-label {
    font-size: 0.9rem;
    color: var(--vl-text-muted);
}

.pos-total-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.pos-pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.pos-pay-btn {
    padding: 0.7rem 0.5rem;
    border-radius: var(--vl-radius-sm);
    border: 1px solid var(--vl-border);
    background: var(--vl-glass);
    color: var(--vl-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.pos-pay-btn:hover:not(:disabled) {
    border-color: var(--vl-primary);
    background: var(--vl-bg-elevated);
}

.pos-pay-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pos-pay-btn i {
    margin-right: 0.35rem;
}

.pos-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--vl-text-muted);
    text-align: center;
    padding: 2rem 1rem;
}

.pos-empty i {
    font-size: 2.25rem;
    opacity: 0.3;
    margin-bottom: 0.75rem;
}

/* Smale skjermer: ordren legger seg under varegitteret. */
@media (max-width: 991.98px) {
    .pos-body {
        flex-direction: column;
    }

    .pos-order {
        width: 100%;
        max-height: 55vh;
        border-left: none;
        border-top: 1px solid var(--vl-border);
    }
}

@keyframes pos-line-in {
    from { background: var(--vl-primary-glow); }
    to   { background: transparent; }
}

/* ── Kassa: knytning til deltaker ──────────────────────────────────────────
   Et salg over disk er anonymt, og det er det vanlige. Derfor er raden
   diskret til noen faktisk knytter en deltaker til ordren.
*/

.pos-customer {
    margin-top: 0.6rem;
}

.pos-customer-add {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: var(--vl-radius-xs);
    border: 1px dashed var(--vl-border);
    background: none;
    color: var(--vl-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

.pos-customer-add:hover {
    border-color: var(--vl-primary);
    color: var(--vl-text);
}

.pos-customer-linked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--vl-radius-xs);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    font-size: 0.82rem;
}

/* Kassa tar betalt for en app-bestilling: tydelig at det er DEN som staar
   her, og ikke et nytt salg — og veien tilbake. Gul som «Ikke betalt». */
.pos-app-ordre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--vl-radius-xs);
    border: 1px solid rgba(255, 193, 7, 0.45);
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    font-size: 0.85rem;
}

.pos-customer-linked > i {
    color: var(--vl-accent);
    font-size: 0.8rem;
}

.pos-customer-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-customer-seat {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--vl-primary-glow);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Sokeoverlegg for aa finne deltakeren. */
.pos-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1rem 1rem;
}

.pos-search-overlay.active {
    display: flex;
}

.pos-search-panel {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.25rem;
    border-radius: var(--vl-radius);
    background: var(--vl-bg-card-solid);
    border: 1px solid var(--vl-border);
}

.pos-search-panel .list-item {
    margin-bottom: 0.5rem;
}

/* Vipps-QR: mens koden staar paa kundeskjermen er kassa i vent. */
.pos-vipps-wait {
    padding: 0.75rem;
    border-radius: var(--vl-radius-sm);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
}

.pos-pay-btn--vipps {
    border-color: rgba(255, 91, 46, 0.45);
    color: #ff8a63;
}

.pos-pay-btn--vipps:hover:not(:disabled) {
    border-color: #ff5b2e;
    background: rgba(255, 91, 46, 0.12);
}

/* ── Kjokkenskjerm — /crew/kitchen ─────────────────────────────────────────
   Leses av noen som staar ved grillen med hendene fulle. Store kort, ingen
   sma klikkflater, og ventetiden som det mest fremtredende paa kortet.
*/

.kitchen-station {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.kitchen-board {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    align-content: start;
}

.kitchen-card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: var(--vl-radius);
    background: var(--vl-bg-card-solid);
    border: 1px solid var(--vl-border);
    border-left: 5px solid var(--vl-accent);
}

/* Fargen er ventetid, ikke pynt: gul etter fem minutter, rod etter ti. */
.kitchen-card.is-waiting  { border-left-color: #fdcb6e; }
.kitchen-card.is-late     { border-left-color: #e17055; }
/* «Klar» dimmet hele kortet da det betydde «ferdig, venter paa kunden».
   Naa er det et ARBEIDSSTEG: noen maa fortsatt gi posen fra seg, og et
   nedtonet kort leses som at knappen er laast. Bare utleverte dimmes. */
.kitchen-card.is-ready    { border-left-color: #00b894; }

.kitchen-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.kitchen-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.kitchen-timer {
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vl-text-muted);
}

.kitchen-card.is-late .kitchen-timer { color: #e17055; }

.kitchen-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.kitchen-item {
    display: flex;
    gap: 0.6rem;
    font-size: 1.05rem;
}

.kitchen-item-qty {
    flex: 0 0 2.2rem;
    font-weight: 700;
    color: var(--vl-accent);
}

.kitchen-note {
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.9rem;
    border-radius: var(--vl-radius-xs);
    background: rgba(253, 203, 110, 0.12);
    border: 1px solid rgba(253, 203, 110, 0.3);
    font-size: 0.85rem;
}

.kitchen-seat {
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    margin-bottom: 0.6rem;
}

.kitchen-ready-btn {
    width: 100%;
    padding: 0.7rem;
    border-radius: var(--vl-radius-sm);
    border: 1px solid rgba(0, 184, 148, 0.4);
    background: rgba(0, 184, 148, 0.12);
    color: #55efc4;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.kitchen-ready-btn:hover {
    background: rgba(0, 184, 148, 0.2);
}

/* ── Varelista i /crew/kiosk/products ──────────────────────────────────────
   Kolonnebasert (design/lister.md): bilde, navn, kategorier, to priser,
   margin og status. Base-oppsettet kommer fra `.col-list-row` og
   `.col-list-header`; her defineres bare kolonnebreddene.

   Sida bruker `.content-xl`. Paa 900 px avkortes navn og kategorier samtidig,
   og da er lista ikke til aa skumme nedover.
*/

.kiosk-col-bilde {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vl-radius-xs);
    background: #fff;
    overflow: hidden;
}

.kiosk-col-bilde img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Ingen bilde: dempet ikon paa kortets egen bunn, ikke en hvit rute. */
.kiosk-col-bilde > i {
    color: var(--vl-text-muted);
    opacity: 0.5;
}

.col-list-header .kiosk-col-bilde {
    background: none;
    height: auto;
}

.kiosk-col-navn   { flex: 2 1 200px; min-width: 0; }
.kiosk-col-kat    { flex: 1 1 130px; min-width: 0; }
.kiosk-col-pris   { flex: 0 0 76px;  text-align: right; }
.kiosk-col-margin { flex: 0 0 116px; text-align: right; }
.kiosk-col-status { flex: 0 0 92px; }
.kiosk-col-meny   { flex: 0 0 40px; }

.kiosk-col-merker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.72rem;
}

.kiosk-col-merker .badge {
    font-size: 0.62rem;
    font-weight: 600;
}

/* Mobil: to linjer. Navn og status oeverst, tallene under — kategoriene
   faller bort, for de er filteret over lista uansett. */
@media (max-width: 767.98px) {
    .kiosk-col-navn   { flex: 1 1 0; order: 1; }
    .kiosk-col-status { flex: 0 0 auto; order: 2; }
    .kiosk-col-meny   { flex: 0 0 40px; order: 3; }
    .kiosk-col-pris   { flex: 0 0 auto; order: 4; text-align: left; font-size: 0.78rem; }
    .kiosk-col-margin { flex: 0 0 auto; order: 5; text-align: left; font-size: 0.78rem; }
    .kiosk-col-kat    { display: none; }
}

/* «Uten loek · Med bacon» under varelinja. Mindre enn varenavnet, men ikke
   nedtonet til det uleselige: dette er det kjokkenet faktisk maa lese. */
.kitchen-item-valg {
    font-size: 0.85rem;
    color: #fdcb6e;
    line-height: 1.3;
}

/* Tilpasningen under varenavnet i ordredetaljen. Samme farge som paa
   kjokkenskjermen og kundeskjermen — den som leser opp en ordre skal kjenne
   den igjen uansett hvilken flate hun staar paa. */
.ordre-linje-valg {
    font-size: 0.8rem;
    color: #fdcb6e;
    line-height: 1.3;
}

/* Den kompakte retteraden i ordredetaljen.

   Ordredetaljen er et OPPSLAG — man gaar dit for aa se hva som skjedde med en
   bestilling. Derfor to nedtrekk og ingen store knapper: arbeidsflyten hoerer
   paa kjokkenskjermen og i kassa, og en primaerknapp her inviterer til aa endre
   noe man kom for aa lese. */
.ordre-rett {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--vl-radius-xs);
    border: 1px solid var(--vl-border);
    background: var(--vl-glass);
}

.ordre-rett-merke {
    font-size: 0.78rem;
    color: var(--vl-text-muted);
    white-space: nowrap;
}

.ordre-rett .velg-felt {
    flex: 1 1 9rem;
    min-width: 0;
}

/* Ordren er avsluttet og laast. Forklaringen staar der knappene ville staatt,
   saa den som leter etter dem finner svaret paa samme sted. */
.statusvelger-laast {
    padding: 0.7rem 0.85rem;
    border-radius: var(--vl-radius-xs);
    border: 1px solid var(--vl-border);
    background: var(--vl-glass);
    color: var(--vl-text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Sporet i ordredetaljen: hva som skjedde, naar, og hvem som gjorde det.
   Kilden er revisjonsloggen — ingen egen tabell, for to steder som forteller
   det samme blir uenige. */
.ordre-spor {
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--vl-border);
    padding-left: 0.85rem;
}

.ordre-spor-rad {
    position: relative;
    padding: 0.35rem 0;
    font-size: 0.82rem;
}

.ordre-spor-rad::before {
    content: '';
    position: absolute;
    left: -1.18rem;
    top: 0.72rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vl-text-muted);
}

.ordre-spor-rad.er-advarsel::before { background: #e17055; }

.ordre-spor-tid {
    display: block;
    color: var(--vl-text-muted);
    font-size: 0.72rem;
}

.ordre-spor-hvem {
    color: var(--vl-text-muted);
}

.ordre-spor-hvem::before { content: ' · '; }

/* Skillet mellom det som gjenstaar og det som nettopp ble ekspedert.
   De ferdige staar nederst, bak en linje, saa oeyet slipper aa sortere. */
.kitchen-skille {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.25rem;
    font-size: 0.78rem;
    color: var(--vl-text-muted);
    white-space: nowrap;
}

.kitchen-skille::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vl-border);
}

/* Klokka staar stille paa en ferdig ordre. Et tall som teller videre paa noe
   som er gjort ser ut som om det fortsatt venter paa noen. */
.kitchen-timer.er-stoppet {
    color: var(--vl-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Nylig ekspedert. Blir staaende fem minutter saa et feiltrykk kan rettes der
   det ble gjort — men dempet, saa den ikke leses som arbeid som gjenstaar. */
.kitchen-card.er-ferdig,
.pos-ordre-kort.er-ferdig {
    opacity: 0.62;
}

.kitchen-card.er-ferdig:hover,
.pos-ordre-kort.er-ferdig:hover {
    opacity: 1;
}

.kitchen-ferdig-merke {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem;
    border-radius: var(--vl-radius-sm) 0 0 var(--vl-radius-sm);
    border: 1px solid var(--vl-border);
    color: var(--vl-text-muted);
    font-size: 0.9rem;
}

/* Hovedhandlingen og en liten menyknapp ved siden. Menyen finnes for de to
   tingene som skjer hele tiden: et feiltrykk paa feil kort, og en kunde som
   kommer og henter selv likevel. */
.kitchen-knapperad {
    display: flex;
    align-items: stretch;
}

.kitchen-knapperad .kitchen-ready-btn {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.kitchen-meny-btn {
    flex: 0 0 46px;
    margin-left: -1px;
    border-radius: 0 var(--vl-radius-sm) var(--vl-radius-sm) 0;
    border: 1px solid var(--vl-border);
    background: var(--vl-glass);
    color: var(--vl-text-muted);
    font-size: 1rem;
    cursor: pointer;
}

.kitchen-meny-btn:hover {
    color: var(--vl-text);
    border-color: var(--vl-primary);
}

/* Valget som alt er satt. Deaktivert, men ikke usynlig — den som aapner
   menyen skal se hvor ordren staar naa. */
.list-item.er-valgt {
    border-color: var(--vl-primary);
    opacity: 0.75;
}

/* Siste steg: ordren er gitt fra seg.
   Foerste utgave var dempet — `var(--vl-glass)` og en grabakgrunn — og da
   leste den som DEAKTIVERT. Roger prøvde aa trykke og trodde den var laast.
   En knapp som er den eneste handlingen paa kortet maa se ut som en knapp; det
   er ingen grunn til aa tone den ned bare fordi den staar sist. */
.kitchen-ready-btn.is-handover {
    border-color: rgba(129, 236, 236, 0.45);
    background: rgba(129, 236, 236, 0.14);
    color: #81ecec;
}

.kitchen-ready-btn.is-handover:hover {
    background: rgba(129, 236, 236, 0.24);
}

/* ── Brukerens handlekurv i kiosken — /app/kiosk ───────────────────────────
   Kurven ligger som en linje langs bunnen i stedet for et panel ved siden av.
   Menyen leses paa telefon, og der er bunnen der tommelen allerede er.
*/

/* Monteres paa `document.body`, ikke inne i sida: `position: fixed` maales mot
   naermeste forelder med transform/filter/backdrop-filter, og appflata har en
   slik. Inne i sida ble linja klippet til innholdsbredden.

   Fargen er ikke kortbakgrunnen. Linja er den ene tingen paa skjermen som
   venter paa et trykk, og med samme flate som resten forsvant den for folk som
   ikke visste at den var der. */
.kiosk-cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: 0.75rem clamp(1rem, 4vw, 3rem) calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--vl-primary) 38%, var(--vl-bg-card-solid)),
        color-mix(in srgb, var(--vl-primary) 14%, var(--vl-bg-card-solid)));
    border-top: 2px solid var(--vl-primary);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transform: translateY(130%);
    transition: transform 0.2s ease-out;
}

/* `color-mix` er Chrome 111. Appen kjorer paa moderne nettlesere (skjermene er
   det gamle, og de har sin egen CSS), men fallbacken koster ingenting. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .kiosk-cart-bar { background: var(--vl-bg-card-solid); }
}

.kiosk-cart-bar.is-open {
    transform: translateY(0);
}

/* Kurvknappen til venstre i linja. Aapner arket med linjene, slik at et
   feiltrykk kan rettes uten aa gaa gjennom hele bestillingen foerst. */
.kiosk-cart-open {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--vl-radius-sm);
    border: 1px solid var(--vl-border);
    background: var(--vl-glass);
    color: var(--vl-text);
    font-size: 1.1rem;
    cursor: pointer;
}

.kiosk-cart-antall {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--vl-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
}

/* Kort dunk naar noe legges i. Bekrefter trykket paa en skjerm der kurven
   ligger langt fra fingeren. */
@keyframes kiosk-dunk {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.16); }
    100% { transform: scale(1); }
}

.kiosk-cart-open.dunk {
    animation: kiosk-dunk 0.32s ease-out;
}

/* Kopien som flyr fra kortet ned i kurven. */
.kiosk-fly {
    position: fixed;
    z-index: 1080;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vl-radius-xs);
    background: #fff;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.45s ease-in;
    color: var(--vl-text-muted);
}

.kiosk-fly img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* ── Produktkortet i brukermenyen ──────────────────────────────────────────
   Hele kortet er knappen: ett trykk legger varen i kurven. Foerste utgave
   hadde en «Legg i kurv»-knapp per vare, og med seksogtredve varer ble den
   knappen det eneste man saa.

   Bildefeltet har FAST hoyde ogsaa naar bildet mangler. Uten det ble raden
   ujevn saa snart bare annenhver vare hadde bilde, og det er normaltilstanden
   i en kiosk der halve sortimentet er hjemmelaget.
*/
.kiosk-kort {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.6rem;
    border-radius: var(--vl-radius);
    border: 1px solid var(--vl-border);
    background: var(--vl-bg-card);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.kiosk-kort:hover {
    border-color: var(--vl-primary);
}

.kiosk-kort:active {
    transform: scale(0.97);
}

.kiosk-kort.har-i-kurv {
    border-color: var(--vl-primary);
}

/* Varen maa tilberedes, og kjoekkenet lager ikke mat naa (beslutning 626).
   Staar i menyen — prisen er fortsatt nyttig aa se — men kan ikke velges. */
.kiosk-kort.er-utilgjengelig {
    opacity: 0.45;
    filter: grayscale(0.7);
    cursor: not-allowed;
}

.kiosk-kort.er-utilgjengelig:hover {
    border-color: var(--vl-border);
}

.kiosk-kort.er-utilgjengelig:active {
    transform: none;
}

/* Hvit bunn BARE naar det ligger et ekte bilde her: pakkeshots fra
   leverandoerene er frilagt paa hvitt, og et morkt felt bak dem gir en grå
   kant rundt hver flaske. Mangler bildet, skal feltet foelge kortet — en hvit
   rute i et morkt rutenett leses som en feil, ikke som «ingen bilde». */
.kiosk-kort-bilde {
    height: 110px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vl-radius-xs);
    background: #fff;
    overflow: hidden;
}

.kiosk-kort-bilde.er-tom {
    background: var(--vl-glass);
    border: 1px dashed var(--vl-border);
}

.kiosk-kort-bilde img {
    max-width: 88%;
    max-height: 96px;
    object-fit: contain;
}

/* Kategoriikonet som plassholder. Dempet med vilje: det skal leses som
   «ingen bilde», ikke som et ikon med egen betydning. */
.kiosk-kort-bilde > i {
    font-size: 2rem;
    color: var(--vl-text-muted);
    opacity: 0.45;
}

.kiosk-kort-tekst {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: auto;
}

.kiosk-kort-navn {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
}

.kiosk-kort-pris {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vl-primary);
}

.kiosk-kort-merke {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--vl-text-muted);
    line-height: 1.2;
}

.kiosk-kort-antall {
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 2;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--vl-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

.kiosk-kort-info {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
}

.kiosk-kort-info:hover {
    background: rgba(0, 0, 0, 0.6);
}

.kiosk-cart-summary {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
}

.kiosk-cart-total {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vl-text);
}

/* Antallsvelger paa produktkortet i brukermenyen. */
.kiosk-qty {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.kiosk-qty-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--vl-radius-xs);
    border: 1px solid var(--vl-border);
    background: var(--vl-glass);
    color: var(--vl-text);
    cursor: pointer;
}

.kiosk-qty-btn:hover {
    border-color: var(--vl-primary);
}

.kiosk-qty-value {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

/* Statuslinje for en aktiv bestilling. */
.kiosk-order-status {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.kiosk-status-step {
    flex: 1;
    padding: 0.5rem 0.4rem;
    border-radius: var(--vl-radius-xs);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    text-align: center;
    font-size: 0.75rem;
    color: var(--vl-text-muted);
}

.kiosk-status-step.is-done {
    background: rgba(0, 184, 148, 0.12);
    border-color: rgba(0, 184, 148, 0.35);
    color: #55efc4;
}

.kiosk-status-step.is-current {
    background: var(--vl-primary-glow);
    border-color: var(--vl-primary);
    color: var(--vl-text);
    font-weight: 600;
}

/* Skjulte sponsorer (/admin/sponsors). Dempet, ikke gjemt: de skal kunne
   leses og klikkes, men det oeverste avsnittet er svaret paa «hvem er
   sponsorene vaare naa». Full styrke ved hover, saa lista ikke foles doed. */
.sponsor-group--hidden { opacity: 0.55; transition: opacity 0.15s; }
.sponsor-group--hidden:hover { opacity: 1; }

/* Tile som forlater appen. En vanlig tile lover at du blir vaerende, saa
   skillet maa vaere synlig: stiplet kant og pil i hjornet. */
.hub-tile--ext {
    border-style: dashed;
}
.hub-tile--ext:hover {
    border-style: solid;
}
.hub-tile-ext-mark {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    font-size: 0.65rem;
    color: var(--vl-text-muted);
    opacity: 0.7;
}
.hub-tile--ext:hover .hub-tile-ext-mark {
    opacity: 1;
    color: var(--vl-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   Budsjett og økonomi — /crew/budsjett, /crew/utlegg
   Se docs/planer/budsjett.md

   Kolonnene bygger på .col-list-row / .col-list-header fra components.css
   slik lister.md foreskriver — ingen <table>. .bx-row strammer inn
   paddingen, fordi et regneark med 47 rader trenger tettere linjer enn en
   vanlig liste.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Verktøylinje ─────────────────────────────────────────────────── */

.bx-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

/* Uten faneraden under er det ingenting som skiller verktoylinja fra arket.
   Streken faneraden hadde flytter da opp hit. */
.bx-bar--solo {
    border-bottom: 1px solid var(--vl-glass-border);
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
}

.bx-bar-left,
.bx-bar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Bare BREDDE. Formen kommer fra `.velg-felt` i components.css; her staar
   det som er saerlig for denne ene velgeren — versjonsnavnene er lange nok at
   standardbredden kutter dem. */
.bx-version-select {
    width: auto;
    min-width: 15rem;
    max-width: 22rem;
}

/* Navnet paa versjonen, for den som ikke kan bytte den. Ikke en nedtonet
   select: en velger man ikke kan bruke er stoy. Den som har lesetilgang skal
   fortsatt VITE hvilken versjon de leser. */
.bx-version-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--vl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}

.bx-bar-note { font-size: 0.8rem; }

.bx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    font-size: 0.75rem;
    color: var(--vl-text-muted);
    white-space: nowrap;
}

.bx-chip--master   { color: #fdcb6e; border-color: rgba(253, 203, 110, 0.35); }
.bx-chip--draft    { color: var(--vl-text-muted); }
.bx-chip--final    { color: #00b894; border-color: rgba(0, 184, 148, 0.35); }
.bx-chip--locked   { color: #4a9eff; border-color: rgba(74, 158, 255, 0.35); }
.bx-chip--readonly { color: #8b949e; }

/* ── Nøkkeltall: én linje ─────────────────────────────────────────── */
/*
   Erstattet tre stat-kort og et avviksbanner som til sammen tok ~220 px før
   første budsjettlinje. Dette er et regneark — arket skal være det man ser.

   FARGEBRUK: rødt her følger REGNSKAPSKONVENSJON (utgift og negativ balanse),
   ikke designsystemets «rødt = det ugjenkallelige» fra interaksjon.md. Derfor
   egne .bx-sum-neg / .bx-sum-pos framfor .text-danger — slett-knapper skal
   fortsatt være det eneste som leses som farlig. Fargen er dessuten dempet
   (#e8907a, ikke ren rød) nettopp for å ikke konkurrere med den.
*/

.bx-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.6rem;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0.75rem;
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
}

.bx-sum-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
}

.bx-sum-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vl-text-muted);
}

.bx-sum-item b {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bx-sum-item--strong b { font-size: 1.1rem; font-weight: 700; }

.bx-sum-item--muted b { font-size: 0.85rem; font-weight: 500; color: var(--vl-text-muted); }
.bx-sum-item--muted { margin-left: auto; }

.bx-sum-pos { color: #55efc4; }
.bx-sum-neg { color: #e8907a; }

/* ── Avvik: ikon med tall, popover ved klikk ──────────────────────── */

/* Pille, ikke firkant. Den staar i samme rad som `.knapp-tone` (Eksport, Ny
   versjon, Laas), og én firkantet kontroll blant piller leses som noe som er
   plassert der ved et uhell. Farge og vekt skiller den ut — formen trenger
   ikke gjore det ogsaa. */
.bx-warn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    background: rgba(225, 112, 85, 0.14);
    border: 1px solid rgba(225, 112, 85, 0.4);
    border-radius: 999px;
    color: #e8907a;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.bx-warn-chip:hover { background: rgba(225, 112, 85, 0.22); }

.bx-icon-btn {
    background: none;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text-muted);
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.bx-icon-btn:hover { color: var(--vl-text); border-color: var(--vl-border); }

/* ── Arket ────────────────────────────────────────────────────────── */

.bx-sheet { margin-bottom: 1.1rem; }

.bx-head {
    padding: 0 0.85rem 0.35rem;
    border-bottom: 1px solid var(--vl-glass-border);
    margin-bottom: 0.4rem;
}

.bx-col-name   { flex: 3 1 220px; min-width: 0; }
.bx-col-note   { flex: 2 1 170px; min-width: 0; }
.bx-col-amount { flex: 0 0 132px; position: relative; }
/* Budsjett mot regnskap (migrasjon 231): faktisk tall med avviket under. */
.bx-col-faktisk { flex: 0 0 128px; text-align: right; }
.bx-col-fund   { flex: 3 1 260px; min-width: 0; }
.bx-col-act    { flex: 0 0 28px; text-align: right; }

/*
   Radhandlinger som synlig knapp. Kontekstmenyen paa hoeyreklikk er en
   snarvei for mus — denne er inngangen, fordi touch ikke har hoeyreklikk og
   en sletting man maa gjette seg til ikke finnes.

   Dempet i hvile, tydelig paa hover over rada: i et ark med 47 linjer ville 47
   fullfarge-knapper konkurrert med tallene.
*/
.bx-row-menu {
    background: none;
    border: 0;
    padding: 0.2rem 0.25rem;
    color: var(--vl-text-muted);
    font-size: 0.75rem;
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.12s, color 0.12s;
}

.bx-row:hover .bx-row-menu { opacity: 1; }

.bx-row-menu:hover,
.bx-row-menu:focus-visible {
    opacity: 1;
    color: var(--vl-text);
}

.bx-row-menu:focus-visible { outline: 2px solid var(--vl-accent); outline-offset: 1px; }

.bx-group { margin-bottom: 0.5rem; }

.bx-group-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem;
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
    cursor: pointer;
    user-select: none;
}

.bx-group--income .bx-group-head { background: rgba(0, 206, 201, 0.1); }

.bx-group-head:hover { border-color: var(--vl-border); }
.bx-group-head:focus-visible { outline: 2px solid var(--vl-accent); outline-offset: 1px; }

.bx-group-caret { color: var(--vl-text-muted); font-size: 0.7rem; width: 0.8rem; }

.bx-group-name { font-weight: 600; font-size: 0.88rem; }

.bx-group-count {
    font-size: 0.7rem;
    color: var(--vl-text-muted);
    background: var(--vl-glass);
    border-radius: 999px;
    padding: 0 0.4rem;
}

.bx-group-total {
    margin-left: auto;
    font-weight: 700;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.bx-group-faktisk {
    font-size: 0.75rem;
    color: var(--vl-text-muted);
    font-variant-numeric: tabular-nums;
    margin-left: 0.75rem;
}

/* Cella er en knapp for dem som kan føre; samme utseende som tekst ellers. */
.bx-faktisk {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    background: none;
    border: 0;
    padding: 0.15rem 0.25rem;
    border-radius: 6px;
    color: inherit;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
button.bx-faktisk:hover { background: var(--vl-glass); }
.bx-faktisk-tall { font-size: 0.85rem; }
.bx-faktisk-tom { color: var(--vl-text-muted); }
.bx-avvik { font-size: 0.7rem; }

/* Faktisk-modalen (budget-faktisk.js, 1005-0208): spørsmål + hovedknapp,
   én liste med grunnlaget, og en føring på én linje. */
.fk-spm { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.fk-liste { border: 1px solid var(--vl-glass-border); border-radius: var(--vl-radius); padding: 0.25rem 0.75rem; margin-bottom: 0.6rem; }
.fk-rad {
    display: grid;
    grid-template-columns: 8.5rem 5.5rem minmax(0, 1fr) auto 1.5rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.45rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--vl-glass-border);
}
.fk-rad:last-child { border-bottom: 0; }
.fk-kilde { color: var(--vl-text-muted); font-size: 0.75rem; white-space: nowrap; }
.fk-dato { color: var(--vl-text-muted); font-variant-numeric: tabular-nums; }
.fk-tekst { min-width: 0; overflow-wrap: anywhere; }
.fk-belop { font-variant-numeric: tabular-nums; text-align: right; }
.fk-x { text-align: right; }
.fk-sum .fk-tekst { grid-column: 1 / 4; text-align: right; color: var(--vl-text-muted); }
/* Feltene i hver sin celle: feilmeldingen legger seg under feltet, raden står. */
.fk-ny { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 8rem auto; gap: 0.5rem; align-items: start; }
/* Knappen tar den bredden teksten trenger — en fast kolonne brøt «Legg til» i to. */
.fk-ny .btn { white-space: nowrap; }
.fk-auto summary { cursor: pointer; }
@media (max-width: 575.98px) {
    .fk-rad { grid-template-columns: minmax(0, 1fr) auto 1.5rem; }
    .fk-kilde, .fk-dato { display: none; }
    .fk-sum .fk-tekst { grid-column: 1 / 2; }
    .fk-ny { grid-template-columns: 1fr 1fr; }
}

.bx-group-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.bx-empty-group {
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    padding: 0.5rem 0.85rem;
    margin: 0;
}

.bx-row {
    padding: 0.25rem 0.85rem !important;
    border-radius: var(--vl-radius-xs);
}

.bx-row--flash { animation: bx-flash 1.6s ease-out; }

@keyframes bx-flash {
    0%, 40% { background: rgba(253, 203, 110, 0.22); border-color: rgba(253, 203, 110, 0.5); }
    100%    { background: var(--vl-bg-card); }
}

/* ── Redigerbare celler ───────────────────────────────────────────── */

.bx-in {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text);
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
    font-family: inherit;
}

.bx-in:hover:not([readonly]) { border-color: var(--vl-glass-border); }

/* `:not([readonly])` er ikke pynt. Et readonly-felt KAN faa fokus ved klikk —
   `tabindex="-1"` tar det bare ut av tabuleringsrekkefolgen — og uten dette
   fikk cella accent-kant og toent bakgrunn i det man klikket i den. Det er
   nettopp signalet «du skriver her naa», paa en side der crew uten
   `economy.manage` bare har lesetilgang. Da ser hele arket redigerbart ut. */
.bx-in:not([readonly]):focus {
    outline: none;
    border-color: var(--vl-accent);
    background: rgba(0, 206, 201, 0.06);
}

.bx-in[readonly] { cursor: default; }

.bx-in::placeholder { color: var(--vl-text-muted); opacity: 0.4; }

.bx-in-note { color: var(--vl-text-muted); font-size: 0.8rem; }

.bx-in-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/*
   Utgiftsbeloep i dempet roedt med minustegn — regnskapskonvensjon, samme som
   Excels [Red]-#,##0.00. Se .bx-sum for hvorfor det er et bevisst avvik fra
   «roedt er reservert for det ugjenkallelige».

   Fargen er dempet (#e8907a) og ikke ren roed, saa 38 rader ikke overdoever
   slett-knapper og overfinansieringsvarsler. Ved FOKUS gaar den tilbake til
   vanlig tekstfarge: et redigerbart felt med roed tekst leses som en
   feiltilstand, og det er ikke det som skjer naar man skriver inn et tall.
*/
.bx-in-amount--neg { color: #e8907a; }

.bx-in-amount--neg:not([readonly]):focus { color: var(--vl-text); }

.bx-in--saving { opacity: 0.5; }

/* Endringsmerket skal OPPDAGES, ikke ligge bak et panel. */
.bx-change {
    position: absolute;
    right: 0.4rem;
    bottom: -0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.65rem;
    cursor: pointer;
    white-space: nowrap;
}

.bx-change--up   { color: #e8907a; }
.bx-change--down { color: #55efc4; }
.bx-change:hover { text-decoration: underline; }

/* ── Finansieringskolonnen ────────────────────────────────────────── */

.bx-fund-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--vl-radius-xs);
    padding: 0.2rem 0.35rem;
    text-align: left;
    cursor: pointer;
}

.bx-fund-btn:hover { border-color: var(--vl-glass-border); background: var(--vl-glass); }
.bx-fund-btn:focus-visible { outline: 2px solid var(--vl-accent); outline-offset: 1px; }

.bx-fund-pen { font-size: 0.6rem; color: var(--vl-text-muted); opacity: 0; margin-left: auto; }
.bx-fund-btn:hover .bx-fund-pen { opacity: 1; }

.bx-fs {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--vl-glass);
    color: var(--vl-text-muted);
    white-space: nowrap;
}

.bx-fs--applied   { color: #fdcb6e; }
.bx-fs--granted   { color: #00b894; }
.bx-fs--received  { color: #55efc4; }
.bx-fs--earmarked { color: #a29bfe; display: inline-flex; align-items: center; gap: 0.2rem; }
.bx-fs--none      { opacity: 0.5; font-style: italic; }

.bx-chip-src {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--vl-radius-xs);
    background: rgba(108, 92, 231, 0.14);
    border: 1px solid rgba(108, 92, 231, 0.25);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bx-chip-src--earmarked {
    background: rgba(162, 155, 254, 0.16);
    border-color: rgba(162, 155, 254, 0.35);
}

.bx-alloc {
    font-size: 0.68rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bx-alloc--ok    { color: #55efc4; }
.bx-alloc--under { color: var(--vl-text-muted); }

/* Overfinansiering er en ADVARSEL, ikke en destruktiv handling.
   Rødt er reservert for det ugjenkallelige — se design/interaksjon.md. */
.bx-alloc--over {
    color: #e8907a;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.bx-share {
    font-size: 0.68rem;
    color: #4a9eff;
    font-variant-numeric: tabular-nums;
}

.bx-add {
    align-self: flex-start;
    background: none;
    border: 1px dashed var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text-muted);
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    margin-top: 0.2rem;
    cursor: pointer;
}

.bx-add:hover { color: var(--vl-text); border-color: var(--vl-border); }

/* ── Hjelpetekst ──────────────────────────────────────────────────── */

.bx-neg { color: #e8907a; }
.bx-pos { color: #55efc4; }

.bx-hint {
    margin-top: 0.85rem;
    font-size: 0.72rem;
    color: var(--vl-text-muted);
}

.bx-hint strong {
    color: var(--vl-text);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 0 0.25rem;
}

/* ── Versjoner ────────────────────────────────────────────────────── */

.bx-versions-intro,
.bx-compare-bar {
    font-size: 0.85rem;
    color: var(--vl-text-muted);
}

.bx-versions-intro { max-width: 75ch; margin-bottom: 1rem; }

.bx-vhead { padding: 0 1rem 0.35rem; }

.bx-v-col-name { flex: 3 1 220px; min-width: 0; }
.bx-v-col-kind { flex: 0 0 190px; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.bx-v-col-num  { flex: 0 0 110px; text-align: right; font-variant-numeric: tabular-nums; }
.bx-v-col-act  { flex: 0 0 36px; text-align: right; }

.bx-vrow--current { border-color: var(--vl-accent); }

.bx-vname {
    background: none;
    border: 0;
    padding: 0;
    color: var(--vl-text);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.bx-vname:hover { color: var(--vl-accent); }

.bx-vmeta { display: block; font-size: 0.72rem; color: var(--vl-text-muted); }

.bx-compare-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vl-glass-border);
}

.bx-compare-bar label { margin: 0; font-weight: 600; color: var(--vl-text); }
.bx-compare-bar .form-select { width: auto; min-width: 12rem; }

/* ── Import og eksport ────────────────────────────────────────────── */

.bx-versions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.bx-versions-head .bx-versions-intro { flex: 1 1 30rem; }

/* Hva filen inneholder, foer man importerer den. */
.im-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem 1rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 1rem;
    background: var(--vl-glass);
    border-radius: var(--vl-radius-xs);
}

.im-facts > div { display: flex; flex-direction: column; min-width: 0; }

.im-facts span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vl-text-muted);
}

.im-facts b {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Valideringsfeil og advarsler. Alle samtidig — én av gangen er ubrukelig. */
.im-problems {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.im-problems li {
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 0.45rem 0.6rem;
    background: var(--vl-glass);
    border-left: 2px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
}

.im-problems--danger li {
    border-left-color: #e8907a;
    background: rgba(225, 112, 85, 0.07);
}

/* ── Øremerkingsmodal ─────────────────────────────────────────────── */

.em-sub { font-size: 0.78rem; color: var(--vl-text-muted); margin-top: 0.1rem; }

.em-summary {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--vl-glass-border);
    background: var(--vl-glass);
}

.em-summary-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.em-summary-bar span { display: block; height: 100%; background: var(--vl-accent); transition: width 0.15s; }
.em-summary--ok   .em-summary-bar span { background: #55efc4; }
.em-summary--over .em-summary-bar span { background: #e8907a; }

.em-summary-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
}

.em-summary-rows > div { display: flex; flex-direction: column; }
.em-summary-rows span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vl-text-muted); }
.em-summary-rows b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.em-share-warn { color: #e8907a; }

.em-tools { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.em-tools .form-control { flex: 1; }

.em-list { display: flex; flex-direction: column; gap: 2px; }

.em-group {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vl-text-muted);
    padding: 0.6rem 0 0.2rem;
}

.em-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--vl-radius-xs);
}

.em-row:hover { background: var(--vl-glass); }
.em-row--ok   { border-color: rgba(85, 239, 196, 0.3); }
.em-row--over { border-color: rgba(232, 144, 122, 0.45); background: rgba(225, 112, 85, 0.07); }

.em-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.em-row-name { font-size: 0.85rem; }
.em-row-meta { font-size: 0.7rem; color: var(--vl-text-muted); }
.em-others { color: var(--vl-text-muted); }
.em-row-warn { font-size: 0.7rem; color: #e8907a; display: flex; align-items: center; gap: 0.25rem; }

.em-row-input { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; }
.em-row-input .form-control { width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; }

.em-fill {
    background: none;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text-muted);
    padding: 0.25rem 0.4rem;
    font-size: 0.7rem;
    cursor: pointer;
}

.em-fill:hover { color: var(--vl-accent); border-color: var(--vl-accent); }

/* ── Finansieringsmodal ───────────────────────────────────────────── */

.fm-list { display: flex; flex-direction: column; gap: 0.35rem; }

.fm-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.55rem;
    background: var(--vl-glass);
    border-radius: var(--vl-radius-xs);
}

.fm-status { display: block; font-size: 0.7rem; color: var(--vl-text-muted); }
.fm-amount { font-variant-numeric: tabular-nums; font-weight: 600; }

.fm-total {
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--vl-glass-border);
    font-size: 0.9rem;
}

.fm-total b { font-variant-numeric: tabular-nums; }
.fm-total--ok b   { color: #55efc4; }
.fm-total--over b { color: #e8907a; }

.fm-warn {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.8rem;
    background: rgba(225, 112, 85, 0.1);
    border: 1px solid rgba(225, 112, 85, 0.3);
    border-radius: var(--vl-radius-xs);
    font-size: 0.8rem;
    line-height: 1.5;
    color: #e8907a;
}

.fm-claims {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
}

/* ── Endringslogg ─────────────────────────────────────────────────── */

.cl-list { display: flex; flex-direction: column; gap: 0.5rem; }

.cl-row {
    padding: 0.55rem 0.7rem;
    background: var(--vl-glass);
    border-radius: var(--vl-radius-xs);
}

.cl-row-head { display: flex; justify-content: space-between; gap: 0.5rem; }
.cl-field { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vl-text-muted); }
.cl-when  { font-size: 0.72rem; color: var(--vl-text-muted); }

.cl-values { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; flex-wrap: wrap; }
.cl-old   { color: var(--vl-text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.cl-new   { font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-arrow { font-size: 0.65rem; color: var(--vl-text-muted); }

.cl-new-badge {
    font-size: 0.68rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(85, 239, 196, 0.15);
    color: #55efc4;
}

.cl-reason { font-size: 0.78rem; margin-top: 0.25rem; }
.cl-author { font-size: 0.7rem; color: var(--vl-text-muted); margin-top: 0.15rem; }

/* ── Sammenligning ────────────────────────────────────────────────── */

.cm-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--vl-glass);
    border-radius: var(--vl-radius-xs);
    margin-bottom: 1rem;
}

.cm-summary > div { display: flex; flex-direction: column; }
.cm-summary span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vl-text-muted); }
.cm-summary b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.cm-removed { color: #e8907a; }
.cm-added   { color: #55efc4; }
.cm-changed { color: #fdcb6e; }

.cm-head { padding: 0 0.5rem 0.3rem; border-bottom: 1px solid var(--vl-glass-border); }

.cm-col-name { flex: 3 1 200px; min-width: 0; }
.cm-col-num  { flex: 0 0 92px; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.82rem; }

.cm-list { display: flex; flex-direction: column; gap: 2px; margin-top: 0.4rem; }

.cm-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--vl-radius-xs);
    border-left: 2px solid transparent;
}

.cm-row--removed { border-left-color: #e8907a; background: rgba(225, 112, 85, 0.06); }
.cm-row--added   { border-left-color: #55efc4; background: rgba(85, 239, 196, 0.06); }
.cm-row--changed { border-left-color: #fdcb6e; }

.cm-badge {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--vl-glass);
    color: var(--vl-text-muted);
    margin-right: 0.4rem;
}

.cm-badge--removed { color: #e8907a; }
.cm-badge--added   { color: #55efc4; }
.cm-badge--changed { color: #fdcb6e; }

.cm-name  { font-size: 0.85rem; }
.cm-group { display: block; font-size: 0.7rem; color: var(--vl-text-muted); }
.cm-before { display: block; font-size: 0.7rem; color: var(--vl-text-muted); font-style: italic; }

.cm-hint {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    color: var(--vl-text-muted);
    line-height: 1.5;
}

/* ── Kontekstmeny (delt komponent) ────────────────────────────────── */

.ctx-menu {
    position: fixed;
    z-index: 1080;
    min-width: 13rem;
    max-height: 80vh;
    overflow-y: auto;
}

.ctx-menu .dropdown-item { display: flex; align-items: center; }

.ctx-menu-hint {
    margin-left: auto;
    padding-left: 1rem;
    font-size: 0.7rem;
    color: var(--vl-text-muted);
}

/* ── Utlegg ───────────────────────────────────────────────────────── */

.ex-intro {
    font-size: 0.85rem;
    color: var(--vl-text-muted);
    max-width: 75ch;
    margin-bottom: 1rem;
}

/* «+ Ny post…» i utleggsmodalen: gruppe · navn · Opprett på én rad (1005-0218). */
.ec-nypost { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 0.5rem; align-items: start; }
.ec-nypost .btn { white-space: nowrap; }

.ex-queue-head {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fdcb6e;
    margin-bottom: 0.6rem;
}

.ex-row { align-items: flex-start; gap: 0.85rem; }

.ex-row-main { flex: 1; min-width: 0; }

.ex-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }

.ex-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--vl-text-muted);
}

.ex-unassigned { color: #fdcb6e; }

/* Personen i utleggskoen loftes ut av den dempede metaraden: kassereren leter
   etter HVEM som skal ha pengene, ikke etter datoen. Kallenavnet folger etter
   i parentes, dempet, fordi crew kjenner hverandre paa det. */
.ex-eier {
    color: var(--vl-text);
    font-weight: 600;
}

.ex-alias {
    color: var(--vl-text-muted);
    font-weight: 400;
}

.ex-alias::before { content: ' ('; }
.ex-alias::after  { content: ')'; }

.ex-note {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--vl-text-muted);
    border-left: 2px solid var(--vl-glass-border);
    padding-left: 0.5rem;
}

.ex-row-amount {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.ex-row-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.3rem; }

.ex-st {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--vl-glass);
    white-space: nowrap;
}

.ex-st--submitted { color: #fdcb6e; }
.ex-st--approved  { color: #00b894; }
.ex-st--paid      { color: #8b949e; }
.ex-st--rejected  { color: #e8907a; }

.ex-receipt,
.ex-noreceipt {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    background: none;
    border: 0;
    padding: 0;
    color: var(--vl-text-muted);
}

.ex-receipt { cursor: pointer; text-decoration: underline; }
.ex-receipt:hover { color: var(--vl-accent); }
.ex-noreceipt { color: #fdcb6e; }

.rc-img   { max-width: 100%; max-height: 65vh; border-radius: var(--vl-radius-sm); }
.rc-frame { width: 100%; height: 65vh; border: 0; border-radius: var(--vl-radius-sm); background: #fff; }

/* ── Mobil ────────────────────────────────────────────────────────── */
/* Maks to linjer per rad, header skjult — som lister.md foreskriver.   */

@media (max-width: 767.98px) {
    .bx-col-note { display: none; }
    .bx-col-name { flex: 1 1 100%; order: 1; }
    .bx-col-amount { flex: 0 0 auto; order: 3; margin-left: auto; }
    .bx-col-faktisk { flex: 0 0 auto; order: 3; }
    .bx-col-act { order: 4; }
    .bx-col-fund { flex: 1 1 100%; order: 5; }

    /* Ingen hover paa touch — knappen maa vaere synlig hele tiden. */
    .bx-row-menu { opacity: 0.7; padding: 0.35rem 0.4rem; }

    .bx-row { padding: 0.45rem 0.7rem !important; }

    .bx-change { position: static; margin-top: 0.15rem; }

    .bx-v-col-kind { flex: 1 1 auto; }
    .bx-v-col-num  { flex: 0 0 auto; font-size: 0.78rem; }

    .bx-sum { gap: 0.3rem 1rem; }
    .bx-sum-item--muted { margin-left: 0; }

    .em-row { flex-wrap: wrap; }
    .em-row-input { width: 100%; justify-content: flex-end; }

    .cm-col-num { flex: 0 0 auto; }

    .ex-row { flex-wrap: wrap; }
    .ex-row-amount { order: 3; margin-left: auto; }
}

/* Ikon-forhaandsvisning i snarveismodalen (/admin/settings/services).
   Samme flate som flisen bruker, saa det man ser her er det man faar. */
.svc-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--vl-radius-sm);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    font-size: 1.1rem;
    color: var(--vl-text);
}

/* Billettliste for crew (/crew/tickets). Personorientert: navn foerst, plass
   og status som faste kolonner slik at radene staar paa linje. */
.tk-col-name   { flex: 2 1 220px; min-width: 0; }
.tk-col-type   { flex: 1 1 120px; min-width: 0; }
.tk-col-seat   { flex: 0 0 80px; }
.tk-col-status { flex: 0 0 110px; }
.tk-col-act    { flex: 0 0 44px; text-align: right; }

@media (max-width: 767.98px) {
    .list-item.col-list-row > .tk-col-name   { flex: 1 1 100%; order: 1; }
    .list-item.col-list-row > .tk-col-status { flex: 0 0 auto; order: 2; }
    .list-item.col-list-row > .tk-col-seat   { flex: 0 0 auto; order: 3; }
    .list-item.col-list-row > .tk-col-type   { flex: 1 1 auto; order: 4; font-size: 0.75rem; }
    .list-item.col-list-row > .tk-col-act    { flex: 0 0 auto; order: 5; margin-left: auto; }
}

/* ══════════════════════════════════════════
   FINN SPILLERE — oppsett
   Ett lop i stedet for tre blindveier: hver manglende forutsetning var for et
   eget skjermbilde med en lenke ut til profilredigering.
   ══════════════════════════════════════════ */

.fp-wizard-intro {
    margin-bottom: 1.5rem;
}

.fp-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.fp-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--vl-text-muted);
    font-size: 0.85rem;
}

.fp-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vl-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.fp-step.active { color: var(--vl-text); }
.fp-step.active .fp-step-num { background: var(--vl-primary); color: #fff; }
.fp-step.done .fp-step-num { background: rgba(0, 184, 148, 0.25); color: #00b894; }

.fp-step-line {
    flex: 1;
    height: 1px;
    background: var(--vl-glass-border);
}

/* Spillvelger */
.fp-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
    max-height: 420px;
    overflow-y: auto;
}

.fp-game {
    position: relative;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--vl-radius-sm);
    background: var(--vl-bg-tertiary);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
}

.fp-game img,
.fp-game-ph {
    display: block;
    width: 100%;
    height: 70px;
    object-fit: cover;
}

.fp-game-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vl-text-muted);
}

.fp-game-name {
    display: block;
    padding: 0.4rem 0.5rem;
    font-size: 0.78rem;
    color: var(--vl-text);
    /* Lange spillnavn skal ikke gjore ett kort hoyere enn naboen. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-game.selected {
    border-color: var(--vl-primary);
}

.fp-game.selected::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(108, 92, 231, 0.2);
    pointer-events: none;
}

/* Samtykke */
.fp-consent-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.fp-consent-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--vl-glass);
    font-size: 0.9rem;
}

.fp-consent-list li:last-child { border-bottom: none; }
.fp-consent-list i { width: 20px; text-align: center; color: var(--vl-primary); }

.fp-wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vl-glass);
}

/* Bekreftelseskortet i «Gi bort billett». Personen skal vaere det eneste
   oeyet hviler paa foer man bekrefter en overfoering som ikke kan angres. */
.assign-recipient {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: var(--vl-radius);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
}

.assign-recipient img,
.assign-recipient-ph {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.assign-recipient-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vl-bg-tertiary);
    color: var(--vl-text-muted);
    font-weight: 600;
    font-size: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   Statistikk (/crew/statistikk)
   ──────────────────────────────────────────────────────────────────────
   Bare det som er EGET for denne sida. Nøkkeltall, rangerte lister,
   periodevelger og varmekart er delte komponenter i components.css —
   se components/metrics.js for hvorfor.
   ══════════════════════════════════════════════════════════════════════ */


/* Spørsmålet sida stilles for, og svaret. Fra designforslag 05: en
   rapport som åpner med et tall ber leseren gjøre koblingen selv. */
.stats-sporsmal {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vl-accent);
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.stats-svar {
    font-size: 1.02rem;
    color: var(--vl-text);
    opacity: 0.88;
    margin: 0 0 1.2rem;
    max-width: 76ch;
}

.stats-svar b { opacity: 1; font-weight: 700; }

.stats-sek {
    font-size: 0.73rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vl-text-muted);
    font-weight: 700;
    margin: 0 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.stats-sek::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vl-border);
}

.stats-kort { padding: 1.15rem 1.25rem; margin-bottom: 1.7rem; }

.stats-kort-topp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    margin-bottom: 0.6rem;
}

.stats-funn {
    color: var(--vl-primary);
    font-size: 0.89rem;
    font-weight: 600;
}

/* Hva figuren ER, til høyre og dempet. Tittelen er spørsmålet. */
.stats-kort-hint {
    margin-left: auto;
    font-size: 0.83rem;
    color: var(--vl-text-muted);
}

/* Hovedfiguren står uten seksjonsetikett over seg — den er sidas ene hero. */
.stats-kort--hero { margin-top: 0.5rem; }

/* «Vis tall» er en fotnote til figuren, ikke en handling midt i kortet. */
.stats-kort .btn-link[data-tabell] {
    align-self: flex-start;
    text-align: left;
    font-size: 0.82rem;
}



.stats-bunnfunn {
    font-size: 0.82rem;
    color: var(--vl-text-muted);
    line-height: 1.5;
    margin: 0.9rem 0 0;
}

.stats-bunnfunn b { color: #e8907a; font-weight: 600; }

/* ── Kampanjekortene ──────────────────────────────────────────────────
   Kurven er poenget: et tall sier hvor mange som kom, kurven sier når og
   hvor lenge utslaget varte. */
.stats-kampanjer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.stats-kampanje {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
    border-radius: var(--vl-radius);
    background: var(--vl-bg-card);
    border: 1px solid var(--vl-glass-border);
}

.stats-kampanje.is-best { border-color: rgba(108, 92, 231, 0.45); }

.stats-kampanje-flagg {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--vl-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.14rem 0.55rem;
    border-radius: 0 0 0 8px;
}

.stats-kampanje h4 { font-size: 0.98rem; margin: 0; font-weight: 700; }

.stats-kampanje-utm {
    font-size: 0.71rem;
    color: var(--vl-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

.stats-kampanje-tall { display: flex; flex-wrap: wrap; gap: 1.2rem; }

.stats-kampanje-tall span {
    display: flex;
    flex-direction: column;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vl-text-muted);
    font-weight: 600;
}

.stats-kampanje-tall b {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--vl-text);
    letter-spacing: normal;
    text-transform: none;
}

.stats-kampanje-kurve { margin-top: auto; padding-top: 0.4rem; }
.stats-kampanje-kurve .sparkline { width: 100%; height: 34px; }

/* Tom tilstand: ÉN linje, ikke tre tomme kort. I en måned uten kampanjer
   ville tavla ellers spurt «virket det?» om ingenting. */
.stats-tom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.8rem;
    border: 1px dashed var(--vl-border);
    border-radius: var(--vl-radius-sm);
    font-size: 0.88rem;
    color: var(--vl-text-muted);
}

.stats-tom b { color: var(--vl-text); font-weight: 600; }
.stats-tom .btn { margin-left: auto; }




/* Metoden: én dempet, sentrert linje helt nederst. Forbeholdene er ekte og
   må stå et sted, men de leses én gang — som avsnitt mellom figurene stjal
   de oppmerksomheten fra tallene hver eneste gang sida ble åpnet. */
.stats-metode {
    margin: 2.5rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--vl-border-light);
    text-align: center;
    font-size: 0.76rem;
    color: var(--vl-text-muted);
    opacity: 0.7;
}

.stats-metode-i {
    margin-left: 0.3rem;
    cursor: help;
    opacity: 0.8;
}

.stats-lenke-url {
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    overflow-wrap: anywhere;
}

/* QR i modal. `.modal-backdrop-custom` er bare et teppe — showConfirm()
   legger sin dialog i et SØSKENELEMENT over det, så teppet kan ikke selv
   bli en flex-beholder uten at alle de dialogene flytter seg. */
.stats-qr-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.stats-qr-kort {
    max-width: 380px;
    margin: auto;
    padding: 1.5rem;
    text-align: center;
}

/* Hvit bakgrunn under koden: en QR på mørk flate leses ikke av alle
   skannere, og denne skal kunne trykkes på en plakat.

   ── Hvorfor `margin-inline: auto` og ikke `text-align: center` ──

   Bootstraps `.card` er `display: flex; flex-direction: column`, så bildet
   er et FLEX-ITEM. `text-align: center` på kortet sentrerer innhold *inne i*
   et item — det flytter ikke selve itemet. Med en `max-width` som var
   smalere enn kortet, ble bildet derfor liggende ved cross-start, altså
   venstre, og så feilstilt ut.

   Koden fyller nå hele bredden. En QR skal skannes, ofte på avstand og i
   dårlig lys, så det er ingen grunn til å gi den mindre plass enn den kan få. */
.stats-qr-bilde {
    display: block;
    width: 100%;
    margin-inline: auto;
    background: #fff;
    border-radius: var(--vl-radius-sm);
    padding: 0.6rem;
}

/* ── Nedlastingsformater ─────────────────────────────────────
   Tre knapper, ikke ett nedtrekk: valget er ikke «hvilken fil»
   men «hvor skal den brukes», og da må hintet stå synlig.
   Ett nedtrekk hadde skjult nettopp det som gjør valget lett. */
.qr-formater {
    display: grid;
    gap: 0.4rem;
}

.qr-format {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'ikon navn' 'ikon hint';
    align-items: center;
    gap: 0 0.7rem;
    padding: 0.6rem 0.8rem;
    text-align: left;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--vl-text);
    transition: background 0.15s, border-color 0.15s;
}

.qr-format:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--vl-accent);
}
.qr-format:disabled { opacity: 0.55; cursor: progress; }

.qr-format i { grid-area: ikon; color: var(--vl-accent); }
.qr-format-navn { grid-area: navn; font-weight: 600; font-size: 0.9rem; }
.qr-format-hint {
    grid-area: hint;
    font-size: 0.75rem;
    color: var(--vl-text-muted);
}

/* ── Kampanjesida — /crew/statistikk/kampanjer ───────────────
   Ferdige kanaler over skjemaet. De finnes ikke fordi feltene er
   vanskelige, men fordi de må fylles ut LIKT hver gang: «TikTok»,
   «tiktok» og «Tik Tok» blir ellers tre rader som hver for seg er
   for lave til å bety noe. */
.kampanje-kanaler {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.kampanje-kanal {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
    border: 1px solid var(--vl-glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--vl-text-muted);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.kampanje-kanal:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--vl-text);
}

.kampanje-kanal.is-valgt {
    border-color: var(--vl-accent);
    color: var(--vl-text);
    background: rgba(255, 255, 255, 0.08);
}

/* Stripa beholder plassen si øverst, men får en vei videre til
   sida som LAGER lenkene. */
.stats-tavle-topp {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ══════════════════════════════════════════
   INNMELDINGER — /admin/innmeldinger
   ══════════════════════════════════════════ */

/* `.report-filter` og `.report-filter-tall` er erstattet av `.verktoylinje`
   med `.period-chip` og `.tall-merke`. Merknaden om tallet er verdt aa beholde:
   det teller ALLE med den statusen, ikke det filteret viser — ellers ville
   knappene vist sitt eget resultat som fasit. Se reports.js. */

/* Beskrivelsen er fritekst fra hvem som helst og kan vaere lang. To linjer i
   lista, resten i detaljvisningen — en rad som vokser til en skjermhoyde gjor
   lista ubrukelig som oversikt. */
.report-tekst {
    margin: 0 0 0.45rem;
    color: var(--vl-text);
    font-size: 0.92rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Uten dette sprenger en limt inn URL uten mellomrom raden. */
    overflow-wrap: anywhere;
}

.report-detaljer {
    margin: 1.2rem 0 1.4rem;
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.86rem;
}
.report-detaljer > div { display: contents; }
.report-detaljer dt { color: var(--vl-text-muted); font-weight: 500; }
.report-detaljer dd { margin: 0; overflow-wrap: anywhere; }

/* ── Varsler i kassa ──────────────────────────────────────────────────
   Informerer, sperrer ikke. Ingen knapp deaktiveres av disse — se
   oppgave 40: en serverside-sperre på åpen bestilling ville hindret
   den samme personen i å kjøpe billett til en venn mens en
   bankoverføring lå og ventet, og `awaiting_payment` utløper aldri. */
.checkout-notice {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1.05rem;
    margin-bottom: 1rem;
    border-radius: var(--vl-radius-sm);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    font-size: 0.9rem;
}

/* Punktlista i infosteget.
   Ingen ikoner, ingen bokser, ingen kant — dette er aatte setninger som skal
   leses raskt, og hvert element pakket inn i noe eget ville gjort lista til
   en vegg. Kula er dempet, teksten er ikke. */
.checkout-punkter {
    margin: 0;
    padding-left: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    color: var(--vl-text);
    line-height: 1.55;
}

.checkout-punkter li::marker { color: var(--vl-text-muted); }

.checkout-notice > i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    color: var(--vl-text-muted);
}

.checkout-notice strong {
    display: block;
    color: var(--vl-text);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.checkout-notice p {
    margin: 0;
    color: var(--vl-text-muted);
    line-height: 1.5;
}

.checkout-notice a {
    display: inline-block;
    margin-top: 0.4rem;
    color: var(--vl-accent);
    font-weight: 600;
    text-decoration: none;
}

.checkout-notice a:hover { text-decoration: underline; }
.checkout-notice p a { margin-top: 0; }

/* Varianten baeres av IKONET, ikke av en farget kant til venstre.
   Kantstripa er fjernet 06.09.2026 — se design/komponenter.md
   «Ingen farget kant til venstre». Gult, ikke rødt: en ubetalt bestilling er
   ikke en feil, den venter. Rødt er reservert for det ugjenkallelige. */
.checkout-notice--pending {
    background: rgba(253, 203, 110, 0.06);
    border-color: rgba(253, 203, 110, 0.22);
}

.checkout-notice--pending > i { color: #fdcb6e; }

.checkout-notice--info > i { color: var(--vl-accent); }

/* ── Ordredetalj (/admin/tickets/{id}) ────────────────────────────────
   Sida laa i `row g-4` med `col-lg-8` og ingen andre kolonne — innholdet fikk
   to tredels bredde med en tom tredjedel ved siden av. Under sto fire nesten
   like glassbokser med hvert sitt ikon, alle med inline-stiler.
   Naa er den en MODAL over lista — crew jobber i en koe, og hvert oppslag
   kostet foer to navigasjoner pluss tapt rulleposisjon og filter.
   Opplysningene er en definisjonsliste; ingen bokser som konkurrerer om aa
   vaere viktigst. Tittelen staar i modalhodet. */
.detalj-topp {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detalj-handlinger {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.detalj-liste {
    margin: 0 0 2rem;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    background: var(--vl-glass);
    overflow: hidden;
}

.detalj-rad {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--vl-glass-border);
}

.detalj-rad:first-child { border-top: 0; }

.detalj-rad dt {
    flex: 0 0 8.5rem;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
}

.detalj-rad dd {
    flex: 1 1 12rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--vl-text);
}

.detalj-sekundaer {
    display: block;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
}

.detalj-ref {
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    background: none;
    padding: 0;
}

@media (max-width: 575.98px) {
    .detalj-rad dt { flex: 1 1 100%; }
}

/* ── Refusjonsdialog (/admin/tickets) ─────────────────────────────────
   Hele bestillingen er avkrysset som standard; delvis refusjon er å
   fjerne en hake. Se oppgave 41. */
.refund-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 40vh;
    overflow-y: auto;
}

.refund-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--vl-radius-xs);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    cursor: pointer;
    margin: 0;
}

.refund-row:hover { border-color: var(--vl-border); }

/* Uavkrysset = beholdes. Den dempes, så det er lett å se hva som blir
   igjen uten å telle haker. */
.refund-row:not(:has(input:checked)) { opacity: 0.45; }

.refund-row input { flex: 0 0 auto; margin: 0; }

.refund-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
}

.refund-row-main span { font-size: 0.82rem; color: var(--vl-text-muted); }

.refund-row-flag {
    font-size: 0.68rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fdcb6e !important;
    border: 1px solid rgba(253, 203, 110, 0.35);
    border-radius: 4px;
    padding: 0 0.3rem;
}

.refund-row-price {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.refund-sum {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--vl-border);
    font-size: 0.9rem;
}

.refund-sum strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ── Toppen: alt som paagaar, ikke ett kort ─────────────────── */

.tp-naa-merke { display: flex; align-items: center; gap: 0.5rem; }
.tp-naa-antall {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px; padding: 0 0.42rem;
    font-size: 0.68rem; letter-spacing: 0;
}
.tp-naa-liste { display: flex; flex-direction: column; gap: 0.1rem; }

.tp-naa-rad {
    display: grid;
    /* Tid til VENSTRE, som i lista under. To ulike leseretninger paa samme
       skjerm gjor at oyet maa lete etter hvor tida staar. */
    /* 6.6rem og ikke 5.6: en innsendingskonkurranse staar aapen i flere doegn,
       og «1 d 22 t igjen» brakk over to linjer og la seg over
       framdriftsstreken under. Resttida er kortet ned i `restTekst()`, men
       kolonna maa taale den lengste formen den kan gi. */
    grid-template-columns: 6.6rem minmax(0, 1fr);
    gap: 0.3rem 0.9rem;
    /* Ingen skillestrek. Framdriftsstreken ligger nederst i hver rad og skiller
       dem allerede — to vannrette linjer per rad er én for mye, og den ene som
       BETYR noe drukner i den som bare deler opp. */
    padding: 0.15rem 0 0.7rem;
}

.tp-naa-tid { grid-column: 1; grid-row: 1; align-self: center; }
.tp-naa-tid b {
    display: block; font-size: 0.86rem; font-weight: 600;
    color: #e8ecf5; font-variant-numeric: tabular-nums;
}
.tp-naa-tid em { font-style: normal; font-size: 0.72rem; color: #b9c2d4; }

.tp-naa-innhold { grid-column: 2; grid-row: 1; min-width: 0; }
.tp-naa-tittel {
    display: block; font-size: 1rem; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
}
.tp-naa-tittel em {
    font-style: normal; font-weight: 400; font-size: 0.76rem;
    color: #b9c2d4; margin-left: 0.45rem;
}
.tp-naa-meta {
    display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem;
    font-size: 0.78rem; color: #b9c2d4; margin-top: 0.12rem;
}
.tp-naa-meta .tp-kat { color: #b9c2d4; }

/* Framdrift per rad, ikke ett kort.
   «44 min igjen» er et tall man maa LESE; en strek som er nesten full ses. Med
   flere rader ved siden av hverandre er det forskjellen mellom dem som teller.

   Ingen kantstripe paa den som haster — det var akkurat moenstret vi gikk bort
   fra, og rekkefolgen sier allerede hva som haster mest. */
.tp-naa-strek {
    grid-column: 1 / -1; grid-row: 2;
    display: block; height: 3px; border-radius: 99px;
    background: rgba(255, 255, 255, 0.13);
    overflow: hidden;
}
.tp-naa-strek i { display: block; height: 100%; background: var(--vl-accent); }

.tp-nest b { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c9c0ff; }

/* Tidskolonna: start over, slutt under. «Bassenget er aapent til 14:00» er
   det som avgjor om man rekker det etter en CS-runde. */
.tp-tid em {
    display: block; font-style: normal; font-size: 0.75rem;
    color: var(--vl-text-muted); opacity: 0.62; margin-top: 0.05rem;
}

/* Groent for paa, roedt for av. Knappen staar allerede bak et klikk, saa den
   treffes ikke ved et uhell — da er tydelighet viktigere enn forsiktighet. */
.signup-btn--paa {
    border-color: rgba(0, 184, 148, 0.55);
    color: #6ee7c4;
    background: rgba(0, 184, 148, 0.10);
}
.signup-btn--paa:hover { border-color: #00b894; color: #a7f3d8; background: rgba(0, 184, 148, 0.18); }

.signup-btn--av {
    border-color: rgba(225, 112, 85, 0.55);
    color: #ffb3a7;
    background: rgba(225, 112, 85, 0.10);
}
.signup-btn--av:hover { border-color: #e17055; color: #ffd0c7; background: rgba(225, 112, 85, 0.18); }

.signup-btn--gaa {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 0.55rem;
    border-color: rgba(108, 92, 231, 0.55);
    color: #c9c0ff;
    background: rgba(108, 92, 231, 0.12);
}
.signup-btn--gaa:hover { border-color: var(--vl-primary); color: #ded8ff; }

/* ── Samtykkelinja i doera ────────────────────────────────────────────
   Staar over billettdetaljene paa innsjekk-stasjonen, og bare naar den betyr
   noe: personen er under samtykkealder, eller alderen er ukjent. Se
   `samtykkeVarsel()` i pages/admin/checkin.js.

   Ingen farget venstrekant — se design/farger.md. Hele flata baerer fargen,
   som resten av tilbakemeldingene paa stasjonen. */
.checkin-samtykke {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--vl-radius-sm);
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    text-align: left;
    line-height: 1.4;
}

.checkin-samtykke i { margin-top: 0.15rem; font-size: 1.05rem; }

.checkin-samtykke--stopp {
    background: rgba(214, 48, 49, 0.16);
    color: #ff9b9b;
}

.checkin-samtykke--advarsel {
    background: rgba(253, 203, 110, 0.16);
    color: #ffd694;
}

.checkin-samtykke--ok {
    background: rgba(0, 184, 148, 0.14);
    color: #7fe3c6;
}

.checkin-samtykke-foresatt {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

.checkin-samtykke-foresatt a { color: inherit; text-decoration: underline; }

/* «ikke registrert» skal LESES som et hull, ikke som en verdi. */
.checkin-samtykke-mangler { opacity: 0.65; font-style: italic; }

/* ══════════════════════════════════════════
   GAVEBILLETTER  (fane under /admin/tickets)

   Skjemaet ligger i en modal, som i nabofanen «Billettyper» — se
   `visNyModal()`. Forste utgave hadde det liggende aapent oeverst i fanen,
   med egne grid-klasser (`.gave-skjema`, `.gave-felt`, `.gave-hjelp`). De er
   fjernet sammen med skjemaet: en modal bruker `.row`/`.col-*` som resten av
   modalene paa sida, og trenger ingen egne klasser.
   ══════════════════════════════════════════ */

.gave-kode {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vl-text);
    letter-spacing: 0.04em;
}

/* Kolonner. Bare kolonnene defineres her — grunnoppsettet kommer fra
   `.col-list-row` og `.col-list-header`, se lister.md. Faste kolonner har
   `flex: 0 0 X` og ALDRI `auto`: variabel bredde forskyver de andre.

   Koden er fast fordi den alltid er like lang (VL-XXXX-XXXX). Merkelappen er
   hovedkolonnen — den er fritekst og den eneste som kan bli lang. */
.gave-col-kode     { flex: 0 0 9.5rem; }
.gave-col-status   { flex: 0 0 7rem; }
.gave-col-type     { flex: 1 1 9rem;  min-width: 0; }
.gave-col-note     { flex: 2 1 10rem; min-width: 0; }
.gave-col-frist    { flex: 1 1 11rem; min-width: 0; }
.gave-col-handling { flex: 0 0 2.5rem; text-align: right; }

/* Maks to linjer paa mobil: kode og status oeverst, resten under. Typen er
   den forste som ryker — den staar som oftest i merkelappen uansett. */
@media (max-width: 575.98px) {
    .gave-col-kode     { flex: 1 1 0;    order: 1; }
    .gave-col-status   { flex: 0 0 auto; order: 2; }
    .gave-col-handling { flex: 0 0 auto; order: 3; }
    .gave-col-note     { flex: 1 1 100%; order: 4; font-size: 0.78rem; }
    .gave-col-frist    { flex: 0 0 auto; order: 5; font-size: 0.78rem; }
    .gave-col-type     { display: none; }
}


/* ── Gavekortet i appen (/app/gave/{code}) ─────────────────────────
   Sida viser ÉN ting, og `.card` er riktig her: ett nivaa, og innholdet skal
   skilles ut (sidelayout.md). Alt ligger i ett kort — forste utgave la
   overskrift, tekst og knapp som loese soesken rett i `el`, og da ga
   `.app-content > *` hver av dem `margin: 0 auto`. Det sentrerer en `<div>`,
   men ikke en `<button>`: den er inline-block, og knappen ble staaende alene
   ute til venstre mens teksten sto i spalta. */
.gave-kort {
    padding: 2rem;
    text-align: center;
}

.gave-kort-ikon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.4rem;
    color: var(--vl-primary);
    background: rgba(108, 92, 231, 0.14);
    border: 1px solid rgba(108, 92, 231, 0.32);
}
.gave-kort-ikon--ok {
    color: #00cec9;
    background: rgba(0, 206, 201, 0.14);
    border-color: rgba(0, 206, 201, 0.32);
}

.gave-kort-tittel { margin: 0 0 0.35rem; font-size: 1.5rem; }
.gave-kort-arr    { margin: 0; color: var(--vl-text-muted); }

/* `.meta-row` er en ETIKETT + VERDI-rad, én fakta per rad — ikke en vannrett
   liste. Forste utgave la to `<span>` med ikoner i én rad, og ikonene klistret
   seg til teksten fordi komponenten ikke er laget for det.

   Fakta staar venstrestilt selv om resten av kortet er sentrert: etikett og
   verdi skal linjere nedover, og sentrerte etiketter gir en ujevn venstrekant
   som er verre aa lese enn den er pen. */
.gave-kort-fakta {
    margin-top: 1.5rem;
    text-align: left;
}
.gave-kort-fakta .meta-row-label { min-width: 6.5rem; }

/* Setningen som gjor det trygt aa teste flyten uten aa brenne kortet. Den
   skal leses FOER man trykker, saa den staar naermest knappen. */
.gave-kort-merk {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
}

/* Knappen er det eneste som forbruker koden — den skal vaere den tyngste
   tingen paa sida, og den ligger for seg selv med luft rundt. */
.gave-kort-knapp { margin-top: 1.75rem; }

@media (max-width: 575.98px) {
    .gave-kort { padding: 1.5rem 1.15rem; }
    .gave-kort-knapp { width: 100%; }
}

/* Kommunevelgeren i profilen. Et soekeikon er hele forskjellen paa «skriv hva
   du vil» og «her kan du soeke» — feltet ER en velger, men saa ikke slik ut. */
.kommune-velger-ikon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vl-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}
.kommune-velger .form-control { padding-left: 2.3rem; }

/* Billettradene paa brukersida er lenker til billetten. De skal se ut som
   rader, ikke som lenker — men si fra at de kan trykkes. */
.bruker-billett {
    color: var(--vl-text);
    text-decoration: none;
    border-radius: var(--vl-radius-sm);
    padding-inline: 0.5rem;
    margin-inline: -0.5rem;
    transition: background 0.12s ease;
}
.bruker-billett:hover { background: var(--vl-glass); color: var(--vl-text); }

/* Detaljboksen i samtykkedialogen. Den staar der for aa svare naar noe
   skurrer — ikke for aa pynte — og skal derfor se ut som et oppslag, ikke som
   et kort. */
.samtykke-detalj {
    padding: 0.85rem 1rem;
    border-radius: var(--vl-radius-sm);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
}