/* 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;
}

.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; }

.modal-custom-tabs {
    display: flex;
    border-bottom: 1px solid var(--vl-glass-border);
}

.modal-tab {
    flex: 1;
    padding: 0.65rem;
    background: none;
    border: none;
    color: var(--vl-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    border-bottom: 2px solid transparent;
}

.modal-tab:hover { color: var(--vl-text); }
.modal-tab.active {
    color: var(--vl-primary);
    border-bottom-color: var(--vl-primary);
}

.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);
}

.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);
}

/* ══════════════════════════════════════════
   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;
}

/* 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);
}

/* 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);
}

.checkin-search-item-done {
    opacity: 0.5;
}

.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;
}

.checkin-search-item-status {
    flex-shrink: 0;
}

.checkin-action-scan-btn,
.checkin-action-verify-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    min-height: 40px;
}

.checkin-action-scan-btn {
    background: var(--vl-primary);
    color: #fff;
}

.checkin-action-verify-btn {
    background: #ffc107;
    color: #000;
}

.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-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;
    }

    .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;
    }

    .checkin-search-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .checkin-search-item-status {
        align-self: flex-end;
    }
}

/* ══════════════════════════════════════════
   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;
}

.confirm-method-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.confirm-method-icon .payment-paymark {
    width: 26px;
}

.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);
}

.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);
}

.order-summary-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vl-text-muted);
    margin-bottom: 0.5rem;
}

/* 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-sender    { flex: 1 1 120px; min-width: 0; }
.outbox-col-recipient { flex: 1 1 120px; min-width: 0; }
.outbox-col-channel   { flex: 0 0 90px; }
.outbox-col-body      { flex: 2 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outbox-col-target    { flex: 1 1 100px; min-width: 0; }
.outbox-col-time      { flex: 0 0 100px; text-align: right; }

@media (max-width: 575.98px) {
    .outbox-col-sender    { flex: 1 1 0; order: 1; }
    .outbox-col-recipient { flex: 1 1 0; order: 2; }
    .outbox-col-channel   { flex: 0 0 auto; order: 3; }
    .outbox-col-body      { flex: 1 1 100%; order: 5; font-size: 0.75rem; }
    .outbox-col-target    { display: none; }
    .outbox-col-time      { flex: 0 0 auto; order: 4; font-size: 0.75rem; text-align: right; }
}

/* ══════════════════════════════════════════
   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; }

.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);
}

.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;
}
.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; }

/* ══════════════════════════════════════════
   TIDSLINJE (/app/schedule)
   Klokkeslett til venstre, sammenhengende skinne med prikker, innhold
   til hoyre. Kamper foldes sammen under turneringen sin.
   ══════════════════════════════════════════ */

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

.sched-day {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vl-text-muted);
    margin: 1.75rem 0 0.75rem;
}
.sched-day:first-child { margin-top: 0; }

.tl { display: flex; flex-direction: column; }

/* Ingen gap mellom radene — skinnen maa vaere sammenhengende. Luften
   ligger i radens padding-bottom i stedet. */
.tl-row {
    display: grid;
    grid-template-columns: 52px 22px 1fr;
    align-items: stretch;
    padding-bottom: 0.6rem;
}
.tl-row--past { opacity: 0.45; }
.tl-row--past:hover { opacity: 0.7; }

.tl-time {
    font-size: 0.78rem;
    color: var(--vl-text-muted);
    text-align: right;
    padding-top: 0.75rem;
    padding-right: 0.6rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tl-rail { position: relative; }
.tl-rail::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--vl-glass-border);
}
.tl-row:first-child .tl-rail::before { top: 0.95rem; }
.tl-row:last-child .tl-rail::before { bottom: auto; height: 0.95rem; }

/* Prikken er ugjennomsiktig og dekker skinnen bak seg — ingen ring, som
   uansett ikke ville truffet fargen paa gradient-bakgrunnen. */
.tl-dot {
    position: absolute;
    left: 50%;
    top: 0.85rem;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tint, var(--vl-primary));
}

.tl-body { min-width: 0; }

.tl-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--vl-radius-sm);
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    border-left: 3px solid var(--tint, var(--vl-primary));
}
.tl-card--group {
    cursor: pointer;
    align-items: center;
    transition: border-color 0.15s, background 0.15s;
}
.tl-card--group:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--vl-glass-border);
    border-left-color: var(--tint, var(--vl-primary));
}
.tl-card-main { flex: 1; min-width: 0; }

.tl-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

.tl-count {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
    background: var(--vl-bg-elevated);
    color: var(--vl-text-muted);
}

.tl-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--vl-text-muted);
}

.tl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--vl-text-muted);
}
.tl-meta i { margin-right: 0.3rem; opacity: 0.8; }

.tl-desc {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    line-height: 1.5;
}

.tl-chevron {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    transition: transform 0.18s ease;
}
.tl-chevron--open { transform: rotate(180deg); }

/* Kampene bak klikket. Bevisst kompakte — de er en oppslagsliste, ikke
   like mye verdt som programpostene rundt. */
.tl-matches {
    margin-top: 0.35rem;
    padding: 0.35rem 0 0.35rem 0.9rem;
    border-left: 2px solid var(--vl-glass-border);
    margin-left: 0.5rem;
}
.tl-match {
    display: flex;
    gap: 0.8rem;
    padding: 0.28rem 0;
    font-size: 0.8rem;
}
.tl-match--past { opacity: 0.5; }
.tl-match-time {
    color: var(--vl-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.tl-match-title { min-width: 0; }

.tl-signup-row { margin-top: 0.45rem; }
.tl-signup {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--vl-text-muted);
}
.tl-signup--in { color: #4ad6ae; }

.tl-signup-users {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}
.tl-signup-user {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 99px;
    background: var(--vl-bg-elevated);
    font-size: 0.73rem;
    color: var(--vl-text);
    text-decoration: none;
}
.tl-signup-user img {
    width: 18px; height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.signup-btn { flex-shrink: 0; white-space: nowrap; }

/* Angrehandling: noytral i hvile, roed paa hover. Roedt er reservert for det
   ugjenkallelige — aa melde seg av er reversibelt, men konsekvensen skal
   likevel vises i det man sikter paa knappen. */
.signup-btn--cancel {
    background: transparent;
    border: 1px solid var(--vl-glass-border);
    color: var(--vl-text-muted);
}
.signup-btn--cancel:hover,
.signup-btn--cancel:focus-visible {
    background: rgba(225, 112, 85, 0.12);
    border-color: rgba(225, 112, 85, 0.5);
    color: #e8907a;
}

@media (max-width: 575.98px) {
    .tl-row { grid-template-columns: 44px 18px 1fr; }
    .tl-time { font-size: 0.72rem; padding-right: 0.4rem; }
    .tl-card { flex-direction: column; gap: 0.6rem; padding: 0.6rem 0.75rem; }
    .tl-card--group { flex-direction: row; align-items: center; }
    .tl-meta { gap: 0.6rem; }
    .signup-btn { align-self: flex-start; }
}

/* Bryter for eldre bestillinger (/app/orders). Bevisst en dempet tekstknapp,
   ikke en full knapp — historikk skal vaere tilgjengelig, ikke innbydende. */
.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 {
    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);
}

.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);
    }
}

/* == Kundeskjermen =========================================================
   Leses paa en til to meters avstand, av noen som staar og venter. Derfor
   store typer, hoy kontrast og ingen interaksjon: skjermen har ingen
   pekeenhet, og skal ikke kunne komme i en tilstand crew maa klikke seg ut av.
*/

.pos-display {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--vl-bg-dark);
    user-select: none;
    -webkit-user-select: none;
    cursor: none;
}

.pos-display-head {
    flex-shrink: 0;
    padding: 1.5rem 2.5rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-display-brand {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pos-display-brand i {
    color: var(--vl-accent);
    margin-right: 0.5rem;
}

.pos-display-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 2.5rem 2rem;
}

/* Tomtilstand og kvittering deler samme sentrerte oppsett. */
.pos-display-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pos-display-icon {
    font-size: 5rem;
    color: var(--vl-accent);
    margin-bottom: 1.5rem;
}

.pos-display-headline {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.pos-display-sub {
    font-size: 1.4rem;
    color: var(--vl-text-muted);
}

.pos-display-ordernum {
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--vl-accent);
    margin: 1rem 0;
}

.pos-display-lines {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pos-display-line {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--vl-border-light);
    font-size: 1.6rem;
}

/* Nyeste linje blinker kort, saa kunden ser at varen kom med. */
.pos-display-line.is-new {
    animation: pos-line-in 0.45s ease-out;
}

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

.pos-display-line-qty {
    flex: 0 0 3.5rem;
    font-weight: 700;
    color: var(--vl-accent);
}

.pos-display-line-name {
    flex: 1;
    min-width: 0;
}

.pos-display-line-total {
    flex: 0 0 auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pos-display-total {
    flex-shrink: 0;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--vl-border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

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

.pos-display-total-value {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* QR-plassen. Vipps krever hvit bakgrunn bak koden for aa kunne skannes. */
.pos-display-qr {
    background: #fff;
    padding: 1.25rem;
    border-radius: var(--vl-radius);
    display: inline-flex;
    margin-bottom: 1.5rem;
}

.pos-display-qr img {
    width: 320px;
    height: 320px;
    display: block;
}

/* ── 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;
}

.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; }
.kitchen-card.is-ready    { border-left-color: #00b894; opacity: 0.55; }

.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);
}

/* ── 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.
*/

.kiosk-cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--vl-bg-card-solid);
    border-top: 1px solid var(--vl-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transform: translateY(110%);
    transition: transform 0.18s ease-out;
}

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

.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;
}

/* ── Kioskmeny for infoskjerm — /embed/kiosk ───────────────────────────────
   Leses paa avstand fra en vegg. To kolonner, store typer, ingen bilder som
   stjeler plass fra prisene.
*/

.kiosk-embed {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--vl-bg-dark);
    padding: 2.5vh 3vw;
}

.kiosk-embed-head {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2vh;
}

.kiosk-embed-title {
    font-size: 2.6vw;
    font-weight: 800;
}

.kiosk-embed-title i {
    color: var(--vl-accent);
    margin-right: 0.5rem;
}

.kiosk-embed-cols {
    flex: 1;
    min-height: 0;
    columns: 2;
    column-gap: 3vw;
}

.kiosk-embed-cat {
    break-inside: avoid;
    margin-bottom: 2.4vh;
}

.kiosk-embed-cat-name {
    font-size: 1.5vw;
    font-weight: 700;
    color: var(--vl-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6vh;
    padding-bottom: 0.4vh;
    border-bottom: 2px solid var(--vl-border);
}

.kiosk-embed-item {
    display: flex;
    align-items: baseline;
    gap: 0.6vw;
    padding: 0.5vh 0;
    font-size: 1.35vw;
}

.kiosk-embed-item-name {
    flex-shrink: 0;
}

/* Prikkelinja binder varenavnet til prisen over hele bredden. */
.kiosk-embed-dots {
    flex: 1;
    border-bottom: 2px dotted var(--vl-border);
    transform: translateY(-0.3em);
}

.kiosk-embed-price {
    flex-shrink: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 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;
}

.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; }

/* ── Faner ────────────────────────────────────────────────────────── */

.bx-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--vl-glass-border);
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.bx-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--vl-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

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

.bx-tab.active {
    color: var(--vl-text);
    border-bottom-color: var(--vl-accent);
}

.bx-tab-badge,
.bx-tab-count {
    min-width: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1.25rem;
    text-align: center;
}

.bx-tab-badge { background: #e17055; color: #fff; }
.bx-tab-count { background: var(--vl-glass); color: var(--vl-text-muted); }

/* ── 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 ──────────────────────── */

.bx-warn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: rgba(225, 112, 85, 0.14);
    border: 1px solid rgba(225, 112, 85, 0.4);
    border-radius: var(--vl-radius-xs);
    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; }
.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-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;
}

.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; }

.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-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. */
.stats-qr-bilde {
    width: 100%;
    max-width: 280px;
    background: #fff;
    border-radius: var(--vl-radius-sm);
    padding: 0.5rem;
}


/* ══════════════════════════════════════════
   INNMELDINGER — /admin/innmeldinger
   ══════════════════════════════════════════ */

.report-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}
/* Tallet i filterknappen teller ALLE med den statusen, ikke det filteret viser
   — ellers ville knappene vist sitt eget resultat som fasit. */
.report-filter-tall {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
}

/* 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; }